/* NGO-m Global CSS - Public Website */

:root {
    /* Theme Colors — NGO earth palette: pine, teal, saffron, harvest gold */
    --ngo-teal: #0B6B5E;
    --ngo-teal-dark: #07473E;
    --ngo-indigo: #1C4D3F;
    --ngo-indigo-dark: #102E25;
    --ngo-orange: #EA580C;
    --ngo-orange-dark: #C2410C;
    --ngo-navy: #102E25;
    --ngo-gold: #E9C46A;
    --ngo-blue: #0B6B5E; /* Alias for teal */
    
    /* Functional Colors */
    --primary-color: var(--ngo-teal);
    --secondary-color: var(--ngo-indigo);
    --accent-color: var(--ngo-orange);
    
    --bg-light: #FBF8F1;
    --bg-white: #FFFFFF;
    --text-black: #000000;
    --text-zinc: #09090b;
    --text-muted: #3f3e3c;
    
    --border-color: #e3e3e0;
    
    /* Typography */
    --font-sans: "Roboto", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Base Resets & Global Styles */
body {
    background-color: var(--bg-light);
    color: var(--text-zinc);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
}

/* Backgrounds & Colors */
.bg-ngo-blue, .bg-ngo-teal { background-color: var(--ngo-teal) !important; }
.bg-ngo-teal-dark { background-color: var(--ngo-teal-dark) !important; }
.bg-ngo-indigo { background-color: var(--ngo-indigo) !important; }
.bg-ngo-indigo-dark { background-color: var(--ngo-indigo-dark) !important; }
.bg-ngo-orange { background-color: var(--ngo-orange) !important; }
.bg-ngo-navy { background-color: var(--ngo-navy) !important; }
.bg-gradient-brand { background: linear-gradient(135deg, var(--ngo-teal) 0%, var(--ngo-indigo) 100%) !important; }
.bg-gradient-warm { background: linear-gradient(135deg, var(--ngo-orange) 0%, var(--ngo-orange-dark) 100%) !important; }
.bg-gradient-deep { background: linear-gradient(135deg, var(--ngo-navy) 0%, var(--ngo-indigo-dark) 100%) !important; }

.text-ngo-blue, .text-ngo-teal { color: var(--ngo-teal) !important; }
.text-ngo-orange { color: var(--ngo-orange) !important; }
.text-ngo-indigo { color: var(--ngo-indigo) !important; }
.text-ngo-navy { color: var(--ngo-navy) !important; }
.text-ngo-gold { color: var(--ngo-gold) !important; }

.border-ngo-blue, .border-ngo-teal { border-color: var(--ngo-teal) !important; }
.border-ngo-orange { border-color: var(--ngo-orange) !important; }

/* Custom NGO Buttons — 100% solid flat theme colors (Teal, Orange, Red, Yellow), no gradients, no shadow, generous size */
.btn-ngo-blue, .btn-ngo-primary {
    background-color: var(--ngo-teal, #0B6B5E) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--ngo-teal, #0B6B5E) !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 34px;
    box-shadow: none !important;
    transition: background-color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ngo-blue:hover, .btn-ngo-primary:hover,
.btn-ngo-blue:focus, .btn-ngo-primary:focus {
    background-color: var(--ngo-teal-dark, #07473E) !important;
    border-color: var(--ngo-teal-dark, #07473E) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.btn-ngo-blue *, .btn-ngo-primary * { color: #FFFFFF !important; fill: currentColor !important; }

.btn-ngo-orange, .btn-ngo-accent {
    background-color: var(--ngo-orange, #EA580C) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid var(--ngo-orange, #EA580C) !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 34px;
    box-shadow: none !important;
    transition: background-color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ngo-orange:hover, .btn-ngo-accent:hover,
.btn-ngo-orange:focus, .btn-ngo-accent:focus {
    background-color: var(--ngo-orange-dark, #C2410C) !important;
    border-color: var(--ngo-orange-dark, #C2410C) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.btn-ngo-orange *, .btn-ngo-accent * { color: #FFFFFF !important; fill: currentColor !important; }

/* Red danger button */
.btn-ngo-red, .btn-red {
    background-color: #DC2626 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 1px solid #DC2626 !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 34px;
    box-shadow: none !important;
    transition: background-color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ngo-red:hover, .btn-ngo-red:focus, .btn-red:hover, .btn-red:focus {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}
.btn-ngo-red *, .btn-red * { color: #FFFFFF !important; fill: currentColor !important; }

/* Yellow / Amber theme button */
.btn-ngo-yellow, .btn-yellow {
    background-color: #F59E0B !important;
    background-image: none !important;
    color: #0F172A !important;
    border: 1px solid #D97706 !important;
    border-radius: 14px;
    font-weight: 700 !important;
    font-size: 15.5px;
    padding: 14px 34px;
    box-shadow: none !important;
    transition: background-color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ngo-yellow:hover, .btn-ngo-yellow:focus, .btn-yellow:hover, .btn-yellow:focus {
    background-color: #D97706 !important;
    border-color: #B45309 !important;
    color: #0F172A !important;
    transform: translateY(-1px);
}
.btn-ngo-yellow *, .btn-yellow * { color: #0F172A !important; fill: currentColor !important; }

.btn-ngo-secondary {
    background-color: #F59E0B !important;
    background-image: none !important;
    color: #0F172A !important;
    border: 1px solid #D97706 !important;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 34px;
    box-shadow: none;
    transition: background-color 0.15s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-ngo-secondary:hover, .btn-ngo-secondary:focus {
    background-color: #D97706 !important;
    border-color: #B45309 !important;
    color: #0F172A !important;
    transform: translateY(-1px);
}
.btn-ngo-secondary * { color: #0F172A !important; fill: currentColor !important; }

/* Small variant for header / compact spots */
.btn-ngo-sm, .btn-sm.btn-ngo-blue, .btn-sm.btn-ngo-orange, .btn-sm.btn-ngo-primary, .btn-sm.btn-ngo-secondary, .btn-sm.btn-ngo-accent, .btn-sm.btn-ngo-yellow, .btn-sm.btn-ngo-red {
    font-size: 12.5px;
    padding: 8px 18px;
    border-radius: 8px;
}
    border-radius: 10px;
}

/* Modern accessible focus */
.btn-ngo-blue:focus-visible, .btn-ngo-orange:focus-visible, .btn-ngo-primary:focus-visible, .btn-ngo-secondary:focus-visible, .btn-ngo-accent:focus-visible {
    outline: 3px solid rgba(245,158,11,0.55);
    outline-offset: 2px;
}

.rounded-xl { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.5rem !important; }

/* AI-modern helpers */
.text-gradient-brand {
    background: linear-gradient(92deg, var(--ngo-teal) 0%, var(--ngo-indigo) 55%, var(--ngo-orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.glass {
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.6);
}
.card,
.card-modern {
    background: var(--bg-white);
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    transition: box-shadow 0.25s, transform 0.25s;
}
.card-modern:hover {
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ngo-teal-dark);
    background: rgba(11,107,94,0.08);
    border: 1px solid rgba(11,107,94,0.18);
    padding: 7px 16px;
    border-radius: 100px;
}
.section-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ngo-orange), var(--ngo-gold));
}

/* Header & Nav Adjustments */
.topbar-marquee marquee {
    font-size: 12px;
    font-weight: 500;
}

.main-header {
    background-image: radial-gradient(#e5e7eb 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-color: white;
    position: relative;
    z-index: 40;
}

/* Navigation Styles */
.nav-link-custom {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.3s;
}
.nav-link-custom:hover, .nav-link-custom.active {
    color: white;
    background-color: rgba(255,255,255,0.12);
    box-shadow: inset 0 -3px 0 var(--ngo-gold);
}

.dropdown-menu-custom {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 6px 0;
    min-width: 190px;
}

.dropdown-menu-custom .dropdown-item {
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    padding: 8px 18px;
    border-radius: 0;
    background: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus {
    background-color: #0B6B5E !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.dropdown-menu-custom .dropdown-item:active {
    background-color: #e2e8f0;
    color: #0f172a;
}

/* Hover Dropdown for Desktop — simple, fast, smooth */
@media (min-width: 992px) {
    nav.bg-ngo-indigo .dropdown {
        position: relative;
    }
    nav.bg-ngo-indigo .dropdown > .dropdown-menu {
        --bs-dropdown-spacer: 0;
        display: block;
        top: 100%;
        margin-top: 0 !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
        pointer-events: none;
    }
    nav.bg-ngo-indigo .dropdown:hover > .dropdown-menu,
    nav.bg-ngo-indigo .dropdown:focus-within > .dropdown-menu,
    nav.bg-ngo-indigo .dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Invisible bridge so menu doesn't close while moving mouse down */
    nav.bg-ngo-indigo .dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 8px;
    }
    nav.bg-ngo-indigo .dropdown > .nav-link-custom.dropdown-toggle::after {
        transition: transform 0.15s ease;
        vertical-align: middle;
    }
    nav.bg-ngo-indigo .dropdown:hover > .nav-link-custom.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

.cursor-pointer, label, .form-check-input, input[type="checkbox"], input[type="radio"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], select { cursor: pointer !important; }

/* Header & Social Icons */
.social-icon:hover {
    transform: translateY(-2px);
    transition: transform 0.3s;
}

.hover-indigo:hover {
    background-color: var(--ngo-indigo) !important;
    color: white !important;
}

.hover-indigo:hover i {
    color: white !important;
}

.rotate-n90 { transform: rotate(-90deg); }

/* Logo Styles */
.logo-container {
    position: relative;
    width: 60px;
    height: 60px;
}
@media (min-width: 768px) {
    .logo-container { width: 80px; height: 80px; }
}

.logo-glow {
    position: absolute;
    inset: -4px;
    background: linear-gradient(to right, var(--ngo-teal), var(--ngo-indigo), var(--ngo-orange));
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.35;
}

.logo-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50%;
    padding: 4px;
    border: 1px solid #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mobile Sidebar */
.offcanvas-ngo {
    width: 280px !important;
}

.offcanvas-ngo .offcanvas-header {
    background-color: var(--ngo-indigo);
    color: white;
}

main { padding-bottom: 60px; }

/* Custom Styles */
.link-styled {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--ngo-orange-dark);
}

/* ==========================================================================
   FRONTEND FORM FIELDS: UNIFORM HEIGHT & ADMIN MODAL SELECTION UI
   Matches internship apply page input height (42px) & admin 'Record cash donation' modal focus UI
   ========================================================================== */

/* 1. Base Dimensions & Standard 42px Height */
.form-control:not(textarea),
.form-select,
.form-select-sm,
.form-select-lg,
.form-control-sm,
.form-control-lg,
.contact-input:not(textarea),
.donate-input:not(textarea),
.form-control-auth:not(textarea),
.input-group-text,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(textarea) {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}

/* File Upload inputs */
input[type="file"].form-control,
input[type="file"].donate-input,
input[type="file"] {
    height: 42px !important;
    min-height: 42px !important;
    padding: 7px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

/* Select dropdowns — identical height, clean chevron */
.form-select,
select.form-control,
select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 36px 8px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 16px 12px !important;
    cursor: pointer;
}

/* Textarea — natural height expansion */
textarea.form-control,
textarea.contact-input,
textarea.donate-input,
textarea {
    height: auto !important;
    min-height: 90px !important;
    padding: 10px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}

/* 2. Base Border: Clean Thin 1px Neutral Border (#cbd5e1) */
.form-control,
.form-select,
.donate-input,
.contact-input,
.form-control-auth,
.input-group-text,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    color: #1e293b;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease-in-out;
}

/* Maintain rounded pill for search bars */
.rounded-pill.form-control,
.rounded-pill.form-select,
select.rounded-pill,
input.rounded-pill {
    border-radius: 50rem !important;
}

/* Input group container (search bars) */
.input-group.rounded-pill {
    height: 42px !important;
    min-height: 42px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 50rem !important;
    transition: border-color 0.15s ease-in-out;
}

/* Inner input inside bordered input-group should have transparent border so it doesn't double-border */
.input-group > .form-control.border-0,
.input-group > input.border-0 {
    border: none !important;
    box-shadow: none !important;
    height: 100% !important;
    min-height: 100% !important;
    background-color: transparent !important;
}

.input-group > .btn {
    height: 100% !important;
    min-height: 100% !important;
}

/* 3. Hover state */
.form-control:hover,
.form-select:hover,
.donate-input:hover,
.contact-input:hover,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
select:hover,
textarea:hover {
    border-color: #94a3b8;
}

/* 4. FOCUS / SELECTION UI: EXACT MATCH TO ADMIN 'RECORD CASH DONATION' MODAL
   Turns into a sharp, crisp 1px solid border with color #0B6B5E (var(--primary))
   No blurry box-shadow glow, no outline, clean and distinct */
.form-control:focus,
.form-select:focus,
.form-select-sm:focus,
.form-select-lg:focus,
.form-control-sm:focus,
.form-control-lg:focus,
.contact-input:focus,
.donate-input:focus,
.form-control-auth:focus,
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus,
input.donate-input:focus,
textarea.donate-input:focus,
input.contact-input:focus,
textarea.contact-input:focus,
input:focus,
select:focus,
textarea:focus {
    border: 1px solid #0B6B5E !important;
    border-color: #0B6B5E !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Search bar pill container focus highlight */
.input-group.rounded-pill:focus-within {
    border: 1px solid #0B6B5E !important;
    border-color: #0B6B5E !important;
}

/* Invalid / Validation state */
.form-control.is-invalid,
.form-select.is-invalid,
.donate-input.is-invalid,
.contact-input.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
    border-color: #ef4444 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.donate-input.is-invalid:focus,
.contact-input.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.was-validated input:invalid:focus,
.was-validated select:invalid:focus,
.was-validated textarea:invalid:focus {
    border-color: #ef4444 !important;
    box-shadow: none !important;
}

/* 5. Date & Time Picker Pointer Cursor & Indicator */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
    cursor: pointer !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    transform: scale(1.1);
}