/*
 * glecta-theme.css  — Modern GLECTA Visual Theme
 * Loaded after main.css + responsive.css. Pure cosmetic override layer.
 *
 * Design direction: Google Antigravity aesthetic — deep navy, warm gold,
 * clean white cards, rounded corners, confident typography.
 *
 * Colour constants (same as :root in headers):
 *   Navy:      #0a1628
 *   Navy-mid:  #152240
 *   Navy-lt:   #1e3260
 *   Gold:      #c8973a
 *   Gold-lt:   #e8b85a
 *   Accent:    #0ea5e9
 */

/* ═══════════════════════════════════════════════════════════════════════
   0.  DESIGN TOKENS  (hard-coded fallbacks so theme works on any page)
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --gt-navy:     #0a1628;
    --gt-navy-md:  #152240;
    --gt-navy-lt:  #1e3260;
    --gt-gold:     #c8973a;
    --gt-gold-lt:  #e8b85a;
    --gt-accent:   #0ea5e9;
    --gt-white:    #ffffff;
    --gt-bg:       #f7f8fc;
    --gt-border:   rgba(10,22,40,.10);
    --gt-shadow-sm: 0 2px 12px rgba(10,22,40,.08);
    --gt-shadow-md: 0 6px 28px rgba(10,22,40,.14);
    --gt-radius:   12px;
    --gt-font:     'DM Sans', 'Open Sans', Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════
   1.  GLOBAL — body, links, typography
   ═══════════════════════════════════════════════════════════════════ */
body {
    font-family: var(--gt-font);
    background: #f9fafd;
    color: #1e293b;
}

/* Links: replace legacy teal #007791 */
a { color: var(--gt-navy); }
a:hover, a:focus { color: var(--gt-gold); text-decoration: none; }

/* Headings — navy on light backgrounds */
h1, h2, h3, h4, h5, h6 { color: var(--gt-navy); font-family: var(--gt-font); }

/* ── Dark-background sections: force ALL text white ──────────────────
   Covers the homepage hero carousel, course/mock page headers,
   the Why-GLECTA strip, CTA banner and any other dark section.      */
.single-slide-item h1, .single-slide-item h2, .single-slide-item h3,
.single-slide-item h4, .single-slide-item h5, .single-slide-item h6,
.single-slide-item p, .single-slide-item span:not(.theme-btn),
.single-slide-item a:not(.theme-btn),
section.course-header-area h1, section.course-header-area h2,
section.course-header-area h3, section.course-header-area h4,
section.course-header-area p, section.course-header-area span,
section.mock-test-header-area h1, section.mock-test-header-area h2,
section.mock-test-header-area h3, section.mock-test-header-area p,
section.category-header-area h1, section.category-header-area h2,
section.category-header-area p,
section.page-header-area h1, section.page-header-area h2,
section.page-header-area h3, section.page-header-area p,
.home-fact-area h1, .home-fact-area h2, .home-fact-area h3,
.home-fact-area h4, .home-fact-area p, .home-fact-area span,
.gh-why h1, .gh-why h2, .gh-why h3, .gh-why h4,
.gh-why p, .gh-why span,
.gh-cta h1, .gh-cta h2, .gh-cta p {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2.  BUTTONS — global replacement of red/purple primaries
   ═══════════════════════════════════════════════════════════════════ */

/* ── Primary (navy fill) */
.btn-primary,
.btn-sign-up,
.sign-in-modal form button[type="submit"],
.course-sidebar-text-box .buy-btns .btn-buy-now,
.edit-rating-modal .modal-footer button:not(.previous),
button.btn-enroll,
.btn-enroll-now,
.checkout-btn,
a.btn-checkout {
    background-color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

.btn-primary:hover, .btn-primary:focus,
.btn-sign-up:hover, .btn-sign-up:focus,
.sign-in-modal form button[type="submit"]:hover,
.sign-in-modal form button[type="submit"]:focus,
.course-sidebar-text-box .buy-btns .btn-buy-now:hover,
.course-sidebar-text-box .buy-btns .btn-buy-now:focus,
.edit-rating-modal .modal-footer button:not(.previous):hover,
.edit-rating-modal .modal-footer button:not(.previous):focus,
.btn-enroll-now:hover {
    background-color: var(--gt-gold) !important;
    border-color: var(--gt-gold) !important;
    color: #fff !important;
}

/* ── Gold accent (wishlist / secondary) */
.course-sidebar-text-box .buy-btns .btn-add-wishlist {
    background-color: var(--gt-gold) !important;
    border-color: var(--gt-gold) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.course-sidebar-text-box .buy-btns .btn-add-wishlist:hover {
    background-color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
}

/* ── Outline / secondary */
.btn-outline-primary,
.edit-rating-modal .modal-footer button.previous,
.reviews .more-reviews-btn button {
    color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
    background: transparent !important;
    border-radius: 8px !important;
}
.btn-outline-primary:hover,
.edit-rating-modal .modal-footer button.previous:hover,
.reviews .more-reviews-btn button:hover {
    background-color: var(--gt-navy) !important;
    color: #fff !important;
}

/* ── Global border-radius on ALL .btn */
.btn { border-radius: 8px !important; }

/* ── Header sign-in/up box buttons */
.sign-in-box .btn-sign-up {
    background-color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.sign-in-box .btn-sign-up:hover { background-color: var(--gt-gold) !important; border-color: var(--gt-gold) !important; }
.sign-in-box .btn-sign-in { border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   3.  FORMS — focus rings, checkboxes
   ═══════════════════════════════════════════════════════════════════ */
.form-control:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--gt-gold) !important;
    box-shadow: 0 0 0 3px rgba(200,151,58,.20) !important;
    outline: none;
}

.form-control {
    border-radius: 8px !important;
    border-color: rgba(10,22,40,.18) !important;
}

.sign-in-modal .input-group .form-control { border-radius: 8px !important; }
.sign-in-modal .input-group .form-control:focus { border-color: var(--gt-gold) !important; box-shadow: 0 0 0 3px rgba(200,151,58,.20) !important; }

/* Checkboxes */
.sign-in-modal .custom-control-input:hover  ~ .custom-control-label::before,
.sign-in-modal .custom-control-input:focus  ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--gt-gold) !important; box-shadow: none !important;
}
.sign-in-modal .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--gt-navy) !important; border-color: var(--gt-navy) !important;
}

/* Search bar append button */
.my-courses-area .my-course-search-bar .input-group-append button:hover,
.my-courses-area .my-course-search-bar .input-group-append button:focus,
.my-courses-area .my-course-search-bar input:focus + .input-group-append button {
    background: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4.  HOMEPAGE BANNER SEARCH BUTTON
   ═══════════════════════════════════════════════════════════════════ */
.home-banner-wrap .btn {
    background: var(--gt-gold) !important;
    border-color: var(--gt-gold) !important;
    color: #fff !important;
    border-radius: 0 8px 8px 0 !important;
    font-weight: 700 !important;
}
.home-banner-wrap .btn:hover {
    background: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
}
.home-banner-wrap input[type="text"] {
    border-radius: 8px 0 0 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5.  HOME FACT AREA — was red gradient → navy
   ═══════════════════════════════════════════════════════════════════ */
.home-fact-area {
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-navy-lt) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6.  PAGE HEADER AREAS — course, mock test, category (all purple/red)
   ═══════════════════════════════════════════════════════════════════ */
section.course-header-area {
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-navy-lt) 100%) !important;
}
section.mock-test-header-area {
    background: linear-gradient(135deg, var(--gt-navy-md) 0%, var(--gt-navy-lt) 100%) !important;
}
section.category-header-area {
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-navy-lt) 100%) !important;
}
/* Page header (my courses, etc.) */
section.page-header-area {
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-navy-md) 100%) !important;
    color: #fff !important;
}
section.page-header-area * { color: #fff !important; }
section.page-header-area .breadcrumb .breadcrumb-item a,
section.page-header-area .breadcrumb .breadcrumb-item { color: rgba(255,255,255,.75) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   7.  COURSE CARDS — modern elevated cards
   ═══════════════════════════════════════════════════════════════════ */
.course-box {
    border-radius: var(--gt-radius) !important;
    overflow: hidden;
    background: var(--gt-white) !important;
    border: 1px solid var(--gt-border) !important;
}
.course-box:before {
    border-radius: var(--gt-radius) !important;
    box-shadow: var(--gt-shadow-sm) !important;
}
.course-box:after {
    border-radius: var(--gt-radius) !important;
    box-shadow: var(--gt-shadow-md) !important;
}
.course-box-wrap { margin-bottom: 24px; }

/* Card title → navy */
.course-box .course-details .title { color: var(--gt-navy) !important; }

/* Course thumbnail — rounded top */
.course-box .course-image img {
    border-radius: var(--gt-radius) var(--gt-radius) 0 0;
    width: 100%;
    object-fit: cover;
}

/* Price — navy instead of dark grey */
.course-box .course-details .price { color: var(--gt-navy) !important; font-weight: 700 !important; }

/* Progress bar → gold */
.course-box .course-details .completed-percent .progress-bar { background: var(--gt-gold) !important; }

/* Rating hover → gold */
.course-box .course-details .your-rating-box:hover .your-rating-text { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   8.  COURSE SIDEBAR (buy box)
   ═══════════════════════════════════════════════════════════════════ */
.course-sidebar {
    border-radius: var(--gt-radius) !important;
    box-shadow: var(--gt-shadow-md) !important;
    border: 1px solid var(--gt-border) !important;
}
.course-sidebar-text-box .buy-btns .btn {
    border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9.  COURSE POPOVER & CART BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.addedToCart, .addedToCart:hover {
    color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
}
.course-popover-content .popover-btns .wishlist-btn i {
    -webkit-text-stroke: 1px var(--gt-gold) !important;
}
.course-popover-content .popover-btns .wishlist-btn.active i,
.course-popover-content .popover-btns .wishlist-btn:hover i { color: var(--gt-gold) !important; }

/* ─ Cart dropdown CTA */
.cart-dropdown-btn,
.cart-btn { background-color: var(--gt-navy) !important; color: #fff !important; border-color: var(--gt-navy) !important; border-radius: 8px !important; }
.cart-dropdown-btn:hover, .cart-btn:hover { background-color: var(--gt-gold) !important; border-color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   10.  NAVIGATION & USER DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */
.user-dropdown-menu li a:hover { color: var(--gt-navy) !important; background: #f0f4ff !important; }

/* Notification dot */
.notification-list .notification .mark-as-read:not(.marked) {
    background: var(--gt-gold) !important;
    border-color: var(--gt-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11.  COURSE CURRICULUM ACCORDION
   ═══════════════════════════════════════════════════════════════════ */
.course-curriculum-accordion .lecture-group-title { border-radius: 6px !important; margin-top: 6px !important; }
.course-curriculum-accordion .lecture-group-title:before { color: var(--gt-navy) !important; }
.course-curriculum-accordion .lecture-list .lecture.has-preview { color: var(--gt-navy) !important; }
.course-curriculum-accordion .lecture-list .lecture.has-preview .lecture-title:hover { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   12.  VIEW MORE / LESS — teal → navy
   ═══════════════════════════════════════════════════════════════════ */
.view-more { color: var(--gt-navy) !important; }
.view-less  { color: var(--gt-navy) !important; }
.view-more:hover, .view-less:hover { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   13.  STUDENT FEEDBACK — rating bar & percentage link
   ═══════════════════════════════════════════════════════════════════ */
.student-feedback-box .individual-rating li > div:not(.progress) span:not(.rating) { color: var(--gt-navy) !important; }
.student-feedback-box .individual-rating ul li .progress-bar { background-color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   14.  MY COURSES SIDEBAR ACTIVE ITEM
   ═══════════════════════════════════════════════════════════════════ */
section.page-header-area.my-course-area ul li.active a { border-color: var(--gt-gold) !important; color: var(--gt-gold) !important; }
section.page-header-area.my-course-area ul li a:hover  { color: var(--gt-gold) !important; }
.category-filter-box a { color: var(--gt-navy) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   15.  SIGN-IN MODAL SUBMIT  (also covered in §2 but explicit)
   ═══════════════════════════════════════════════════════════════════ */
.sign-in-modal form button[type="submit"] { border-radius: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   16.  WHAT-YOU-GET CHECKLIST ICONS
   ═══════════════════════════════════════════════════════════════════ */
.what-you-get-box ul li:before,
.mock-what-you-get-box ul li:before { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   17.  COURSE BADGE — "BESTSELLER"
   ═══════════════════════════════════════════════════════════════════ */
.course-badge {
    background: var(--gt-gold) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}
.course-badge:after { background: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   18.  COURSE PREVIEW MODAL
   ═══════════════════════════════════════════════════════════════════ */
.course-preview-modal .modal-title span { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   19.  PROGRESS BARS (global)
   ═══════════════════════════════════════════════════════════════════ */
.progress-bar { background-color: var(--gt-navy) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   20.  BREADCRUMB
   ═══════════════════════════════════════════════════════════════════ */
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item { color: var(--gt-navy) !important; }
section.course-header-area .breadcrumb .breadcrumb-item a,
section.course-header-area .breadcrumb .breadcrumb-item,
section.mock-test-header-area .breadcrumb .breadcrumb-item a,
section.mock-test-header-area .breadcrumb .breadcrumb-item,
section.category-header-area .breadcrumb .breadcrumb-item a,
section.category-header-area .breadcrumb .breadcrumb-item { color: rgba(255,255,255,.75) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   21.  BOOTSTRAP TABS / PILLS
   ═══════════════════════════════════════════════════════════════════ */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    background-color: var(--gt-navy) !important;
    border-color: var(--gt-navy) !important;
    color: #fff !important;
    border-radius: 6px !important;
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--gt-navy) !important; }
.nav-tabs { border-bottom-color: var(--gt-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   22.  PAGINATION
   ═══════════════════════════════════════════════════════════════════ */
.page-item.active .page-link { background-color: var(--gt-navy) !important; border-color: var(--gt-navy) !important; }
.page-link { color: var(--gt-navy) !important; border-radius: 6px !important; }
.page-link:hover { color: var(--gt-white) !important; background-color: var(--gt-gold) !important; border-color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   23.  BOOTSTRAP CARDS (generic)
   ═══════════════════════════════════════════════════════════════════ */
.card {
    border-radius: var(--gt-radius) !important;
    border: 1px solid var(--gt-border) !important;
    box-shadow: var(--gt-shadow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   24.  WISHLIST / COMPARE HEART ICON
   ═══════════════════════════════════════════════════════════════════ */
.course-comparism-item .item-details .wishlist-btn button { color: var(--gt-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   25.  SECTION SEPARATOR / DIVIDERS
   ═══════════════════════════════════════════════════════════════════ */
hr { border-color: var(--gt-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   26.  CART / CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════════ */
.cart-item-price,
.cart-total-price { color: var(--gt-navy) !important; font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   27.  HOMEPAGE SECTION HEADINGS ("Popular Courses" etc.)
   ═══════════════════════════════════════════════════════════════════ */
.home-course-area .section-title,
.section-title-wrap h2,
.section-title-wrap .title,
.course-carousel-area h2,
.home-category-area h2,
.section-heading { color: var(--gt-navy) !important; }

/* Gold underline accent on section headings */
.section-title-wrap h2::after,
.home-course-area .section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--gt-gold);
    margin-top: 8px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   28.  CATEGORY FILTER SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.category-filter-box {
    background: var(--gt-white) !important;
    border-radius: var(--gt-radius) !important;
    border: 1px solid var(--gt-border) !important;
    box-shadow: var(--gt-shadow-sm) !important;
    padding: 20px !important;
}
.category-filter-box .filter-title { color: var(--gt-navy) !important; font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   29.  SCROLLBAR (webkit) — subtle branded styling
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--gt-navy); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gt-gold); }

/* ═══════════════════════════════════════════════════════════════════════
   30.  MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    section.course-header-area,
    section.mock-test-header-area,
    section.category-header-area { padding: 36px 0 !important; }

    .home-fact-area { padding: 20px 0 !important; }

    .course-sidebar-text-box .buy-btns .btn {
        font-size: 14px !important;
        padding: 12px 10px !important;
    }

    .card, .course-box { border-radius: 8px !important; }
}