/* Dinopedia - Billetterie : parcours en étapes sur le formulaire de variations. */

form.variations_form {
    --dino-accent: #1689b8;
    --dino-accent-tint: #eef7fb;
    --dino-ink: #303e46;
    --dino-muted: #5b6770;
    --dino-line: #c9d0d6;
    --dino-soft: #f1f3f5;
    --dino-day: #f7c04a;
    --dino-day-ink: #3d2a00;
    --dino-night: #27305e;
    --dino-radius: 10px;
}

/* Tant que le script n'a pas pris la main, le formulaire natif reste seul visible. */
form.variations_form .dino-bt[hidden],
form.variations_form .dino-bt__step[hidden],
form.variations_form .dino-bt__choice[hidden],
form.variations_form .dino-bt__summary-total[hidden],
form.variations_form:not(.dino-bt-ready) .dino-bt__title--qty,
form.variations_form:not(.dino-bt-ready) .dino-bt__summary {
    display: none !important;
}

form.variations_form.dino-bt-ready {
    counter-reset: dino-step;
}

form.variations_form.dino-bt-ready table.variations,
form.variations_form.dino-bt-ready .woocommerce-variation-price {
    display: none;
}

/* Étapes */
form.variations_form .dino-bt {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    color: var(--dino-ink);
}

form.variations_form .dino-bt__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

form.variations_form .dino-bt__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    color: var(--dino-ink);
}

/* Numéro d'étape : une étape masquée ne compte pas. */
form.variations_form .dino-bt__title::before {
    counter-increment: dino-step;
    content: counter(dino-step);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dino-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

form.variations_form .dino-bt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

form.variations_form .dino-bt__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Cartes de choix (radio masqué + label) */
form.variations_form .dino-bt__choice {
    position: relative;
    display: flex;
}

form.variations_form .dino-bt__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

form.variations_form .dino-bt__card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-height: 68px;
    margin: 0;
    padding: 12px 16px;
    border: 2px solid var(--dino-line);
    border-radius: var(--dino-radius);
    background: #fff;
    color: var(--dino-ink);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

form.variations_form .dino-bt__card:hover {
    border-color: var(--dino-muted);
}

form.variations_form .dino-bt__input:checked + .dino-bt__card {
    border-color: var(--dino-accent);
    background: var(--dino-accent-tint);
}

form.variations_form .dino-bt__input:focus-visible + .dino-bt__card {
    outline: 3px solid var(--dino-accent);
    outline-offset: 2px;
}

form.variations_form .dino-bt__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

form.variations_form .dino-bt__hint {
    font-size: 13px;
    color: var(--dino-muted);
}

/* Carte « visite » : titre, prix, créneaux inclus */
form.variations_form .dino-bt__card--formule {
    gap: 12px;
    padding: 16px;
}

form.variations_form .dino-bt__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

form.variations_form .dino-bt__radio {
    position: relative;
    flex: 0 0 22px;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid #8a949c;
    border-radius: 50%;
    background: #fff;
}

form.variations_form .dino-bt__input:checked + .dino-bt__card .dino-bt__radio {
    border-color: var(--dino-accent);
}

form.variations_form .dino-bt__input:checked + .dino-bt__card .dino-bt__radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--dino-accent);
}

form.variations_form .dino-bt__card--formule .dino-bt__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 1.4;
}

form.variations_form .dino-bt__price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    text-align: right;
    line-height: 1.2;
}

form.variations_form .dino-bt__price strong {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

form.variations_form .dino-bt__price span {
    font-size: 12px;
    color: var(--dino-muted);
    white-space: nowrap;
}

form.variations_form .dino-bt__slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

form.variations_form .dino-bt__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

form.variations_form .dino-bt__slot svg {
    flex: 0 0 14px;
}

form.variations_form .dino-bt__slot--jour {
    background: var(--dino-day);
    color: var(--dino-day-ink);
}

form.variations_form .dino-bt__slot--soir {
    background: var(--dino-night);
    color: #fff;
}

/* Créneau non inclus : gris et barré (pas seulement une couleur). */
form.variations_form .dino-bt__slot.is-off {
    background: #e6e9ec;
    color: #55606a;
    text-decoration: line-through;
}

/* Description de la variation (dates des soirées, saisies dans l'admin) */
form.variations_form.dino-bt-ready .woocommerce-variation-description:not(:empty) {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: var(--dino-radius);
    background: var(--dino-soft);
    color: var(--dino-ink);
    font-size: 14px;
    line-height: 1.5;
}

form.variations_form.dino-bt-ready .woocommerce-variation-description p:last-child {
    margin-bottom: 0;
}

/* Quantité, récapitulatif, bouton */
form.variations_form.dino-bt-ready .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

form.variations_form.dino-bt-ready .dino-bt__title--qty {
    flex: 0 0 100%;
}

form.variations_form.dino-bt-ready .dino-bt__summary {
    display: flex;
    flex: 0 0 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 20px;
    border-radius: var(--dino-radius);
    background: var(--dino-soft);
    color: var(--dino-ink);
}

form.variations_form .dino-bt__summary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

form.variations_form .dino-bt__summary-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

form.variations_form .dino-bt__summary-detail {
    font-size: 14px;
    color: var(--dino-muted);
}

form.variations_form .dino-bt__summary-total {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    text-align: right;
}

form.variations_form .dino-bt__summary-total span {
    font-size: 13px;
    color: var(--dino-muted);
}

form.variations_form .dino-bt__summary-total strong {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

form.variations_form.dino-bt-ready .single_add_to_cart_button {
    flex: 0 0 100%;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    margin: 0;
    border-radius: var(--dino-radius);
    font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
    form.variations_form .dino-bt__card {
        transition: none;
    }
}