@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic:wght@400;700&display=swap');

.select2.select2-container.select2-container--default {
    width: 100% !important;
}

.receiving-ngo-select2
    ~ .select2-container--default
    .select2-selection--single {
    height: 42px;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.receiving-ngo-select2
    ~ .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: 38px;
    font-size: 0.875rem;
}

.receiving-ngo-select2
    ~ .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 42px;
}

.upload-container {
    max-width: 960px;
    margin: 30px auto;
    padding: 20px;
}

.avatar-upload {
    position: relative;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 12px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input + label {
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    background: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-preview {
    width: 100%;
    height: 300px;
    position: relative;
    border: 6px solid #f8f8f8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.tox-promotion,
.tox-statusbar__branding {
    display: none;
}

.required:after {
    content: " *";
    color: red;
}

.sub-service-btn-active,
.service-btn-active {
    background: rgb(37, 99, 235) !important;
    color: white !important;
}

html[dir="rtl"] .peer:checked ~ .peer-checked\:after\:translate-x-full:after {
    --tw-translate-x: -100% !important;
}

html[dir="rtl"] #drawer-navigation {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] #drawer-navigation.\-translate-x-full {
    --tw-translate-x: 100% !important;
}

html[dir="rtl"] #drawer-navigation.transform-none {
    transform: translateX(0) !important;
}

@media (min-width: 1024px) {
    html[dir="rtl"] #drawer-navigation.\-translate-x-full {
        --tw-translate-x: 0px !important;
    }
}

.x-form-box input[type="text"],
.x-form-box input[type="date"],
.x-form-box input[type="datetime"],
.x-form-box input[type="email"],
.x-form-box input[type="number"],
.x-form-box textarea {
    width: 100%;
}

/* ===== Accessibility Widget ===== */

.acc-widget { position: fixed; bottom: 20px; z-index: 9999; }
html[dir="ltr"] .acc-widget, html:not([dir]) .acc-widget { right: 20px; }
html[dir="rtl"] .acc-widget { left: 20px; }

.acc-toggle {
    width: 52px; height: 52px; border-radius: 50%;
    background: #1e40af; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: background .2s, transform .2s;
}
.acc-toggle:hover { background: #1d4ed8; transform: scale(1.08); }

.acc-panel {
    position: absolute; bottom: 64px;
    width: 320px; max-height: 70vh; overflow-y: auto;
    background: #fff; border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    border: 1px solid #e5e7eb;
}
html[dir="ltr"] .acc-panel, html:not([dir]) .acc-panel { right: 0; }
html[dir="rtl"] .acc-panel { left: 0; }

.acc-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; background: #fff; z-index: 1;
    border-radius: 12px 12px 0 0;
}
.acc-panel-title { font-size: 15px; font-weight: 600; color: #111827; margin: 0; }
.acc-reset-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: #6b7280; background: none; border: none;
    cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.acc-reset-btn:hover { background: #f3f4f6; color: #111827; }

.acc-panel-body { padding: 8px 16px 16px; }

.acc-group-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: #9ca3af; letter-spacing: .5px; margin: 14px 0 6px; padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}
.acc-group-label:first-child { border-top: none; margin-top: 4px; padding-top: 0; }

.acc-section { padding: 8px 0; }
.acc-section-toggle { display: flex; align-items: center; justify-content: space-between; }
.acc-section-header { display: flex; align-items: center; gap: 8px; }
.acc-icon { width: 18px; height: 18px; color: #6b7280; flex-shrink: 0; }
.acc-label { font-size: 13px; font-weight: 500; color: #374151; }

.acc-btn-group { display: flex; gap: 6px; margin-top: 8px; }
.acc-btn {
    padding: 5px 14px; border-radius: 6px; border: 1px solid #d1d5db;
    background: #fff; color: #374151; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.acc-btn:hover { background: #f3f4f6; }
.acc-btn.acc-btn-active { background: #1e40af; color: #fff; border-color: #1e40af; }

/* Toggle switch */
.acc-switch {
    position: relative; width: 40px; height: 22px; border-radius: 11px;
    background: #d1d5db; border: none; cursor: pointer; transition: background .2s;
    flex-shrink: 0;
}
.acc-switch.active { background: #1e40af; }
.acc-switch-knob {
    position: absolute; top: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
html[dir="ltr"] .acc-switch-knob, html:not([dir]) .acc-switch-knob { left: 2px; }
html[dir="rtl"] .acc-switch-knob { right: 2px; }
html[dir="ltr"] .acc-switch.active .acc-switch-knob, html:not([dir]) .acc-switch.active .acc-switch-knob { transform: translateX(18px); }
html[dir="rtl"] .acc-switch.active .acc-switch-knob { transform: translateX(-18px); }

/* Reading Guide */
.acc-reading-guide {
    position: fixed; left: 0; width: 100%; height: 3px;
    background: rgba(30, 64, 175, .7); pointer-events: none; z-index: 99998;
}

/* Focus Mask */
.acc-focus-mask-top, .acc-focus-mask-bottom {
    position: fixed; left: 0; width: 100%;
    background: rgba(0, 0, 0, .55); pointer-events: none; z-index: 99997;
}
.acc-focus-mask-top { top: 0; }
.acc-focus-mask-bottom { bottom: 0; height: 100%; }

/* Text Magnifier */
.acc-magnifier {
    position: fixed; z-index: 99999; pointer-events: none;
    background: #1e293b; color: #fff; padding: 8px 14px;
    border-radius: 8px; font-size: 18px; max-width: 350px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3); line-height: 1.4;
    word-break: break-word;
}
.acc-magnifier:empty { display: none; }

/* Page Structure Modal */
.acc-structure-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.acc-structure-modal {
    background: #fff; border-radius: 12px; width: 90%; max-width: 440px;
    max-height: 70vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
}
.acc-structure-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.acc-structure-header h4 { margin: 0; font-size: 16px; font-weight: 600; }
.acc-structure-close {
    background: none; border: none; font-size: 24px; cursor: pointer;
    color: #6b7280; line-height: 1;
}
.acc-structure-body { padding: 12px 20px; overflow-y: auto; }
.acc-structure-item {
    display: block; padding: 8px 12px; margin: 2px 0; border-radius: 6px;
    font-size: 14px; color: #1e40af; text-decoration: none;
    transition: background .15s;
}
.acc-structure-item:hover { background: #eff6ff; }
.acc-structure-empty { color: #9ca3af; font-size: 14px; text-align: center; padding: 20px; }

/* ===== Accessibility Modes ===== */

/* Bold text */
.acc-bold-text * { font-weight: bold !important; }
.acc-bold-text .acc-widget * { font-weight: normal !important; }

/* Readable font */
.acc-readable-font * { font-family: Verdana, Arial, Helvetica, sans-serif !important; }

/* Dyslexia font */
.acc-dyslexia * { font-family: 'OpenDyslexic', sans-serif !important; }

/* Dark mode */
.acc-dark-mode body { background: #1a1a2e !important; color: #e0e0e0 !important; }
.acc-dark-mode nav, .acc-dark-mode header, .acc-dark-mode aside,
.acc-dark-mode footer, .acc-dark-mode .bg-white { background: #16213e !important; }
.acc-dark-mode a { color: #60a5fa !important; }
.acc-dark-mode p, .acc-dark-mode span, .acc-dark-mode li, .acc-dark-mode div,
.acc-dark-mode h1, .acc-dark-mode h2, .acc-dark-mode h3,
.acc-dark-mode h4, .acc-dark-mode h5, .acc-dark-mode h6,
.acc-dark-mode label, .acc-dark-mode td, .acc-dark-mode th { color: #e0e0e0 !important; }
.acc-dark-mode input, .acc-dark-mode select, .acc-dark-mode textarea {
    background: #0f172a !important; color: #e0e0e0 !important;
    border-color: #334155 !important;
}
.acc-dark-mode .acc-widget, .acc-dark-mode .acc-panel,
.acc-dark-mode .acc-panel-header { background: #fff !important; }
.acc-dark-mode .acc-widget * { color: inherit !important; }
.acc-dark-mode .acc-panel-title, .acc-dark-mode .acc-label { color: #111827 !important; }

/* High contrast */
.acc-high-contrast body { background: #000 !important; color: #fff !important; }
.acc-high-contrast a { color: #fbbf24 !important; }
.acc-high-contrast p, .acc-high-contrast span, .acc-high-contrast li, .acc-high-contrast div,
.acc-high-contrast h1, .acc-high-contrast h2, .acc-high-contrast h3,
.acc-high-contrast h4, .acc-high-contrast h5, .acc-high-contrast h6,
.acc-high-contrast label, .acc-high-contrast td, .acc-high-contrast th { color: #fff !important; }
.acc-high-contrast nav, .acc-high-contrast header, .acc-high-contrast aside,
.acc-high-contrast footer { background: #111 !important; }
.acc-high-contrast input, .acc-high-contrast select, .acc-high-contrast textarea {
    background: #000 !important; color: #fff !important; border: 2px solid #fff !important;
}
.acc-high-contrast img { filter: contrast(1.5) !important; }
.acc-high-contrast .acc-widget { filter: none !important; }
.acc-high-contrast .acc-panel { background: #fff !important; }
.acc-high-contrast .acc-panel * { color: #111827 !important; }

/* Invert colors */
.acc-invert { filter: invert(1) hue-rotate(180deg) !important; }
.acc-invert img, .acc-invert video { filter: invert(1) hue-rotate(180deg) !important; }
.acc-invert .acc-widget { filter: invert(1) hue-rotate(180deg) !important; }

/* Monochrome */
.acc-monochrome { filter: grayscale(100%) !important; }
.acc-monochrome .acc-widget { filter: grayscale(0) !important; }

/* Low saturation */
.acc-low-saturation { filter: saturate(0.3) !important; }
.acc-low-saturation .acc-widget { filter: saturate(1) !important; }

/* Color blind: Protanopia (red-blind) */
.acc-protanopia { filter: url('#acc-protanopia-filter') !important; }
.acc-protanopia .acc-widget { filter: none !important; }

/* Color blind: Deuteranopia (green-blind) */
.acc-deuteranopia { filter: url('#acc-deuteranopia-filter') !important; }
.acc-deuteranopia .acc-widget { filter: none !important; }

/* Color blind: Tritanopia (blue-blind) */
.acc-tritanopia { filter: url('#acc-tritanopia-filter') !important; }
.acc-tritanopia .acc-widget { filter: none !important; }

/* Highlight links */
.acc-highlight-links a {
    outline: 2px solid #f59e0b !important;
    outline-offset: 2px;
    background-color: rgba(245, 158, 11, .1) !important;
}
.acc-highlight-links .acc-widget a { outline: none !important; background-color: transparent !important; }

/* Tooltips */
.acc-tooltips [data-acc-tip]:hover { position: relative; }
.acc-tooltips [data-acc-tip]:hover::after {
    content: attr(data-acc-tip);
    position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #fff; padding: 6px 12px; border-radius: 6px;
    font-size: 13px; white-space: nowrap; max-width: 250px;
    z-index: 99999; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Hide images */
.acc-hide-images img, .acc-hide-images svg:not(.acc-icon):not(.acc-widget svg),
.acc-hide-images video, .acc-hide-images [style*="background-image"] {
    opacity: 0.05 !important;
}
.acc-hide-images .acc-widget img, .acc-hide-images .acc-widget svg { opacity: 1 !important; }

/* Big cursor */
.acc-big-cursor, .acc-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' stroke='%23fff' stroke-width='1' d='M5 3l14 7.5L12 13l-2.5 7z'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Keyboard navigation */
.acc-keyboard-nav *:focus {
    outline: 3px solid #f59e0b !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, .3) !important;
}
.acc-keyboard-nav a:focus, .acc-keyboard-nav button:focus,
.acc-keyboard-nav input:focus, .acc-keyboard-nav select:focus,
.acc-keyboard-nav textarea:focus {
    outline: 3px solid #1e40af !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(30, 64, 175, .3) !important;
}

/* Stop animations */
.acc-stop-animations *, .acc-stop-animations *::before, .acc-stop-animations *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Text to Speech */
.acc-tts-controls {
    display: flex; gap: 8px; padding: 8px 0;
}
.acc-tts-btn {
    flex: 1; text-align: center; font-size: 12px; padding: 6px 10px;
}
.acc-tts-stop {
    background: #dc2626 !important; color: #fff !important;
    border-color: #dc2626 !important;
}
.acc-tts-stop:hover { background: #b91c1c !important; }
.acc-tts-hint {
    font-size: 11px; color: #9ca3af; margin: 4px 0 0; padding: 0;
    font-style: italic;
}
.acc-tts-active body * { cursor: crosshair; }
.acc-tts-active .acc-widget, .acc-tts-active .acc-widget * { cursor: default !important; }