/*
 * Booking module styles — Empire Studio Group
 *
 * Design language: dark luxury, HelveticaNeue, #0A0A0A background.
 * Primary action color for booking: green (rgba(34,197,94,...)).
 * Accent: var(--luxury-gold) #C9A84C. Empire red #D30215 for destructive only.
 */

/* ============================================================
   STEP INDICATOR
   ============================================================ */

.booking-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0 auto 56px;
    max-width: 600px;
}

.booking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.booking-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.04);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    letter-spacing: 0;
}

.booking-step-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.booking-step.active .booking-step-num {
    background: rgba(34,197,94,0.2);
    border-color: rgba(34,197,94,0.6);
    color: rgba(34,197,94,0.9);
}

.booking-step.active .booking-step-label {
    color: rgba(34,197,94,0.8);
}

.booking-step.completed .booking-step-num {
    background: rgba(34,197,94,0.25);
    border-color: rgba(34,197,94,0.5);
    color: rgba(34,197,94,1);
}

.booking-step.completed .booking-step-num::after {
    content: '✓';
    font-size: 0.75rem;
}

.booking-step.completed .booking-step-num {
    font-size: 0;
}

.booking-step.completed .booking-step-num::after {
    font-size: 0.85rem;
}

.booking-step.completed .booking-step-label {
    color: rgba(34,197,94,0.6);
}

.booking-step-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 0 8px;
    margin-bottom: 22px;
    min-width: 24px;
    max-width: 80px;
}


/* ============================================================
   BOOKING PANELS
   ============================================================ */

.booking-panel {
    max-width: 700px;
    margin: 0 auto;
    animation: bookingFadeIn 0.3s ease;
}

@keyframes bookingFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.booking-panel-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--pure-white);
    margin-bottom: 32px;
    text-align: center;
}


/* ============================================================
   SERVICE CARDS
   ============================================================ */

.booking-services-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.booking-service-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.booking-service-card:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.15);
}

.booking-service-card.selected {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.06);
}

.booking-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    gap: 16px;
}

.booking-service-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--pure-white);
    flex: 1;
}

.booking-service-price {
    font-size: 0.85rem;
    color: var(--luxury-gold);
    font-weight: 500;
    white-space: nowrap;
}

.booking-service-chevron {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.booking-service-card.open .booking-service-chevron {
    transform: rotate(180deg);
}

.booking-service-desc {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.45);
    padding: 0 24px 16px;
    line-height: 1.5;
}

.booking-subservices {
    display: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 16px;
    gap: 8px;
    flex-direction: column;
}

.booking-service-card.open .booking-subservices {
    display: flex;
}

.booking-subservice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    gap: 12px;
}

.booking-subservice:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
}

.booking-subservice.selected {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.08);
}

.booking-subservice-name {
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    flex: 1;
}

.booking-subservice-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.booking-subservice-price {
    font-size: 0.8rem;
    color: var(--luxury-gold);
    font-weight: 500;
}

.booking-subservice-duration {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
}


/* --- New BSC card classes (used by updated booking JS) --- */

.booking-service-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.booking-service-card:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}

.booking-service-card.selected {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.06);
}

.bsc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    gap: 16px;
}

.bsc-info {
    flex: 1;
}

.bsc-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.bsc-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
    line-height: 1.4;
}

.bsc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.bsc-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}

.booking-service-card.selected .bsc-price {
    color: rgba(34,197,94,0.8);
}

.bsc-expand-icon {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.3);
    transition: transform 0.2s;
}

.booking-service-card.expanded .bsc-expand-icon {
    transform: rotate(90deg);
}

.bsc-check {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(34,197,94,0.2);
    border: 1.5px solid rgba(34,197,94,0.5);
    color: #22c55e;
    font-size: 12px;
    align-items: center;
    justify-content: center;
}

.booking-service-card.selected .bsc-check {
    display: flex;
}

.bsc-subs {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 8px 16px 12px;
}

.bsc-sub-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.bsc-sub-item:hover {
    background: rgba(255,255,255,0.06);
}

.bsc-sub-item.selected {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.3);
}

.bsc-sub-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.bsc-sub-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    width: 100%;
}

.bsc-sub-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}

.bsc-sub-item.selected .bsc-sub-price {
    color: rgba(34,197,94,0.8);
}

.bsc-sub-duration {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
}

/* Inline duration picker (appears under selected card) */

.bsc-duration-inline {
    margin: 0 0 12px 0;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-top: -12px;
}

.bsc-duration-inline .booking-duration-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

.bsc-duration-inline .booking-duration-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-duration {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-duration:hover {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.06);
}

.btn-duration.active {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.15);
    color: #fff;
    font-weight: 600;
}

/* Error and duration label utilities */

.booking-error {
    color: rgba(239,68,68,0.8);
    text-align: center;
    padding: 20px;
}

.booking-duration-wrap {
    margin-top: 20px;
}

.booking-duration-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}


/* ============================================================
   DURATION SELECTOR
   ============================================================ */

.booking-duration-wrap {
    margin-bottom: 32px;
    padding: 24px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
}

.booking-duration-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 14px;
}

.booking-duration-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-duration-btn {
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    font-family: var(--font-main);
}

.booking-duration-btn:hover {
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.06);
    color: rgba(34,197,94,0.8);
}

.booking-duration-btn.selected {
    border-color: rgba(34,197,94,0.6);
    background: rgba(34,197,94,0.15);
    color: rgba(34,197,94,1);
}


/* ============================================================
   CALENDAR
   ============================================================ */

.booking-calendar-wrap {
    margin-bottom: 32px;
}

.booking-calendar {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    max-width: 100%;
}

.booking-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.booking-calendar-nav {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, color 0.2s ease;
    font-family: var(--font-main);
}

.booking-calendar-nav:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--pure-white);
}

.booking-calendar-month {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pure-white);
}

.booking-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.booking-calendar-weekday {
    text-align: center;
    padding: 6px 0;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
}

.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 6px;
}

.booking-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: default;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    min-height: 38px;
}

.booking-day-empty {
    background: transparent;
    border-color: transparent;
}

.booking-day-past {
    color: rgba(255,255,255,0.15);
    background: transparent;
    cursor: not-allowed;
}

.booking-day-closed {
    background: rgba(255,255,255,0.02);
    border-color: transparent;
    color: rgba(255,255,255,0.15);
    cursor: not-allowed;
}

.booking-day-available {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.2);
    color: rgba(34,197,94,0.7);
    cursor: pointer;
}

.booking-day-available:hover {
    background: rgba(34,197,94,0.2);
    border-color: rgba(34,197,94,0.4);
    color: rgba(34,197,94,1);
}

.booking-day-full {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.15);
    color: rgba(239,68,68,0.5);
    cursor: not-allowed;
}

.booking-day-selected {
    background: rgba(34,197,94,0.3);
    border-color: rgba(34,197,94,0.5);
    border-width: 1.5px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.booking-calendar-loading {
    padding: 32px;
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
}


/* ============================================================
   CALENDAR LEGEND
   ============================================================ */

.booking-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 8px 4px;
    margin-top: -8px;
    margin-bottom: 20px;
}

.booking-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}

.booking-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.booking-legend-dot.available {
    background: rgba(34,197,94,0.3);
    border: 1px solid rgba(34,197,94,0.4);
}

.booking-legend-dot.full {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.25);
}

.booking-legend-dot.closed {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}


/* ============================================================
   TIME SLOTS
   ============================================================ */

.booking-slots-wrap {
    margin-top: 24px;
}

.booking-slots-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 16px;
}

.booking-slots-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slots-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: 0 0 8px 0;
}

.slots-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.booking-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.booking-slot:hover {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.06);
    color: #fff;
}

.booking-slot.selected {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.15);
    color: #fff;
    font-weight: 600;
}

.booking-slot.selected::after {
    content: '✓';
    margin-left: 6px;
    font-size: 0.8rem;
    color: #22c55e;
}

.booking-slot.booking-slot-suggested {
    border-color: rgba(34,197,94,0.2);
    background: rgba(34,197,94,0.04);
}

.booking-slot-blocked {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.15);
    color: rgba(239,68,68,0.4);
    cursor: not-allowed;
    text-decoration: line-through;
}

.booking-slot-time {
    font-variant-numeric: tabular-nums;
}

.booking-slot-sep {
    color: rgba(255,255,255,0.3);
}

/* "Reprendre le même créneau" button */
.booking-slot-reuse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.04);
    color: rgba(34,197,94,0.8);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
    width: 100%;
    justify-content: center;
}

.booking-slot-reuse:hover {
    border-color: rgba(34,197,94,0.5);
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}

/* Sur devis date message */
.booking-quote-date-msg {
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin-top: 16px;
    text-align: center;
}

.slots-loading, .slots-closed, .slots-empty, .slots-error {
    text-align: center;
    padding: 24px;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

.slots-error {
    color: rgba(239,68,68,0.7);
}

.booking-slots-empty {
    text-align: center;
    padding: 24px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}


/* ============================================================
   RECAP PANELS
   ============================================================ */

.booking-recap-mini {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-left: 3px solid rgba(34,197,94,0.4);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.booking-recap-mini-item {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
}

.booking-recap-mini-item strong {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.booking-recap {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 28px;
}

.booking-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 16px;
}

.booking-recap-row:last-child {
    border-bottom: none;
}

.booking-recap-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.booking-recap-value {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
    text-align: right;
}

/* Recap lists used in step 3 mini and step 4 full */
.recap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recap-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.recap-list li:last-child {
    border-bottom: none;
}

.recap-total {
    font-weight: 700;
    font-size: 1rem !important;
    color: #fff !important;
    padding-top: 12px !important;
    border-bottom: none !important;
}

.recap-deposit {
    padding-top: 8px !important;
}

.recap-remaining {
    font-size: 0.82rem !important;
}

.recap-block {
    margin-bottom: 24px;
}

.recap-block h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Per-service block in recap */
.recap-service-block {
    padding: 14px 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

.recap-service-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.recap-service-sub {
    font-weight: 400;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
}

/* Separator between services in recap */
.recap-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    margin: 16px 0;
}

.recap-payment-calc {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 16px;
}

.recap-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recap-mini-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
}

.recap-mini-total {
    font-weight: 600;
    color: #fff !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 6px;
    padding-top: 8px !important;
}

.booking-recap-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.booking-recap-total .booking-recap-label {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
}

.booking-recap-total .booking-recap-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--luxury-gold);
}


/* ============================================================
   PAYMENT CHOICE
   ============================================================ */

.booking-payment-choice {
    margin-bottom: 24px;
}

.booking-payment-choice-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
}

.booking-payment-choice-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.booking-pay-choice-btn {
    padding: 16px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    font-family: var(--font-main);
}

.booking-pay-choice-btn:hover {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.05);
    color: rgba(255,255,255,0.9);
}

.booking-pay-choice-btn.selected {
    border-color: rgba(34,197,94,0.6);
    background: rgba(34,197,94,0.1);
    color: rgba(34,197,94,1);
}

.booking-pay-choice-amount {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--luxury-gold);
    margin-top: 4px;
}


/* ============================================================
   PAYMENT METHOD BUTTONS
   ============================================================ */

.booking-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Payment choice toggle (Acompte / Paiement complet) */
.pay-choice-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
}

.pay-choice-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.btn-pay-choice {
    flex: 1;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.btn-pay-choice:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06);
}

.btn-pay-choice.active {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.1);
    color: #fff;
    font-weight: 600;
}

/* Main payment button */
.booking-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(34,197,94,0.7));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.02em;
}

.booking-pay-btn:hover {
    background: linear-gradient(135deg, rgba(34,197,94,1), rgba(34,197,94,0.85));
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(34,197,94,0.3);
}

.booking-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Payment amount display */
#booking-pay-amount {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-top: 12px;
}

.booking-pay-btn-alt {
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(255,193,7,0.3);
    color: rgba(255,193,7,0.85);
}

.booking-pay-btn-alt:hover {
    background: rgba(255,193,7,0.15);
    border-color: rgba(255,193,7,0.55);
}


/* ============================================================
   QUOTE CONFIRM
   ============================================================ */

.booking-quote-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
}


/* ============================================================
   SUCCESS SCREEN
   ============================================================ */

.booking-success-content {
    text-align: center;
    padding: 60px 24px;
}

.booking-success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(34,197,94,0.15);
    border: 2px solid rgba(34,197,94,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(34,197,94,1);
    margin: 0 auto 28px;
}

.booking-success-content .booking-panel-title {
    margin-bottom: 16px;
}

.booking-success-content p {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}


/* ============================================================
   NAV BUTTONS
   ============================================================ */

.booking-nav-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 32px;
}

.booking-nav-btns .booking-next {
    margin-left: auto;
}

.booking-next {
    margin-top: 28px;
    width: 100%;
}

.booking-next:disabled,
.booking-nav-btns .btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Primary action button override for booking (green instead of red) */
.booking-panel .btn-primary.booking-next {
    background: rgba(34,197,94,0.85);
    color: #fff;
    border: none;
}

.booking-panel .btn-primary.booking-next:hover:not(:disabled) {
    background: rgba(34,197,94,1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34,197,94,0.3);
}

#btn-step-1-next {
    display: block;
}


/* ============================================================
   FORM INPUTS (extends theme .form-group)
   ============================================================ */

#booking-info-form {
    position: relative;
}

#booking-info-form .form-group input:focus,
#booking-info-form .form-group textarea:focus {
    border-color: rgba(34,197,94,0.4);
    border-bottom-color: rgba(34,197,94,0.7);
    box-shadow: 0 2px 0 rgba(34,197,94,0.15), inset 0 1px 4px rgba(0,0,0,0.2);
}

#booking-info-form .form-group:focus-within label {
    color: rgba(34,197,94,0.7);
}


/* ============================================================
   LOADING SPINNER
   ============================================================ */

.booking-loading {
    text-align: center;
    padding: 32px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

.booking-loading::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: rgba(34,197,94,0.6);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: bookingSpin 0.8s linear infinite;
}

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


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
    .booking-steps {
        gap: 0;
        margin-bottom: 40px;
    }

    .booking-step-label {
        font-size: 0.6rem;
    }

    .booking-step-line {
        min-width: 12px;
        max-width: 40px;
        margin: 0 4px;
        margin-bottom: 20px;
    }

    .booking-step-num {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }

    .booking-panel {
        padding: 0;
    }

    .slots-row {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .booking-payment-choice-btns {
        grid-template-columns: 1fr;
    }

    .booking-nav-btns {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .booking-nav-btns .btn {
        width: 100%;
        text-align: center;
    }

    .booking-nav-btns .booking-next {
        margin-left: 0;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .booking-calendar-grid {
        gap: 1px;
        padding: 6px;
    }

    .booking-day {
        font-size: 0.75rem;
        min-height: 32px;
    }
}

@media (max-width: 400px) {
    .slots-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   MULTI-SELECTION LIST (Step 2)
   ============================================================ */

.booking-selections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.booking-sel-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color 0.2s;
}

.booking-sel-item.active {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.04);
}

.booking-sel-item.complete {
    border-color: rgba(34,197,94,0.2);
}

.booking-sel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.booking-sel-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-sel-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

.booking-sel-item.complete .booking-sel-num {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.booking-sel-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}

.booking-sel-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
}

.booking-sel-date-ok {
    font-size: 0.82rem;
    color: rgba(34,197,94,0.7);
}

.booking-sel-choose,
.booking-sel-modify {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.booking-sel-choose:hover,
.booking-sel-modify:hover {
    border-color: rgba(34,197,94,0.3);
    color: #fff;
}

/* Inline calendar inside selection item (accordion style) */
.booking-sel-calendar-inline {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 16px 0 4px;
    margin-top: 12px;
}

.booking-sel-calendar-inline .booking-calendar {
    margin-bottom: 0;
}

/* Recap mini multi-service */
.recap-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.recap-mini-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    flex-wrap: wrap;
}

.recap-mini-list li:last-child {
    border-bottom: none;
}

.recap-mini-list li.recap-mini-total {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
    margin-top: 4px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.recap-mini-list li.recap-mini-service span:first-child {
    font-weight: 500;
    color: rgba(255,255,255,0.8);
}


/* ============================================================
   MULTI-SLOT SELECTION SUMMARY
   ============================================================ */

.booking-slots-summary {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
}

.slots-summary-duration {
    font-weight: 700;
    color: #22c55e;
}

/* Recap mini deposit lines */
.recap-mini-deposit {
    color: rgba(34,197,94,0.8) !important;
    font-size: 0.8rem !important;
}

.recap-mini-remaining {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.78rem !important;
}

/* Reset button */
.booking-reset-wrap {
    text-align: center;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.booking-reset-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    transition: color 0.2s;
}

.booking-reset-btn:hover {
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   WOOCOMMERCE PAGES OVERRIDE
   ============================================================ */

/* Order pay page */
.woocommerce-order-pay .page-content,
.woocommerce-checkout .page-content {
    max-width: 600px;
    margin: 0 auto;
}

.woocommerce table.shop_table {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 14px 18px;
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
}

.woocommerce table.shop_table th {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.woocommerce table.shop_table tr:last-child td,
.woocommerce table.shop_table tr:last-child th {
    border-bottom: none;
}

.woocommerce table.shop_table .order-total td,
.woocommerce table.shop_table .order-total th {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

/* Payment methods — single container, no double borders */
.woocommerce #payment {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
}

.woocommerce #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.woocommerce #payment ul.payment_methods li {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin: 0 !important;
}

.woocommerce #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

.woocommerce #payment ul.payment_methods li label {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.woocommerce #payment ul.payment_methods li label img {
    max-height: 24px;
    width: auto;
}

/* Payment box (Stripe form, PayPal buttons) — no inner border */
.woocommerce #payment div.payment_box {
    background: rgba(255,255,255,0.02) !important;
    color: rgba(255,255,255,0.6);
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 18px 10px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.woocommerce #payment div.payment_box::before {
    display: none !important;
}

/* Express payment buttons (Google Pay, Apple Pay, etc.) — full width, no inner frames */
.woocommerce #payment div.payment_box iframe,
.woocommerce #payment div.payment_box .gpay-card-info-container,
.woocommerce #payment div.payment_box #wc-stripe-payment-request-wrapper,
.woocommerce #payment div.payment_box .payment-request-button,
.woocommerce #payment .wc-stripe-upe-element,
.woocommerce #payment .wc-stripe-payment-request-button-wrapper {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove borders around individual express checkout buttons */
.woocommerce #payment div.payment_box button,
.woocommerce #payment div.payment_box .gpay-button,
.woocommerce #payment div.payment_box .apple-pay-button {
    border-radius: 8px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* Stripe express checkout separator */
.woocommerce #payment .wc-stripe-upe-element p,
.woocommerce #payment #wc-stripe-payment-request-wrapper p {
    color: rgba(255,255,255,0.35) !important;
    text-align: center;
    font-size: 0.8rem;
}

.woocommerce #payment .place-order {
    padding: 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Hide empty notice containers and guest order warning */
.woocommerce .woocommerce-NoticeGroup:empty,
.woocommerce .woocommerce-notices-wrapper:empty {
    display: none !important;
}

/* Hide info notices on order-pay (guest warning) but keep errors */
.woocommerce-order-pay .woocommerce > .woocommerce-info,
.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-order-pay form.woocommerce-checkout > .woocommerce-info {
    display: none !important;
}

.woocommerce-order-pay .woocommerce-error,
.woocommerce-order-pay .woocommerce-notices-wrapper .woocommerce-error {
    display: block !important;
}

/* Stripe UPE payment element — force dark background */
.woocommerce #payment div.payment_box,
.woocommerce #payment .wc-stripe-upe-element,
.woocommerce #payment .wc-stripe-elements-field,
.woocommerce #payment #wc-stripe-upe-form,
.woocommerce #payment .wc-stripe-payment-request-wrapper {
    background: rgba(255,255,255,0.03) !important;
    color: rgba(255,255,255,0.7) !important;
}

/* Stripe iframe container — dark surroundings */
.woocommerce #payment div.payment_box p,
.woocommerce #payment div.payment_box fieldset,
.woocommerce #payment div.payment_box .wc-stripe-upe-element {
    background: transparent !important;
}

/* Stripe's own iframe has white bg — override the container */
.woocommerce #payment div.payment_box .wc-stripe-upe-element iframe,
.woocommerce #payment div.payment_box #payment-element {
    border-radius: 8px !important;
}

/* "— OU —" separator between express and card */
.woocommerce #payment div.payment_box hr,
.woocommerce #payment div.payment_box .wc-stripe-upe-element + p {
    color: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Force dark theme on the Stripe payment element via appearance config */
.woocommerce #payment .payment_method_stripe .payment_box {
    background: rgba(10,10,10,0.95) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

/* Express checkout buttons wrapper (Google Pay, Apple Pay, Amazon Pay) */
.woocommerce #payment #wc-stripe-payment-request-wrapper,
.woocommerce #payment .wc-stripe-express-checkout-element {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Individual express buttons — full width, no extra borders */
.woocommerce #payment #wc-stripe-payment-request-wrapper > div,
.woocommerce #payment .wc-stripe-express-checkout-element > div {
    margin-bottom: 8px !important;
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
}

/* Test mode notice — orange theme */
.woocommerce #payment .wc-stripe-test-mode-notice,
.woocommerce #payment div.payment_box .wc-stripe-payment-method-instruction {
    background: rgba(255,180,0,0.06) !important;
    border: 1px solid rgba(255,180,0,0.15) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: rgba(255,180,0,0.7) !important;
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
}

/* Card input fields — dark background with visible borders */
.woocommerce #payment div.payment_box fieldset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce #payment div.payment_box .form-row {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.woocommerce #payment div.payment_box .form-row label {
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.woocommerce #payment div.payment_box .form-row input[type="text"],
.woocommerce #payment div.payment_box .form-row input[type="tel"],
.woocommerce #payment div.payment_box .form-row input[type="number"],
.woocommerce #payment div.payment_box .form-row select {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    color: #fff !important;
    font-size: 0.88rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce #payment div.payment_box .form-row input:focus,
.woocommerce #payment div.payment_box .form-row select:focus {
    border-color: rgba(34,197,94,0.4) !important;
    outline: none !important;
}

.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce button.button.alt {
    background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(34,197,94,0.7)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    text-align: center;
}

.woocommerce #payment #place_order:hover,
.woocommerce button.button.alt:hover {
    background: linear-gradient(135deg, rgba(34,197,94,1), rgba(34,197,94,0.85)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(34,197,94,0.3);
}

/* Form fields on checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
    border-color: rgba(34,197,94,0.4);
    outline: none;
}

.woocommerce form .form-row label {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
}

/* Order received / Thank you page */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    color: #22c55e;
    font-size: 1.1rem;
    font-weight: 600;
}

.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Notices */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 4px solid rgba(34,197,94,0.5);
    color: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 12px 18px;
}

.woocommerce .woocommerce-error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.15);
    border-left: 4px solid rgba(239,68,68,0.5);
    color: rgba(255,255,255,0.7);
    border-radius: 6px;
    padding: 12px 18px;
}

.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
    color: rgba(255,255,255,0.5);
}

/* Hide empty WC notices (e.g. stripped guest order warning) */
.woocommerce .woocommerce-info:empty,
.woocommerce .woocommerce-message:empty,
.woocommerce .woocommerce-error:empty {
    display: none;
}

/* Also hide notices that only contain whitespace */
.woocommerce .woocommerce-info:not(:has(*)):not(:empty) {
    display: none;
}

/* ── Stripe payment form ─────────────────────────────────── */

/* Stripe card elements — dark bg with visible border */
.wc-stripe-elements-field,
.wc-stripe-iban-element-field,
.woocommerce .StripeElement,
.woocommerce #wc-stripe-card-element,
.woocommerce .wc-stripe-upe-element,
.woocommerce .stripe-card-group,
.woocommerce #stripe-card-element,
.woocommerce #stripe-exp-element,
.woocommerce #stripe-cvc-element {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.2s !important;
}

.wc-stripe-elements-field:focus-within,
.woocommerce .StripeElement--focus,
.woocommerce .wc-stripe-upe-element--focus {
    border-color: rgba(34,197,94,0.4) !important;
}

.woocommerce .wc-stripe-elements-field--invalid {
    border-color: rgba(239,68,68,0.4) !important;
}

/* Saved payment methods */
.woocommerce #payment .woocommerce-SavedPaymentMethods,
.woocommerce #payment .wc-saved-payment-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
}

.woocommerce #payment .woocommerce-SavedPaymentMethods li label,
.woocommerce #payment .wc-saved-payment-methods li label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.85rem !important;
}

/* Pay button */
.woocommerce #payment #place_order {
    margin-top: 8px !important;
    letter-spacing: 0.02em;
}

/* Stripe test mode banner */
.woocommerce .wc-stripe-test-mode-notice,
.woocommerce .stripe-test-mode-notice {
    background: rgba(255,180,0,0.08) !important;
    border: 1px solid rgba(255,180,0,0.2) !important;
    color: rgba(255,180,0,0.8) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    margin-bottom: 16px !important;
}

/* ============================================================
   ORDER-PAY PAGE — DESIGN REFINEMENTS
   ============================================================ */

/* Page content top/bottom breathing room */
.woocommerce-order-pay .page-content {
    padding: 8px 0 64px;
}

/* Section headings (h2 above order table, h3 above payment) */
.woocommerce-order-pay .woocommerce h2,
.woocommerce-order-pay .woocommerce h3 {
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 32px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Gap between order summary table and payment form */
.woocommerce-order-pay .woocommerce table.shop_table {
    margin-bottom: 28px;
}

/* Radio buttons — custom accent color */
.woocommerce #payment ul.payment_methods li input[type="radio"] {
    accent-color: rgba(34, 197, 94, 0.9);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* Payment method label — slightly larger text */
.woocommerce #payment ul.payment_methods li label {
    font-size: 0.93rem !important;
    gap: 12px !important;
}

/* PayPal logo — constrain height */
.woocommerce #payment ul.payment_methods li label img {
    max-height: 22px !important;
    max-width: 80px !important;
    object-fit: contain;
}

/* Selected payment method row — subtle highlight */
.woocommerce #payment ul.payment_methods li:has(input:checked) {
    background: rgba(34, 197, 94, 0.04);
}

/* Order total row — gold accent */
.woocommerce table.shop_table .order-total td strong {
    color: var(--luxury-gold, #C9A84C);
}

/* Place order button — gold instead of green for the final CTA */
.woocommerce #payment #place_order {
    background: var(--luxury-gold, #C9A84C) !important;
    color: #000 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

.woocommerce #payment #place_order:hover {
    background: #b8943e !important;
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.25) !important;
    transform: translateY(-1px);
}

/* Mobile — stack payment form nicely */
@media (max-width: 600px) {
    .woocommerce-order-pay .page-content {
        padding: 4px 0 48px;
    }

    .woocommerce #payment ul.payment_methods li {
        padding: 16px 14px !important;
    }

    .woocommerce #payment .place-order {
        padding: 16px 14px;
    }
}

/* ============================================================
   STRIPE UPE (Unified Payment Element) — dark theme container
   Separate from Split Elements which are handled below.
   ============================================================ */

.woocommerce #payment .stripe-card-group,
.woocommerce #payment .wc-stripe-upe-element,
.woocommerce #payment #payment-element {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    margin-bottom: 12px !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}

.woocommerce #payment .wc-stripe-elements-field:focus-within,
.woocommerce #payment .StripeElement--focus,
.woocommerce #payment #wc-stripe-card-element:focus-within,
.woocommerce #payment #wc-stripe-exp-element:focus-within,
.woocommerce #payment #wc-stripe-cvc-element:focus-within {
    border-color: rgba(201, 168, 76, 0.6) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

/* ============================================================
   STRIPE CC FORM — layout natif WooCommerce (float-based)
   On retire le grid — WC gère déjà .form-row-wide pleine
   largeur et .form-row-first/.form-row-last côte à côte.
   ============================================================ */

/* Reset complet — laisser WC gérer le flow */
.woocommerce #wc-stripe-cc-form {
    display: block !important;
    overflow: hidden; /* clearfix pour les floats WC */
}

/* Numéro de carte — pleine largeur */
.woocommerce #wc-stripe-cc-form .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* Si label et élément Stripe sont siblings directs du fieldset (pas de form-row wrapper),
   on les force en colonne via flex */
.woocommerce #wc-stripe-cc-form:not(:has(.form-row)) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Expiry + CVC côte à côte (WC floats déjà définis, on force au cas où) */
.woocommerce #wc-stripe-cc-form .form-row-first {
    float: left !important;
    width: calc(50% - 8px) !important;
    clear: none !important;
    margin-right: 16px !important;
    display: block !important;
}
.woocommerce #wc-stripe-cc-form .form-row-last {
    float: left !important;
    width: calc(50% - 8px) !important;
    clear: none !important;
    margin-right: 0 !important;
    display: block !important;
}

/* Tous les labels internes — bloc, alignés à gauche */
.woocommerce #wc-stripe-cc-form label,
.woocommerce #wc-stripe-cc-form > label {
    display: block !important;
    text-align: left !important;
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

/* Inputs natifs à l'intérieur du form Stripe (si pas iframe) — texte foncé sur fond clair */
.woocommerce #wc-stripe-cc-form input,
.woocommerce #wc-stripe-cc-form select {
    color: #0a2540 !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
}

/* ============================================================
   PRIVACY POLICY TEXT & CGV — see consolidated block at end
   ============================================================ */

.woocommerce-privacy-policy-text,
.woocommerce #payment .woocommerce-privacy-policy-text {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin: 20px 0 !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    line-height: 1.65 !important;
    text-align: left !important;
}

.woocommerce-privacy-policy-text p,
.woocommerce-privacy-policy-text a {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.75rem !important;
}

.woocommerce-privacy-policy-text a:hover {
    color: var(--luxury-gold, #C9A84C) !important;
}

/* CGV terms row */
.woocommerce-form__label-for-checkbox {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.82rem !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
}

.woocommerce-form__input-checkbox {
    accent-color: #22c55e !important;
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

/* CGV terms link */
.woocommerce-form__label-for-checkbox a {
    color: var(--luxury-gold, #C9A84C) !important;
    text-decoration: underline !important;
}

/* ============================================================
   ORDER TABLE — corrections affichage
   ============================================================ */

/* Masquer le symbole redondant — WC <= 4 utilise <abbr>, WC >= 5 utilise <span> */
.woocommerce-order-pay abbr.woocommerce-Price-currencySymbol,
.woocommerce-order-pay abbr[title="euro"],
.woocommerce-order-pay abbr[title="Euro"],
.woocommerce-order-pay abbr[title="EUR"] {
    display: none !important;
}

/* Ligne sous-total (toujours 0,00 € car on utilise des fee items — cachée via PHP mais CSS en fallback) */
.woocommerce-order-pay .woocommerce table.shop_table .cart-subtotal {
    display: none !important;
}

/* ============================================================
   STRIPE SPLIT ELEMENTS — compatibilité fond blanc interne
   Les iframes Stripe ont un fond blanc que CSS externe ne peut
   pas modifier. On utilise du texte foncé (géré via PHP filter)
   et on adapte les conteneurs en conséquence.
   ============================================================ */

/* Conteneurs Stripe — vrais IDs: stripe-card-element / stripe-exp-element / stripe-cvc-element */
.woocommerce #payment .wc-stripe-elements-field,
.woocommerce #payment #stripe-card-element,
.woocommerce #payment #stripe-exp-element,
.woocommerce #payment #stripe-cvc-element,
.woocommerce #payment .StripeElement {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    margin-bottom: 12px !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
}

/* Le numéro de carte est enveloppé dans .stripe-card-group */
.woocommerce #payment .stripe-card-group {
    position: relative !important;
}
.woocommerce #payment .stripe-card-group #stripe-card-element {
    margin-bottom: 0 !important;
}

.woocommerce #payment .wc-stripe-elements-field:focus-within,
.woocommerce #payment .StripeElement--focus,
.woocommerce #payment #stripe-card-element:focus-within,
.woocommerce #payment #stripe-exp-element:focus-within,
.woocommerce #payment #stripe-cvc-element:focus-within {
    border-color: #C9A84C !important;
    background: #ffffff !important;
}

/* Labels au-dessus des champs Stripe */
.woocommerce #wc-stripe-cc-form label,
.woocommerce #payment div.payment_box label {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   CGV + POLITIQUE DE CONFIDENTIALITÉ — alignement à gauche
   WooCommerce par défaut met .terms en text-align: right
   ============================================================ */

/* WooCommerce core CSS applies text-align:right to .place-order and .terms.
   Override the CONTAINER first, then its children. */
.woocommerce #payment .place-order,
.woocommerce #payment .form-row.place-order,
.woocommerce-order-pay #payment .place-order {
    text-align: left !important;
    float: none !important;
    padding: 16px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce #payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-order-pay .woocommerce-terms-and-conditions-wrapper {
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.woocommerce #payment .terms,
.woocommerce #payment .wc-terms-and-conditions,
.woocommerce #payment .form-row.terms,
.woocommerce-order-pay #payment .terms {
    text-align: left !important;
    float: none !important;
    clear: both !important;
    padding: 0 !important;
    width: 100% !important;
}

.woocommerce-privacy-policy-text,
.woocommerce #payment .woocommerce-privacy-policy-text {
    text-align: left !important;
    width: 100% !important;
}

.woocommerce-form__label-for-checkbox {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   PAYPAL PAY LATER / PAYER EN 4 FOIS — visibilité améliorée
   PayPal injecte ce message dans un conteneur data-pp-message.
   Sur fond sombre, on booste la luminosité et on ajoute un fond.
   ============================================================ */

.woocommerce #payment [data-pp-message],
.woocommerce #payment .pp-message,
.woocommerce #payment .paypal-message-banner,
.woocommerce #payment .xo-widget-container,
.woocommerce #payment li.payment_method_paypal .payment_box > div:not(.payment_box) {
    background: rgba(0, 48, 135, 0.12) !important;
    border: 1px solid rgba(0, 112, 186, 0.25) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin: 10px 0 !important;
    filter: brightness(1.4) contrast(1.1) !important;
}