/* ==========================================================================
   Xlearnic brand skin for the LMS frontend
   ==========================================================================

   The visitor lands on the Next.js site at www.xlearnic.com and crosses to this
   Laravel app for course details, checkout and the LMS. That hop should not look
   like a different product, so this file restates the Next.js design tokens
   (src/app/globals.css in xlearnic-nextjs) over the vendor theme.

   Loaded LAST in layouts/default.blade.php, and kept OUT of
   assets/frontend/default/ on purpose: a vendor drop overwrites that tree, and
   this file has to survive one. Nothing here edits vendor CSS, so removing the
   single <link> reverts the whole skin.

   Palette, from the brand sheet:
     #1677FF  blue   — the mark, gradients, decorative fills
     #0B5AD6  deep   — anything a reader reads: text, labels, fills under white
     #18CFF3  cyan   — innovation accent
     #14C8A3  teal   — growth accent
     #0B1736  navy   — headings, dark surfaces

   #1677FF measures 4.10:1 on white, so it is AA for LARGE text only and cannot
   carry a 14px button label. #0B5AD6 is 6.09:1 and does. That split is why two
   blues exist here rather than one.
   ========================================================================== */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --x-blue: #1677ff;
    --x-blue-light: #4a9bff;
    --x-blue-deep: #0b5ad6;
    --x-cyan: #18cff3;
    --x-teal: #14c8a3;
    --x-navy: #0b1736;
    --x-navy-light: #14275c;

    /* ---- Surfaces + text ------------------------------------------------ */
    --x-bg: hsl(215 25% 97%);
    --x-surface: #ffffff;
    --x-text: #525e78; /* 4.91:1 on the tinted panel */
    --x-heading: #0b1736;
    --x-border: hsl(215 22% 88%);
    --x-muted: hsl(215 22% 93%);

    /* ---- Gradients (same definitions as the Next.js tokens) ------------- */
    --x-gradient-cta: linear-gradient(135deg, var(--x-blue), var(--x-blue-deep));
    --x-gradient-mark: linear-gradient(135deg, var(--x-cyan), var(--x-teal));
    --x-gradient-navy: linear-gradient(135deg, var(--x-navy), var(--x-navy-light));
    --x-gradient-hero: linear-gradient(
        135deg,
        hsl(190 90% 52% / 0.11) 0%,
        hsl(214 100% 54% / 0.07) 55%,
        hsl(166 81% 43% / 0.09) 100%
    );

    /* ---- Elevation ------------------------------------------------------ */
    --x-shadow-card: 0 4px 24px -4px hsl(222 66% 13% / 0.1);
    --x-shadow-blue: 0 8px 32px -8px hsl(214 100% 54% / 0.34);
    --x-shadow-hover: 0 12px 40px -8px hsl(222 66% 13% / 0.16);

    /* A tint, not a fill: for bands that sit behind dark text (breadcrumbs).
       The vendor's own version was a 6%-alpha sweep, so a full-strength
       gradient there would read as a garish stripe. */
    /* A pale decorative band: for wide strips that sit BEHIND dark text
       (breadcrumb headers, profile banners). The vendor's versions were pale
       by design (#8ca3ff -> #d58dff), so a full-strength CTA gradient here
       reads as a garish stripe — a screenshot caught exactly that. */
    --x-band: linear-gradient(
        90deg,
        hsl(214 100% 54% / 0.22) 26%,
        hsl(190 90% 52% / 0.22) 93%
    );

    /* A pale surface tint, for panels the vendor washed in pale violet. */
    --x-tint: hsl(214 100% 54% / 0.05);

    --x-wash: linear-gradient(
        270deg,
        hsl(214 100% 54% / 0.07) 1.37%,
        hsl(190 90% 52% / 0.07) 86.05%
    );

    --x-radius: 12px;

    /* ---- Repoint the vendor's own variables ----------------------------
       style.css uses var(--color-1) in 74 places and var(--color-2) in many
       more, so redefining them here re-skins all of those at once. The
       hardcoded hexes further down are the ones that cannot be reached this
       way. */
    --color-1: var(--x-blue-deep);
    --color-2: var(--x-navy);
    --text-color: var(--x-text);
    --font-family: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
    --box-shadow: var(--x-shadow-hover);
    --box-shadow-2: var(--x-shadow-card);
}

/* ==========================================================================
   GENERATED SWEEP — every vendor rule carrying an off-brand purple/pink
   --------------------------------------------------------------------------
   Produced by walking assets/frontend/default/css/*.css and grouping each rule
   by WHICH property held the off-brand value, so a text colour is not turned
   into a background and a 6%-alpha wash is not turned into a solid stripe.
   Generated rather than hand-listed because a screenshot kept finding one more:
   the purple appears as #6651f5, #813af4, #754ffe, #c664ff, #c464fd, #d336e7
   and as bare rgb() triplets.

   This block sits BEFORE the hand-written sections below on purpose: it is the
   broad safety net, and the more considered rules later in this file win.
   ========================================================================== */

/* off-brand violet text — 16 rules */
.Userprofile .dropmenu-end a:hover,
.alert-purple,
.alert-purple a,
.btn-outline-purple-sm,
.btn-outline-purple-sm2,
.community-menu li.active a,
.dropdown-item:hover,
.form-checkbox-input:checked ~ .form-checkbox-label,
.icontext-link2:hover,
.icontext-link:hover,
.lms1-video-player .plyr--full-ui input[type=range],
.nav-pills .nav-link.tutor-tab-link.active,
.sub-header-left ul li a:hover,
.text-link:hover,
.upload-btn:hover,
.wish-card .heart {
    color: var(--x-blue-deep);
}

/* off-brand gradients (saturated fills) — 23 rules */
.bundle-container .bundle-content .bundle-button,
.c-card:hover .eBtn,
.course-bundle-item .bundle-details,
.course-bundle-item .bundle-details::before,
.course-bundle-item .buy-now,
.ebook-tab-btn.active,
.ebook-tab-btn.active::after,
.entry-pagination .pagination li.active a,
.entry-player .g-title,
.footer-search-group .submit,
.gSearch-show button,
.gradient,
.gradient-border,
.gradient-border-btn:hover,
.gradient-border2,
.modal-header,
.mybtn-play:hover,
.pr-wrap,
.ps-sidebar .f-socials li a:hover,
.ps-sidebar .learn-btn:hover,
.sidebar-cover,
.single-motion:hover,
.user-slider .owl-nav .owl-next {
    background-image: var(--x-gradient-cta);
}

/* pale decorative bands (stay pale) — 2 rules */
.breadcum-area,
.profile-banner-area {
    background-image: var(--x-band);
}

/* low-alpha washes (stay subtle) — 1 rules */
.lms1-breadcrumb-section {
    background-image: var(--x-wash);
}

/* pale violet tints — 5 rules */
.bg-color-ffeff8-f6f0f4,
.community-menu li.active a,
.dropdown-item:hover,
.single-details,
.tab-list ul {
    background-color: var(--x-tint);
}

/* off-brand violet fills — 40 rules */
.alert-purple,
.b-card .card-head span,
.bg-pink,
.blog-widget li:hover,
.btn-outline-purple-sm2:active,
.btn-outline-purple-sm2:hover,
.btn-outline-purple-sm:active,
.btn-outline-purple-sm:hover,
.btn-purple-md,
.btn-purple-md:active,
.btn-purple-md:hover,
.btn-purple-sm2,
.btn-purple-sm2:active,
.btn-purple-sm2:hover,
.btn-purple-sm3,
.btn-purple-sm3:active,
.btn-purple-sm3:hover,
.btn-submit-post,
.cart-top-number,
.create-post-btn,
.date-check-input:checked ~ .date-check-btn,
.fill-heart:hover,
.flat-picker-dropdown .flatpickr-day.endRange.nextMonthDay,
.form-checkbox-input:checked,
.ins-rights p,
.lms-btn-secondary:active,
.lms-btn-secondary:hover,
.lms-pagination-link:hover,
.lms-progress .progress-bar,
.lms-slider-range-wrapper .ui-widget-header,
.lms-sm-btn-outline-secondary:active,
.lms-sm-btn-outline-secondary:hover,
.lms1-sidebar-btn:active,
.lms1-sidebar-btn:hover,
.lms1-video-player .plyr--video .plyr__control:hover,
.sm-search-btn,
.sm-search-btn:hover,
.tutor-single-service:hover .lms-sm-btn-outline-secondary,
.tutor-single-service:hover .lms-sm-btn-outline-secondary:hover,
.tutor-tab-link.active::after {
    background-color: var(--x-blue-deep);
}

/* violet svg fills — 6 rules */
.Userprofile .dropmenu-end a:hover,
.btn-outline-purple-sm path,
.btn-outline-purple-sm2 path,
.flat-picker-dropdown .flatpickr-months .flatpickr-next-month:hover svg path,
.nav-pills .nav-link.tutor-tab-link.svg-fill.active path,
.svg-link:hover path {
    fill: var(--x-blue-deep);
}

/* violet svg strokes — 3 rules */
.Userprofile .dropmenu-end a.bootcamp-menu-icon:hover svg path,
.icontext-link2:hover path,
.nav-pills .nav-link.tutor-tab-link.active path {
    stroke: var(--x-blue-deep);
}

/* violet borders — 26 rules */
.alert-purple,
.btn-outline-purple-sm,
.btn-outline-purple-sm2,
.btn-outline-purple-sm2:active,
.btn-outline-purple-sm2:hover,
.btn-outline-purple-sm:active,
.btn-outline-purple-sm:hover,
.course-bundle-item .bundle-details,
.course-sideBar,
.date-picker-input:focus,
.date-picker-input:hover,
.flat-picker-dropdown .flatpickr-day.endRange.nextMonthDay,
.form-checkbox-input:checked,
.gSearch-show,
.lms-form-control:focus,
.lms-form-control:hover,
.lms-slider-range-wrapper .ui-widget-header,
.lms-sm-btn-outline-secondary:active,
.lms-sm-btn-outline-secondary:hover,
.lms1-sidebar-btn:active,
.lms1-sidebar-btn:hover,
.sm-search-input:focus,
.sm-search-input:has(~ .sm-search-btn:hover),
.sm-search-input:hover,
.tutor-single-service:hover .lms-sm-btn-outline-secondary,
.tutor-single-service:hover .lms-sm-btn-outline-secondary:hover {
    border-color: var(--x-blue-deep);
}

/* ==========================================================================
   Typography — Poppins for headings, Inter for body, matching next/font
   ========================================================================== */

body {
    font-family: "Inter", "Poppins", ui-sans-serif, system-ui, sans-serif;
    color: var(--x-text);
    background-color: var(--x-bg);
}

h1, h2, h3, h4, h5, h6,
.title, .title-1, .title-5, .entry-title h3 {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    color: var(--x-heading);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   .gradient is the vendor's primary CTA and shipped a blue -> purple sweep
   (#2f57ef -> #c664ff). Purple is not in this brand, so it becomes the CTA
   gradient: blue -> deep, which keeps white label text AA across the sweep.
   ========================================================================== */

.eBtn {
    border-radius: var(--x-radius);
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-position 0.5s ease;
}

.gradient,
.eBtn.gradient,
a.gradient,
button.gradient {
    background-image: var(--x-gradient-cta);
    background-size: 200% auto;
    color: #fff;
}

.gradient:hover,
.eBtn.gradient:hover,
a.gradient:hover,
button.gradient:hover {
    background-position: right center;
    box-shadow: var(--x-shadow-blue);
    color: #fff;
}

.btn-wrap .learn-btn,
.mybtn-play:hover,
.c-card .eBtn,
.c-card:hover .eBtn {
    background-color: var(--x-blue-deep);
    background-image: none;
    border-color: var(--x-blue-deep);
    color: #fff;
}

.ol-btn-primary,
.btn-primary {
    background-color: var(--x-blue-deep);
    border-color: var(--x-blue-deep);
}

.ol-btn-primary:hover,
.btn-primary:hover {
    background-color: var(--x-navy);
    border-color: var(--x-navy);
    box-shadow: var(--x-shadow-blue);
}

/* ==========================================================================
   Links, nav, active states
   ========================================================================== */

a {
    color: var(--x-blue-deep);
}

a:hover {
    color: var(--x-blue);
}

.sub-header-left ul li a:hover,
.Userprofile .dropmenu-end a:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--x-blue-deep);
}

.Userprofile .dropmenu-end a:hover svg path {
    fill: var(--x-blue-deep);
}

/* Search affordance in the header */
.gSearch-show,
.gSearch-show button {
    background-image: var(--x-gradient-cta);
    color: #fff;
}

/* ==========================================================================
   Pagination + carousel controls
   ========================================================================== */

.page-link:hover,
.page-item.active .page-link,
.entry-pagination .pagination li.active a,
.user-slider .owl-nav .owl-prev,
.user-slider .owl-nav .owl-next {
    background-image: var(--x-gradient-cta);
    background-color: var(--x-blue-deep);
    border-color: var(--x-blue-deep);
    color: #fff;
}

.owl-dots .owl-dot.active span,
.swiper-pagination-bullet-active {
    background-color: var(--x-blue-deep) !important;
}

/* ==========================================================================
   Cards + panels
   ========================================================================== */

.single-feature,
.c-card,
.b-card,
.single-opinion,
.ol-card {
    border-radius: var(--x-radius);
    border-color: var(--x-border);
    box-shadow: var(--x-shadow-card);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.single-feature:hover,
.c-card:hover,
.single-motion:hover {
    box-shadow: var(--x-shadow-hover);
    border-color: var(--x-blue-light);
    background-image: none;
    background-color: var(--x-surface);
}

/* .single-motion's vendor hover was a saturated gradient, so the vendor also turns
   its text, headings and icon strokes white — `.single-motion:hover span svg path,
   .single-motion:hover .g-title, .single-motion:hover p { color:#fff; stroke:#fff }`.
   The rule above keeps the card white on hover, which left that white text on a
   white card: the whole card emptied out when the pointer touched it. A rule that
   repaints a surface owns the text sitting on it. */
.single-motion:hover,
.single-motion:hover p {
    color: var(--x-text);
}

.single-motion:hover .g-title {
    color: var(--x-heading);
}

.single-motion:hover span svg path {
    stroke: var(--x-blue-deep);
}

.b-card .card-head span {
    background-image: var(--x-gradient-mark);
    color: var(--x-navy);
}

.gradient-border,
.gradient-border2,
.gradient-border-btn {
    border-image: var(--x-gradient-cta) 1;
}

.gradient-border-btn:hover {
    background-image: var(--x-gradient-cta);
    color: #fff;
}

/* ==========================================================================
   Ebook + course-bundle accents (vendor used the purple here)
   ========================================================================== */

.ebook-tab-btn:hover,
.ebook-tab-btn.active {
    color: var(--x-blue-deep);
    border-color: var(--x-blue-deep);
}

.ebook-tab-btn.active::after {
    background-color: var(--x-blue-deep);
    background-image: var(--x-gradient-cta);
}

.course-bundle-item .bundle-details,
.bundle-container .bundle-content .bundle-button {
    background-image: var(--x-gradient-cta);
    color: #fff;
}

/* ==========================================================================
   Dark sections — the vendor's navy blocks become the brand navy
   ========================================================================== */

footer,
.footer-area,
.dark-section {
    background-image: var(--x-gradient-navy);
    color: hsl(215 25% 92%);
}

footer a,
.footer-area a {
    color: hsl(215 25% 92%);
}

footer a:hover,
.footer-area a:hover {
    color: var(--x-cyan);
}

/* Hero wash, matching the Next.js hero */
.banner-area,
.hero-area {
    background-image: var(--x-gradient-hero);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-control,
.ol-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    border-radius: 10px;
    border-color: var(--x-border);
}

.form-control:focus,
.ol-form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--x-blue);
    box-shadow: 0 0 0 3px hsl(214 100% 54% / 0.15);
    outline: none;
}

/* ==========================================================================
   Badges + price tags
   ========================================================================== */

.badge-primary,
.course-price,
.price-tag {
    background-color: var(--x-blue-deep);
    color: #fff;
}

.badge-free,
.free-tag {
    background-color: var(--x-teal);
    color: var(--x-navy);
}

/* ==========================================================================
   The second palette — custom_style.css:197
   --------------------------------------------------------------------------
   custom_style.css declares its OWN :root with --skinColor1..6, and the
   permanent home templates (university, cooking, language, development…) draw
   from that set, not from --color-1. Overriding --color-1 alone left the active
   University homepage on the vendor's pink #ff2458 CTA, which is what a
   screenshot caught. Mapping both palettes means any template stays on-brand.
   ========================================================================== */

:root {
    --skinColor1: var(--x-teal);       /* was #13BE95 — growth accent */
    --skinColor2: var(--x-blue-deep);  /* was #5363D2 — readable primary */
    --skinColor3: #0e8f77;             /* was #00907f — deeper teal */
    --skinColor4: var(--x-cyan);       /* was #f95c16 — orange is off-brand */
    --skinColor5: var(--x-navy);       /* was #264871 */
    --skinColor6: var(--x-blue-deep);  /* was #ff2458 — the pink CTA */
}

/* The pink CTA. Selector read from custom_style.css rather than guessed: the
   button is .btn-danger-1, and its hover uses #ff2458bd with !important, so the
   override needs !important to win. */
.btn-danger-1 {
    background: var(--x-gradient-cta);
    background-size: 200% auto;
    color: #fff;
}

.btn-danger-1:hover {
    background: var(--x-blue-deep) !important;
    background-position: right center;
    box-shadow: var(--x-shadow-blue);
    color: #fff !important;
}

/* Other pink accents in the same sheet */
.text-danger-2,
.card-icon-text4 > span::before,
.lms-icon-text1 > span::before,
.link-btn-hover2:hover,
.lms-1-card:hover .link-btn-hover2 {
    color: var(--x-blue-deep);
}

.qnaaccordion-five .accordion-button:not(.collapsed),
.list-group-card-header {
    background-color: var(--x-blue-deep);
    color: #fff;
}

/* The video player's pink controls */
.lms-video .plyr__control--overlaid,
.lms-video .plyr--video .plyr__control:hover {
    background: var(--x-blue-deep);
}

.lms-video .plyr {
    --plyr-color-main: var(--x-blue-deep);
}

/* The University hero's dark wash is painted by a pseudo-element
   (.lms-banner-section4::after, background #121421), not by the section itself,
   so the section selector alone does nothing. Brand navy keeps the white hero
   text at the same contrast while reading as one product with the Next.js site. */
.lms-banner-section4::after {
    background: var(--x-navy);
}

/* ==========================================================================
   Course player + remaining purple gradients
   --------------------------------------------------------------------------
   These selectors hardcode the blue -> purple sweep and are not reachable
   through --color-1, so each is restated. The player ones matter most: that is
   the screen a paying student spends their time on.
   ========================================================================== */

.pr-wrap,
.entry-player .g-title,
.modal-header,
.ps-sidebar .learn-btn:hover,
.ps-sidebar .f-socials li a:hover {
    background-image: var(--x-gradient-cta);
    background-size: 200% auto;
    color: #fff;
}

.pr-wrap {
    box-shadow: var(--x-shadow-blue);
}

.ps-sidebar .learn-btn:hover,
.ps-sidebar .f-socials li a:hover {
    border-color: transparent;
    color: #fff;
}

/* Tag pill: vendor used the primary at 20% alpha (#2f57ef33) */
.dt_group a {
    background-color: hsl(214 100% 54% / 0.12);
    color: var(--x-navy);
}

.category.active a {
    color: var(--x-blue-deep);
}

/* ==========================================================================
   Focus visibility — the vendor theme removed it in places
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.eBtn:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--x-blue);
    outline-offset: 2px;
}