/* Private lessons configurator (product page) */

.mv-lesson {
    --mv-ink: #510000;
    --mv-ink-2: #6e2f2c;
    --mv-muted: #8f6f6b;
    --mv-line: #e4d9cf;
    --mv-panel: #f4f1e6;
    --mv-peach: #ffc2b0;
    --mv-peach-ink: #1a0808;
    --mv-coral: #d9573f;
    --mv-coral-soft: rgba(217, 87, 63, 0.14);
    --mv-coral-tint: #fff3ee;
    --mv-err: #b3261e;
    --mv-err-bg: #fdecea;
    --mv-warn: #8a5a00;
    --mv-warn-bg: #fff4d6;
    color: var(--mv-ink);
}

/* Layout: single column by default; two columns when the form is wide enough. */
form.cart.mv-lesson-form {
    container-type: inline-size;
}

.mv-lesson-form .quantity,
.mv-lesson-form .wc-appointments-appointment-cost dl {
    display: none !important;
}

@container (min-width: 780px) {
    /* The plugin sets ".wc-appointments-appointment-form-wrap { display: block !important }",
       so the grid needs !important as well (higher specificity decides between the two). */
    form.cart.mv-lesson-form,
    .woocommerce div.product form.cart.mv-lesson-form,
    .woocommerce-js div.product form.cart.mv-lesson-form,
    .woocommerce div.product.mv-lesson-product form.cart.mv-lesson-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 28px;
        align-items: start;
        float: none;
        width: 100%;
        margin-bottom: 0;
    }

    form.cart.mv-lesson-form > #wc-appointments-appointment-form,
    form.cart.mv-lesson-form > .wc-appointments-appointment-form,
    form.cart.mv-lesson-form > .mv-lesson-after-slots,
    form.cart.mv-lesson-form > .mv-lesson-extras {
        grid-column: 1;
    }

    form.cart.mv-lesson-form > .mv-lesson-summary {
        grid-column: 2;
        grid-row: 1 / span 8;
        position: sticky;
        top: 16px;
    }
}

/* Steps */
.mv-lesson-step {
    border: 0;
    padding: 0;
    margin: 0 0 28px;
    min-width: 0;
}

.mv-lesson-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mv-ink);
}

.mv-lesson-stepno {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mv-ink);
    color: #fff;
    font-size: 13px;
    flex: none;
    transition: background-color 0.15s;
}

/* Completed step: the number becomes a check mark. */
.mv-lesson-step.is-done .mv-lesson-stepno {
    background: var(--mv-coral);
    color: transparent;
}

.mv-lesson-step.is-done .mv-lesson-stepno::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

/* Required step still missing (shown after a click on the inactive register button). */
.mv-lesson-step.is-missing .mv-lesson-legend {
    color: var(--mv-err);
}

.mv-lesson-step.is-missing .mv-lesson-stepno {
    background: var(--mv-err);
}

.mv-lesson-step-date {
    margin-bottom: 8px;
}

/* Until a type is chosen, the later steps and the calendar are visible but inactive.
   Steps 1–3 live inside the plugin's .wc-appointments-appointment-hook-before wrapper, so that wrapper is
   excluded and steps 2–3 are faded through their own classes. */
form.cart.mv-lesson-form.mv-lesson-no-type > .wc-appointments-appointment-form > :not(.wc-appointments-appointment-hook-before),
form.cart.mv-lesson-form.mv-lesson-no-type .mv-lesson-step-qty,
form.cart.mv-lesson-form.mv-lesson-no-type .mv-lesson-step-date,
form.cart.mv-lesson-form.mv-lesson-no-type > .mv-lesson-after-slots,
form.cart.mv-lesson-form.mv-lesson-no-type > .mv-lesson-extras {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Type cards */
.mv-lesson-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .mv-lesson-types {
        grid-template-columns: 1fr;
    }
}

.mv-lesson-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border: 1.5px solid var(--mv-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.mv-lesson-card:hover {
    border-color: var(--mv-ink-2);
}

.mv-lesson-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.mv-lesson-card:has(input:focus-visible) {
    outline: 2px solid var(--mv-coral);
    outline-offset: 2px;
}

/* Selected card: coral ring, tinted background and a "Pasirinkta" badge. */
.mv-lesson-card.is-selected {
    border-color: var(--mv-coral);
    background: var(--mv-coral-tint);
    box-shadow: 0 0 0 3px var(--mv-coral-soft);
}

.mv-lesson-card-check {
    display: none;
}

.mv-lesson-card-media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--mv-panel);
}

.mv-lesson-card-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv-lesson-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
}

.mv-lesson-card-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.mv-lesson-card-meta {
    font-size: 13px;
    color: var(--mv-ink-2);
}

.mv-lesson-card-blurb {
    font-size: 13px;
    color: var(--mv-muted);
    line-height: 1.4;
}

.mv-lesson-muted {
    color: var(--mv-muted);
}

/* Optional services (step 4) */
.mv-lesson-options {
    display: grid;
    gap: 10px;
}

.mv-lesson-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid var(--mv-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.mv-lesson-option[hidden] {
    display: none !important;
}

.mv-lesson-option:hover {
    border-color: var(--mv-ink-2);
}

.mv-lesson-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.mv-lesson-option:has(input:focus-visible) {
    outline: 2px solid var(--mv-coral);
    outline-offset: 2px;
}

/* Custom radio indicator */
.mv-lesson-option::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--mv-line);
    background: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}

.mv-lesson-option.is-selected {
    border-color: var(--mv-coral);
    background: var(--mv-coral-tint);
    box-shadow: 0 0 0 3px var(--mv-coral-soft);
}

.mv-lesson-option.is-selected::before {
    border-color: var(--mv-coral);
    background: radial-gradient(circle, var(--mv-coral) 0 45%, #fff 50% 100%);
}

.mv-lesson-option-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mv-lesson-option-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}

.mv-lesson-option-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mv-panel);
    font-size: 12px;
    font-weight: 600;
    color: var(--mv-ink-2);
    vertical-align: 1px;
    white-space: nowrap;
}

.mv-lesson-option-blurb {
    font-size: 13px;
    color: var(--mv-muted);
    line-height: 1.4;
}

.mv-lesson-option-price {
    flex: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    color: var(--mv-ink);
}

.mv-lesson-extras[hidden] {
    display: none !important;
}

/* Stepper */
.mv-lesson-qtyrow {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mv-lesson-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--mv-line);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}

.mv-lesson-stepper .mv-lesson-qty-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mv-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.mv-lesson-stepper .mv-lesson-qty-btn:hover {
    background: var(--mv-panel);
    color: var(--mv-ink);
}

.mv-lesson-stepper .mv-lesson-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}

.mv-lesson-stepper input.mv-lesson-qty {
    width: 64px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--mv-line);
    border-right: 1px solid var(--mv-line);
    border-radius: 0;
    text-align: center;
    font: inherit;
    font-weight: 600;
    font-size: 17px;
    color: var(--mv-ink);
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
    box-shadow: none;
}

.mv-lesson-stepper input::-webkit-inner-spin-button,
.mv-lesson-stepper input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mv-lesson-qty-unit {
    font-size: 14px;
    color: var(--mv-ink-2);
}

.mv-lesson-hint {
    font-size: 13px;
    color: var(--mv-muted);
    margin: 8px 0 0;
}

.mv-lesson-notice {
    font-size: 13px;
    color: var(--mv-warn);
    background: var(--mv-warn-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0 0;
}

.mv-lesson-error {
    font-size: 13px;
    color: var(--mv-err);
    background: var(--mv-err-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0 0;
}

.mv-lesson-notice[hidden],
.mv-lesson-error[hidden] {
    display: none;
}

/* Price card */
.mv-lesson-summary {
    background: var(--mv-panel);
    border-radius: 14px;
    padding: 20px;
    margin: 20px 0 0;
}

.mv-lesson-summary-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    margin: 0 0 12px;
}

.mv-lesson-lines {
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.mv-lesson-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
}

.mv-lesson-line dt {
    margin: 0;
    font-weight: 600;
    color: var(--mv-ink-2);
}

.mv-lesson-line dt.mv-lesson-line-empty {
    display: none;
}

.mv-lesson-line dt.mv-lesson-line-empty + dd {
    grid-column: 1 / -1;
}

.mv-lesson-line dd {
    margin: 0;
    text-align: right;
}

.mv-lesson-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 22px;
    font-weight: 700;
    border-top: 1px solid var(--mv-line);
    padding-top: 12px;
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.mv-lesson-vat {
    font-size: 12px;
    color: var(--mv-muted);
    margin: 6px 0 14px;
}

.mv-lesson-cta-slot.is-inactive {
    cursor: not-allowed;
}

.mv-lesson-cta-slot .single_add_to_cart_button,
.mv-lesson-form .wc-appointments-appointment-form-button {
    display: block;
    width: 100%;
    margin: 0;
    background: var(--mv-peach);
    color: var(--mv-peach-ink);
    border: 0;
    border-radius: 30px;
    padding: 14px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
}

.mv-lesson-cta-slot .single_add_to_cart_button:disabled,
.mv-lesson-cta-slot .single_add_to_cart_button.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none; /* the click lands on .mv-lesson-cta-slot, which explains what is missing */
}

.mv-lesson-cta-hint {
    font-size: 13px;
    color: var(--mv-ink-2);
    margin: 10px 0 0;
    text-align: center;
}

.mv-lesson-cta-hint[hidden] {
    display: none;
}

.mv-lesson-included {
    border-top: 1px solid var(--mv-line);
    margin-top: 16px;
    padding-top: 14px;
}

.mv-lesson-included-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    margin: 0 0 8px;
}

.mv-lesson-included ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.mv-lesson-included li {
    position: relative;
    padding-left: 20px;
}

.mv-lesson-included li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mv-coral);
    font-weight: 700;
}

/* Plugin error message stays visible; its cost <dl> is hidden above. */
.mv-lesson-form .wc-appointments-appointment-cost .appointment-error {
    display: block;
    margin-top: 8px;
    color: #b3261e;
}

/* Sections under the form (gallery, FAQ) */
.mv-lesson-section-title {
    font-size: 22px;
    margin: 0 0 6px;
}

.mv-lesson-gallery,
.mv-lesson-faq {
    margin: 36px 0 0;
}

.mv-lesson-gallery-hint {
    margin: 0 0 12px;
}

.mv-lesson-gallery-strip {
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--mv-line) transparent;
}

.mv-lesson-gallery-cell {
    flex: 0 0 auto;
    width: 280px;
    margin: 0;
    scroll-snap-align: start;
}

@media (max-width: 560px) {
    .mv-lesson-gallery-cell {
        width: 72vw;
    }
}

.mv-lesson-gallery-item {
    display: block;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mv-panel);
}

.mv-lesson-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.mv-lesson-gallery-item:hover img,
.mv-lesson-gallery-item:focus-visible img {
    transform: scale(1.03);
}

/* Lightbox */
.mv-lesson-lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(20, 8, 6, 0.93);
    color: #fff;
    z-index: 100000;
}

.mv-lesson-lightbox:not([open]) {
    display: none;
}

.mv-lesson-lightbox[open] {
    display: grid;
    place-items: center;
}

.mv-lesson-lightbox::backdrop {
    background: transparent;
}

body:has(dialog.mv-lesson-lightbox[open]) {
    overflow: hidden;
}

.mv-lesson-lightbox-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
}

.mv-lesson-lightbox-figure img {
    display: block;
    max-width: 92vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mv-lesson-lightbox-figure figcaption {
    font-size: 14px;
    color: #fff;
    text-align: center;
}

.mv-lesson-lightbox-figure figcaption[hidden] {
    display: none;
}

.mv-lesson-lightbox .mv-lesson-lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.mv-lesson-lightbox .mv-lesson-lightbox-btn:hover,
.mv-lesson-lightbox .mv-lesson-lightbox-btn:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.mv-lesson-lightbox .mv-lesson-lightbox-close {
    top: 16px;
    right: 16px;
}

.mv-lesson-lightbox .mv-lesson-lightbox-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mv-lesson-lightbox .mv-lesson-lightbox-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.mv-lesson-lightbox-count {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    opacity: 0.8;
}

/* FAQ accordion */
.mv-lesson-faq {
    scroll-margin-top: 90px;
}

.mv-lesson-faq-list {
    border-top: 1px solid var(--mv-line);
    margin-top: 10px;
}

.mv-lesson-faq-item {
    border-bottom: 1px solid var(--mv-line);
}

.mv-lesson-faq-q {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 14px 44px 14px 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: var(--mv-ink);
}

.mv-lesson-faq-q::-webkit-details-marker {
    display: none;
}

.mv-lesson-faq-q::marker {
    content: "";
}

.mv-lesson-faq-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
}

.mv-lesson-faq-icon::before,
.mv-lesson-faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--mv-coral);
    transition: transform 0.2s;
}

.mv-lesson-faq-icon::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.mv-lesson-faq-icon::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.mv-lesson-faq-item[open] .mv-lesson-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.mv-lesson-faq-a {
    padding: 0 44px 16px 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mv-ink-2);
}

.mv-lesson-faq-a p {
    margin: 0 0 10px;
}

.mv-lesson-faq-a p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------
 * Overrides for WooCommerce Appointments frontend.css, which styles every
 * label inside a fieldset of the booking form (inline-block, width 25%,
 * spans small and grey). Our cards, options and legends are such labels.
 * Selector prefix keeps specificity above the plugin's rules.
 * --------------------------------------------------------------------- */
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card {
    display: flex;
    width: auto;
    max-width: none;
    line-height: 1.4;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: var(--mv-ink);
    vertical-align: baseline;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card span {
    font-size: inherit;
    color: inherit;
    padding: 0;
    line-height: inherit;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-body {
    display: flex;
    padding: 12px 14px;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-meta {
    font-size: 13px;
    color: var(--mv-ink-2);
    line-height: 1.45;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-blurb {
    font-size: 13px;
    color: var(--mv-muted);
    line-height: 1.45;
}

/* "Pasirinkta" badge on the selected card (needs the same prefix to beat the span rule above). */
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-check {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mv-coral);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(81, 0, 0, 0.18);
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card .mv-lesson-card-check::before {
    content: "✓";
    font-size: 12px;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset label.mv-lesson-card.is-selected .mv-lesson-card-check {
    display: inline-flex;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset legend.mv-lesson-legend {
    display: flex;
    width: auto;
    padding: 0;
    margin-bottom: 12px;
}

/* Step 4 sits outside .mv-lesson-steps (after the plugin's fields); guard against the same label rules. */
.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option {
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px 14px;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
    color: var(--mv-ink);
    vertical-align: baseline;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option[hidden] {
    display: none !important;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option span {
    font-size: inherit;
    color: inherit;
    padding: 0;
    line-height: inherit;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option .mv-lesson-option-body {
    display: flex;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option .mv-lesson-option-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option .mv-lesson-option-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--mv-ink-2);
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option .mv-lesson-option-blurb {
    font-size: 13px;
    color: var(--mv-muted);
    line-height: 1.45;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras label.mv-lesson-option .mv-lesson-option-price {
    font-size: 14px;
    font-weight: 700;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras legend.mv-lesson-legend {
    display: flex;
    width: auto;
    padding: 0;
    margin: 0 0 12px;
}

.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras {
    border: 0;
    padding: 0;
    margin: 0 0 28px;
    min-width: 0;
}

/* Astra/WooCommerce button rules (.woocommerce-js div.product form.cart .button: float left, width auto;
   light button text) outrank the card button styles above, so repeat them with higher specificity. */
.woocommerce-js div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button,
.woocommerce-js div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:hover,
.woocommerce-js div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:focus,
.woocommerce div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button,
.woocommerce div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:focus {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px;
    background-color: #ffc2b0;
    border-color: #ffc2b0;
    color: #1a0808;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    box-shadow: none;
}

.woocommerce-js div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:hover {
    background-color: #ffb097;
    border-color: #ffb097;
}

.woocommerce-js div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .mv-lesson-cta-slot .single_add_to_cart_button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #ffc2b0;
    color: #1a0808;
}

/* Astra pulls the button 1em to the left when the product has a hidden quantity field
   (".product:has(.quantity input[type=hidden]) .button.single_add_to_cart_button", ".sold-individually …"): a gift
   voucher, the adult membership, and so every form on a choice page. Inside the price card it stays in place. */
.mv-lesson-cta-slot .single_add_to_cart_button.button {
    margin: 0 !important;
}

/* Spacing + rhythm. The plugin resets fieldset margins to 0 and the theme's body line-height is loose
   for small helper text, so both are restated with the plugin's selector prefix. */
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset.mv-lesson-step {
    margin: 0 0 36px;
    padding: 0;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps fieldset.mv-lesson-step-type {
    margin-top: 28px;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-step-date {
    margin: 0 0 12px;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-legend {
    margin: 0 0 14px;
    line-height: 1.3;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-hint,
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-notice,
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-error,
.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras .mv-lesson-hint,
.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras .mv-lesson-notice {
    line-height: 1.45;
    margin: 10px 0 0;
}

.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-notice[hidden],
.wc-appointments-appointment-form-wrap .wc-appointments-appointment-form .mv-lesson-steps .mv-lesson-error[hidden],
.wc-appointments-appointment-form-wrap fieldset.mv-lesson-extras .mv-lesson-notice[hidden],
.wc-appointments-appointment-form-wrap .mv-lesson-after-slots .mv-lesson-notice[hidden],
.wc-appointments-appointment-form-wrap .mv-lesson-after-slots .mv-lesson-error[hidden] {
    display: none;
}

.mv-lesson-summary .mv-lesson-lines,
.mv-lesson-summary .mv-lesson-vat,
.mv-lesson-summary .mv-lesson-cta-hint,
.mv-lesson-summary .mv-lesson-included ul {
    line-height: 1.45;
}


/* ------------------------------------------------------------------------
 * Page layout for configured products (div.product.mv-lesson-product):
 * no gallery column, summary spans the container, so the form is wide enough
 * for the two-column grid above (steps left, sticky price card right).
 * --------------------------------------------------------------------- */
/* Astra: ".woocommerce .ast-woocommerce-container div.product div.summary { width: 46% }" at ≥922px,
   loaded after this sheet, so these selectors carry more weight. */
.woocommerce.mv-lesson-product-page div.product.mv-lesson-product div.summary,
.woocommerce.mv-lesson-product-page .ast-woocommerce-container div.product.mv-lesson-product div.summary,
.woocommerce.mv-lesson-product-page #content .ast-woocommerce-container div.product.mv-lesson-product div.summary,
.woocommerce-js.mv-lesson-product-page .ast-woocommerce-container div.product.mv-lesson-product div.summary,
.woocommerce-js.mv-lesson-product-page #content .ast-woocommerce-container div.product.mv-lesson-product div.summary {
    float: none;
    clear: both;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    /* An element cannot answer its own @container query, so the summary is the container that
       form.cart.mv-lesson-form queries; the form stays a container for its own descendants. */
    container-type: inline-size;
}

.woocommerce.mv-lesson-product-page .ast-woocommerce-container div.product.mv-lesson-product div.images,
.woocommerce.mv-lesson-product-page #content .ast-woocommerce-container div.product.mv-lesson-product div.images,
.woocommerce.mv-lesson-product-page div.product.mv-lesson-product .woocommerce-product-gallery {
    display: none;
}

.mv-lesson-product .woocommerce-product-details__short-description {
    max-width: 760px;
}

/* Under the slot list */
.mv-lesson-after-slots {
    margin: 4px 0 24px;
}

.mv-lesson-after-slots .mv-lesson-slot-hint:empty {
    display: none;
}

.mv-lesson-after-slots .mv-lesson-no-slot {
    font-size: 14px;
    line-height: 1.45;
    margin: 10px 0 0;
    color: var(--mv-ink);
}

.mv-lesson-after-slots .mv-lesson-no-slot a {
    color: var(--mv-coral);
    text-decoration: underline;
}

/* Wide form: calendar and slot list side by side inside the plugin's field container. */
@container (min-width: 780px) {
    form.cart.mv-lesson-form > .wc-appointments-appointment-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }

    form.cart.mv-lesson-form > .wc-appointments-appointment-form > * {
        grid-column: 1 / -1;
        min-width: 0;
    }

    form.cart.mv-lesson-form > .wc-appointments-appointment-form > fieldset.wc-appointments-date-picker {
        grid-column: 1;
        margin: 0;
    }

    form.cart.mv-lesson-form > .wc-appointments-appointment-form > fieldset.wc-appointments-date-picker + .form-field-wide {
        grid-column: 2;
        margin: 0;
    }

    form.cart.mv-lesson-form > .wc-appointments-appointment-form > .wc_appointments_field_timezone {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        text-align: right;
        margin: 0 0 8px;
    }
}

/* The plugin draws a bordered, padded box around its whole form container; the mockup has none. */
.woocommerce.mv-lesson-product-page div.product.mv-lesson-product form.cart.mv-lesson-form > .wc-appointments-appointment-form,
.woocommerce-js.mv-lesson-product-page div.product.mv-lesson-product form.cart.mv-lesson-form > .wc-appointments-appointment-form {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.mv-lesson-nowrap {
    white-space: nowrap;
}

/* Description below the form: no tab strip ("Aprašymas" is the only tab), just a separator. */
.mv-lesson-product .woocommerce-tabs ul.tabs,
.mv-lesson-product .woocommerce-tabs ul.wc-tabs {
    display: none;
}

.mv-lesson-product .woocommerce-tabs {
    border-top: 1px solid var(--mv-line, #e4d9cf);
    margin-top: 32px;
    padding-top: 28px;
}

.mv-lesson-product .woocommerce-tabs .panel > h2:first-child {
    display: none;
}

/* Without a description there is no tab block, and related products / upsells would follow the FAQ (the last part of
   the summary, whose own margin is removed above) with no space at all. */
.mv-lesson-product div.summary + section.related,
.mv-lesson-product div.summary + section.up-sells {
    margin-top: 56px;
}

/* ------------------------------------------------------------------------
 * Variable products: cards over the product's variations (inc/lesson-rules/variable.php,
 * assets/variation-cards.js). The script adds .mv-lesson-form-variable once it has taken over the form;
 * until then (or without JS) WooCommerce's plain form is shown and the steps stay hidden.
 * --------------------------------------------------------------------- */
.mv-lesson-steps-variable[hidden],
.mv-lesson-steps-variable .mv-lesson-step[hidden],
.mv-lesson-steps-variable [data-value][hidden],
.mv-lesson-summary[hidden],
.mv-lesson-variation-note[hidden] {
    display: none !important;
}

/* WooCommerce's dropdowns and add-to-cart block stay in the form (they submit), out of sight. */
form.cart.mv-lesson-form-variable > table.variations,
form.cart.mv-lesson-form-variable > .single_variation_wrap,
form.cart.mv-lesson-form-variable > .reset_variations_alert {
    display: none !important;
}

@container (min-width: 780px) {
    form.cart.mv-lesson-form-variable > :not(.mv-lesson-summary) {
        grid-column: 1;
    }
}

.mv-lesson-steps-variable .mv-lesson-step {
    margin: 0 0 36px;
}

.mv-lesson-steps-variable .mv-lesson-step:first-child {
    margin-top: 12px;
}

.mv-lesson-steps-variable .mv-lesson-legend {
    margin: 0 0 14px;
    line-height: 1.3;
}

.mv-lesson-steps-variable .mv-lesson-hint,
.mv-lesson-steps-variable .mv-lesson-notice,
.mv-lesson-steps-variable .mv-lesson-error {
    line-height: 1.45;
    margin: 10px 0 0;
}

.mv-lesson-steps-variable .mv-lesson-hint:empty {
    display: none;
}

/* A later step waits (faded, not clickable) until the earlier ones are chosen. */
.mv-lesson-steps-variable .mv-lesson-step.is-waiting {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Cards: the "Pasirinkta" badge, the date line, sold-out state. */
.mv-lesson-steps-variable .mv-lesson-card .mv-lesson-card-check,
.mv-lesson-step-choice .mv-lesson-card .mv-lesson-card-check {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mv-coral);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(81, 0, 0, 0.18);
}

.mv-lesson-steps-variable .mv-lesson-card .mv-lesson-card-check::before,
.mv-lesson-step-choice .mv-lesson-card .mv-lesson-card-check::before {
    content: "✓";
    font-size: 12px;
}

.mv-lesson-steps-variable .mv-lesson-card.is-selected .mv-lesson-card-check,
.mv-lesson-step-choice .mv-lesson-card.is-selected .mv-lesson-card-check {
    display: inline-flex;
}

/* Text-only cards (no photo): a small check circle instead of the labelled badge, so long names keep the width. */
.mv-lesson-steps-variable .mv-lesson-card:not(.has-image) .mv-lesson-card-body {
    padding-right: 42px;
}

.mv-lesson-steps-variable .mv-lesson-card:not(.has-image) .mv-lesson-card-check {
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    padding: 0;
    gap: 0;
    justify-content: center;
    font-size: 0;
}

.mv-lesson-card-when {
    font-size: 14px;
    font-weight: 600;
    color: var(--mv-ink-2);
    line-height: 1.35;
}

.mv-lesson-card-meta:empty {
    display: none;
}

.mv-lesson-card.is-disabled,
.mv-lesson-chip.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mv-lesson-card.is-disabled:hover,
.mv-lesson-chip.is-disabled:hover {
    border-color: var(--mv-line);
}

/* Chips: values that are only an amount ("25 €"). */
.mv-lesson-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mv-lesson-chips + .mv-lesson-types {
    margin-top: 12px;
}

.mv-lesson-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 9px 20px;
    border: 1.5px solid var(--mv-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mv-ink);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.mv-lesson-chip:hover {
    border-color: var(--mv-ink-2);
}

.mv-lesson-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.mv-lesson-chip:has(input:focus-visible) {
    outline: 2px solid var(--mv-coral);
    outline-offset: 2px;
}

.mv-lesson-chip.is-selected {
    border-color: var(--mv-coral);
    background: var(--mv-coral-tint);
    box-shadow: 0 0 0 3px var(--mv-coral-soft);
}

/* Fields a plugin adds after the variation is found (Flexible Coupons: recipient name). */
.mv-lesson-step-fields .form-row {
    margin: 0;
    padding: 0;
}

.mv-lesson-step-fields label {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--mv-ink);
}

.mv-lesson-step-fields input.input-text {
    width: 100%;
    max-width: 420px;
    padding: 10px 12px;
    border: 1.5px solid var(--mv-line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--mv-ink);
}

.mv-lesson-step-fields input.input-text:focus {
    border-color: var(--mv-coral);
    outline: none;
    box-shadow: 0 0 0 3px var(--mv-coral-soft);
}

/* Price card: the variation's own description (e.g. how the gift voucher is delivered). */
.mv-lesson-variation-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mv-ink-2);
}

.mv-lesson-variation-note p {
    margin: 0 0 6px;
}

.mv-lesson-variation-note ul {
    margin: 4px 0 6px 18px;
    padding: 0;
}

/* Price card: automatic monthly payment (subscriptions). */
.mv-lesson-recurring {
    margin: -8px 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--mv-ink-2);
}

.mv-lesson-recurring[hidden] {
    display: none;
}

/* ------------------------------------------------------------------------
 * Choice page (grouped product, inc/lesson-rules/hub.php): step 1 picks one of the children; that child's own
 * form (variation cards + price card) appears under it. On wide screens the hub is the two-column grid: the chosen
 * wrapper and its form take no box (display: contents), so the form's steps continue the left column and its
 * price card takes the right one, where the placeholder card sits until something is chosen.
 * --------------------------------------------------------------------- */
.mv-lesson-hub-choice[hidden],
.mv-lesson-hub-summary[hidden] {
    display: none !important;
}

.mv-lesson-hub .mv-lesson-step-choice {
    border: 0;
    padding: 0;
    margin: 12px 0 36px;
    min-width: 0;
}

.mv-lesson-hub .mv-lesson-step-choice .mv-lesson-legend {
    margin: 0 0 14px;
    line-height: 1.3;
}

.mv-lesson-hub .mv-lesson-card-meta {
    font-weight: 600;
}

/* On a narrow screen the placeholder would only repeat "choose first". */
.mv-lesson-hub-summary {
    display: none;
}

/* The lesson form is a size container of its own; inside the choice page it has no box (display: contents), so
   its descendants must query the page's container instead, or the price card never gets its column. */
.mv-lesson-hub form.cart.mv-lesson-form {
    container-type: normal;
}

@container (min-width: 780px) {
    .mv-lesson-hub {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 28px;
        align-items: start;
    }

    .mv-lesson-hub > *,
    .mv-lesson-hub-choice > *,
    .mv-lesson-hub form.cart > * {
        grid-column: 1;
    }

    .mv-lesson-hub-choice:not([hidden]) {
        display: contents;
    }

    /* Outranks the form's own grid (.woocommerce div.product.mv-lesson-product form.cart.mv-lesson-form). */
    .woocommerce div.product .mv-lesson-hub form.cart.mv-lesson-form,
    .woocommerce-js div.product .mv-lesson-hub form.cart.mv-lesson-form,
    .woocommerce div.product.mv-lesson-product .mv-lesson-hub form.cart.mv-lesson-form {
        display: contents !important;
    }

    .mv-lesson-hub > .mv-lesson-hub-summary,
    .mv-lesson-hub form.cart.mv-lesson-form > .mv-lesson-summary {
        grid-column: 2;
        grid-row: 1 / span 40;
        position: sticky;
        top: 16px;
        margin-top: 12px;
    }

    .mv-lesson-hub > .mv-lesson-hub-summary:not([hidden]) {
        display: block;
    }
}

/* Product Add-Ons fields as a step of their own (e.g. "Kur keliaus jūsų kūriniai po pamokos?" on the courses).
   The plugin's subtotal box would repeat the price card. */
.mv-lesson-step-addons #product-addons-total,
.mv-lesson-step-addons .product-addon-totals {
    display: none !important;
}

.mv-lesson-step-addons .wc-pao-addon-container {
    margin: 0 0 16px;
}

.mv-lesson-step-addons .wc-pao-addon-name {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--mv-ink);
}

.mv-lesson-step-addons .wc-pao-addon-description {
    font-size: 13px;
    line-height: 1.45;
    color: var(--mv-muted);
    margin: 0 0 8px;
}

.mv-lesson-step-addons .wc-pao-addon-description p {
    margin: 0 0 6px;
}

.mv-lesson-step-addons .form-row {
    margin: 0;
    padding: 0;
}

.mv-lesson-step-addons select.wc-pao-addon-field,
.mv-lesson-step-addons input.wc-pao-addon-field[type="text"],
.mv-lesson-step-addons textarea.wc-pao-addon-field {
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    border: 1.5px solid var(--mv-line);
    border-radius: 10px;
    background-color: #fff;
    font: inherit;
    color: var(--mv-ink);
}

.mv-lesson-step-addons .wc-pao-addon-field:focus {
    border-color: var(--mv-coral);
    outline: none;
    box-shadow: 0 0 0 3px var(--mv-coral-soft);
}

.mv-lesson-step-addons .validation_message:empty {
    display: none;
}

/* Seats: times without room for the chosen participant count, hidden until the list is re-requested
   (the server leaves them out of the new list; lesson-configurator.js, appointments.php). */
.mv-lesson-form .slot-picker li.slot.mv-lesson-slot-full {
    display: none !important;
}