/* Mobile-only navbar readability: make links and globe icon black on yellow bg
     Matches Bootstrap navbar-expand-md: hamburger visible below 768px */
@media (max-width: 767.98px) {
    #topnavbar.navbar.navbar-dark .navbar-nav .nav-link,
    #topnavbar.navbar .dropdown-item,
    #topnavbar.navbar .navbar-text,
    #topnavbar.navbar .icofont,
    #topnavbar.navbar .bi,
    /* Explicit globe icon classes */
    #topnavbar.navbar .icofont-globe,
    #topnavbar.navbar .icofont-globe-alt,
    #topnavbar.navbar .icofont-earth,
    #topnavbar.navbar .bi-globe,
    #topnavbar.navbar .bi-globe2,
    #topnavbar.navbar .bi-globe-americas,
    #topnavbar.navbar .bi-globe-asia-australia,
    #topnavbar.navbar .bi-globe-central-south-asia,
    #topnavbar.navbar .bi-globe-europe-africa,
    /* Fallback for any <i> containing globe */
    #topnavbar.navbar i[class*="globe"] {
        color: #000 !important;
    }

    /* Override previously forced white via .text-light on the earth icon */
    #topnavbar.navbar .icofont-earth.text-light {
        color: #000 !important;
    }

    /* Hover/focus states remain readable */
    #topnavbar.navbar.navbar-dark .navbar-nav .nav-link:hover,
    #topnavbar.navbar.navbar-dark .navbar-nav .nav-link:focus {
        color: #000 !important;
    }

    /* Inline SVG icons inside nav items (exclude brand logo in .navbar-brand) */
    #topnavbar.navbar .nav-item svg,
    #topnavbar.navbar .nav-link svg,
    #topnavbar.navbar i[class*="globe"] svg,
    #topnavbar.navbar [class*="globe"] svg {
        fill: #000 !important;
        stroke: #000 !important;
    }

    /* Ensure language select arrow and text are dark */
    #topnavbar.navbar .form-select {
        color: #000 !important;
        border-color: rgba(0,0,0,0.3);
    }
    /* Override Bootstrap form-select arrow to black via CSS variable if supported */
    #topnavbar.navbar .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='black' d='M3.204 5h9.592L8 10.481 3.204 5z'/%3e%3c/svg%3e");
    }
}
body {
    font-family: 'Open Sans', sans-serif;
}

.img-width-100 {
    width: 100%;
}

.text-blurred {
    text-shadow: 0 0 25px #a52b84, 0 0 25px #a52b84, 0 0 25px #a52b84;
}

.padding {
    padding: 1.25rem;
}

.bg-light-blue {
    background-color: #e3f2fd;
}

/* Active nav link highlight for dark navbar */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
    color: #fff;
    font-weight: 600;
    border-bottom: 2px solid #17a2b8; /* matches .btn-info */
}

/* Brand palette based on #a52b84 */
:root {
    --brand: #a52b84;
    --brand-700: #8a216b;
    --brand-100: #f6e9f3;
    --brand-300: #d64fa8;
    --brand-50: #fbf2f8;
    --brand-900: #3a0b2c;
    --brand-text: #ffffff;

    /* Gradient palettes */
    --generic-1: #a52b84;
    --generic-2: #d84075;
    --generic-3: #f96763;
    --generic-4: #ff9655;
    --generic-5: #ffc855;
    --generic-6: #f9f871;

    --match-1: #a52b84;
    --match-2: #7656b7;
    --match-3: #0075d0;
    --match-4: #008bcb;
    --match-5: #009aaf;
    --match-6: #00a48b;
}

.bg-brand { background-color: var(--brand) !important; }
.bg-brand-100 { background-color: var(--brand-100) !important; }
.bg-brand-50 { background-color: var(--brand-50) !important; }
.bg-brand-300 { background-color: var(--brand-300) !important; }
.bg-brand-dark { background-color: var(--brand-900) !important; }
.text-brand { color: var(--brand) !important; }
.text-brand-700 { color: var(--brand-700) !important; }
.border-brand { border-color: var(--brand) !important; }

/* Generic palette text utility */
.text-generic-5 { color: var(--generic-5) !important; }

/* Brand text background utility for pills/badges */
.text-bg-brand { color: var(--brand-text) !important; background-color: var(--brand) !important; }

/* Apply brand palette to default primary buttons sitewide */
.btn-primary { color: var(--brand-text); background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background-color: var(--brand-700); border-color: var(--brand-700); color: var(--brand-text); }

/* Accent button for Pay Now (#d84075) */
.btn-pay-now { color: #ffffff; background-color: var(--generic-2); border-color: var(--generic-2); }
.btn-pay-now:hover { background-color: var(--generic-1); border-color: var(--generic-1); color: #ffffff; }

/* Gradient utilities */
.bg-gradient-generic {
    background-image: linear-gradient(90deg,
        var(--generic-1) 0%, var(--generic-2) 20%, var(--generic-3) 40%,
        var(--generic-4) 60%, var(--generic-5) 80%, var(--generic-6) 100%
    );
}
.bg-gradient-matching {
    background-image: linear-gradient(90deg,
        var(--match-1) 0%, var(--match-2) 20%, var(--match-3) 40%,
        var(--match-4) 60%, var(--match-5) 80%, var(--match-6) 100%
    );
}
.bg-page-gradient {
    background-image: linear-gradient(180deg,
        rgba(165,43,132,0.08) 0%, rgba(216,64,117,0.08) 20%, rgba(249,103,99,0.08) 40%,
        rgba(255,150,85,0.08) 60%, rgba(255,200,85,0.08) 80%, rgba(249,248,113,0.08) 100%
    );
}

/* Gradient text utility using Generic palette for icon fonts and headings */
.text-gradient-generic {
    background-image: linear-gradient(90deg,
        var(--generic-1) 0%, var(--generic-2) 20%, var(--generic-3) 40%,
        var(--generic-4) 60%, var(--generic-5) 80%, var(--generic-6) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block; /* Ensure gradient renders on icon glyphs */
}

.btn-brand {
    color: var(--brand-text);
    background-color: var(--brand);
    border-color: var(--brand);
}
.btn-brand:hover { background-color: var(--brand-700); border-color: var(--brand-700); color: var(--brand-text); }

/* Make odd rows reveal the underlying .bg-page-gradient */
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-striped-bg: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; }

/* Keep even rows solid for contrast (light theme) */
.table-striped > tbody > tr:nth-of-type(even) > * { background-color: #ffffff; }

/* Hero section */
.hero {
        /* Soften further with a higher-opacity white overlay over the gradient */
        background-image: linear-gradient(rgba(255,255,255,0.30), rgba(255,255,255,0.30)),
                                            linear-gradient(90deg,
                                                var(--generic-1) 0%, var(--generic-2) 20%, var(--generic-3) 40%,
                                                var(--generic-4) 60%, var(--generic-5) 80%, var(--generic-6) 100%
                                            );
        background-blend-mode: normal;
        color: var(--brand-text);
}
.hero .lead { color: #fdf2f8; }

/* Navbar opacity and scroll shadow */
#topnavbar {
    transition: background-color .25s ease, box-shadow .25s ease;
    /* Soften once with a subtle white overlay over the reversed Generic Gradient */
    background-image: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)),
                      linear-gradient(90deg,
                        var(--generic-6) 0%, var(--generic-5) 20%, var(--generic-4) 40%,
                        var(--generic-3) 60%, var(--generic-2) 80%, var(--generic-1) 100%
                      );
    background-blend-mode: normal;
    z-index: 1030;
}
#topnavbar.scrolled {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Ensure navbar links are readable over gradient */
#topnavbar .navbar-nav .nav-link { color: #ffffff !important; }
#topnavbar .navbar-nav .nav-link:hover { color: #ffffff !important; opacity: 0.85; }
#topnavbar .navbar-brand img { max-height: 46px; }
/* Ensure inline SVG logo uses natural aspect ratio */
#topnavbar .navbar-brand svg { max-height: none; }

/* Keep navbar height stable and center the brand content */
#topnavbar .navbar-brand {
    height: 46px;
    display: flex;
    align-items: center;
    overflow: hidden; /* crop excess vertical height from wide SVG */
}

/* Inline SVG logo sizing mirrors PNG behavior */
.logo-svg { display: block; width: 190px; height: auto; }

/* Ensure navbar is opaque by default */
.navbar.bg-brand-100 { background-color: #ffffff !important; }

/* Banner section subtle tint */
#banner { background-color: var(--brand-100); }

/* Mobile-only centering for user sub nav toggler and content */
@media (max-width: 767.98px) {
    #user_nav .navbar-toggler { margin-left: auto; margin-right: auto; }
    #user_nav .navbar-collapse { justify-content: center; }
    /* Ensure nav groups and items center within collapsed user nav */
    #user_nav .navbar-nav { justify-content: center; align-items: center; }
    #user_nav .navbar-nav .nav-link { text-align: center; }
    /* Make logout form behave like a nav item without extra spacing */
    #user_nav form.nav-item { display: flex; margin: 0; }
    #user_nav form.nav-item .nav-link { padding-top: .5rem; padding-bottom: .5rem; }
}

/* Section headings */
.section-title { color: var(--brand-700); border-left: 4px solid var(--brand); padding-left: .75rem; }

/* Footer gradient with dark overlay for contrast */
.footer-gradient {
    background-image: linear-gradient(90deg,
        var(--generic-1) 0%, var(--generic-2) 20%, var(--generic-3) 40%,
        var(--generic-4) 60%, var(--generic-5) 80%, var(--generic-6) 100%
    ),
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40));
    background-blend-mode: overlay;
}

/* Visual separation between navbar and hero */
.nav-hero-separator {
    height: 14px;
    background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

/* Icon-only links: keep clickable, remove underline */
.icon-link {
    text-decoration: none !important;
    border-bottom: none !important;
}
.icon-link:hover {
    text-decoration: none !important;
}

/* Pagination mapped to brand palette */
.pagination .page-link {
    color: var(--brand);
    border-color: var(--brand);
    background-color: #ffffff;
}
.pagination .page-link:hover {
    color: var(--brand-700);
    border-color: var(--brand-700);
}
.pagination .page-link:focus {
    color: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: 0 0 0 .2rem rgba(165, 43, 132, 0.25);
}
.page-item.active .page-link {
    color: var(--brand-text);
    background-color: var(--brand);
    border-color: var(--brand);
}
.page-item.disabled .page-link {
    color: var(--brand-700);
    border-color: var(--brand-100);
    background-color: #ffffff;
    opacity: .6;
}

/* Footer logo: white, centered, consistent sizing */
.footer-logo-svg {
    display: inline-block;
    width: 190px;
    height: auto;
}

/* About section typography and list visuals */
.about-text { font-size: 1.05rem; font-weight: 600; }
.about-text h1, .about-text h2, .about-text h3, .about-text h4, .about-text h5, .about-text h6,
.about-text p, .about-text li { font-size: inherit; font-weight: inherit; }
.about-text ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.about-text .best-fit-list li { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.about-text .best-fit-list li i { font-size: 1.05rem; }