html {
    scroll-behavior: smooth;
}

/* --- GLightbox Custom Styles --- */
.glightbox-container .gnext,
.glightbox-container .gprev,
.glightbox-container .gclose {
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    width: 55px !important;
    height: 55px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

/* Hide default SVGs */
.glightbox-container .gclose svg,
.glightbox-container .gnext svg,
.glightbox-container .gprev svg {
    display: none !important;
}

.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

.glightbox-container .gclose::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 24px;
    color: #fff;
}

.glightbox-container .gnext::before {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    color: #fff;
}

.glightbox-container .gprev::before {
    content: "\f060";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    color: #fff;
}

/* Caption Styles */
.gdesc-inner {
    padding: 25px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
}

.gslide-title {
    text-align: center !important;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    color: #fff !important;
    display: block !important;
    font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
}

.gslide-desc {
    text-align: center !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Rounded Lightbox Pictures */
.glightbox-container .gslide-inner-content {
    padding: 30px !important;
    background: transparent !important;
}

.glightbox-container .ginner-container {
    border-radius: 0 !important;
    background: transparent !important;
}

.glightbox-container .gslide-image img {
    border-radius: 1rem 1rem 0 0 !important;
    max-height: calc(100vh - 120px) !important;
}

.glightbox-container .gslide-media {
    border-radius: 1rem 1rem 0 0 !important;
    overflow: hidden !important;
}

.glightbox-container .gslide-description {
    border-radius: 0 0 1rem 1rem !important;
    overflow: hidden !important;
    background: transparent !important;
}

.glightbox-container .gdesc-inner {
    border-radius: 0 0 1rem 1rem !important;
}

/* Disable hover and interaction on non-active media gallery slides */
.mediaGallerySwiper .swiper-slide:not(.swiper-slide-active) .glightbox {
    pointer-events: none !important;
}

/* --- News Ticker Animation (Home) --- */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-flex;
    animation: marquee 40s linear infinite;
    width: max-content;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* --- Page Specific Layout Styles --- */

/* --- Page Header Mobile Responsiveness --- */
main > section:first-child.bg-brand-900 {
    padding-top: 3.5rem !important; /* py-14 */
    padding-bottom: 3.5rem !important;
}

main > section:first-child.bg-brand-900 h1 {
    font-size: 1.875rem !important; /* text-3xl */
    line-height: 2.25rem !important;
}

main > section:first-child.bg-brand-900 p {
    font-size: 0.95rem !important;
    line-height: 1.5rem !important;
    margin-top: 0.5rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 640px) {
    main > section:first-child.bg-brand-900 {
        padding-top: 5rem !important; /* py-20 */
        padding-bottom: 5rem !important;
    }

    main > section:first-child.bg-brand-900 h1 {
        font-size: 2.5rem !important; /* text-4xl */
        line-height: 3rem !important;
    }

    main > section:first-child.bg-brand-900 p {
        font-size: 1.125rem !important; /* text-lg */
        line-height: 1.75rem !important;
    }
}

@media (min-width: 1024px) {
    main > section:first-child.bg-brand-900 {
        padding-top: 6rem !important; /* py-24 */
        padding-bottom: 6rem !important;
    }

    main > section:first-child.bg-brand-900 h1 {
        font-size: 3rem !important; /* text-5xl */
        line-height: 1.2 !important;
    }
}


.animate-count {
    animation: countUp 0.6s ease-out forwards;
}

/* --- Plyr Video Player Branding --- */
:root {
    --plyr-color-main: var(--brand-900);
}

.plyr--full-ui input[type=range] {
    color: var(--brand-900) !important;
}

.plyr__control--overlaid {
    background: var(--brand-900) !important;
    opacity: 0.8;
}

.plyr__control:hover {
    background: var(--brand-900) !important;
}

/* --- Success Stories Page Specifics --- */
body.hide-glightbox-nav .glightbox-container .gnext,
body.hide-glightbox-nav .glightbox-container .gprev {
    display: none !important;
}

/* --- Blood Card Page Specifics --- */
.clip-path-banner {
    border-bottom: 3px solid #E67A00;
}

.clip-path-banner::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -15px;
    width: 15px;
    height: 40px;
    background: #E67A00;
    transform: skewX(-20deg);
}

.clip-path-banner::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -15px;
    width: 15px;
    height: 40px;
    background: #E67A00;
    transform: skewX(20deg);
}

/* --- Prose Customization (Dynamic Pages) --- */
.prose {
    color: #4b5563;
}
.prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: #6D0909;
    font-weight: 800;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}
.prose :where(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0 !important;
}
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 2.25rem; }
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.875rem; border-bottom: 2px solid #f3f4f6; padding-bottom: 0.25em; }
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: 1.5rem; }

.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: #6D0909;
    text-decoration: underline;
    font-weight: 600;
    transition: all 0.3s;
}
.prose :where(a):hover:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: #991b1b;
    text-decoration-color: transparent;
}

.prose :where(ul, ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-left: 1.5em;
}
.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0.5em;
}

.prose :where(img, video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    margin: 3em auto;
    max-width: 100%;
}

.prose :where(pre, code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    background: #111827;
    color: #f3f4f6;
    border-radius: 1rem;
    padding: 1em 1.5em;
}
.prose :where(li)::marker {
    color: #6D0909;
    font-weight: 800;
}
.prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-left: 4px solid #6D0909;
    background: #fef2f2;
    padding: 1.5em 2em;
    border-radius: 0.75rem;
    font-style: italic;
    color: #991b1b;
}

/* ========================================
   TomSelect Custom Brand Theme
   ======================================== */

/* Wrapper that replaces the original <select> */
.ts-wrapper {
    width: 100%;
}

.location-group .ts-wrapper.loc-field {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* The visible "button" part of the select */
.ts-control {
    padding: 0.6875rem 1rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #f3f4f6 !important;
    background-color: #f9fafb !important; /* matches bg-gray-50 */
    font-size: 0.875rem !important;
    color: #111827 !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    min-height: unset !important;
    cursor: pointer !important;
}

.location-group .ts-control {
    background-color: #ffffff !important;
    min-height: 46px !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
}

.location-group .loc-ts-readonly {
    cursor: not-allowed !important;
}

.location-group .loc-ts-readonly .ts-control {
    background-color: #ffffff !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.location-group .loc-ts-readonly .ts-control::after {
    opacity: 0.35 !important;
}

.location-group .ts-control .item,
.location-group .ts-control .placeholder {
    line-height: 1.25rem !important;
}

.ts-control:focus,
.ts-wrapper.focus .ts-control {
    border-color: #6D0909 !important;
    box-shadow: 0 0 0 4px rgba(109, 9, 9, 0.08) !important;
    outline: none !important;
}

/* Arrow indicator */
.ts-wrapper.single .ts-control::after {
    border-color: #6D0909 transparent transparent transparent !important;
    border-width: 5px 5px 0 5px !important;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: transparent transparent #6D0909 transparent !important;
    border-width: 0 5px 5px 5px !important;
}

/* The dropdown panel */
.ts-dropdown {
    border: 1.5px solid #6D0909 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(109, 9, 9, 0.15), 0 4px 10px -3px rgba(0,0,0,0.08) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    font-size: 0.875rem !important;
}

/* Search input inside dropdown */
.ts-dropdown .ts-dropdown-content .ts-search-wrapper,
.ts-dropdown .dropdown-input-wrap {
    padding: 8px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: #fff !important;
}

.ts-dropdown input.ts-dropdown-search,
.ts-dropdown input {
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    outline: none !important;
    color: #374151 !important;
    background: #f9fafb !important;
    transition: border-color 0.2s !important;
}

.ts-dropdown input:focus {
    border-color: #6D0909 !important;
    background: #fff !important;
}

/* Individual option */
.ts-dropdown .option {
    padding: 10px 16px !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: background 0.12s, color 0.12s !important;
    line-height: 1.5 !important;
    font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
}

/* Hover state */
.ts-dropdown .option:hover {
    background-color: #F9F0F0 !important;
    color: #6D0909 !important;
}

/* Active / selected in list */
.ts-dropdown .option.active {
    background-color: #6D0909 !important;
    color: #ffffff !important;
}

/* Selected option (shown as text in control) */
.ts-control .item {
    font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
    color: #111827 !important;
}

/* Placeholder text */
.ts-control .placeholder {
    color: #9ca3af !important;
}

/* ========================================
   GLOBAL: All TomSelect single-selects keep selected value + caret on ONE line.
   Works WITH TomSelect's native flex layout (flex-wrap: nowrap), so the
   selected item truncates with ellipsis instead of wrapping the caret to a new line.
   This applies to EVERY single-select dropdown site-wide.
   ======================================== */
.ts-wrapper.single .ts-control {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* reserve space for the dropdown arrow so text is never cut */
    padding-right: 2.25rem !important;
}
.ts-wrapper.single .ts-control .item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* TomSelect positions .placeholder as position:absolute with width:100%,
   which makes text extend UNDER the arrow and get clipped.
   Fix: constrain the right edge so text stops before the arrow. */
.ts-wrapper.single .ts-control .placeholder {
    right: 2.25rem !important;
    width: auto !important;
}
/* When NO item selected: input fills width so placeholder text shows fully */
.ts-wrapper.single:not(.has-items) .ts-control input {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
/* When an item IS selected: item truncates, input shrinks to a tiny caret */
.ts-wrapper.single.has-items .ts-control input {
    flex: 0 0 auto !important;
    min-width: 2px !important;
    width: 2px !important;
    max-width: 4px !important;
}

/* Homepage hero section form fields - slightly bigger.
   No-wrap behaviour comes from the GLOBAL .ts-wrapper.single rule above;
   here we only override sizing and color. */
#hero .ts-wrapper .ts-control {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 2.25rem 0 1.1rem !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
    border-radius: 0.8rem !important;
    line-height: 52px !important;
}

#hero .ts-wrapper .ts-control .item,
#hero .ts-wrapper .ts-control .placeholder {
    font-size: 0.9rem !important;
    line-height: 52px !important;
    font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
}

#hero .ts-wrapper .ts-control input {
    line-height: 52px !important;
    height: 52px !important;
}

#hero .ts-wrapper.single .ts-control::after {
    border-width: 6px 6px 0 6px !important;
    height: 52px !important;
    line-height: 52px !important;
}

/* Homepage hero section form field text - black (placeholder + selected value) */
#hero .ts-control .placeholder,
#hero .ts-control .item,
#hero .ts-control .item > div,
#hero .ts-control input,
#hero .ts-wrapper.has-items .ts-control .item {
    color: #000000 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* No results */
.ts-dropdown .no-results {
    padding: 10px 16px !important;
    color: #9ca3af !important;
    font-size: 0.8125rem !important;
}

/* ========================================
   Blood Donors page filters - same behaviour as hero form:
   middle-align via line-height + selected value/caret on one line (no wrap)
   ======================================== */
/* Work WITH TomSelect's native flex: nowrap keeps caret inline;
   min-width:0 + ellipsis truncates long text without wrapping. */
#donor-filters .ts-wrapper .ts-control {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 2.25rem 0 1rem !important;
    box-sizing: border-box !important;
    font-size: 0.875rem !important;
    line-height: 46px !important;
}

#donor-filters .ts-wrapper .ts-control .item,
#donor-filters .ts-wrapper .ts-control .placeholder {
    font-size: 0.875rem !important;
    line-height: 46px !important;
    font-family: 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
}

/* Only override sizing here; width/flex inherited from GLOBAL rule above
   so the placeholder shows fully when empty and caret shrinks when selected. */
#donor-filters .ts-wrapper .ts-control input {
    line-height: 46px !important;
    height: 46px !important;
}

#donor-filters .ts-wrapper.single .ts-control::after {
    height: 46px !important;
    line-height: 46px !important;
}