@charset "UTF-8";

/* ==========================================================================
   Maharah Training Center — Frontend Design System
   Brand palette sampled from the institutional logo:
     navy  #234763   sky #72B0DE   amber #F0B352
   RTL-first, light theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
    /* Brand — navy */
    --navy-50: #eef4f8;
    --navy-100: #d5e2ea;
    --navy-200: #a7c0d1;
    --navy-300: #7d9db4;
    --navy-400: #4f7793;
    --navy-500: #2d5878;
    --navy-600: #234763;
    --navy-700: #1c415e;
    --navy-800: #163348;
    --navy-900: #0f2433;

    /* Brand — sky */
    --sky-50: #f2f8fd;
    --sky-100: #e4f0fa;
    --sky-200: #cae3f4;
    --sky-300: #abd1ed;
    --sky-400: #8ec1e6;
    --sky-500: #72b0de;
    --sky-600: #5299cf;
    --sky-700: #3d84bb;

    /* Brand — amber */
    --amber-50: #fffaf1;
    --amber-100: #fef4e3;
    --amber-200: #fce7c4;
    --amber-300: #f9d69c;
    --amber-400: #f5c476;
    --amber-500: #f0b352;
    --amber-600: #dc9b38;
    --amber-700: #b87d21;

    /* Semantic roles */
    --brand: var(--navy-600);
    --brand-strong: var(--navy-700);
    --brand-soft: var(--navy-50);
    --accent: var(--amber-500);
    --accent-strong: var(--amber-600);
    --cool: var(--sky-500);

    --success: #1f8f5f;
    --success-bg: #e8f7ef;
    --success-border: #b8e3cd;
    --warning: #b8791a;
    --warning-bg: #fdf3e2;
    --warning-border: #f2d9a8;
    --danger: #c53f3e;
    --danger-bg: #fdeceb;
    --danger-border: #f3c4c2;
    --info: var(--sky-700);
    --info-bg: var(--sky-50);
    --info-border: var(--sky-200);

    /* Surfaces & text */
    --page-bg: #f4f8fb;
    --surface: #ffffff;
    --surface-2: #f7fafc;
    --surface-3: #eef4f8;
    --border: #e3eaf0;
    --border-strong: #cfdae3;

    --text: #17252f;
    --text-2: #4a5c6b;
    --text-muted: #75879a;
    --text-on-brand: #ffffff;

    /* Gradients */
    --grad-brand: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-800) 100%);
    --grad-brand-sky: linear-gradient(135deg, var(--navy-600) 0%, var(--sky-600) 100%);
    --grad-accent: linear-gradient(135deg, var(--amber-500) 0%, var(--amber-600) 100%);
    --grad-surface: linear-gradient(180deg, #ffffff 0%, var(--surface-2) 100%);

    /* Radii */
    --r-xs: 8px;
    --r-sm: 10px;
    --r: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-full: 999px;

    /* Elevation — navy-tinted so shadows feel part of the palette */
    --shadow-xs: 0 1px 2px rgba(15, 36, 51, .06);
    --shadow-sm: 0 2px 8px rgba(15, 36, 51, .06), 0 1px 2px rgba(15, 36, 51, .04);
    --shadow-md: 0 8px 24px rgba(15, 36, 51, .08), 0 2px 6px rgba(15, 36, 51, .04);
    --shadow-lg: 0 18px 48px rgba(15, 36, 51, .12), 0 4px 12px rgba(15, 36, 51, .05);
    --shadow-xl: 0 32px 80px rgba(15, 36, 51, .16);
    --shadow-brand: 0 12px 28px rgba(35, 71, 99, .28);
    --shadow-accent: 0 12px 28px rgba(220, 155, 56, .32);

    /* Spacing scale (rem so layout grows with the user's text size) */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;

    /* Layout */
    --container: 1200px;
    --container-narrow: 760px;
    --header-h: 76px;

    /* Type */
    --font: "IBM Plex Sans Arabic", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Motion — spring-like curves.
       --ease-out is critically damped (no overshoot): the default for UI.
       --ease-spring carries a little overshoot, reserved for momentum-driven
       or celebratory motion only. */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --dur-press: 120ms;
    --dur-1: 180ms;
    --dur-2: 280ms;
    --dur-3: 440ms;

    /* Translucent chrome */
    --glass: rgba(255, 255, 255, .72);
    --glass-strong: rgba(255, 255, 255, .86);
    --glass-blur: saturate(180%) blur(20px);
    --scrim: rgba(15, 36, 51, .55);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--text);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--navy-600);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out);
}

a:hover {
    color: var(--sky-700);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 1em;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--sp-6) 0;
}

::selection {
    background: var(--sky-200);
    color: var(--navy-900);
}

/* Visible, branded focus ring — keyboard users get a clear anchor. */
:focus-visible {
    outline: 3px solid var(--sky-400);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. Typography
   Tracking is size-specific: large text gets negative tracking, body sits at
   0, small text opens up slightly. Leading tightens as size grows.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .6em;
    color: var(--navy-800);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 {
    font-size: clamp(1.9rem, 4.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.022em;
}

h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -.018em;
}

h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    line-height: 1.28;
    letter-spacing: -.012em;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.4;
    letter-spacing: -.006em;
}

h5,
h6 {
    font-size: 1rem;
    letter-spacing: 0;
}

small,
.small {
    font-size: .8125rem;
    letter-spacing: .01em;
    line-height: 1.7;
}

strong,
b {
    font-weight: 700;
}

/* Section heading with a short brand rule underneath. */
.section-title {
    position: relative;
    margin: 0 0 var(--sp-6);
    padding-bottom: var(--sp-3);
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -.018em;
    font-weight: 800;
    color: var(--navy-800);
    text-align: center;
}

.section-title span {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    margin: 0 auto;
    width: 68px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--grad-accent);
}

.main-title,
.primary-title,
.page-title {
    margin: 0 0 var(--sp-5);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--navy-800);
}

.page-title {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
}

.main-title {
    text-align: center;
}

.title,
.filter-title,
.footer-title,
.question-title,
.label-title {
    font-weight: 700;
    color: var(--navy-800);
    letter-spacing: -.008em;
}

.section-subtitle,
.page-subtitle {
    max-width: 68ch;
    margin: calc(var(--sp-4) * -1) auto var(--sp-6);
    color: var(--text-2);
    text-align: center;
    line-height: 1.85;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.container.narrow,
.container-narrow {
    max-width: var(--container-narrow);
}

/* Card-like content surface used by most inner pages. */
.box,
.new-box,
.page-content {
    position: relative;
    margin-block: var(--sp-6);
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.box > :first-child,
.new-box > :first-child,
.page-content > :first-child {
    margin-top: 0;
}

.box > :last-child,
.new-box > :last-child,
.page-content > :last-child {
    margin-bottom: 0;
}

.inner {
    width: 100%;
}

.main {
    display: block;
    min-height: 40vh;
}

.com-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

/* Legacy vertical-centering wrapper (paired with .table-cell). Kept as a real
   table so existing full-bleed banners keep centering correctly. */
.table {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.table-cell {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

/* Real data tables (opt-in via the element selector so the wrapper above is
   unaffected). */
table {
    width: 100%;
    border-collapse: collapse;
}

table.table,
table.courses-table,
table.students-table {
    display: table;
    height: auto;
    min-height: 0;
    background: var(--surface);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

table th,
table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: right;
    border-bottom: 1px solid var(--border);
}

table thead th {
    background: var(--surface-3);
    color: var(--navy-800);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

table tbody tr:last-child td {
    border-bottom: 0;
}

table tbody tr {
    transition: background var(--dur-1) var(--ease-out);
}

table tbody tr:hover {
    background: var(--sky-50);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r);
}

/* Div-based grid "tables" used by the profile accordions. */
.table-grid .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-bottom: 0;
    background: var(--surface);
}

.table-grid .row:first-child {
    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
}

.table-grid .row:last-child {
    border-bottom: 1px solid var(--border);
    border-end-start-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
}

.table-grid .row:nth-child(2n) {
    background: var(--surface-2);
}

.flex-apart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.fill-flex {
    flex: 1 1 auto;
    min-width: 0;
}

.seperator,
.divider {
    height: 1px;
    margin-block: var(--sp-5);
    background: var(--border);
    border: 0;
}

.double-line-bottom-theme-colored-2 {
    position: relative;
    padding-bottom: var(--sp-3);
}

.double-line-bottom-theme-colored-2::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    border-radius: var(--r-full);
    background: var(--grad-accent);
}

/* --------------------------------------------------------------------------
   5. Buttons & actionable links
   Feedback is instant on press (scale down on :active), never deferred to the
   click handler.
   -------------------------------------------------------------------------- */

.primary-button,
.register-button,
.purchase-button,
.search-button,
.demo-button,
.load-more,
.load-more-recipes,
button.btn-custom {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .85rem 1.85rem;
    border: 0;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: var(--text-on-brand);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition:
        transform var(--dur-press) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        filter var(--dur-2) var(--ease-out);
}

.primary-button:hover,
.register-button:hover,
.purchase-button:hover,
.search-button:hover,
.load-more:hover,
.load-more-recipes:hover {
    color: var(--text-on-brand);
    filter: brightness(1.08);
    box-shadow: 0 16px 34px rgba(35, 71, 99, .34);
    transform: translateY(-2px);
}

.primary-button:active,
.register-button:active,
.purchase-button:active,
.search-button:active,
.load-more:active,
.load-more-recipes:active {
    transform: translateY(0) scale(.97);
    box-shadow: var(--shadow-sm);
}

.primary-button[disabled],
.primary-button.disabled,
.purchase-button[disabled] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* The commercial call to action — amber, so "register / pay" is the single
   most obvious thing on the page. */
.register-button,
.purchase-button {
    background: var(--grad-accent);
    color: var(--navy-900);
    box-shadow: var(--shadow-accent);
}

.register-button:hover,
.purchase-button:hover {
    color: var(--navy-900);
    box-shadow: 0 16px 34px rgba(220, 155, 56, .4);
}

.primary-button.secondary,
.primary-button.ghost {
    background: var(--surface);
    color: var(--navy-700);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xs);
}

.primary-button.secondary:hover,
.primary-button.ghost:hover {
    background: var(--sky-50);
    border-color: var(--sky-300);
    filter: none;
}

.block-center {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-block: var(--sp-6);
}

.block-link {
    display: block;
}

.primary-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--navy-600);
    font-weight: 700;
}

.primary-link:hover {
    color: var(--sky-700);
}

.load-more,
.load-more-recipes {
    margin-inline: auto;
    margin-block: var(--sp-5);
}

/* Underline-grow link effect used in the header nav. */
.effect-5 {
    position: relative;
}

.effect-5 > span::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -6px;
    height: 2px;
    border-radius: var(--r-full);
    background: var(--amber-500);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-2) var(--ease-out);
}

.effect-5:hover > span::after,
.effect-5.active > span::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   6. Site header
   A translucent floating layer: content scrolls underneath rather than being
   pushed by an opaque bar.
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: var(--header-h);
    padding: var(--sp-3) clamp(1rem, 3vw, 2rem);
    background: var(--glass);
    /* Do not put backdrop-filter on this element. It creates a containing
       block for position:fixed descendants, which traps the mobile drawer
       inside the header bar instead of overlaying the page. */
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 1px 0 rgba(15, 36, 51, .06), 0 8px 24px rgba(15, 36, 51, .05);
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

/* Soft scroll edge where content meets the floating chrome, instead of a hard
   1px divider. */
.site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(15, 36, 51, .05), transparent);
}

.site-logo-container,
.open-mobile-menu-container {
    position: relative;
    z-index: 1;
}

.site-logo-container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.site-logo-container a {
    display: block;
    transition: transform var(--dur-2) var(--ease-out);
}

.site-logo-container a:active {
    transform: scale(.97);
}

.site-logo {
    width: auto;
    height: clamp(44px, 6vw, 56px);
    object-fit: contain;
}

/* --- Navigation --- */

.header-nav,
.header-menu {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}

.header-nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(.35rem, 1.4vw, 1.1rem);
    flex-wrap: wrap;
}

.header-nav > ul > li {
    display: flex;
    align-items: center;
}

.header-nav > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .55rem .7rem;
    border-radius: var(--r-sm);
    color: var(--navy-700);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.004em;
    white-space: nowrap;
    transition:
        color var(--dur-1) var(--ease-out),
        background var(--dur-1) var(--ease-out),
        transform var(--dur-press) var(--ease-out);
}

.header-nav > ul > li > a:hover {
    color: var(--navy-900);
    background: rgba(114, 176, 222, .16);
}

.header-nav > ul > li > a:active {
    transform: scale(.97);
}

/* The register CTA inside the nav stays a button, but sized for the bar.
   The colour must be restated: the nav link rule above is more specific than
   .primary-button, so it would otherwise win and render navy on navy. */
.header-nav > ul > li > a.primary-button {
    padding: .6rem 1.35rem;
    color: var(--text-on-brand);
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
}

.header-nav > ul > li > a.primary-button:hover {
    background: var(--grad-brand);
    color: var(--text-on-brand);
    box-shadow: var(--shadow-brand);
}

/* Logged-in student chip showing their loyalty tier. */
.menu-user-link > a {
    gap: var(--sp-2);
    padding-inline-start: .4rem !important;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.level-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding-inline: .5rem;
    border-radius: var(--r-full);
    background: var(--navy-600);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
}

.level-label {
    font-size: .8rem;
    color: var(--text-muted);
}

/* --- Mobile menu triggers --- */

.open-mobile-menu-container {
    display: none;
    flex: 0 0 auto;
}

.open-mobile-menu,
.close-mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    color: var(--navy-700);
    font-size: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--dur-press) var(--ease-out),
        background var(--dur-1) var(--ease-out);
}

.open-mobile-menu:active,
.close-mobile-menu:active {
    transform: scale(.94);
    background: var(--sky-50);
}

.close-mobile-menu {
    display: none;
}

.mobile-nav-backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .open-mobile-menu-container {
        display: flex;
        position: relative;
        z-index: 1;
    }

    .close-mobile-menu {
        display: inline-flex;
        position: absolute;
        top: var(--sp-4);
        inset-inline-start: var(--sp-4);
    }

    .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10020;
        background: var(--scrim);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity var(--dur-3) var(--ease-out),
            visibility var(--dur-3) var(--ease-out);
    }

    .mobile-nav-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.nav-open {
        overflow: hidden;
    }

    /* Off-canvas drawer. Positioned against the viewport (not the header),
       so it paints over page content. It enters from the inline-start edge. */
    .header-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 10050;
        width: min(86vw, 340px);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: calc(var(--sp-9) + var(--sp-2)) var(--sp-5) var(--sp-6);
        background: var(--glass-strong);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow-xl);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Anchored at the inline-start edge, which is the right edge in RTL, so
           it hides by moving right. translateX is physical, not logical. */
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition:
            transform var(--dur-3) var(--ease-out),
            visibility var(--dur-3) var(--ease-out);
    }

    .header-nav.opened {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    .header-nav > ul {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--sp-2);
    }

    .header-nav > ul > li > a {
        width: 100%;
        padding: .8rem 1rem;
        font-size: 1.02rem;
    }

    .header-nav > ul > li > a.primary-button {
        justify-content: center;
        margin-top: var(--sp-2);
        padding: .85rem 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   7. Hero / page banners
   -------------------------------------------------------------------------- */

.search-container,
.course-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(240px, 36vw, 400px);
    padding: var(--sp-8) clamp(1rem, 4vw, 3rem);
    background-color: var(--navy-700);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

/* Legible scrim over arbitrary course artwork. */
.search-container::before,
.course-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top, rgba(15, 36, 51, .92) 0%, rgba(15, 36, 51, .55) 55%, rgba(15, 36, 51, .35) 100%);
}

.search-container .table,
.course-banner .table {
    position: relative;
    z-index: 2;
}

.course-banner .course-title,
.search-container .course-title {
    max-width: 26ch;
    margin: 0;
    color: #fff;
    font-size: clamp(1.6rem, 4.4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -.022em;
    font-weight: 800;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

.course-category-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--sp-3);
    padding: .35rem .85rem;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
}

.course-category-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .26);
}

.head,
.head_bg,
.registery-header {
    position: relative;
    padding: var(--sp-7) clamp(1rem, 4vw, 2.5rem);
    background: var(--grad-brand);
    color: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
}

.head h1,
.head h2,
.head_bg h1,
.head_bg h2,
.registery-header h1,
.registery-header h2 {
    color: #fff;
}

.main-image {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

/* Home statistics strip. */
.statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
}

.statistic-item {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.statistic-item .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-3);
    border-radius: var(--r-full);
    background: var(--sky-100);
}

.statistic-item .img-wrapper img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.statistic-item h3 {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -.02em;
    color: var(--navy-800);
}

.statistic-item h4 {
    margin: 0;
    color: var(--text-2);
    font-size: .95rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Cards & grids (courses, packages, categories, stores, books…)
   -------------------------------------------------------------------------- */

.courses-container,
.meals-grid,
.meals-list,
.chefs-grid,
.stores-grid,
.colleges-list,
.specialites-list,
.levels-list,
.labels-con {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.75rem);
    margin-block: var(--sp-5);
}

.courses-container {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.course-item,
.box-item,
.category-item,
.book-item,
.store-item,
.specialty-item,
.college-item,
.chef-item,
.normal-meal-list-item,
.normal-meal,
.title-item,
.credit-item,
.select-course-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out);
}

.course-item {
    height: 100%;
}

.course-item:hover,
.box-item:hover,
.category-item:hover,
.book-item:hover,
.store-item:hover,
.specialty-item:hover,
.college-item:hover,
.chef-item:hover,
.normal-meal-list-item:hover {
    transform: translateY(-4px);
    border-color: var(--sky-300);
    box-shadow: var(--shadow-lg);
}

.course-item:active,
.box-item:active,
.category-item:active {
    transform: translateY(-1px) scale(.994);
}

/* --- Card media --- */

.course-img-container {
    position: relative;
    overflow: hidden;
    background: var(--surface-3);
    aspect-ratio: 16 / 10;
}

.course-img-container > a {
    display: block;
    width: 100%;
    height: 100%;
}

.course-img,
.normal-meal-list-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease-out);
}

.course-item:hover .course-img,
.normal-meal-list-item:hover .normal-meal-list-item-image {
    transform: scale(1.05);
}

/* Price pill floating over the artwork (legacy / other listings). */
.course-price {
    position: absolute;
    inset-block-end: var(--sp-3);
    inset-inline-end: var(--sp-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .45rem .9rem;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    color: var(--navy-800);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.004em;
    line-height: 1.3;
    box-shadow: var(--shadow-sm);
}

/* The struck-through "was" price sits quieter than the live price. */
.course-price-was {
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: line-through;
    font-size: .78rem;
}

/* --- Card body --- */

.course-info {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex: 1 1 auto;
    padding: 1.05rem 1.1rem 1.15rem;
}

.course-info > a {
    display: block;
}

.course-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.course-type-badge {
    display: inline-flex;
    align-items: center;
    max-width: 58%;
    padding: .32rem .7rem;
    border-radius: 8px;
    background: #eee6fb;
    color: #5a3a8c;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-pay-logos {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.course-pay-logos img {
    display: block;
    height: 22px;
    width: auto;
    max-width: 58px;
    object-fit: contain;
}

.course-title,
.meal-title,
.book-name,
.package-course-name {
    margin: 0;
    color: var(--navy-800);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.008em;
}

.course-item .course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--sky-700);
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.65;
}

.course-excerpt {
    margin: 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.75;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
    padding-top: .15rem;
}

.course-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    color: var(--sky-700);
    line-height: 1;
}

.course-card-amount {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.course-card-price-label {
    font-size: .92rem;
    font-weight: 700;
}

.course-card-currency {
    display: inline-flex;
    width: 1.05rem;
    height: 1.2rem;
    color: inherit;
}

.course-card-currency svg {
    width: 100%;
    height: 100%;
}

.course-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 40px;
    padding: .55rem 1.15rem;
    border-radius: 10px;
    background: var(--navy-600);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--dur-1) var(--ease-out),
        transform var(--dur-press) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}

.course-card-cta:hover {
    background: var(--navy-700);
    color: #fff;
    box-shadow: var(--shadow-brand);
}

.course-card-cta:active {
    transform: scale(.97);
}

.course-info > a:hover .course-title,
.meal-title a:hover {
    color: var(--navy-600);
}

.meal-title,
.book-name {
    padding: var(--sp-4);
}

.meal-title a {
    color: inherit;
}

/* Simple text-only cards (categories, colleges, specialties). */
.chef-item,
.category-item,
.college-item,
.specialty-item {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
}

.chef-item h2,
.category-item h2,
.college-item h2,
.specialty-item h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    letter-spacing: -.008em;
}

.chef-item a,
.category-item a,
.college-item a,
.specialty-item a {
    color: var(--navy-700);
}

.chef-item a:hover,
.category-item a:hover {
    color: var(--sky-700);
}

/* --------------------------------------------------------------------------
   9. Course / package detail page
   -------------------------------------------------------------------------- */

.course-page,
.register-page,
.perfume-page,
.colleges-page,
.jobs-page,
.error-page,
.check-certificate-page,
.winner-page {
    display: block;
}

.package-info-container {
    display: grid;
    gap: var(--sp-5);
}

/* A labelled fact row: label above, value below, on a soft surface. */
.course-meta-item {
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: var(--sp-4);
}

.course-meta-item h4 {
    margin: 0 0 var(--sp-2);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.course-meta-item > p,
.course-description {
    margin: 0;
    color: var(--text);
    line-height: 1.9;
    overflow-wrap: break-word;
}

.course-description a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Price emphasis on the detail page. */
.course-meta-item .price,
.price {
    color: var(--navy-800);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.price.has-balance {
    color: var(--text-muted);
    font-size: 1.1rem;
    text-decoration: line-through;
    font-weight: 600;
}

.balance {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: var(--sp-2);
    padding: .3rem .8rem;
    border-radius: var(--r-full);
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.004em;
}

.currency {
    font-size: .85em;
    font-weight: 600;
    color: var(--text-2);
}

.package-metas {
    display: grid;
    gap: var(--sp-3);
}

.package-course-name {
    position: relative;
    padding-inline-start: 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
}

.package-course-name::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .85em;
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--amber-500);
}

/* Sticky action bar so the CTA is always reachable on long detail pages. */
.course-page .register-button,
.package-info-container .register-button {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    margin-block: var(--sp-5) 0;
    padding-block: 1.05rem;
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="url"],
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: .8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: var(--shadow-xs) inset;
    transition:
        border-color var(--dur-1) var(--ease-out),
        box-shadow var(--dur-1) var(--ease-out),
        background var(--dur-1) var(--ease-out);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--navy-300);
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--sky-500);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(114, 176, 222, .25);
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
    background: var(--surface-3);
    color: var(--text-muted);
    cursor: not-allowed;
}

textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.85;
}

/* Native select needs its own chevron once appearance is stripped. */
select,
.modren-select select {
    padding-inline-start: 2.5rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5c6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 17px;
    cursor: pointer;
}

label {
    display: inline-block;
    margin-bottom: var(--sp-2);
    color: var(--navy-800);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.004em;
}

.form-group,
.input-item,
.option_item {
    margin-bottom: var(--sp-4);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}

.form-grid-item {
    display: flex;
    flex-direction: column;
}

/* Inputs sitting inside a labelled meta row on register pages. */
.course-meta-item input,
.course-meta-item select,
.course-meta-item textarea {
    width: 100% !important;
}

.id-number-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.id-number-group input {
    flex: 1 1 200px;
}

/* --- Checkboxes & radios --- */

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0 0 0 .55rem;
    vertical-align: -4px;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    cursor: pointer;
    transition:
        background var(--dur-1) var(--ease-out),
        border-color var(--dur-1) var(--ease-out),
        transform var(--dur-press) var(--ease-out);
}

input[type="checkbox"] {
    border-radius: 6px;
}

input[type="radio"] {
    border-radius: var(--r-full);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--sky-500);
}

input[type="checkbox"]:active,
input[type="radio"]:active {
    transform: scale(.9);
}

input[type="checkbox"]:checked {
    background: var(--navy-600) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
    border-color: var(--navy-600);
}

input[type="radio"]:checked {
    border-color: var(--navy-600);
    border-width: 7px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.7;
    cursor: pointer;
}

.custom-radio,
.radio-btn,
.white-radio,
.white-checkbox,
.label-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition:
        border-color var(--dur-1) var(--ease-out),
        background var(--dur-1) var(--ease-out);
}

.custom-radio:hover,
.radio-btn:hover,
.label-item:hover {
    border-color: var(--sky-400);
    background: var(--sky-50);
}

.white-radio,
.white-checkbox {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.white-radio label,
.white-checkbox label {
    color: #fff;
}

/* Selectable course row on the checkout page. */
.select-course-item {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    cursor: pointer;
}

.select-course-item:hover {
    border-color: var(--sky-400);
}

/* --- Search form --- */

.search-form-container {
    margin-block: var(--sp-5);
}

.search-form {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-md);
}

.search-form input[type="search"],
.search-form input[type="text"],
.search-input,
.search-word {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: var(--sp-4);
}

.search-form input:focus {
    box-shadow: none;
}

.search-form .search-button {
    flex: 0 0 auto;
    padding: .7rem 1.5rem;
}

.search-form .search-button img.search-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.search-heading {
    text-align: center;
}

/* --------------------------------------------------------------------------
   11. Feedback: status, completion, warning, error
   -------------------------------------------------------------------------- */

.error-message,
.success-message,
.info-message,
.wraning-message,
.warning,
.response-message,
.message-content,
.alert {
    position: relative;
    margin-block: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    padding-inline-start: 3.25rem;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--text);
    font-size: .97rem;
    font-weight: 600;
    line-height: 1.8;
}

/* Leading status dot, so the kind of feedback reads before the text does. */
.error-message::before,
.success-message::before,
.info-message::before,
.wraning-message::before,
.warning::before,
.alert::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--sp-4);
    top: 1.45em;
    width: 12px;
    height: 12px;
    border-radius: var(--r-full);
    background: currentColor;
}

/* Empty message containers must not leave a floating box behind. */
.error-message:empty,
.success-message:empty,
.info-message:empty,
.wraning-message:empty,
.response-message:empty,
.login-response-message:empty {
    display: none;
}

.error-message,
.alert-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}

.success-message,
.alert-success {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.wraning-message,
.warning,
.alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}

.info-message,
.alert-info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info);
}

/* The register/checkout pages build a class from a PHP variable, so bare
   "-message" nodes can render with no state. Keep them neutral. */
[class="-message"],
[class=" -message"] {
    display: none;
}

.response {
    margin-block: var(--sp-4);
}

.register-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: var(--r-full);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.004em;
    background: var(--surface-3);
    color: var(--text-2);
}

.register-status.CONFIRMED,
.register-status.avaliable {
    background: var(--success-bg);
    color: var(--success);
}

.register-status.REJECTED {
    background: var(--danger-bg);
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   12. Modals (custombox-driven)
   -------------------------------------------------------------------------- */

/* Hidden until custombox lifts it into an overlay. */
.modal-content {
    display: none;
    position: relative;
    width: min(94vw, 460px);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.modal-content .table,
.modal-content .table-cell {
    display: block;
    height: auto;
}

.modal-content .main-title {
    margin-bottom: var(--sp-5);
}

.modal-content form > input,
.modal-content form > select {
    margin-bottom: var(--sp-3);
}

.modal-content .primary-button {
    width: 100%;
    margin-top: var(--sp-2);
}

.close-modal {
    position: absolute;
    top: var(--sp-4);
    inset-inline-start: var(--sp-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: 1rem;
    transition:
        transform var(--dur-2) var(--ease-out),
        background var(--dur-1) var(--ease-out);
}

.close-modal:hover {
    background: var(--sky-100);
    color: var(--navy-800);
    transform: rotate(90deg);
}

#login-page #login-form {
    width: min(94vw, 460px);
    margin: var(--sp-8) auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}

#login-page #login-form .table,
#login-page #login-form .table-cell {
    display: block;
    height: auto;
}

#login-page form > * {
    margin-bottom: var(--sp-3);
}

#login-page form > a {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
}

#login-page .primary-button {
    width: 100%;
}

#login-page form > span {
    display: block;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    color: var(--text-2);
    font-size: .93rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   13. Loading states
   -------------------------------------------------------------------------- */

.loading-wrapper {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    opacity: 1;
    transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out);
}

.loading-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-wrapper .table,
.loading-wrapper .table-cell {
    display: block;
    height: auto;
}

/* Folding-cube spinner, recoloured to the brand. */
.sk-folding-cube {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    position: relative;
    float: left;
    width: 50%;
    height: 50%;
    transform: scale(1.1);
}

.sk-folding-cube .sk-cube::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--navy-600);
    border-radius: 3px;
    transform-origin: 100% 100%;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
}

.sk-folding-cube .sk-cube2 {
    transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
    transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
    transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2::before {
    animation-delay: .3s;
    background: var(--sky-500);
}

.sk-folding-cube .sk-cube3::before {
    animation-delay: .6s;
    background: var(--amber-500);
}

.sk-folding-cube .sk-cube4::before {
    animation-delay: .9s;
    background: var(--sky-600);
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%, 75% {
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%, 100% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/* Three-dot bounce spinner. */
.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: var(--sp-4) auto;
}

.spinner > div {
    width: 12px;
    height: 12px;
    border-radius: var(--r-full);
    background: var(--navy-600);
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    animation-delay: -.32s;
    background: var(--sky-500);
}

.spinner .bounce2 {
    animation-delay: -.16s;
    background: var(--amber-500);
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(.5);
        opacity: .5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.load-more-recipes-snipper,
.loading_dialog {
    display: none;
}

.load-more-recipes-snipper.shown,
.loading_dialog.shown {
    display: block;
}

/* Ring spinner. */
.loader {
    width: 34px;
    height: 34px;
    margin: var(--sp-4) auto;
    border: 3px solid var(--sky-200);
    border-top-color: var(--navy-600);
    border-radius: var(--r-full);
    animation: spin 900ms linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.progress-wrapper {
    position: relative;
    height: 10px;
    margin-block: var(--sp-3);
    background: var(--surface-3);
    border-radius: var(--r-full);
    overflow: hidden;
}

.progress-bar,
.progress-wrapper .bar {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--grad-brand-sky);
    transition: width var(--dur-3) var(--ease-out);
}

.perc {
    font-size: .85rem;
    font-weight: 700;
    color: var(--navy-700);
}

/* --------------------------------------------------------------------------
   14. Account: profile, notifications, registrations, accordions
   -------------------------------------------------------------------------- */

.according-container {
    display: grid;
    gap: var(--sp-3);
    margin-block: var(--sp-5);
}

.according-titles,
.single-according-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--navy-800);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition:
        background var(--dur-1) var(--ease-out),
        border-color var(--dur-1) var(--ease-out),
        transform var(--dur-press) var(--ease-out);
}

.according-titles:hover,
.single-according-title:hover {
    background: var(--sky-50);
    border-color: var(--sky-300);
}

.according-titles:active,
.single-according-title:active {
    transform: scale(.995);
}

.according-titles.active,
.single-according-title.active {
    background: var(--brand-soft);
    border-color: var(--sky-300);
    color: var(--navy-800);
}

.according-content,
.signle-according-content {
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-end-start-radius: var(--r);
    border-end-end-radius: var(--r);
}

.notification-item,
.reigstery-item,
.credit-item,
.book-item.list,
.used-reward {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--sky-500);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
}

.notification-item.active {
    border-inline-start-color: var(--amber-500);
    background: var(--amber-50);
}

.notification-content,
.message-content {
    color: var(--text-2);
    line-height: 1.85;
}

.credit-item {
    border-inline-start-color: var(--success);
}

.used-reward {
    border-inline-start-color: var(--border-strong);
    opacity: .68;
}

.registery-header {
    margin-bottom: var(--sp-5);
}

.student-info-item,
.register-info-item,
.course-info-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-block: var(--sp-2);
    border-bottom: 1px dashed var(--border);
}

.student-info-item:last-child,
.register-info-item:last-child {
    border-bottom: 0;
}

.bank-info,
.resend-request-container,
.code-container,
.qr-code-container {
    padding: var(--sp-5);
    margin-block: var(--sp-4);
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r);
    text-align: center;
}

.code-container {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--navy-800);
    background: var(--brand-soft);
}

.qr-code-container img,
.temp-qr-image {
    margin-inline: auto;
    border-radius: var(--r-sm);
    background: #fff;
    padding: var(--sp-2);
    box-shadow: var(--shadow-sm);
}

.student-card-image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.student-card-image {
    display: block;
    width: 100%;
}

.student-card-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 36, 51, .45);
    color: #fff;
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out);
}

.student-card-image-container:hover .student-card-image-overlay {
    opacity: 1;
}

/* Loyalty tiers. */
.levels-list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.levels-list > * {
    padding: var(--sp-5);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

/* Countdown timer. */
.timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-block: var(--sp-5);
}

.timer-container > * {
    min-width: 74px;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--navy-800);
    box-shadow: var(--shadow-xs);
}

.seconds_text {
    display: none;
}

.seconds_text.show-second {
    display: inline;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: var(--sp-9);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) var(--sp-6);
    background: var(--grad-brand);
    color: rgba(255, 255, 255, .82);
}

.site-footer .footer-title {
    position: relative;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.008em;
}

.site-footer .footer-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: var(--r-full);
    background: var(--amber-500);
}

.footer-about,
.footer-links,
.footer-social {
    min-width: 0;
}

.footer-about p {
    max-width: 48ch;
}

.footer-social .payments-container {
    margin-bottom: var(--sp-3);
}

.site-footer p {
    color: rgba(255, 255, 255, .78);
    line-height: 1.95;
    font-size: .95rem;
}

.footer-links ul {
    display: grid;
    gap: var(--sp-2);
}

.footer-links a {
    display: inline-block;
    padding-block: .15rem;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.footer-links a:hover {
    color: var(--amber-400);
    transform: translateX(-4px);
}

.social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-inline-end: var(--sp-2);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition:
        background var(--dur-1) var(--ease-out),
        transform var(--dur-press) var(--ease-out);
}

.social-circle:hover {
    background: var(--amber-500);
    color: var(--navy-900);
}

.social-circle:active {
    transform: scale(.93);
}

button.social-circle {
    border: 0;
    cursor: pointer;
}

.payments-container {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.payments-img {
    height: 30px;
    width: auto;
    padding: .3rem .5rem;
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--shadow-xs);
}

.copyright {
    grid-column: 1 / -1;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   16. Long-form page content (CMS pages)
   -------------------------------------------------------------------------- */

.single-page-content,
.page-content .single-page-content {
    color: var(--text);
    line-height: 2;
}

.single-page-content h2,
.single-page-content h3,
.single-page-content h4 {
    margin-top: var(--sp-6);
}

.single-page-content img {
    margin-block: var(--sp-4);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}

.single-page-content ul,
.single-page-content ol {
    margin-block: var(--sp-4);
    padding-inline-start: var(--sp-5);
}

.single-page-content ul li,
.single-page-content ol li {
    margin-bottom: var(--sp-2);
    list-style: inherit;
}

.single-page-content ul {
    list-style: disc;
}

.single-page-content ol {
    list-style: decimal;
}

.single-page-content a {
    color: var(--sky-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-page-content blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    border-inline-start: 4px solid var(--amber-500);
    background: var(--surface-2);
    border-radius: var(--r-sm);
    color: var(--text-2);
}

.embed-container,
.video-container {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block: var(--sp-5);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--navy-900);
    box-shadow: var(--shadow-md);
}

.embed-container iframe,
.video-container iframe,
.embed-container video,
.video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   17. Legacy components still referenced by live pages
   -------------------------------------------------------------------------- */

/* Pricing table markup used by the packages/offers pages. */
.generic_content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.generic_content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.generic_head_price {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.generic_head_content {
    padding: var(--sp-5);
    text-align: center;
}

.generic_head_content .head_bg {
    border-radius: 0;
}

.generic_price_tag {
    padding: var(--sp-4);
    text-align: center;
    color: var(--navy-800);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.generic_feature_list ul {
    display: grid;
}

.generic_feature_list li {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: .95rem;
}

.generic_feature_list li:last-child {
    border-bottom: 0;
}

.generic_price_btn {
    padding: var(--sp-5);
    text-align: center;
}

/* Animated success / error marks. */
.ui-success,
.ui-error {
    width: 96px;
    height: 96px;
    margin: var(--sp-5) auto;
}

.ui-success-circle,
.ui-error-circle {
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    animation: ui-draw 900ms var(--ease-out) forwards;
}

.ui-success-circle {
    stroke: var(--success);
}

.ui-error-circle {
    stroke: var(--danger);
}

.ui-success-path {
    stroke: var(--success);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: ui-draw 500ms var(--ease-out) 500ms forwards;
}

.ui-error-line1,
.ui-error-line2 {
    stroke: var(--danger);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: ui-draw 400ms var(--ease-out) forwards;
}

.ui-error-line1 {
    animation-delay: 400ms;
}

.ui-error-line2 {
    animation-delay: 600ms;
}

@keyframes ui-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.success-svg {
    width: 90px;
    margin: var(--sp-4) auto;
}

.erorr-animation {
    display: flex;
    justify-content: center;
}

/* Buy-now-pay-later widgets: give them room, don't restyle their internals. */
.tabby-banner-main,
.tamara-widget {
    margin-block: var(--sp-4);
}

/* Purchase/register payment method cards. */
#online-trnasfer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
}

.option_item {
    display: flex;
    align-items: stretch;
    margin-bottom: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.option_item > a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-width: 0;
}

.option_item span {
    color: var(--navy-800);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.55;
}

.option_item img {
    flex: 0 0 auto;
    width: auto;
    max-width: min(150px, 34vw);
    max-height: 48px;
    object-fit: contain;
}

.tabby-banner-main {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 72px;
    margin-inline: auto;
    border-radius: var(--r-sm);
}

.tabby-banner,
.tamara-banner {
    width: auto;
    max-width: min(150px, 34vw);
    max-height: 48px;
    object-fit: contain;
}

@media (max-width: 700px) {
    #online-trnasfer-container {
        grid-template-columns: 1fr;
    }

    .option_item img,
    .tabby-banner,
    .tamara-banner {
        max-width: 130px;
        max-height: 42px;
    }

    .tabby-banner-main {
        max-height: 64px;
    }
}

/* App download prompt. */
.app-box {
    position: fixed;
    inset-block-end: var(--sp-4);
    inset-inline-end: var(--sp-4);
    z-index: 9000;
    width: min(92vw, 320px);
    padding: var(--sp-4);
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.app-box p {
    font-size: .92rem;
}

/* Carousels: only the container, the plugins own the rest. */
.owl-carousel,
.splide {
    margin-block: var(--sp-5);
}

/* Animated error mark (resources/views/components/error.blade.php):
   a tinted ring behind a white disc holding an X. */
.erorr-animation {
    width: fit-content;
    margin: var(--sp-5) auto;
}

.circle,
.circle-border {
    width: 60px;
    height: 60px;
    border-radius: var(--r-full);
}

.circle-border {
    position: absolute;
    z-index: 0;
    background: var(--danger);
    transform: scale(1.1);
    animation: mark-ring 400ms var(--ease-out) both;
}

.circle {
    position: relative;
    z-index: 1;
    background: var(--surface);
    animation: mark-disc 500ms var(--ease-out) both;
}

.circle .error {
    position: absolute;
    inset: 0;
}

.circle .error::before,
.circle .error::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 4px;
    margin: -2px 0 0 -14px;
    border-radius: var(--r-full);
    background: var(--danger);
}

.circle .error::before {
    transform: rotateZ(45deg);
}

.circle .error::after {
    transform: rotateZ(-45deg);
}

@keyframes mark-ring {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes mark-disc {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* Animated success mark (resources/views/components/success.blade.php). */
#successAnimationCircle {
    stroke-dasharray: 151px 151px;
    stroke: var(--success);
}

#successAnimationCheck {
    stroke-dasharray: 36px 36px;
    stroke: var(--success);
}

#successAnimationResult {
    fill: var(--success);
    opacity: 0;
}

#successAnimation {
    margin-inline: auto;
}

#successAnimation.animated #successAnimationCircle {
    animation: mark-draw-circle 900ms var(--ease-out) both, mark-fade-out 300ms linear 850ms both;
}

#successAnimation.animated #successAnimationCheck {
    animation: mark-draw-check 900ms var(--ease-out) both, mark-fade-out 300ms linear 850ms both;
}

#successAnimation.animated #successAnimationResult {
    animation: mark-fade-in 300ms linear 850ms both;
}

@keyframes mark-draw-circle {
    from {
        stroke-dashoffset: 151px;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mark-draw-check {
    from {
        stroke-dashoffset: -36px;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mark-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes mark-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .06;
    pointer-events: none;
    object-fit: contain;
}

.flag,
.hobbies-icon,
.big-icon {
    display: inline-block;
    vertical-align: middle;
}

.big-icon {
    font-size: 2.4rem;
    color: var(--navy-600);
}

.huge {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.05;
}

.avaliable {
    color: var(--success);
    font-weight: 700;
}

.links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.open-bank-form {
    cursor: pointer;
}

.bar {
    display: block;
}

/* Div-based data tables (profile registrations, rewards). The wrapper carries
   .table but its children are .tr/.td divs, so it must lay out as a block
   rather than a real table. */
#according-registery .table,
#according-notifications .table,
.table:has(> .tr) {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}

.tr {
    display: grid;
    grid-template-columns: 56px 1.6fr 1fr 1fr;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    font-size: .93rem;
    transition: background var(--dur-1) var(--ease-out);
}

.tr:last-child {
    border-bottom: 0;
}

.tr:nth-child(2n) {
    background: var(--surface-2);
}

.tr:hover {
    background: var(--sky-50);
}

/* Header row. */
.tr.main {
    background: var(--surface-3);
    color: var(--navy-800);
    font-weight: 700;
    letter-spacing: .01em;
}

.tr.main:hover {
    background: var(--surface-3);
}

.td {
    min-width: 0;
    overflow-wrap: break-word;
}

/* A spent reward reads as inactive but stays legible. */
.tr.used-reward {
    padding: var(--sp-3) var(--sp-4);
    margin: 0;
    border-inline-start: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface-2);
    color: var(--text-muted);
    opacity: .72;
}

@media (max-width: 700px) {
    .tr {
        grid-template-columns: 1fr;
        gap: var(--sp-1);
        padding-block: var(--sp-4);
    }

    /* The header row is meaningless once cells stack. */
    .tr.main {
        display: none;
    }
}

/* Small confirmation tick image used by the instalment/card pages. */
img.check {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-inline-end: var(--sp-2);
}

.info {
    color: var(--text-2);
}

/* Generic animation hooks kept for pages that toggle them via JS. */
.animate,
.animated {
    animation-duration: var(--dur-3);
    animation-fill-mode: both;
}

/* Icon font baseline (glyph mappings live in flaticon.css). */
.fa,
[class^="flaticon-"],
[class*=" flaticon-"] {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */

.hidden {
    display: none !important;
}

.show {
    display: block;
}

.text-center,
.center,
.cent {
    text-align: center;
}

.center,
.block-center {
    margin-inline: auto;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.text-muted {
    color: var(--text-muted);
}

.white {
    color: #fff;
}

.mt-30 {
    margin-top: 30px;
}

.pull-left {
    float: left;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.row > .col-md-4,
.row > .col-md-3 {
    flex: 1 1 260px;
}

.col-md-4 {
    flex: 1 1 260px;
}

/* Screen-reader-only helper for labels that must exist but not display. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   19. Responsive refinements
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --header-h: 66px;
    }

    body {
        font-size: .97rem;
    }

    .courses-container,
    .meals-grid,
    .meals-list,
    .chefs-grid,
    .stores-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--sp-3);
    }

    .courses-container {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .course-info {
        padding: var(--sp-3);
    }

    .course-card-amount {
        font-size: 1.35rem;
    }

    .course-card-cta {
        min-height: 38px;
        padding: .5rem 1rem;
        font-size: .85rem;
    }

    .course-title,
    .meal-title,
    .book-name {
        font-size: .95rem;
    }

    .course-meta-item {
        padding: var(--sp-3) var(--sp-4);
    }

    .site-footer {
        text-align: center;
    }

    .site-footer .footer-title::after {
        inset-inline: 0;
        margin-inline: auto;
    }

    .footer-about p {
        max-width: none;
    }

    .payments-container,
    .flex-apart {
        justify-content: center;
    }

    .timer-container > * {
        min-width: 58px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .courses-container,
    .meals-grid,
    .meals-list {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    }

    .courses-container {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }

    .primary-button,
    .register-button,
    .purchase-button {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   20. Accessibility preferences
   Reduced motion keeps feedback, but swaps travel for cross-fades.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
        transition-property: opacity, background-color, border-color, color !important;
        scroll-behavior: auto !important;
    }

    /* Drop travel and elastic overshoot; state changes remain instant. */
    .header-nav {
        transform: none !important;
        transition: opacity 150ms ease, visibility 150ms ease !important;
        opacity: 0;
    }

    .header-nav.opened {
        opacity: 1;
    }

    .course-item:hover,
    .box-item:hover,
    .generic_content:hover,
    .primary-button:hover {
        transform: none !important;
    }

    .course-item:hover .course-img,
    .course-card-cta:hover,
    .course-card-cta:active {
        transform: none !important;
    }

    .close-modal:hover {
        transform: none !important;
    }

    .footer-links a:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header,
    .site-header::before,
    .header-nav,
    .loading-wrapper,
    .app-box,
    .statistic-item,
    .course-price {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .site-header {
        border-bottom: 1px solid var(--border);
    }
}

@media (prefers-contrast: more) {
    :root {
        --text: #0b1620;
        --text-2: #2c3c49;
        --text-muted: #47596a;
        --border: #9fb2c0;
        --border-strong: #7b91a3;
    }

    .site-header,
    .header-nav,
    .course-price {
        background: #fff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .course-item,
    .box-item,
    .course-meta-item,
    .modal-content,
    input,
    select,
    textarea {
        border-width: 2px;
    }

    a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .header-nav a,
    .footer-links a,
    .primary-button {
        text-decoration: none;
    }
}

/* --------------------------------------------------------------------------
   22. Section components (professional redesign v2)
   Shared building blocks for the richer home/course/package/account layouts:
   panel cards, feature grids, includes checklist, curriculum accordion,
   discount chip, countdown, share row, process steps, category chips,
   CTA banner, quick stats.
   -------------------------------------------------------------------------- */

/* ---- Panel card: the icon-badge section header used by every content card ---- */

.panel-card {
    padding: clamp(1.25rem, 3.5vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.panel-card + .panel-card {
    margin-top: var(--sp-5);
}

.panel-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.panel-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r);
    background: var(--brand-soft);
    color: var(--navy-600);
    font-size: 1.15rem;
}

.panel-icon.amber {
    background: var(--amber-50);
    color: var(--amber-600);
}

.panel-icon.sky {
    background: var(--sky-50);
    color: var(--sky-700);
}

.panel-card-head h2,
.panel-card-head h3 {
    margin: 0;
    color: var(--navy-800);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.panel-card-body {
    color: var(--text);
    line-height: 2;
}

/* ---- Feature grid: 4-across icon-badge trust/feature cards ---- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}

.feature-card {
    padding: clamp(1.5rem, 3vw, 1.85rem) var(--sp-4);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-full);
    background: var(--brand-soft);
    color: var(--navy-600);
    font-size: 1.5rem;
}

.feature-icon.sky {
    background: var(--sky-50);
    color: var(--sky-700);
}

.feature-icon.amber {
    background: var(--amber-50);
    color: var(--amber-600);
}

.feature-icon.success {
    background: var(--success-bg);
    color: var(--success);
}

.feature-card h3 {
    margin: 0 0 var(--sp-2);
    font-size: 1.02rem;
    letter-spacing: -.008em;
}

.feature-card p {
    margin: 0;
    color: var(--text-2);
    font-size: .92rem;
    line-height: 1.85;
}

@media (prefers-reduced-motion: reduce) {
    .feature-card:hover {
        transform: none;
    }
}

/* ---- Includes checklist: compact 2-col icon grid for the purchase sidebar ---- */

.includes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}

.include-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.include-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    background: var(--sky-100);
    color: var(--navy-700);
    font-size: .95rem;
}

.include-icon.amber {
    background: var(--amber-100);
    color: var(--amber-700);
}

.include-icon.success {
    background: var(--success-bg);
    color: var(--success);
}

.include-item span {
    color: var(--text-2);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ---- Curriculum accordion ---- */

.curriculum-accordion {
    display: grid;
    gap: var(--sp-2);
}

.curriculum-row {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}

.curriculum-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border: 0;
    color: var(--navy-800);
    font-family: var(--font);
    font-size: .97rem;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out);
}

.curriculum-trigger:hover {
    background: var(--sky-50);
}

.curriculum-trigger-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.curriculum-index {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-full);
    background: var(--navy-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}

.curriculum-chevron {
    flex: 0 0 auto;
    transition: transform var(--dur-2) var(--ease-out);
}

.curriculum-row[open] .curriculum-chevron {
    transform: rotateZ(180deg);
}

.curriculum-body {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
}

.curriculum-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    color: var(--text-2);
    font-size: .9rem;
}

.curriculum-item .lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .8rem;
}

.curriculum-note {
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.7;
}

/* ---- Discount chip: reuses the promo copy-code language in the sidebar ---- */

.discount-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--amber-50);
    border: 1px dashed var(--amber-300);
    border-radius: var(--r-sm);
}

.discount-chip-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--amber-700);
    font-size: .85rem;
    font-weight: 700;
}

.discount-code-box {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: .35rem .8rem;
    background: var(--surface);
    border: 1px solid var(--amber-300);
    border-radius: var(--r-full);
    color: var(--navy-800);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out);
}

.discount-code-box:hover {
    background: var(--amber-100);
}

/* ---- Countdown panel: labelled 4-box timer, extends .timer-container ---- */

.countdown-panel {
    margin-bottom: var(--sp-4);
}

.countdown-panel-label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
}

.countdown-panel .timer-container {
    justify-content: space-between;
    gap: var(--sp-2);
    margin-block: 0;
}

.countdown-panel .timer-container > * {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--sp-2);
    font-size: 1.2rem;
}

.countdown-panel .timer-unit-label {
    display: block;
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
}

/* ---- Share row: reuses .social-circle, light-surface variant ---- */

.share-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.share-row-label {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
}

.share-row .social-circle {
    width: 36px;
    height: 36px;
    background: var(--surface-3);
    color: var(--navy-700);
}

.share-row .social-circle:hover {
    background: var(--navy-600);
    color: #fff;
}

/* ---- Process steps: numbered horizontal "how it works" band ---- */

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
    position: relative;
}

.process-step {
    position: relative;
    padding: clamp(1.5rem, 3vw, 1.85rem) var(--sp-4);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.process-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto var(--sp-3);
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.process-step h3 {
    margin: 0 0 var(--sp-2);
    font-size: 1rem;
    letter-spacing: -.008em;
}

.process-step p {
    margin: 0;
    color: var(--text-2);
    font-size: .92rem;
    line-height: 1.85;
}

/* Connecting arrow between steps on wide screens, hidden on the last item. */
@media (min-width: 860px) {
    .process-step:not(:last-child)::after {
        content: "\2190";
        position: absolute;
        top: 30px;
        inset-inline-start: calc(-1 * var(--sp-4) - 6px);
        color: var(--border-strong);
        font-size: 1.4rem;
        font-weight: 700;
    }
}

/* ---- Category chip grid: home "browse by category" ---- */

.category-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
}

.category-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--navy-800);
    font-weight: 700;
    transition:
        transform var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}

.category-chip:hover {
    color: var(--navy-800);
    transform: translateY(-3px);
    border-color: var(--sky-300);
    box-shadow: var(--shadow-md);
}

.category-chip.is-active {
    background: var(--navy-600);
    border-color: var(--navy-600);
    color: #fff;
}

.category-chip.is-active .category-chip-count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.category-chip-all {
    justify-content: center;
    background: var(--brand-soft);
    border-style: dashed;
}

#courses-filter-note a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.category-chip-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding-inline: .5rem;
    border-radius: var(--r-full);
    background: var(--brand-soft);
    color: var(--navy-700);
    font-size: .78rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .category-chip:hover {
        transform: none;
    }
}

/* ---- CTA banner: closing call-to-action band before the footer ---- */

.cta-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-block: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
    background: var(--grad-brand-sky);
    border-radius: var(--r-2xl);
    color: #fff;
}

.cta-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -100px;
    inset-inline-end: -60px;
    width: 300px;
    height: 300px;
    border-radius: var(--r-full);
    background: rgba(240, 179, 82, .22);
    filter: blur(60px);
    pointer-events: none;
}

.cta-banner h2 {
    margin: 0 0 var(--sp-3);
    color: #fff;
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    letter-spacing: -.02em;
}

.cta-banner p {
    max-width: 56ch;
    margin: 0 auto var(--sp-5);
    color: rgba(255, 255, 255, .84);
    line-height: 1.9;
}

.cta-banner .primary-button {
    padding-inline: 2.1rem;
}

/* ---- Quick stats: compact stat row on the profile header ---- */

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
    width: 100%;
    margin-top: var(--sp-4);
}

.quick-stat {
    padding: var(--sp-3) var(--sp-4);
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

.quick-stat strong {
    display: block;
    color: var(--navy-800);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.quick-stat span {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
}

/* ---- Two-column benefits panel: login/register side panel ---- */

.benefits-panel {
    padding: clamp(1.5rem, 3.5vw, 2rem);
    background: var(--grad-brand);
    border-radius: var(--r-xl);
    color: #fff;
}

.benefits-panel h2 {
    margin: 0 0 var(--sp-4);
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: -.014em;
}

.benefits-list {
    display: grid;
    gap: var(--sp-4);
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.benefits-list .benefit-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .16);
    font-size: 1rem;
}

.benefits-list p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: .92rem;
    line-height: 1.75;
}

.benefits-list strong {
    display: block;
    margin-bottom: .15rem;
    color: #fff;
    font-size: .97rem;
}

/* ---- Step-progress rail: register form ---- */

.step-rail {
    display: flex;
    align-items: center;
    margin-bottom: var(--sp-6);
}

.step-rail-item {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.step-rail-dot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 700;
    transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.step-rail-item.is-active .step-rail-dot,
.step-rail-item.is-done .step-rail-dot {
    background: var(--navy-600);
    color: #fff;
}

.step-rail-label {
    margin-inline-start: var(--sp-2);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
}

.step-rail-item.is-active .step-rail-label,
.step-rail-item.is-done .step-rail-label {
    color: var(--navy-800);
}

.step-rail-line {
    flex: 1 1 auto;
    height: 2px;
    margin-inline: var(--sp-2);
    background: var(--border);
}

.step-rail-item.is-done + .step-rail-item .step-rail-line,
.step-rail-item.is-done .step-rail-line {
    background: var(--navy-400);
}

@media (max-width: 700px) {
    .step-rail-label {
        display: none;
    }
}

/* ---- Tips strip + empty state (rewards) ---- */

.tips-strip {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    background: var(--sky-50);
    border: 1px solid var(--sky-200);
    border-radius: var(--r);
}

.tips-strip-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--sky-700);
}

.tips-strip p {
    margin: 0;
    color: var(--navy-800);
    font-size: .92rem;
    line-height: 1.85;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: clamp(2rem, 5vw, 3rem) var(--sp-4);
    text-align: center;
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 2rem;
}

.empty-state p {
    max-width: 42ch;
    margin: 0;
    color: var(--text-2);
    line-height: 1.85;
}

/* ---- Course category catalog pages ---- */

.catalog-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2rem, 5vw, 3.25rem) 0;
    background: var(--grad-brand);
    color: #fff;
}

.catalog-hero::before,
.catalog-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: var(--r-full);
    pointer-events: none;
    filter: blur(70px);
}

.catalog-hero::before {
    top: -100px;
    inset-inline-end: -70px;
    width: 280px;
    height: 280px;
    background: rgba(114, 176, 222, .3);
}

.catalog-hero::after {
    bottom: -120px;
    inset-inline-start: -50px;
    width: 240px;
    height: 240px;
    background: rgba(240, 179, 82, .2);
}

.catalog-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-bottom: var(--sp-4);
    color: rgba(255, 255, 255, .72);
    font-size: .86rem;
    font-weight: 600;
}

.catalog-breadcrumb a {
    color: #fff;
}

.catalog-breadcrumb a:hover {
    color: var(--sky-200);
}

.catalog-hero-badge {
    display: inline-flex;
    margin: 0 0 var(--sp-3);
    padding: .35rem .9rem;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.catalog-hero-title {
    margin: 0 0 var(--sp-3);
    color: #fff;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 800;
}

.catalog-hero-text {
    max-width: 62ch;
    margin: 0;
    color: rgba(255, 255, 255, .86);
    line-height: 1.85;
}

.catalog-section {
    margin-block: clamp(2rem, 5vw, 3.5rem);
}

.catalog-section-tight {
    margin-bottom: 0;
}

.catalog-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.catalog-category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    color: var(--navy-800);
    transition:
        transform var(--dur-2) var(--ease-out),
        border-color var(--dur-2) var(--ease-out),
        box-shadow var(--dur-2) var(--ease-out);
}

.catalog-category-card h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 800;
}

.catalog-category-card:hover {
    color: var(--navy-800);
    transform: translateY(-3px);
    border-color: var(--sky-300);
    box-shadow: var(--shadow-md);
}

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
}

.catalog-page-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--navy-800);
    font-weight: 700;
}

.catalog-page-btn:hover {
    color: var(--navy-800);
    border-color: var(--sky-300);
}

.catalog-page-btn.is-active {
    background: var(--navy-600);
    border-color: var(--navy-600);
    color: #fff;
}

.catalog-page-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

.catalog-page-ellipsis {
    display: inline-flex;
    align-items: center;
    min-width: 28px;
    color: var(--text-muted);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-category-card:hover {
        transform: none;
    }
}

/* ---- Section responsive tweaks ---- */

@media (max-width: 700px) {
    .includes-grid {
        grid-template-columns: 1fr 1fr;
    }

    .discount-chip {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */

@media print {
    body {
        background: #fff;
        color: #000;
    }

    .site-header,
    .site-footer,
    .whatsapp-float,
    .app-box,
    .loading-wrapper,
    .primary-button,
    .register-button,
    .purchase-button,
    .open-mobile-menu-container {
        display: none !important;
    }

    .box,
    .page-content,
    .new-box {
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}