/**
 * FPP Bookings — frontend styles
 *
 * Aligné sur le design system du FPP UI Customizer
 * (cf. wp-content/plugins/folder-pages-publisher/includes/class-fpp-ui-customizer-css.php).
 * Source : adapté du SCSS production de permissecours.be (theme/assets/scss/fpp-bookings.scss).
 *
 * Variables consommées : --fpp-primary, --fpp-primary-hover, --fpp-primary-light,
 * --fpp-accent, --fpp-surface, --fpp-heading, --fpp-body, --fpp-muted, --fpp-border,
 * --fpp-bg, --fpp-white, --fpp-error/-light, --fpp-success/-light, --fpp-warning/-light,
 * --fpp-font-heading, --fpp-font-body, --fpp-rounded-sm/-/-md/-lg, --fpp-btn-py/-px/-radius/-font-size/-font-weight,
 * --fpp-card-bg/-border/-radius. Chaque variable a un fallback codé en dur.
 *
 * Convention BEM : .fppb-<block>__<element>--<modifier>
 */

/* ── Booking widget container ─────────────────────────────────────── */

.fppb-booking-wrap {
    max-width: 640px;
    margin: 32px auto;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

/* ── Service header ───────────────────────────────────────────────── */

.fppb-service-header { margin-bottom: 24px; }

.fppb-service-title {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 24px;
    font-weight: 700;
    color: var(--fpp-heading, #0f172a);
    margin: 0 0 8px;
}

.fppb-service-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fppb-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--fpp-muted, #64748b);
    font-weight: 500;
}
.fppb-meta-item svg { color: var(--fpp-primary, #0891b2); }

.fppb-service-desc {
    margin-top: 12px;
    font-size: 14px;
    color: var(--fpp-body, #334155);
    line-height: 1.6;
}

/* ── Badges ───────────────────────────────────────────────────────── */

.fppb-service-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.fppb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
}
.fppb-badge svg { flex-shrink: 0; }

.fppb-badge-deposit { background: var(--fpp-warning-light, #fef3c7); color: var(--fpp-warning, #92400e); }
.fppb-badge-payment { background: var(--fpp-primary-light, #dbeafe); color: var(--fpp-primary, #1e40af); }
.fppb-badge-onsite  { background: var(--fpp-success-light, #f0fdf4); color: var(--fpp-success, #166534); }

/* ── Messages ─────────────────────────────────────────────────────── */

.fppb-messages { margin-bottom: 16px; }
.fppb-messages:empty { display: none; }

.fppb-msg-error {
    padding: 12px 16px;
    border-radius: var(--fpp-rounded-md, 8px);
    background: var(--fpp-error-light, #fef2f2);
    border: 1px solid var(--fpp-error, #dc2626);
    color: var(--fpp-error, #dc2626);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* ── Steps (calendrier, slots, formulaire) ────────────────────────── */

.fppb-step {
    background: var(--fpp-white, #fff);
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-lg, 12px);
    margin-bottom: 16px;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
    transition: all 0.2s ease;
}

.fppb-step.fppb-step-active {
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fppb-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fpp-border, #e2e8f0);
    background: var(--fpp-surface, #f8fafc);
}

.fppb-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.fppb-step-title {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 15px;
    font-weight: 600;
    color: var(--fpp-heading, #0f172a);
}

/* ── Calendar ─────────────────────────────────────────────────────── */

.fppb-calendar { padding: 16px; }

.fppb-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fppb-cal-prev,
.fppb-cal-next {
    background: none;
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-sm, 4px);
    padding: 6px 12px;
    cursor: pointer;
    font-size: 16px;
    color: var(--fpp-body, #334155);
    transition: all 0.15s ease;
    font-family: inherit;
}
.fppb-cal-prev:hover,
.fppb-cal-next:hover {
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
    border-color: var(--fpp-primary, #0891b2);
}

.fppb-cal-month-label {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 16px;
    font-weight: 600;
    color: var(--fpp-heading, #0f172a);
}

.fppb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.fppb-cal-day-header {
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fpp-muted, #64748b);
    text-transform: uppercase;
}

.fppb-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.fppb-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fpp-rounded, 6px);
    font-size: 14px;
    font-weight: 500;
    color: var(--fpp-body, #334155);
    cursor: default;
    transition: all 0.15s ease;
}

.fppb-cal-day-empty    { visibility: hidden; }
.fppb-cal-day-disabled { color: var(--fpp-border, #cbd5e1); }

.fppb-cal-day-available {
    cursor: pointer;
    background: var(--fpp-success-light, #f0fdf4);
    color: var(--fpp-success, #16a34a);
    font-weight: 600;
}
.fppb-cal-day-available:hover {
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
}

.fppb-cal-day-selected {
    background: var(--fpp-primary, #0891b2) !important;
    color: var(--fpp-white, #fff) !important;
}

.fppb-cal-day-today {
    box-shadow: inset 0 0 0 2px var(--fpp-primary, #0891b2);
}

/* ── Slots ────────────────────────────────────────────────────────── */

.fppb-slots { padding: 16px; }

.fppb-slots-loading {
    text-align: center;
    padding: 24px;
    color: var(--fpp-muted, #64748b);
    font-size: 14px;
}

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

.fppb-slot {
    padding: 10px;
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded, 6px);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    font-weight: 500;
    background: var(--fpp-white, #fff);
}
.fppb-slot:hover {
    border-color: var(--fpp-primary, #0891b2);
    background: var(--fpp-surface, #f0fdfa);
}

.fppb-slot-selected {
    background: var(--fpp-primary, #0891b2) !important;
    color: var(--fpp-white, #fff) !important;
    border-color: var(--fpp-primary, #0891b2) !important;
}

.fppb-slot-full {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.fppb-slot-time { font-weight: 700; }

.fppb-slot-remaining {
    font-size: 11px;
    color: var(--fpp-muted, #64748b);
    margin-top: 2px;
}
.fppb-slot-selected .fppb-slot-remaining { color: rgba(255, 255, 255, 0.8); }

.fppb-no-slots {
    text-align: center;
    padding: 24px;
    color: var(--fpp-muted, #64748b);
}

/* ── Form ─────────────────────────────────────────────────────────── */

.fppb-form { padding: 20px; }

/* Honeypot */
.fppb-hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.fppb-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fppb-form-row {
    display: flex;
    gap: 16px;
}

.fppb-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.fppb-form-field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--fpp-body, #334155);
}

.fppb-form-field input:not([type=checkbox],[type=radio],[type=hidden],[type=file]),
.fppb-form-field select,
.fppb-form-field textarea {
    width: 100%;
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-md, 8px);
    padding: 12px 16px;
    font-size: 16px;
    color: var(--fpp-body, #334155);
    background: var(--fpp-white, #fff);
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    line-height: 1.5;
}

.fppb-form-field input:not([type=checkbox],[type=radio],[type=hidden],[type=file]):focus,
.fppb-form-field select:focus,
.fppb-form-field textarea:focus {
    border-color: var(--fpp-primary, #0891b2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpp-primary, #0891b2) 15%, transparent);
    outline: none;
}

.fppb-form-field textarea {
    resize: vertical;
    min-height: 80px;
}

.fppb-required { color: var(--fpp-error, #dc2626); }

.fppb-form-field-w50 { flex: 0 0 calc(50% - 8px); }
.fppb-form-field-w33 { flex: 0 0 calc(33% - 11px); }

/* ── Linked-form fields (radio/checkbox) ─────────────────────────── */

.fppb-linked-form-fields {
    border-top: 1px solid var(--fpp-border, #e2e8f0);
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.fppb-linked-form-label {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fpp-muted, #64748b);
}

.fppb-radio-group,
.fppb-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fppb-radio-label,
.fppb-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fpp-body, #334155);
    background: var(--fpp-surface, #f8fafc);
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}
.fppb-radio-label:hover,
.fppb-checkbox-label:hover {
    border-color: var(--fpp-primary, #0891b2);
    background: color-mix(in srgb, var(--fpp-primary, #0891b2) 6%, var(--fpp-surface, #f8fafc));
}
.fppb-radio-label:has(input:focus-visible),
.fppb-checkbox-label:has(input:focus-visible) {
    border-color: var(--fpp-primary, #0891b2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpp-primary, #0891b2) 15%, transparent);
}
.fppb-radio-label:has(input:checked),
.fppb-checkbox-label:has(input:checked) {
    border-color: var(--fpp-primary, #0891b2);
    background: color-mix(in srgb, var(--fpp-primary, #0891b2) 8%, var(--fpp-surface, #f8fafc));
}
.fppb-radio-label input,
.fppb-checkbox-label input {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--fpp-primary, #0891b2);
    cursor: pointer;
}

.fppb-linked-form-fields .fppb-form-field-w100 > .fppb-checkbox-label,
.fppb-linked-form-fields .fppb-form-field-w100 > .fppb-radio-label {
    width: 100%;
}

/* ── Payment choice ───────────────────────────────────────────────── */

.fppb-payment-choice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.fppb-payment-choice-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fpp-muted, #64748b);
}

.fppb-payment-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    color: var(--fpp-body, #334155);
    background: var(--fpp-surface, #f8fafc);
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}
.fppb-payment-option:hover {
    border-color: var(--fpp-primary, #0891b2);
    background: color-mix(in srgb, var(--fpp-primary, #0891b2) 6%, var(--fpp-surface, #f8fafc));
}
.fppb-payment-option:has(input:focus-visible) {
    border-color: var(--fpp-primary, #0891b2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpp-primary, #0891b2) 15%, transparent);
}
.fppb-payment-option input[type=radio] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--fpp-primary, #0891b2);
    cursor: pointer;
}
.fppb-payment-option-selected {
    border-color: var(--fpp-primary, #0891b2);
    background: color-mix(in srgb, var(--fpp-primary, #0891b2) 8%, var(--fpp-surface, #f8fafc));
}

.fppb-payment-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
}
.fppb-payment-option-content strong {
    font-weight: 600;
    color: var(--fpp-heading, #0f172a);
}
.fppb-payment-option-content span {
    font-size: 13px;
    color: var(--fpp-muted, #64748b);
}

/* ── Summary ──────────────────────────────────────────────────────── */

.fppb-summary {
    background: var(--fpp-surface, #f8fafc);
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded, 6px);
    padding: 16px;
    margin-top: 16px;
}

.fppb-summary-title {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--fpp-heading, #0f172a);
    margin-bottom: 12px;
}

.fppb-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--fpp-body, #334155);
    border-bottom: 1px solid var(--fpp-border, #e2e8f0);
}
.fppb-summary-row:last-child { border-bottom: none; }

.fppb-summary-total {
    font-weight: 700;
    font-size: 15px;
    color: var(--fpp-heading, #0f172a);
}

.fppb-summary-note {
    margin: 6px 0 0;
    font-size: 10px;
    color: var(--fpp-muted, #94a3b8);
    line-height: 1.4;
    font-style: italic;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.fppb-form-submit {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.fppb-btn,
a.fppb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    padding: var(--fpp-btn-py, 12px) var(--fpp-btn-px, 24px);
    border-radius: var(--fpp-btn-radius, var(--fpp-rounded-md, 8px));
    font-size: var(--fpp-btn-font-size, 16px);
    font-weight: var(--fpp-btn-font-weight, 600);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.5;
    min-height: 44px;
    box-sizing: border-box;
}

.fppb-btn-primary,
a.fppb-btn-primary {
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
}
.fppb-btn-primary:hover,
a.fppb-btn-primary:hover {
    background: var(--fpp-primary-hover, #0e7490);
    color: var(--fpp-white, #fff);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--fpp-primary, #0891b2) 25%, transparent);
    transform: translateY(-1px);
}
.fppb-btn-primary:active,
a.fppb-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}
.fppb-btn-primary:disabled,
a.fppb-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.fppb-btn-secondary,
a.fppb-btn-secondary {
    background: color-mix(in srgb, var(--fpp-primary, #0891b2) 10%, transparent);
    color: var(--fpp-primary, #0891b2);
    border: 1px solid color-mix(in srgb, var(--fpp-primary, #0891b2) 20%, transparent);
}
.fppb-btn-secondary:hover,
a.fppb-btn-secondary:hover {
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
    border-color: var(--fpp-primary, #0891b2);
}

.fppb-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--fpp-body, #334155);
    border: 1px solid var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded, 6px);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.fppb-btn-outline:hover {
    background: var(--fpp-surface, #f8fafc);
    border-color: var(--fpp-primary, #0891b2);
    color: var(--fpp-primary, #0891b2);
    text-decoration: none;
}

.fppb-btn--full,
a.fppb-btn--full {
    width: 100%;
    align-self: stretch;
}

.fppb-btn-book,
a.fppb-btn-book {
    width: fit-content;
    max-width: 100%;
    align-self: center;
    padding: var(--fpp-btn-py, 12px) var(--fpp-btn-px, 24px);
    font-size: var(--fpp-btn-font-size, 16px);
    border-radius: var(--fpp-btn-radius, var(--fpp-rounded-md, 8px));
    text-decoration: none;
    margin-top: auto;
    cursor: pointer;
    font-weight: var(--fpp-btn-font-weight, 600);
    font-family: inherit;
    transition: all 0.2s ease;
    line-height: 1.5;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--fpp-primary, #0891b2);
    border: 2px solid var(--fpp-primary, #0891b2);
}
.fppb-btn-book:hover,
a.fppb-btn-book:hover {
    background: var(--fpp-primary, #0891b2);
    color: var(--fpp-white, #fff);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--fpp-primary, #0891b2) 25%, transparent);
    transform: translateY(-1px);
    text-decoration: none;
}
.fppb-btn-book:active,
a.fppb-btn-book:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Loading state shared (utilisé par finalize-btn et form submit) */
.fppb-btn-loading {
    display: none;
    align-items: center;
    gap: 8px;
}
.fppb-btn--loading .fppb-btn-text { display: none; }
.fppb-btn--loading .fppb-btn-loading { display: inline-flex; }

.fppb-spinner { animation: fppb-spin 0.8s linear infinite; }
@keyframes fppb-spin {
    to { transform: rotate(360deg); }
}

/* ── Success state (after booking) ────────────────────────────────── */

.fppb-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
    background: var(--fpp-success-light, #f0fdf4);
    border: 1px solid var(--fpp-success, #16a34a);
    border-radius: var(--fpp-rounded-lg, 12px);
}
.fppb-success svg {
    color: var(--fpp-success, #16a34a);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.fppb-success h3 {
    font-family: var(--fpp-font-heading, inherit);
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--fpp-success, #16a34a);
}
.fppb-success p {
    margin: 0;
    font-size: 14px;
    color: var(--fpp-body, #334155);
}

/* ── Services list ([fppb_services]) ──────────────────────────────── */

.fppb-services-page {
    font-family: var(--fpp-font-body, inherit);
    -webkit-font-smoothing: antialiased;
}

.fppb-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.fppb-service-card {
    background: var(--fpp-card-bg, var(--fpp-white, #fff));
    border: 1px solid var(--fpp-card-border, var(--fpp-border, #e2e8f0));
    border-radius: var(--fpp-card-radius, var(--fpp-rounded-lg, 12px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
.fppb-service-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.fppb-service-card-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.fppb-service-card-body {
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fppb-service-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 16px;
}

.fppb-service-card-title {
    margin: 0;
    font-family: var(--fpp-font-heading, inherit);
    font-size: 20px;
    font-weight: 700;
    color: var(--fpp-heading, #0f172a);
    line-height: 1.3;
}

.fppb-service-card-price-tag { flex-shrink: 0; }

.fppb-service-card-price {
    font-weight: 800;
    color: var(--fpp-heading, #0f172a);
    font-size: 36px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
    font-family: var(--fpp-font-heading, inherit);
}
.fppb-service-card-price small {
    font-size: 14px;
    font-weight: 600;
    color: var(--fpp-muted, #64748b);
}

.fppb-service-card-price-free {
    color: var(--fpp-success, #16a34a);
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    font-family: var(--fpp-font-heading, inherit);
}

.fppb-service-card-desc {
    font-size: 14px;
    color: var(--fpp-body, #334155);
    line-height: 1.65;
    margin-bottom: 20px;
}
.fppb-service-card-desc p { margin: 0 0 6px; }
.fppb-service-card-desc p:last-child { margin-bottom: 0; }

.fppb-service-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--fpp-border, #e2e8f0);
    border-bottom: 1px solid var(--fpp-border, #e2e8f0);
}

.fppb-service-card-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--fpp-muted, #64748b);
    font-weight: 500;
}
.fppb-service-card-detail svg {
    color: var(--fpp-primary, #0891b2);
    flex-shrink: 0;
}

.fppb-booking-panel { animation: fppb-fadeIn 0.3s ease; }

@keyframes fppb-fadeIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.fppb-services-back { margin-bottom: 20px; }

.fppb-error {
    color: var(--fpp-error, #dc2626);
    font-size: 14px;
}
.fppb-empty-text {
    color: var(--fpp-muted, #64748b);
    text-align: center;
    padding: 32px;
}

/* ── My bookings ([fppb_my_bookings]) ─────────────────────────────── */

.fppb-my-bookings-wrap {
    max-width: 720px;
    margin: 32px auto;
    font-family: var(--fpp-font-body, inherit);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fppb-my-bookings-empty {
    text-align: center;
    padding: 32px;
    color: var(--fpp-muted, #64748b);
    background: var(--fpp-surface, #f8fafc);
    border: 1px dashed var(--fpp-border, #e2e8f0);
    border-radius: var(--fpp-rounded-lg, 12px);
}

.fppb-my-booking-card {
    background: var(--fpp-card-bg, var(--fpp-white, #fff));
    border: 1px solid var(--fpp-card-border, var(--fpp-border, #e2e8f0));
    border-radius: var(--fpp-card-radius, var(--fpp-rounded-lg, 12px));
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
.fppb-my-booking-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.fppb-my-booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fpp-border, #e2e8f0);
}

.fppb-my-booking-header strong {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 17px;
    font-weight: 700;
    color: var(--fpp-heading, #0f172a);
    line-height: 1.3;
}

.fppb-my-booking-status {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}
.fppb-status-pending,
.fppb-my-booking-status.fppb-status-pending {
    background: var(--fpp-warning-light, #fef3c7);
    color: var(--fpp-warning, #92400e);
}
.fppb-status-confirmed,
.fppb-my-booking-status.fppb-status-confirmed {
    background: var(--fpp-success-light, #f0fdf4);
    color: var(--fpp-success, #166534);
}
.fppb-status-cancelled,
.fppb-my-booking-status.fppb-status-cancelled {
    background: var(--fpp-error-light, #fef2f2);
    color: var(--fpp-error, #991b1b);
}

.fppb-my-booking-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--fpp-body, #334155);
    margin-bottom: 16px;
}
.fppb-my-booking-body strong {
    color: var(--fpp-heading, #0f172a);
    font-weight: 600;
}

.fppb-my-booking-resched-info {
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    color: var(--fpp-muted, #64748b);
}

/* Notice de paiement à régler */
.fppb-my-booking-payment-notice {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--fpp-warning-light, #fef3c7);
    border: 1px solid color-mix(in srgb, var(--fpp-warning, #d97706) 30%, transparent);
    border-radius: var(--fpp-rounded-md, 8px);
    font-size: 14px;
    color: var(--fpp-warning, #92400e);
}

.fppb-my-booking-amount {
    font-family: var(--fpp-font-heading, inherit);
    font-size: 18px;
    font-weight: 800;
    color: var(--fpp-heading, #0f172a);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.fppb-my-booking-payment-label {
    color: var(--fpp-warning, #92400e);
    font-weight: 500;
}

.fppb-my-booking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fppb-my-booking-actions .fppb-customer-reschedule-btn {
    margin-left: auto;
}

.fppb-my-booking-blocked {
    font-size: 13px;
    color: var(--fpp-muted, #64748b);
    font-style: italic;
}

/* Reschedule modal */
.fppb-customer-reschedule-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.5);
    z-index: 100000;
    padding: 16px;
}
.fppb-customer-reschedule-modal[hidden] { display: none; }

.fppb-customer-reschedule-inner {
    background: var(--fpp-white, #fff);
    border-radius: var(--fpp-rounded-lg, 12px);
    padding: 24px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.fppb-customer-reschedule-inner h3 {
    margin: 0 0 16px;
    font-family: var(--fpp-font-heading, inherit);
    font-size: 18px;
    font-weight: 700;
    color: var(--fpp-heading, #0f172a);
}

.fppb-customer-reschedule-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fpp-border, #e2e8f0);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .fppb-booking-wrap,
    .fppb-my-bookings-wrap {
        margin: 16px;
    }

    .fppb-services-grid { grid-template-columns: 1fr; }
    .fppb-service-card-body { padding: 28px 22px 22px; }
    .fppb-service-card-price,
    .fppb-service-card-price-free { font-size: 28px; }

    .fppb-form-row { flex-direction: column; }
    .fppb-form-field-w50,
    .fppb-form-field-w33 { flex: 0 0 100%; }

    .fppb-my-booking-card { padding: 16px; }
    .fppb-my-booking-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .fppb-my-booking-actions .fppb-btn,
    .fppb-my-booking-actions a.fppb-btn { width: 100%; }
}