/* =============================================================================
 * fty-theme.css
 * Fore The Youth visual identity overlay for Academy LMS (default theme).
 *
 * Drop into:  public/assets/frontend/default/css/fty-theme.css
 * Loaded by:  resources/views/layouts/default.blade.php  (one new <link> tag)
 *
 * Strategy:
 *   - Pure override layer. Never edit Academy's own style.css or custom_style.css.
 *     When Academy ships an update, this file is untouched. (Academy's
 *     custom_style.css *is* shipped by the vendor — they overwrite it on update,
 *     which is why we keep our customizations here instead.)
 *   - Win with specificity, not !important. The few !important rules below are
 *     limited to cases where Academy itself uses !important inline.
 *   - Tokens declared once at :root, then composed downstream. Tweaking the
 *     palette = editing the :root block.
 *
 * Color mapping (Academy → FTY):
 *   #754FFE primary purple   →  #15803d  fty-green   (buttons, links, accents)
 *   #c664ff pink magenta     →  #74B83E  brand-green (secondary, kid-friendly)
 *   #2f57ef secondary blue   →  #1d4ed8  fty-blue    (info links)
 *   #efbb02 gold accent      →  #efbb02  unchanged   (it works)
 *   #192335 dark slate text  →  #0f172a  fty-ink     (slightly cooler)
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1. Design tokens
 * -------------------------------------------------------------------------- */
:root {
    /* --- FTY brand palette (mirrors kid-base.css on members.foretheyouth.com) - */
    --fty-green:        #15803d;   /* primary action, button bg, link emphasis  */
    --fty-green-dark:   #14532d;   /* hover/depth                                */
    --fty-green-deeper: #052e16;   /* deepest text on greens                     */
    --fty-mint:         #D4E8B9;   /* soft fill, hero washes                     */
    --fty-mint-light:   #E9F4DA;   /* card surfaces with green tint              */

    --fty-brand-green:        #74B83E;   /* mid grass green — kid-friendly      */
    --fty-brand-green-light:  #9EDA48;   /* highlight                            */
    --fty-brand-green-dark:   #588036;   /* depth                                */

    --fty-blue:         #1d4ed8;   /* informational links                        */
    --fty-blue-hover:   #0b3aa4;
    --fty-gold:         #efbb02;   /* ratings, badges                            */

    --fty-ink:          #0f172a;   /* primary text                               */
    --fty-ink-soft:     #334155;   /* secondary text                             */
    --fty-muted:        #64748b;   /* labels, captions                           */
    --fty-bg:           #F7FAFC;   /* page background                            */
    --fty-card:         #ffffff;   /* card surface                               */
    --fty-border:       rgba(15,23,42,.10);
    --fty-shadow:       0 10px 25px rgba(15,23,42,.08);
    --fty-shadow-soft:  0 6px 20px rgba(21,94,44,.06);
    --fty-radius:       14px;
    --fty-radius-sm:    10px;
    --fty-radius-pill:  999px;

    /* --- Map onto Academy's existing tokens so we get cascade reach for free - */
    /* (Academy declares these inside style.css; redeclaring here at :root wins) */
    --primary:          var(--fty-green);
    --primary-color:    var(--fty-green);
    --secondary:        var(--fty-brand-green);
    --info:             var(--fty-blue);
    --bs-primary:       var(--fty-green);
    --bs-primary-rgb:   21, 128, 61;
    --bs-link-color:    var(--fty-green);
    --bs-link-hover-color: var(--fty-green-dark);
}


/* -----------------------------------------------------------------------------
 * 2. Globals — body, links, focus, selection
 * -------------------------------------------------------------------------- */
body {
    background: var(--fty-bg);
    color: var(--fty-ink);
}

a {
    color: var(--fty-green);
}
a:hover,
a:focus {
    color: var(--fty-green-dark);
}

/* Make non-semantic "use blue for info links" work — instructor names, breadcrumbs, etc */
.text-primary,
.text-primary-1,
.cl-primary {
    color: var(--fty-green) !important;
}

::selection {
    background: var(--fty-mint);
    color: var(--fty-green-deeper);
}

/* Focus ring — accessibility win, matches FTY pattern */
:focus-visible {
    outline: 3px solid rgba(116, 184, 62, .45);
    outline-offset: 2px;
    border-radius: 6px;
}


/* -----------------------------------------------------------------------------
 * 3. Buttons
 * Academy uses .btn-primary / .btn1 / .theme-btn1 / .btn-bg / .btn-rounded /
 * .btn-light-primary across templates. We hit them all.
 * -------------------------------------------------------------------------- */
.btn-primary,
.btn1,
.theme-btn1,
.btn-bg,
.btn-fill {
    background-color: var(--fty-green);
    border-color: var(--fty-green);
    color: #fff;
    border-radius: var(--fty-radius-sm);
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn1:hover,
.theme-btn1:hover,
.btn-bg:hover,
.btn-fill:hover {
    background-color: var(--fty-green-dark);
    border-color: var(--fty-green-dark);
    color: #fff;
}
.btn-primary:active,
.btn1:active {
    transform: translateY(1px);
}

.btn-light-primary {
    background-color: var(--fty-mint-light);
    border-color: var(--fty-mint);
    color: var(--fty-green-dark);
}
.btn-light-primary:hover {
    background-color: var(--fty-mint);
    border-color: var(--fty-brand-green);
    color: var(--fty-green-deeper);
}

.btn-outline-primary {
    color: var(--fty-green);
    border-color: var(--fty-green);
    background: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--fty-green);
    border-color: var(--fty-green);
    color: #fff;
}

/* Pill / rounded variant — common on hero CTAs */
.btn-rounded {
    border-radius: var(--fty-radius-pill);
}

/* Black-arrow button used on Academy's "developer" home variant */
.btn-black-arrow1 {
    background: var(--fty-ink);
    color: #fff;
    border-radius: var(--fty-radius-pill);
}
.btn-black-arrow1:hover {
    background: var(--fty-green-dark);
    color: #fff;
}


/* -----------------------------------------------------------------------------
 * 4. Header / top nav
 * -------------------------------------------------------------------------- */
.header-area {
    background: #fff;
    border-bottom: 1px solid var(--fty-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

/* Primary nav links */
.primary-menu > li > a,
.main-menu-ul > li > a {
    color: var(--fty-ink);
    font-weight: 600;
    transition: color .15s ease;
}
.primary-menu > li > a:hover,
.main-menu-ul > li > a:hover,
.primary-menu > li > a.active,
.main-menu-ul > li > a.active,
.menu-parent-a.active {
    color: var(--fty-green);
}

/* Active state — small underline accent like FTY sidebar */
.primary-menu > li > a.active::after,
.main-menu-ul > li > a.active::after {
    content: "";
    display: block;
    height: 3px;
    width: 24px;
    margin-top: 4px;
    background: linear-gradient(90deg, var(--fty-brand-green), var(--fty-green));
    border-radius: 2px;
}

/* Mega menu drop styling */
.mega-dropdown-menu,
.main-mega-menu {
    border: 1px solid var(--fty-border);
    border-radius: var(--fty-radius);
    box-shadow: var(--fty-shadow);
    background: #fff;
}
.mega-menu-item:hover,
.mega_list li:hover > a {
    background: var(--fty-mint-light);
    color: var(--fty-green-deeper);
}

/* Top bar (the slim band above the header) */
.top-bar,
.top-bar-area {
    background: var(--fty-green-deeper);
    color: #fff;
}
.top-bar a,
.top-bar-area a {
    color: #fff;
}
.top-bar a:hover,
.top-bar-area a:hover {
    color: var(--fty-brand-green-light);
}


/* -----------------------------------------------------------------------------
 * 5. Hero / banner sections
 * Academy ships several home-page variants: home1-*, dev-*, cooking-*,
 * harmony-*, kg-*. We theme the common containers.
 * -------------------------------------------------------------------------- */
.banner-area,
.banner-area-1,
.banner-section,
.home1-banner-section,
.dev-banner-section,
.cooking-banner-section {
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(158, 218, 72, .25), transparent 60%),
        linear-gradient(180deg, var(--fty-mint-light) 0%, var(--fty-bg) 100%);
}

.banner-title,
.home1-banner-section h1,
.dev-banner-section h1 {
    color: var(--fty-ink);
}

.banner-content p,
.home1-banner-section p,
.dev-banner-section p {
    color: var(--fty-ink-soft);
}

/* Section titles */
.home1-section-title,
.dev-section-title,
.section-title h2 {
    color: var(--fty-ink);
}
.home1-section-title small,
.dev-section-title small,
.section-title small {
    color: var(--fty-green);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}


/* -----------------------------------------------------------------------------
 * 6. Cards (course, category, instructor, generic)
 * -------------------------------------------------------------------------- */
.lms-card,
.lms-1-card,
.lms-service-card,
.course-card,
.cooking-course-card,
.dev-course-card,
.learning-coding-card,
.kg-card,
.bgcolor-card,
.service-card {
    background: var(--fty-card);
    border: 1px solid var(--fty-border);
    border-radius: var(--fty-radius);
    box-shadow: var(--fty-shadow-soft);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lms-card:hover,
.lms-1-card:hover,
.course-card:hover,
.cooking-course-card:hover,
.dev-course-card:hover,
.learning-coding-card:hover,
.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(21, 94, 44, .12);
    border-color: rgba(116, 184, 62, .35);
}

/* Course-card price + meta */
.course-card .price,
.lms-1-card .price,
.cooking-course-card .price {
    color: var(--fty-green);
    font-weight: 700;
}

/* Category pills */
.category-card,
.categori-card,
.category-pill {
    background: var(--fty-mint-light);
    color: var(--fty-green-deeper);
    border-radius: var(--fty-radius-pill);
    border: 1px solid rgba(116, 184, 62, .2);
}
.category-card:hover,
.categori-card:hover {
    background: var(--fty-mint);
}


/* -----------------------------------------------------------------------------
 * 7. Forms & inputs (login, register, search, course filters)
 * -------------------------------------------------------------------------- */
.form-control,
.form-select,
.global-form .form-control {
    border-radius: var(--fty-radius-sm);
    border: 1px solid var(--fty-border);
    background: #fff;
    color: var(--fty-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--fty-green);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
    color: var(--fty-ink);
}

.form-label {
    color: var(--fty-ink);
    font-weight: 600;
}

.form-check-input:checked {
    background-color: var(--fty-green);
    border-color: var(--fty-green);
}
.form-check-input:focus {
    border-color: var(--fty-green);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}


/* -----------------------------------------------------------------------------
 * 8. Auth pages (login, register, forgot-password, reset-password)
 * Academy's auth views render inside layouts/default.blade.php so they pick
 * these up automatically. Just a few extra bits to hit auth-specific markup.
 * -------------------------------------------------------------------------- */
.login-area,
.signup-area,
.register-area,
.forgot-password-area {
    background:
        radial-gradient(900px 300px at 100% 0%, rgba(158, 218, 72, .25), transparent 60%),
        var(--fty-bg);
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.global-form,
.login-form,
.signup-form,
.register-form {
    background: var(--fty-card);
    border: 1px solid var(--fty-border);
    border-radius: var(--fty-radius);
    box-shadow: var(--fty-shadow);
    padding: 2rem;
}

.global-form .g-title,
.login-form .g-title,
.register-form .g-title {
    color: var(--fty-ink);
}

.login-form .description,
.register-form .description {
    color: var(--fty-muted);
}

.login-form .btn-primary,
.register-form .btn-primary {
    width: 100%;
    padding: .75rem 1rem;
    font-weight: 600;
}


/* -----------------------------------------------------------------------------
 * 9. Footer
 * -------------------------------------------------------------------------- */
footer,
.footer-area,
.footer-section {
    background: var(--fty-green-deeper);
    color: rgba(255, 255, 255, .85);
}
footer a,
.footer-area a,
.footer-section a {
    color: rgba(255, 255, 255, .85);
}
footer a:hover,
.footer-area a:hover,
.footer-section a:hover {
    color: var(--fty-brand-green-light);
}
footer h2, footer h3, footer h4, footer h5,
.footer-area h2, .footer-area h3, .footer-area h4, .footer-area h5 {
    color: #fff;
}
footer .footer-bottom,
.footer-area .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .65);
}


/* -----------------------------------------------------------------------------
 * 10. Misc — badges, breadcrumbs, pagination, ratings
 * -------------------------------------------------------------------------- */
.badge.bg-primary,
.badge-primary {
    background-color: var(--fty-green) !important;
    color: #fff;
}
.badge.bg-secondary,
.badge-secondary {
    background-color: var(--fty-brand-green) !important;
    color: #fff;
}

.breadcrumb {
    background: transparent;
    padding-left: 0;
}
.breadcrumb-item.active {
    color: var(--fty-green-dark);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--fty-muted);
}

.pagination .page-link {
    color: var(--fty-green);
    border-color: var(--fty-border);
    border-radius: var(--fty-radius-sm);
    margin: 0 2px;
}
.pagination .page-item.active .page-link {
    background-color: var(--fty-green);
    border-color: var(--fty-green);
    color: #fff;
}

/* Star ratings — keep gold, inherits from --fty-gold */
.rating i,
.star-rating i,
.fa-star {
    color: var(--fty-gold);
}

/* Filter chips on course listing */
.filter-item.active,
.filter-item:hover {
    background: var(--fty-mint-light);
    color: var(--fty-green-deeper);
    border-color: var(--fty-brand-green);
}


/* -----------------------------------------------------------------------------
 * 11. Course detail page polish
 * -------------------------------------------------------------------------- */
.course-info-tabs .nav-link {
    color: var(--fty-ink-soft);
    border-radius: var(--fty-radius-sm);
}
.course-info-tabs .nav-link.active {
    background: var(--fty-mint-light);
    color: var(--fty-green-deeper);
}

.accordion-button:not(.collapsed) {
    background-color: var(--fty-mint-light);
    color: var(--fty-green-deeper);
}
.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
    border-color: var(--fty-green);
}

.progress {
    background-color: #e9eef5;
    border-radius: var(--fty-radius-pill);
}
.progress-bar {
    background: linear-gradient(90deg, var(--fty-brand-green), var(--fty-green));
    transition: width .35s ease;
}


/* -----------------------------------------------------------------------------
 * 12. Cookie banner (Academy's built-in cookie consent)
 * -------------------------------------------------------------------------- */
.cookie-area,
.cookie-popup,
#cookie-bar {
    background: var(--fty-ink);
    color: #fff;
    border-radius: var(--fty-radius);
    box-shadow: var(--fty-shadow);
}
.cookie-area .btn,
.cookie-popup .btn,
#cookie-bar .btn {
    background: var(--fty-green);
    color: #fff;
    border-color: var(--fty-green);
}


/* -----------------------------------------------------------------------------
 * 13. Toaster / alerts
 * -------------------------------------------------------------------------- */
.toaster,
.toast,
.alert-success {
    border-radius: var(--fty-radius-sm);
}
.alert-success {
    background: var(--fty-mint-light);
    color: var(--fty-green-deeper);
    border-color: var(--fty-brand-green);
}
.alert-info {
    background: #e9f4ff;
    color: #0b3aa4;
    border-color: #cfe1ff;
}


/* -----------------------------------------------------------------------------
 * 14. Optional: switch from Poppins → FTY system stack
 * To match members.foretheyouth.com exactly, uncomment the rule below.
 * Tradeoff: looks sharper on desktop OS, slightly less "branded" look.
 * -------------------------------------------------------------------------- */
/*
body,
.btn,
.form-control,
.form-select {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
*/


/* =============================================================================
 * v2 ADDITIONS (sections 17–21) — fixing the "buttons still look purple" problem
 *
 * The v1 sections above target the button class names that show up MOST
 * commonly in templates (.btn-primary, .btn1, .theme-btn1, etc). Turns out
 * Academy actually paints its visible CTAs with five OTHER mechanisms that
 * v1 didn't catch:
 *
 *   1. .btn-purple-* family — solid #754FFE buttons with !important on :active
 *   2. .btn-outline-purple-* family — purple borders with SVG icon fills
 *   3. linear-gradient backgrounds — beat background-color (different property)
 *   4. Bootstrap's --bs-btn-bg per-button vars — not the generic --bs-primary
 *   5. SVG <path fill="..."> inside icon buttons — pure CSS color rules don't reach
 *
 * The sections below handle each of those. !important is used here ONLY when
 * Academy itself uses !important — necessary to win the cascade, not stylistic.
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 17. Bootstrap component variable overrides
 *
 * Bootstrap 5 styles every button via per-component variables like --bs-btn-bg.
 * Just overriding --bs-primary doesn't reach them — you have to override the
 * specific --bs-btn-* variables on the .btn-primary selector itself.
 * Same story for pagination, links, focus rings.
 * -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--fty-green);
    --bs-btn-border-color: var(--fty-green);
    --bs-btn-hover-bg: var(--fty-green-dark);
    --bs-btn-hover-border-color: var(--fty-green-dark);
    --bs-btn-active-bg: var(--fty-green-dark);
    --bs-btn-active-border-color: var(--fty-green-dark);
    --bs-btn-disabled-bg: var(--fty-green);
    --bs-btn-disabled-border-color: var(--fty-green);
    --bs-btn-focus-shadow-rgb: 21, 128, 61;
}

.btn-outline-primary {
    --bs-btn-color: var(--fty-green);
    --bs-btn-border-color: var(--fty-green);
    --bs-btn-hover-bg: var(--fty-green);
    --bs-btn-hover-border-color: var(--fty-green);
    --bs-btn-active-bg: var(--fty-green);
    --bs-btn-active-border-color: var(--fty-green);
    --bs-btn-disabled-color: var(--fty-green);
    --bs-btn-disabled-border-color: var(--fty-green);
}

.btn-link {
    --bs-btn-color: var(--fty-green);
    --bs-btn-hover-color: var(--fty-green-dark);
}

.pagination {
    --bs-pagination-color: var(--fty-green);
    --bs-pagination-hover-color: var(--fty-green-dark);
    --bs-pagination-focus-color: var(--fty-green-dark);
    --bs-pagination-active-bg: var(--fty-green);
    --bs-pagination-active-border-color: var(--fty-green);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(21, 128, 61, .25);
}

/* Reset Bootstrap's :root --bs-primary so utility classes (.bg-primary,
 * .text-primary, .border-primary) cascade correctly. The override at :root
 * in section 1 doesn't always win because Bootstrap also declares it inside
 * [data-bs-theme=light] — same specificity, later cascade. Force it again
 * with a higher-specificity selector. */
:root,
:root[data-bs-theme="light"],
[data-bs-theme="light"] {
    --bs-primary: #15803d;
    --bs-primary-rgb: 21, 128, 61;
    --bs-link-color: #15803d;
    --bs-link-color-rgb: 21, 128, 61;
    --bs-link-hover-color: #14532d;
    --bs-link-hover-color-rgb: 20, 83, 45;
    --bs-primary-text-emphasis: #052e16;
    --bs-primary-bg-subtle: #E9F4DA;
    --bs-primary-border-subtle: #D4E8B9;
    --bs-focus-ring-color: rgba(21, 128, 61, .25);
}


/* -----------------------------------------------------------------------------
 * 18. Academy's .btn-purple-* family (solid purple buttons)
 *
 * These are what's actually painted across most Academy pages. Academy uses
 * !important on the :active state, so we need !important to win.
 * -------------------------------------------------------------------------- */
.btn-purple-sm,
.btn-purple-sm2,
.btn-purple-sm3,
.btn-purple-md,
.btn-purple-1 {
    background: var(--fty-green) !important;
    border-color: var(--fty-green) !important;
    color: #fff !important;
}
.btn-purple-sm:hover,
.btn-purple-sm2:hover,
.btn-purple-sm3:hover,
.btn-purple-md:hover,
.btn-purple-1:hover {
    background: var(--fty-green-dark) !important;
    border-color: var(--fty-green-dark) !important;
    color: #fff !important;
}
.btn-purple-sm:active,
.btn-purple-sm2:active,
.btn-purple-sm3:active,
.btn-purple-md:active,
.btn-purple-1:active {
    background: var(--fty-green-dark) !important;
    border-color: var(--fty-green-dark) !important;
    color: #fff !important;
}

/* Outline variants — purple border + purple text by default, fill on hover */
.btn-outline-purple-sm,
.btn-outline-purple-sm2 {
    background: transparent !important;
    border-color: var(--fty-green) !important;
    color: var(--fty-green) !important;
}
.btn-outline-purple-sm:hover,
.btn-outline-purple-sm2:hover {
    background: var(--fty-green) !important;
    border-color: var(--fty-green) !important;
    color: #fff !important;
}
.btn-outline-purple-sm:active,
.btn-outline-purple-sm2:active {
    background: var(--fty-green-dark) !important;
    border-color: var(--fty-green-dark) !important;
    color: #fff !important;
}


/* -----------------------------------------------------------------------------
 * 19. SVG icon path fills inside purple-family buttons
 *
 * Academy's icon buttons embed inline <svg><path> where the path color is
 * styled via CSS. Pure color: rules don't reach SVG fills — you have to
 * target the path directly with the `fill` property.
 * -------------------------------------------------------------------------- */
.btn-purple-sm path,
.btn-purple-sm2 path,
.btn-purple-sm3 path,
.btn-purple-md path,
.btn-purple-1 path {
    fill: #fff !important;     /* solid buttons → white icon */
}

.btn-outline-purple-sm path,
.btn-outline-purple-sm2 path {
    fill: var(--fty-green) !important;   /* outline buttons → green icon */
}
.btn-outline-purple-sm:hover path,
.btn-outline-purple-sm:active path,
.btn-outline-purple-sm2:hover path,
.btn-outline-purple-sm2:active path {
    fill: #fff !important;     /* on hover → white (button is filled now) */
}

/* Generic "purple svg link" — the .svg-link:hover path { fill: #754FFE } rule */
.svg-link:hover path {
    fill: var(--fty-green) !important;
}


/* -----------------------------------------------------------------------------
 * 20. Linear-gradient BUTTONS (not text — see section 22 for text)
 *
 * Academy paints several CTAs with `background-image: linear-gradient(
 *     to right, #2f57ef 0%, #c664ff 51%, #c664ff 100%)`. Our plain
 * background-color rule LOSES to background-image, so we set
 * background-image: none and re-apply solid green.
 *
 * IMPORTANT: `.gradient` alone is AMBIGUOUS in Academy — it's used both for
 * gradient-filled buttons AND for gradient-text effects on headings. We
 * disambiguate using the modifier classes:
 *
 *   .eBtn.gradient    → button (this section)
 *   .gradient.color   → text effect (see section 22)
 *
 * Targeting `.gradient` alone would turn the heading word "instructors" in
 * the hero banner into a green box with invisible text — which is exactly
 * the bug v2.0 had. Don't do that again.
 * -------------------------------------------------------------------------- */
.eBtn.gradient,
.gSearch-show button,
.pr-wrap,
.user-slider .owl-nav .owl-prev,
.user-slider .owl-nav .owl-next,
.page-link:hover,
.page-item.active .page-link,
.entry-pagination .pagination li.active a,
.gradient-border-btn:hover,
.mybtn-play:hover,
.single-motion:hover,
.c-card:hover .eBtn,
.footer-search-group .submit {
    background-image: none !important;
    background-color: var(--fty-green) !important;
    color: #fff !important;
    border-color: var(--fty-green) !important;
}

/* Hover state on those gradient buttons → deeper green */
.eBtn.gradient:hover,
.gSearch-show button:hover,
.pr-wrap:hover,
.gradient-border-btn:hover,
.footer-search-group .submit:hover {
    background-image: none !important;
    background-color: var(--fty-green-dark) !important;
}


/* -----------------------------------------------------------------------------
 * 21. Lingering pink/magenta accent uses (#c664ff)
 *
 * Academy uses #c664ff for hover color on a few specific spots that aren't
 * buttons — sub-header links, user dropdown, dropdown borders. Convert them
 * to the FTY palette so the accent stays consistent.
 * -------------------------------------------------------------------------- */
.sub-header-left ul li a:hover,
.Userprofile .dropmenu-end a:hover {
    color: var(--fty-green) !important;
    fill: var(--fty-green) !important;
}
.Userprofile .dropmenu-end a:hover svg path,
.Userprofile .dropmenu-end a.bootcamp-menu-icon:hover svg path {
    fill: var(--fty-green) !important;
}

/* Pink dropdown borders — there are a couple of `border: 1px solid #c664ff`
 * declarations scattered through style.css for dropdown wrappers. Catch them
 * by tagging dropdown wrappers that may use them. Adjust if you find more. */
.dropdown-menu[class*="purple"],
.dropdown.show > .dropdown-menu {
    border-color: var(--fty-mint) !important;
}


/* -----------------------------------------------------------------------------
 * 22. Gradient TEXT effects (the "instructors" word in the hero, etc.)
 *
 * Academy uses a CSS trick to display certain heading words in a purple-pink
 * gradient — `<span class="gradient color">instructors</span>`. The mechanism:
 *
 *   .gradient sets:  background-image: linear-gradient(...)
 *   .color    sets:  background-clip: text;
 *                    -webkit-text-fill-color: transparent;
 *
 * Together they paint the gradient inside the letter shapes only. Section 20
 * v2.0 broke this by killing the gradient → resulting in a green rectangle
 * with invisible text. The fix: keep the gradient mechanism but swap the
 * gradient itself to use FTY greens, OR fall back to solid green if the
 * clip mechanism breaks.
 *
 * We do BOTH — the gradient gives the original "wow" effect in green, and
 * setting -webkit-text-fill-color provides a fallback if anything else
 * breaks the clip. Specificity must beat .color's text-fill-color rule, so
 * !important is needed.
 * -------------------------------------------------------------------------- */
.gradient.color,
.color.gradient {
    /* New gradient using FTY greens — keeps the visual flourish, on-brand */
    background-image: linear-gradient(
        to right,
        var(--fty-green) 0%,
        var(--fty-brand-green) 60%,
        var(--fty-brand-green-light) 100%
    ) !important;

    /* Re-assert the clip + transparency that .color sets — in case section 20
     * (or any future override) accidentally resets background-clip. */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Ebook tab buttons use their own gradient-text trick (separate from .color).
 * Same fix — swap the gradient to greens, keep the clip. */
.ebook-tab-btn:hover,
.ebook-tab-btn.active {
    background: linear-gradient(
        135deg,
        var(--fty-green) 0%,
        var(--fty-brand-green) 93.75%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


/* -----------------------------------------------------------------------------
 * 23. Academy's own custom variables + leftover purple/lavender washes
 *
 * Academy declares its own palette in style.css under --color-1, --color-2,
 * etc. (separate from Bootstrap's --bs-*). The most impactful one:
 *
 *   --color-1: #2f57ef  → used 74 times across style.css for accents,
 *                          active nav links, hero subtitle text, etc.
 *
 * One variable redeclaration cascades to all 74 uses — including the
 * "The Leader in online learning" hero subtitle and the active state of
 * primary nav items (Home, Bootcamp, etc).
 *
 * --color-2 (#192335) is just a dark slate text color, not purple; leave it.
 *
 * Plus: the breadcrumb area on listing pages (Bootcamp, Courses) uses its
 * own purple-lavender gradient that doesn't match the #2f57ef/#c664ff
 * palette my earlier sections were searching for. Replaced with a soft
 * mint-to-green wash that matches the FTY hero treatment.
 * -------------------------------------------------------------------------- */

/* Academy custom var override — single source of truth for 74 cascade hits */
:root,
:root[data-bs-theme="light"],
[data-bs-theme="light"] {
    --color-1: #15803d;   /* was #2f57ef — the "leader text" + active nav blue */
}

/* Belt-and-braces: explicit selectors for the most visible places, in case
 * the variable cascade is broken anywhere by a more-specific rule. */
.banner-content h5,
.banner-content .h5 {
    color: var(--fty-green) !important;
}
.primary-menu li a.active,
.main-menu-ul li a.active {
    color: var(--fty-green) !important;
}

/* Breadcrumb / page-header gradient on listing pages (Bootcamps, Courses,
 * Ebooks, Tutor Booking, etc). Was a purple-lavender wash; now a soft
 * mint-to-green wash matching the hero banner treatment. */
.breadcum-area,
.breadcrumb-area {
    background: linear-gradient(
        200deg,
        rgba(212, 232, 185, 0.45) 3%,    /* fty-mint with alpha */
        rgba(158, 218, 72, 0.25) 50%,    /* fty-brand-green-light with alpha */
        rgba(116, 184, 62, 0.35) 100%    /* fty-brand-green with alpha */
    ) !important;
}

/* The breadcrumb text "Home / All Bootcamps" inside .breadcum-area should
 * read as green-tinged ink, not purple-tinged. */
.breadcum-area .breadcrumb-item a,
.breadcrumb-area .breadcrumb-item a {
    color: var(--fty-green-dark);
}
.breadcum-area .breadcrumb-item.active,
.breadcrumb-area .breadcrumb-item.active {
    color: var(--fty-green-deeper);
}


/* -----------------------------------------------------------------------------
 * 24. Contact button (resting state) + sub-header utility bar
 *
 * Two more spots that didn't get caught by v2.2:
 *
 *   a. .gradient-border-btn — Academy's "Contact with us" button. Section 20
 *      caught the :hover state (gradient → green), but the RESTING state is
 *      a separate rule with `background: #1e3764` (a dark navy blue that
 *      reads purple alongside the rest of the palette). Override the resting
 *      state too so the button is green at all times, not just on hover.
 *
 *   b. .sub-header — the slim utility bar above the main nav, containing
 *      phone / location / language. Academy doesn't actually set a bg color
 *      on it in the shipped CSS, but the visual ends up reading lavender
 *      from surrounding tints. Explicit FTY mint-light bg ensures it claims
 *      the on-brand look regardless of what's bleeding through.
 * -------------------------------------------------------------------------- */

/* (a) Contact button — resting state */
.gradient-border-btn {
    background: var(--fty-green) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid var(--fty-green) !important;
}
/* Hover already handled in section 20, but reinforce here for proximity */
.gradient-border-btn:hover {
    background: var(--fty-green-dark) !important;
    background-image: none !important;
    border-color: var(--fty-green-dark) !important;
    color: #fff !important;
}

/* (b) Sub-header utility bar */
.sub-header {
    background: var(--fty-mint-light);   /* #E9F4DA — same tint as cards-on-green */
    border-bottom: 1px solid rgba(116, 184, 62, .25);   /* soft green divider */
}
.sub-header-left ul li a,
.sub-header-right ul li a {
    color: var(--fty-green-deeper);   /* readable ink on mint */
}
.sub-header-left ul li a:hover,
.sub-header-right ul li a:hover {
    color: var(--fty-green);
}

/* SVG icon strokes inside the sub-header (phone + location glyphs) — they're
 * hard-coded with stroke="#192335" inline. Inline attributes BEAT external
 * CSS for SVG, so we use the `[stroke]` attribute selector + !important
 * to win. Keep them dark for contrast against the mint background. */
.sub-header-left svg path[stroke="#192335"],
.sub-header-right svg path[stroke="#192335"] {
    stroke: var(--fty-green-deeper) !important;
}


/* -----------------------------------------------------------------------------
 * 15. Mobile polish
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .banner-area,
    .home1-banner-section,
    .dev-banner-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .global-form,
    .login-form,
    .register-form {
        padding: 1.25rem;
    }
}


/* -----------------------------------------------------------------------------
 * 16. Print
 * -------------------------------------------------------------------------- */
@media print {
    .header-area,
    .footer-area,
    .top-bar,
    .cookie-area {
        display: none !important;
    }
    body {
        background: #fff;
    }
}