/* =========================================================================
   Studiare — Course card + countdown (design v4)

   The countdown now lives in the card body, below the meta row, instead of
   floating over the thumbnail. That keeps the image clean and lets the
   block absorb leftover height so cards in a row stay level.

   Loaded on every front-end page, so everything is scoped to
   .course-item / .studiare-course-card / .cd.
   ========================================================================= */

:root {
    --cd-ink:        #0e1116;
    --cd-muted:      #64707f;
    --cd-line:       #eef1f4;
    --cd-surface:    #fff;

    --cd-base:       oklch(0.55 0.11 195);   /* turquoise — normal state */
    --cd-base-dark:  oklch(0.42 0.09 195);
    --cd-base-tint:  oklch(0.97 0.015 195);

    --cd-urgent:     oklch(0.58 0.16 40);    /* orange — under 24h */
    --cd-urgent-dark:oklch(0.42 0.13 40);
    --cd-urgent-tint:oklch(0.97 0.03 55);

    --cd-done:       oklch(0.52 0.11 160);   /* green — started */
    --cd-done-dark:  oklch(0.42 0.10 160);
    --cd-done-tint:  oklch(0.97 0.03 160);
}

/* Fallback for browsers without oklch() support */
@supports not (color: oklch(0.5 0.1 195)) {
    :root {
        --cd-base: #2196a8;       --cd-base-dark: #14707e;   --cd-base-tint: #f2fbfc;
        --cd-urgent: #e07a3f;     --cd-urgent-dark: #b4531c; --cd-urgent-tint: #fef6f1;
        --cd-done: #189d76;       --cd-done-dark: #0f7a5b;   --cd-done-tint: #f0fdf6;
    }
}

/* color-mix() is used for borders and muted text below. Where it is
   unsupported the declaration is dropped, so give those spots a plain
   colour first and let color-mix override it when available. */
.cd            { border-color: rgba(33, 150, 168, .18); }
.cd.is-urgent  { border-color: rgba(224, 122, 63, .28); }
.cd.is-started { border-color: rgba(24, 157, 118, .26); }
.cd-when       { color: #4f8d99; }
.cd-bar        { background: rgba(33, 150, 168, .18); }

/* =========================================================================
   1. Card shell — equal heights
   .products is a flex row; without height:100% each card sized to its own
   content, which is what made the grid ragged.
   ========================================================================= */

.products .course-item {
    display: flex;
}

.products .course-item .course-item-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: var(--cd-surface);
    box-shadow: 0 2px 6px rgba(14, 17, 22, .05), 0 14px 40px -20px rgba(14, 17, 22, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

.products .course-item .course-item-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(14, 17, 22, .06), 0 22px 50px -22px rgba(14, 17, 22, .28);
}

.products .course-item .course-item-inner .course-content-holder {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Absorbs the slack that levels cards in a row. Doing it here rather than
   on the countdown keeps the timer compact when a course has no excerpt. */
.products .course-item .course-item-inner .course-content-holder .course-content-main {
    flex: 1 0 auto;
    padding: 16px 18px 0;
}

/* Title clamped to two lines — the main source of uneven heights */
.products .course-item .course-item-inner .course-content-holder .course-content-main .course-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2lh;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--cd-ink);
    text-wrap: pretty;
}

.products .course-item .course-item-inner .course-content-holder .course-content-main .course-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.9;
    color: var(--cd-muted);
}

/* =========================================================================
   2. Thumbnail — fixed ratio, uncluttered
   ========================================================================= */

.products .course-item .course-item-inner .course-thumbnail-holder {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef1f4;
}

.products .course-item .course-item-inner .course-thumbnail-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.products .course-item .course-item-inner:hover .course-thumbnail-holder img {
    transform: scale(1.045);
}

/* Seats badge — driven by WooCommerce stock */
.cd-seats {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 6;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--cd-base);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.cd-seats.is-low {
    background: var(--cd-urgent);
}

/* Action icons reveal on hover so the artwork stays clean */
.course-thumbnail-holder a.studi_add_in_shop,
.course-thumbnail-holder .sc-buttons-sq-sw {
    position: absolute;
    top: 12px !important;
    bottom: auto !important;
    z-index: 7;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease;
}

.course-item:hover .course-thumbnail-holder a.studi_add_in_shop,
.course-item:hover .course-thumbnail-holder .sc-buttons-sq-sw,
.course-thumbnail-holder a.studi_add_in_shop:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: none) {
    .course-thumbnail-holder a.studi_add_in_shop,
    .course-thumbnail-holder .sc-buttons-sq-sw {
        opacity: 1;
        transform: none;
    }
}

/* When a seats badge is present, shift the cart icon clear of it */
.course-thumbnail-holder.has-seats a.studi_add_in_shop {
    top: 48px !important;
}

.course-thumbnail-holder a.studi_add_in_shop {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--cd-ink) !important;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(14, 17, 22, .16);
}

.course-thumbnail-holder a.studi_add_in_shop:hover {
    background: var(--cd-base) !important;
    color: #fff !important;
}

/* =========================================================================
   3. Countdown block
   ========================================================================= */

/* The countdown sizes to its content. Row-levelling is handled by
   .course-content-main growing instead (see section 1), so a course with
   no excerpt no longer leaves a tall empty box under the digits. */
.cd {
    flex: 0 0 auto;
    margin: 14px 14px 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--cd-base) 16%, transparent);
    background: var(--cd-base-tint);
    display: flex;
    flex-direction: column;
    gap: 8px;
    direction: rtl;
    transition: background .3s ease, border-color .3s ease;
}

/* Hidden until JS writes real values, so "۰۰" never flashes */
.cd:not(.is-ready):not(.is-started) {
    visibility: hidden;
}

.cd.is-ready,
.cd.is-started {
    animation: cd-appear .35s ease-out;
}

@keyframes cd-appear {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.cd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cd-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--cd-base-dark);
}

.cd-when {
    font-size: 10.5px;
    font-weight: 600;
    color: color-mix(in oklab, var(--cd-base-dark) 65%, #fff);
}

/* Empty until JS fills it, so no stray gap appears */
.cd-when:empty {
    display: none;
}

.cd-pulse {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cd-urgent);
    flex-shrink: 0;
}

.cd-units {
    display: flex;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

.cd-unit {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 0 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(14, 17, 22, .05);
}

.cd-val {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    color: var(--cd-ink);
}

.cd-lbl {
    font-size: 8.5px;
    font-style: normal;
    color: var(--cd-muted);
}

/* Seconds tile carries the accent */
.cd-unit--accent { background: var(--cd-base); }
.cd-unit--accent .cd-val { color: #fff; }
.cd-unit--accent .cd-lbl { color: color-mix(in oklab, #fff 75%, var(--cd-base)); }

.cd-bar {
    height: 3px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--cd-base) 18%, transparent);
    overflow: hidden;
}

.cd-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--cd-base);
    transition: width 1s linear;
}

.cd-val.is-ticking { animation: cd-tick .35s ease-out; }

@keyframes cd-tick {
    from { opacity: .35; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

/* --- Urgent: under 24h --- */

.cd.is-urgent {
    background: var(--cd-urgent-tint);
    border-color: color-mix(in oklab, var(--cd-urgent) 26%, transparent);
}

.cd.is-urgent .cd-title { font-weight: 800; color: var(--cd-urgent-dark); }
.cd.is-urgent .cd-when  { display: none; }
.cd.is-urgent .cd-pulse { display: block; animation: cd-pulse 1.6s ease-in-out infinite; }
.cd.is-urgent .cd-val   { color: var(--cd-urgent-dark); }
.cd.is-urgent .cd-lbl   { color: color-mix(in oklab, var(--cd-urgent-dark) 60%, #fff); }
.cd.is-urgent .cd-unit--accent { background: var(--cd-urgent); }
.cd.is-urgent .cd-unit--accent .cd-val { color: #fff; }
.cd.is-urgent .cd-unit--accent .cd-lbl { color: color-mix(in oklab, #fff 78%, var(--cd-urgent)); }
.cd.is-urgent .cd-bar { background: color-mix(in oklab, var(--cd-urgent) 22%, transparent); }
.cd.is-urgent .cd-bar-fill { background: var(--cd-urgent); }

@keyframes cd-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Days tile is always zero under 24h, so it is dropped */
.cd.is-urgent .cd-unit--days { display: none; }

/* --- Started --- */

.cd.is-started {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    background: var(--cd-done-tint);
    border-color: color-mix(in oklab, var(--cd-done) 24%, transparent);
}

.cd-done-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--cd-done);
}

.cd-done-icon svg { width: 100%; height: 100%; display: block; }

.cd-done-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--cd-done-dark);
}

/* --- List view ---------------------------------------------------------
   The row is wide, so the timer is capped and left-aligned instead of
   stretching across the whole card. The thumbnail also keeps its own
   height here rather than following the 16/10 grid ratio. */

.products.list-view .cd {
    max-width: 340px;
    margin: 12px 18px;
}

.products.list-view .course-item .course-item-inner .course-content-holder .course-content-main {
    flex: 0 0 auto;
}

.products.list-view .course-item .course-item-inner .course-thumbnail-holder {
    aspect-ratio: auto;
    align-self: stretch;
}

/* =========================================================================
   4. Large variant — single product page
   ========================================================================= */

.cd--lg {
    margin: 0 0 20px;
    padding: 16px 18px 15px;
    border-radius: 16px;
    gap: 12px;
    flex: 0 0 auto;
}

.cd--lg .cd-title { font-size: 13px; }
.cd--lg .cd-when  { font-size: 12px; }
.cd--lg .cd-units { gap: 8px; }
.cd--lg .cd-unit  { padding: 10px 0 8px; border-radius: 11px; }
.cd--lg .cd-val   { font-size: 26px; }
.cd--lg .cd-lbl   { font-size: 10.5px; }

/* =========================================================================
   5. Card footer rows
   ========================================================================= */

.products .course-item .course-item-inner .course-content-holder .course-content-bottom,
.products .course-item .course-item-inner .course-content-holder .course-content-mid {
    border-top: 0;
    padding: 0 18px 18px;
}

.products .course-item .course-item-inner .course-content-holder .course-content-mid {
    padding-bottom: 10px;
}

.products .course-item .course-item-inner .course-content-holder .course-content-bottom .course-price,
.products .course-item .course-item-inner .course-content-holder .course-content-bottom .course-price span {
    font-size: 17px;
    font-weight: 800;
    color: var(--cd-ink);
}

.products .course-item .course-item-inner .course-content-holder .course-content-bottom .course-students {
    background-color: transparent !important;
    color: var(--cd-muted) !important;
    padding: 0 !important;
    font-size: 12.5px;
    gap: 4px;
    align-items: center;
}

/* =========================================================================
   6. My-courses card (shares the countdown markup)
   ========================================================================= */

.studiare-course-card {
    display: flex;
    flex-direction: column;
}

.studiare-course-card .course-thumbnail-holder {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.studiare-course-card .course-thumbnail-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================================
   7. Dark mode
   ========================================================================= */

body.scdarkcolors {
    --cd-ink: #f1f5f9;
    --cd-muted: #94a3b8;
    --cd-line: rgba(255, 255, 255, .09);
    --cd-surface: #1c1f27;

    --cd-base-tint:   oklch(0.28 0.04 195);
    --cd-urgent-tint: oklch(0.30 0.06 40);
    --cd-done-tint:   oklch(0.28 0.05 160);

    --cd-base-dark:   oklch(0.82 0.09 195);
    --cd-urgent-dark: oklch(0.82 0.11 55);
    --cd-done-dark:   oklch(0.82 0.10 160);
}

body.scdarkcolors .products .course-item .course-item-inner {
    background: var(--cd-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 40px -20px rgba(0, 0, 0, .6);
}

body.scdarkcolors .cd-unit {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

body.scdarkcolors .cd-val { color: #f1f5f9; }

body.scdarkcolors .course-thumbnail-holder a.studi_add_in_shop {
    background: rgba(28, 31, 39, .92) !important;
    color: #f1f5f9 !important;
}

/* =========================================================================
   8. Responsive
   ========================================================================= */

@media (max-width: 768px) {
    .cd {
        margin: 14px 12px 12px;
        padding: 11px 12px 10px;
    }

    .cd-units { gap: 5px; }
    .cd-val { font-size: 16px; }

    .products .course-item .course-item-inner .course-content-holder .course-content-main {
        padding: 14px 14px 0;
    }

    .products .course-item .course-item-inner .course-content-holder .course-content-main .course-title {
        font-size: 15px;
    }

    .products .course-item .course-item-inner .course-content-holder .course-content-bottom {
        padding: 0 14px 14px;
    }
}

@media (max-width: 420px) {
    .cd-lbl { font-size: 8.5px; }
    .cd-val { font-size: 15px; }
}

/* =========================================================================
   9. Accessibility
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .cd,
    .cd.is-ready,
    .cd.is-started,
    .cd-val.is-ticking,
    .cd-pulse,
    .cd-bar-fill,
    .products .course-item .course-item-inner,
    .products .course-item .course-item-inner .course-thumbnail-holder img,
    .course-thumbnail-holder a.studi_add_in_shop,
    .course-thumbnail-holder .sc-buttons-sq-sw {
        animation: none !important;
        transition: none !important;
    }

    .products .course-item .course-item-inner:hover { transform: none; }
    .products .course-item .course-item-inner:hover .course-thumbnail-holder img { transform: none; }
}