/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
:root {
    --primary: rgb(4, 97, 128);
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/**
 * WooCommerce Notices Wrapper
 * Used for displaying access restriction notices on course pages
 */
.bdydic-woocommerce-notices-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/**
 * Course Syllabus View
 */
.single-bdydic_course {
    @media (height < 30rem) {
        article {
            padding-top: 0;
        }
    }

    .wp-block-post-featured-image {
        max-height: 100dvh;
    }

    .metadata {
        display: grid;
        grid-template-columns: 1fr;

        @container (min-width: 30rem) {
            grid-template-columns: 4fr 1fr;
        }
    }
}

.bdydic-course-syllabus {
    --bg: oklch(from var(--primary) 60% c h / 0.05);
    /*--bg-hover: oklch(from var(--primary) 50% c h / 0.2);
    --bg-hover: oklch(from var(--primary) 60% 0.3 h / 0.15);
    --bg-hover: oklch(from var(--primary) 55% 0.2 h / 0.15);*/
    --bg-hover: oklch(from var(--primary) 55% 0.1 h / 0.2);
    counter-reset: module;
    max-width: 1200px;
    margin: 3rem auto 1rem;
    padding: 1.5rem;
    background: var(--bg);
    border-radius: 0.25rem;

    h2 {
        margin-bottom: 2rem;
    }

    .bdydic-module {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin-bottom: 1rem;
    }

    .bdydic-module>* {
        margin: 1rem;
    }

    .bdydic-module summary {
        display: flex;
        align-items: center;
        cursor: pointer;
        /* background: rgba(4, 97, 128, 0.05); */
        background-color: var(--bg);
        border: 1px solid oklch(60% 0.08971 229.108 / 0.25);
        border-radius: 0.25rem;
        width: 100%;
        margin: 0;
        padding: 1rem;
        line-height: 0;
        font-size: 1.75rem;

        h3 {
            display: inline-block;
            font-size: inherit;
        }

        &:before {
            content: "► " counter(module, decimal-leading-zero) " ";
            counter-increment: module;
            margin-right: 0.5rem;
        }

        details[open] &:before {
            content: "▼ " counter(module, decimal-leading-zero) " ";
        }

        &:hover {
            background: var(--bg-hover);
        }
    }

    .bdydic-units-list {
        /*margin: 1rem 0;*/
        padding: 0;
        counter-reset: item;
        list-style-type: none;
        max-width: 80ch;
        margin-inline: auto;
    }

    .bdydic-unit-item {
        background: var(--bg);
        /* border: 1px solid oklch(50% 0.08971 229.108 / 0.25); */
        border-radius: 0.25rem;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--fs-100);
        margin: 0.5rem 0;
        padding: 1rem;
        position: relative;
        overflow: hidden;

        &.not-unit {
            background-color: transparent;
        }

        &:not(.not-unit) {
            grid-template-columns: 3ch 1fr auto;

            &::before {
                content: counter(item, decimal-leading-zero) " ";
                counter-increment: item;
                margin-right: 0.5rem;
            }
        }

        &:has(> a):hover {
            background: var(--bg-hover);
        }

        >a {
            color: var(--text);
            text-decoration: none;

            &:after {
                content: "";
                /* margin-left: 0.5rem; */
                width: 100%;
                display: block;
                position: absolute;
                inset: 0;
            }
        }

        .bdydic-content-body {
            /* grid-column: 2 / -1; */

            p {
                margin-inline: 0;
            }
        }

        &.bdydic-unit-completed {
            background: oklch(from var(--bg) 70% 0.12 h / 0.15);
        }
    }

    /* --- Progress tracking controls --- */
    .bdydic-progress-controls {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        position: relative;
        /* ensure it sits above the <a>::after overlay */
        z-index: 1;
        flex-shrink: 0;
        grid-area: 1 / 3;
    }

    .bdydic-completed-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: oklch(40% 0.12 145);
        white-space: nowrap;
    }

    .bdydic-checkmark {
        font-size: 1rem;
        line-height: 1;
        color: oklch(52% 0.16 145);
    }

    .bdydic-btn-mark-complete,
    .bdydic-btn-unmark-complete {
        font-size: 0.75rem;
        padding: 0.2rem 0.55rem;
        border-radius: 0.25rem;
        border: 1px solid currentColor;
        cursor: pointer;
        background: transparent;
        line-height: 1.4;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s;
    }

    .bdydic-btn-mark-complete {
        color: oklch(45% 0.12 229);

        &:hover {
            background: oklch(45% 0.12 229);
            color: #fff;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    .bdydic-btn-unmark-complete {
        color: var(--wa-color-red-60);

        &:hover {
            background: var(--wa-color-red-60);
            color: #fff;
        }

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }


}

.bdydic-video-dialog,
.bdydic-unit-modal {
    background: oklch(from var(--base) l c h / 0.9);
    color: var(--text);
    inset: 0;
    margin: auto;
    max-width: 98vw;
    width: 100%;
    max-height: 95dvh;
    /* border: none; */
    /* border-radius: 12px; */
    padding: 0;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    overflow-x: hidden;
}

.bdydic-video-dialog {
    aspect-ratio: 15/9;
}

.bdydic-video-dialog .bdydic-dialog-body {
    padding: 0;

    .bdydic-video-embed {
        aspect-ratio: 16/9;
        height: 100%;
        width: auto;
        margin: auto;
    }
}

dialog.bdydic-video-dialog::backdrop,
dialog.bdydic-unit-modal::backdrop {
    background-color: var(--bg-content);
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.bdydic-dialog-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bdydic-dialog-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid oklch(90% 0.02 229);
    background: var(--base);

    h3 {
        margin: 0;
        font-size: 1.5rem;
    }
}

.bdydic-dialog-body {
    padding: 2rem;
    overflow-y: auto;
    flex-grow: 1;
    line-height: 1.6;

    .bdydic-content {
        p {
            margin-bottom: 1.5rem;
        }

        /* img { max-width: 100%; height: auto; border-radius: 8px; } */
    }
}

.btn.bdydic-dialog-close {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 2rem;
    padding: 0;
    aspect-ratio: 1;
    z-index: 1;

    &:hover {
        transform: rotate(90deg);
    }
}

/* Loader */
.bdydic-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.bdydic-loader {
    width: 48px;
    height: 48px;
    border: 5px solid oklch(95% 0.02 229);
    border-bottom-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: bdydic-rotation 1s linear infinite;
}

@keyframes bdydic-rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bdydic-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: 0;
    }
}

/* =============================================================================
   Course Card Component
   - .bdydic-course-card           single card (used in both contexts)
   - .bdydic-course-card-list      wrapper for the dashboard list
   ============================================================================= */

/* ── Shared card base ─────────────────────────────────────────────────────── */
.bdydic-course-card {
    --expired-opacity: 0.55;
    --flow-spacer: 0.5rem;

    display: grid;
    grid-template-columns: 1fr;
    background: var(--bg-content);
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;

    &:hover {
        box-shadow: 0 4px 16px oklch(from var(--primary) 40% 0.1 h / 0.15);
        transform: translateY(-2px);
    }

    /* ── Thumbnail column (only present with --with-thumb modifier) ────────── */
    &.bdydic-course-card--with-thumb {
        gap: var(--flow-spacer);
    }

    .bdydic-course-card__thumbnail {
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: var(--clr-primary-500);

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }
    }

    &:hover .bdydic-course-card__thumbnail img {
        transform: scale(1.04);
    }

    /* ── Body ──────────────────────────────────────────────────────────────── */
    .bdydic-course-card__header {

        /* Extend the click area over the whole card */
        h3 a::after {
            content: "";
            position: absolute;
            inset: 0;
        }
    }


    /* ── Status badges ─────────────────────────────────────────────────────── */
    .bdydic-course-card__badge {
        padding: 0.1em 0.6em;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .bdydic-course-card__badge--expired {
        background: var(--wa-color-red-80);
        color: var(--wa-color-red-40);
        border: 1px solid var(--wa-color-red-40);
    }

    .bdydic-course-card__badge--complete {
        background: var(--wa-color-green-80);
        color: var(--wa-color-green-40);
        border: 1px solid var(--wa-color-green-40);
    }

    /* ── Expired state ─────────────────────────────────────────────────────── */
    &.bdydic-course-card--expired {
        opacity: var(--expired-opacity);

        .bdydic-course-progress-fill {
            background: oklch(70% 0.02 229);
            /* grey bar instead of primary */
        }
    }
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.bdydic-course-progress {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bdydic-course-progress-bar {
    --bar-height: 0.75rem;
    --bar-bg: var(--clr-neutral-300);
    --bar-fill: var(--primary);

    height: var(--bar-height);
    background: var(--bar-bg);
    border-radius: 50vh;
}

.bdydic-course-progress-fill {
    height: 100%;
    background: var(--bar-fill);
    border-radius: 50vh;
    transition: width 0.5s ease;
    min-width: 0.25rem;
    /* always show a sliver even at 0% */
}

.bdydic-progress-bar-standalone {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

/* ── Card list grid — WC My Account dashboard ─────────────────────────────── */
.bdydic-course-card-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1.1rem;
}

/* =============================================================================
   Course Related Products Card Component
   - .bdydic-course-product-card           single product card
   ============================================================================= */

.bdydic-course-product-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 1.1rem;
}

.bdydic-course-product-card {
    --flow-spacer: 0.5rem;

    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    background: var(--bg-content);
    border: 1px solid var(--primary);
    border-radius: 0.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;

    &:hover {
        box-shadow: 0 4px 16px oklch(from var(--primary) 40% 0.1 h / 0.15);
        transform: translateY(-2px);
    }

    &.bdydic-course-product-card--with-thumb {
        grid-template-columns: 2fr 3fr;
        align-items: center;

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

    .bdydic-course-product-card__thumbnail {
        overflow: hidden;
        aspect-ratio: 16/9;
        background: var(--clr-primary-500);

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }
    }

    &:hover .bdydic-course-product-card__thumbnail img {
        transform: scale(1.04);
    }

    .bdydic-course-product-card__body {
        line-height: 1;
    }

    .bdydic-course-product-card__price {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--link);

        del {
            font-size: 0.9rem;
            color: oklch(60% 0.02 229);
            margin-right: 0.35rem;
        }

        ins {
            text-decoration: none;
        }
    }

    a.added_to_cart {
        position: absolute;
        bottom: -1rem;
        right: 0;
        background-color: var(--wa-color-green-40);
        color: var(--wa-color-green-80);
        border-radius: 0.25rem;
        padding: calc(var(--fs-300) * 0.5) calc(var(--fs-300) * 0.75);
    }
}