/* =========================================================
   Massage Booking — Public CSS v1.1
   Paleta: Dourado #C9A227 · Vinho #6B0F1A
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --mb-pri:      #C9A227;
    --mb-pri-glow: rgba(201,162,39,.25);
    --mb-sec:      #6B0F1A;
    --mb-sec-dark: #3D0810;
    --mb-bg:       #ffffff;
    --mb-card:     #f9f8f6;
    --mb-text:     #1a1410;
    --mb-muted:    #6b6560;
    --mb-border:   #e8e4dc;
    --mb-sum-bg:   #0f0c09;
    --mb-sum-text: #f3f0e8;
    --mb-radius:   20px;
    --mb-radius-sm:12px;
    --mb-font-body:  'DM Sans', sans-serif;
    --mb-font-title: 'Cormorant Garamond', Georgia, serif;
    --mb-transition: 0.25s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mb-bg:     #111009;
        --mb-card:   #1c1a15;
        --mb-text:   #f3f0e8;
        --mb-muted:  #9a8f7e;
        --mb-border: #2e2b24;
        --mb-sum-bg: #050403;
    }
}

/* ─── Container ──────────────────────────────────────── */
.mb-premium-booking {
    font-family:   var(--mb-font-body);
    background:    var(--mb-bg);
    color:         var(--mb-text);
    max-width:     1020px;
    margin:        48px auto;
    border-radius: var(--mb-radius);
    border:        1px solid var(--mb-border);
    box-shadow:    0 32px 80px -20px rgba(0,0,0,.12), 0 0 0 1px rgba(201,162,39,.08);
    overflow:      hidden;
}

.mb-main-layout {
    display:               grid;
    grid-template-columns: 1fr 320px;
}

/* ─── Step panes — BUG FIX: sem !important, usa class active ── */
.mb-step-pane {
    display: none;
}
.mb-step-pane.active {
    display: block;
    animation: mbFadeUp 0.35s ease-out both;
}

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

/* ─── Form side ──────────────────────────────────────── */
.mb-form-side {
    padding: 44px 44px 40px;
}

/* ─── Step Indicator ─────────────────────────────────── */
.mb-step-indicator {
    display:         flex;
    align-items:     center;
    gap:             0;
    margin-bottom:   40px;
}

.mb-step-point {
    display:    flex;
    align-items: center;
    flex:        1;
    position:   relative;
}

.mb-step-point:last-child { flex: 0; }

.mb-step-point::after {
    content:          '';
    flex:             1;
    height:           1px;
    background:       var(--mb-border);
    margin:           0 10px;
    transition:       background var(--mb-transition);
}
.mb-step-point:last-child::after { display: none; }
.mb-step-point.completed::after  { background: var(--mb-pri); }

.mb-step-dot-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
}

.mb-step-point span {
    width:          34px;
    height:         34px;
    border-radius:  50%;
    border:         2px solid var(--mb-border);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-weight:    700;
    font-size:      13px;
    color:          var(--mb-muted);
    transition:     all var(--mb-transition);
    background:     var(--mb-bg);
}

.mb-step-label {
    font-size:   10px;
    font-weight: 600;
    color:       var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    transition:  color var(--mb-transition);
}

.mb-step-point.active span {
    border-color: var(--mb-pri);
    color:        var(--mb-pri);
    box-shadow:   0 0 0 4px var(--mb-pri-glow);
}
.mb-step-point.active .mb-step-label { color: var(--mb-pri); }

.mb-step-point.completed span {
    background:   var(--mb-pri);
    border-color: var(--mb-pri);
    color:        #fff;
}
.mb-step-point.completed .mb-step-label { color: var(--mb-pri); }

/* ─── Section title ─────────────────────────────────── */
.mb-section-title {
    font-family:   var(--mb-font-title);
    font-size:     28px;
    font-weight:   700;
    letter-spacing: -.3px;
    margin-bottom: 24px;
    line-height:   1.2;
    color:         var(--mb-text);
}

/* ─── Service Cards ──────────────────────────────────── */
.mb-services-list { display: flex; flex-direction: column; gap: 10px; }

.mb-service-item {
    background:    var(--mb-card);
    border:        2px solid transparent;
    padding:       18px 20px;
    border-radius: var(--mb-radius-sm);
    display:       flex;
    justify-content:space-between;
    align-items:   center;
    cursor:        pointer;
    transition:    all var(--mb-transition);
    position:      relative;
    overflow:      hidden;
}

.mb-service-item::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(201,162,39,.04), transparent);
    opacity:    0;
    transition: opacity var(--mb-transition);
}

.mb-service-item:hover {
    border-color: rgba(201,162,39,.4);
    transform:    translateY(-1px);
    box-shadow:   0 8px 24px rgba(0,0,0,.06);
}
.mb-service-item:hover::before { opacity: 1; }

.mb-service-item.selected {
    border-color: var(--mb-pri);
    background:   rgba(201,162,39,.05);
    box-shadow:   0 0 0 4px var(--mb-pri-glow), 0 8px 24px rgba(0,0,0,.06);
}
.mb-service-item.selected::before { opacity: 1; }

.mb-service-info strong {
    display:     block;
    font-size:   15px;
    font-weight: 700;
    margin-bottom: 3px;
    color:       var(--mb-text);
}
.mb-service-info span {
    font-size: 13px;
    color:     var(--mb-muted);
}

.mb-service-price {
    font-family:   var(--mb-font-title);
    font-size:     22px;
    font-weight:   700;
    color:         var(--mb-pri);
    white-space:   nowrap;
}

/* ─── Service details (collapso) ─────────────────────── */
.mb-service-details {
    background:    rgba(201,162,39,.04);
    border:        1px solid rgba(201,162,39,.2);
    border-radius: var(--mb-radius-sm);
    padding:       16px 18px;
    margin-top:    12px;
    font-size:     14px;
    color:         var(--mb-muted);
}
.mb-service-details h4 {
    font-family:   var(--mb-font-title);
    font-size:     16px;
    font-weight:   700;
    color:         var(--mb-text);
    margin:        0 0 8px;
}

/* ─── Form fields ────────────────────────────────────── */
.mb-input-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
    margin-bottom:         22px;
}

.mb-field {
    margin-bottom: 16px;
}

.mb-field label {
    display:     block;
    font-size:   12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:       var(--mb-muted);
    margin-bottom: 7px;
}

.mb-field input,
.mb-field select,
.mb-field textarea {
    width:         100%;
    padding:       12px 16px;
    border:        1.5px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
    background:    var(--mb-bg);
    color:         var(--mb-text);
    font-family:   var(--mb-font-body);
    font-size:     15px;
    transition:    border-color var(--mb-transition), box-shadow var(--mb-transition);
    box-sizing:    border-box;
    -webkit-appearance: none;
    appearance:    none;
}

.mb-field input:focus,
.mb-field select:focus,
.mb-field textarea:focus {
    outline:      none;
    border-color: var(--mb-pri);
    box-shadow:   0 0 0 3px var(--mb-pri-glow);
}

/* Estado de validação */
.mb-field input.mb-valid,
.mb-field select.mb-valid { border-color: #22c55e; }
.mb-field input.mb-invalid,
.mb-field select.mb-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.mb-field-error {
    display:    none;
    font-size:  12px;
    color:      #dc2626;
    margin-top: 5px;
}
.mb-field input.mb-invalid ~ .mb-field-error { display: block; }

/* ─── Time slots ─────────────────────────────────────── */
.mb-time-slots-wrapper { margin-bottom: 22px; }
.mb-time-slots-wrapper > label {
    display:       block;
    font-size:     12px;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:         var(--mb-muted);
    margin-bottom: 10px;
}

.mb-time-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   8px;
}

.mb-time-slot {
    padding:       12px 8px;
    text-align:    center;
    border-radius: var(--mb-radius-sm);
    border:        1.5px solid var(--mb-border);
    background:    var(--mb-card);
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    color:         var(--mb-text);
    transition:    all var(--mb-transition);
}

.mb-time-slot:hover:not(.unavailable) {
    border-color: var(--mb-pri);
    background:   rgba(201,162,39,.06);
    transform:    translateY(-1px);
}

.mb-time-slot.selected {
    background:   var(--mb-pri);
    color:        #fff;
    border-color: var(--mb-pri);
    box-shadow:   0 4px 14px var(--mb-pri-glow);
    font-weight:  700;
}

.mb-time-slot.unavailable {
    opacity:       0.38;
    cursor:        not-allowed;
    text-decoration: line-through;
}

/* Skeleton loader */
.mb-loading {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   8px;
}
.mb-loading::before,
.mb-loading::after {
    content:       '';
    display:       block;
    grid-column:   span 2;
}
@keyframes mbSkeleton { 0%,100%{opacity:.4} 50%{opacity:.8} }
.mb-skeleton {
    height:        44px;
    border-radius: var(--mb-radius-sm);
    background:    var(--mb-border);
    animation:     mbSkeleton 1.4s ease-in-out infinite;
}

.mb-select-date-first {
    grid-column:  1 / -1;
    text-align:   center;
    color:        var(--mb-muted);
    font-size:    14px;
    padding:      20px 0;
}

/* ─── Buttons ────────────────────────────────────────── */
.mb-step-footer {
    display:    flex;
    gap:        12px;
    margin-top: 28px;
}

.mb-btn-next,
.mb-btn-submit {
    flex-grow:     1;
    padding:       14px 28px;
    border:        none;
    border-radius: var(--mb-radius-sm);
    background:    linear-gradient(135deg, var(--mb-sec), var(--mb-pri));
    color:         #fff !important;
    font-family:   var(--mb-font-body);
    font-size:     15px;
    font-weight:   700;
    letter-spacing:.3px;
    cursor:        pointer;
    transition:    all var(--mb-transition);
    box-shadow:    0 4px 18px var(--mb-pri-glow);
    position:      relative;
    overflow:      hidden;
}
.mb-btn-next::after,
.mb-btn-submit::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(255,255,255,.1), transparent);
    opacity:    0;
    transition: opacity var(--mb-transition);
}
.mb-btn-next:hover::after,
.mb-btn-submit:hover::after { opacity: 1; }
.mb-btn-next:hover,
.mb-btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--mb-pri-glow); }

.mb-btn-next:disabled {
    background: var(--mb-border);
    color:      var(--mb-muted) !important;
    cursor:     not-allowed;
    box-shadow: none;
    transform:  none;
}
.mb-btn-next:disabled::after { display: none; }

.mb-btn-prev {
    padding:       14px 20px;
    border:        1.5px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
    background:    transparent;
    color:         var(--mb-muted);
    font-family:   var(--mb-font-body);
    font-size:     15px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--mb-transition);
}
.mb-btn-prev:hover {
    border-color: var(--mb-pri);
    color:        var(--mb-pri);
}

/* ─── Summary sidebar ────────────────────────────────── */
.mb-summary-side {
    background:  var(--mb-sum-bg);
    color:       var(--mb-sum-text);
    padding:     44px 32px;
    border-left: 1px solid rgba(201,162,39,.12);
    position:    relative;
}

.mb-summary-side::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     2px;
    background: linear-gradient(90deg, var(--mb-sec), var(--mb-pri), var(--mb-sec));
    opacity:    .7;
}

.mb-summary-sticky { position: sticky; top: 40px; }

.mb-summary-sticky h3 {
    font-family:   var(--mb-font-title);
    font-size:     22px;
    font-weight:   700;
    color:         var(--mb-pri);
    margin-bottom: 28px;
    letter-spacing: -.2px;
}

.mb-summary-row {
    display:       flex;
    justify-content: space-between;
    align-items:   baseline;
    margin-bottom: 14px;
    font-size:     13px;
    gap:           10px;
}

.mb-summary-row span {
    color:       rgba(243,240,232,.5);
    white-space: nowrap;
    font-size:   12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mb-summary-row strong {
    color:       var(--mb-sum-text);
    font-weight: 600;
    text-align:  right;
    word-break:  break-word;
}

.mb-summary-divider {
    height:     1px;
    background: rgba(201,162,39,.18);
    margin:     20px 0;
}

.mb-summary-total {
    display:        flex;
    justify-content:space-between;
    align-items:    center;
    padding-top:    4px;
}
.mb-summary-total span {
    font-size:   13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:       rgba(243,240,232,.5);
}
.mb-summary-total strong {
    font-family:  var(--mb-font-title);
    font-size:    30px;
    font-weight:  700;
    color:        var(--mb-pri);
    line-height:  1;
}

.mb-price-summary-box { margin-top: 16px; }

/* ─── Success Screen ─────────────────────────────────── */
.mb-success-screen {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    padding:        60px 40px;
    text-align:     center;
    animation:      mbFadeUp 0.5s ease-out both;
}

.mb-success-icon {
    width:         72px;
    height:        72px;
    border-radius: 50%;
    background:    linear-gradient(135deg, var(--mb-sec), var(--mb-pri));
    display:       flex;
    align-items:   center;
    justify-content:center;
    font-size:     32px;
    margin-bottom: 24px;
    box-shadow:    0 8px 32px var(--mb-pri-glow);
    animation:     mbPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}

@keyframes mbPop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.mb-success-screen h2 {
    font-family:  var(--mb-font-title);
    font-size:    30px;
    font-weight:  700;
    margin-bottom:12px;
    color:        var(--mb-text);
}

.mb-success-screen p {
    color:      var(--mb-muted);
    font-size:  15px;
    max-width:  360px;
    line-height: 1.6;
}

/* ─── Form message ───────────────────────────────────── */
.mb-form-message {
    padding:       14px 18px;
    border-radius: var(--mb-radius-sm);
    font-size:     14px;
    font-weight:   600;
    margin-top:    16px;
    display:       none;
}
.mb-form-message.success {
    background: rgba(34,197,94,.1);
    border:     1px solid rgba(34,197,94,.3);
    color:      #166534;
}
.mb-form-message.error {
    background: rgba(239,68,68,.08);
    border:     1px solid rgba(239,68,68,.25);
    color:      #991b1b;
}

/* ─── My Reservations ────────────────────────────────── */
.mb-my-reservations {
    font-family:   var(--mb-font-body);
    max-width:     800px;
    margin:        40px auto;
}

.mb-reservation-card {
    background:    var(--mb-card);
    border:        1px solid var(--mb-border);
    border-radius: var(--mb-radius-sm);
    padding:       20px 24px;
    margin-bottom: 14px;
    display:       flex;
    justify-content:space-between;
    align-items:   center;
    gap:           16px;
}

.mb-reservation-info h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.mb-reservation-info p  { font-size: 13px; color: var(--mb-muted); margin: 0; }

.mb-badge {
    padding:       5px 12px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:.5px;
    white-space:   nowrap;
}
.mb-badge-pending   { background: rgba(234,179,8,.15);  color: #854d0e; }
.mb-badge-confirmed { background: rgba(201,162,39,.15); color: #854d0e; }
.mb-badge-completed { background: rgba(34,197,94,.12);  color: #166534; }
.mb-badge-cancelled { background: rgba(239,68,68,.1);   color: #991b1b; }

/* ─── MOBILE ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .mb-main-layout {
        display:        block;
        padding-bottom: 90px;
    }

    .mb-form-side { padding: 28px 20px; }

    /* Summary vira barra flutuante no rodapé */
    .mb-summary-side {
        position:   fixed;
        bottom:     0;
        left:       0;
        width:      100%;
        padding:    14px 20px;
        z-index:    9999;
        border-top: 2px solid var(--mb-pri);
        border-left: none;
        box-shadow: 0 -8px 30px rgba(0,0,0,.35);
    }
    .mb-summary-side::before { display: none; }

    .mb-summary-sticky h3,
    .mb-summary-divider,
    .mb-price-summary-box .mb-summary-row { display: none !important; }

    .mb-summary-sticky { position: static; }

    .mb-summary-content {
        display:         flex;
        justify-content: space-between;
        align-items:     center;
    }

    #sum-service { display: block !important; margin: 0; font-size: 13px; }

    .mb-summary-total {
        margin: 0;
        padding: 0;
    }
    .mb-summary-total strong { font-size: 22px; }

    /* Time grid 3 colunas no mobile */
    .mb-time-grid { grid-template-columns: repeat(3, 1fr); }
    .mb-time-slot { padding: 14px 5px; font-size: 13px; }

    /* Input grid em coluna */
    .mb-input-grid { grid-template-columns: 1fr; }

    /* Steps menores */
    .mb-step-point span { width: 28px; height: 28px; font-size: 11px; }
    .mb-step-label { display: none; }

    .mb-section-title { font-size: 22px; }
}

@media (max-width: 480px) {
    .mb-premium-booking { margin: 16px; border-radius: 16px; }
    .mb-form-side { padding: 22px 16px; }
    .mb-time-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ─── Crédito disponível no formulário ───────────────────── */
.mb-credit-notice {
    background:    rgba(201,162,39,.08);
    border:        1px solid rgba(201,162,39,.25);
    border-left:   4px solid var(--mb-pri);
    border-radius: var(--mb-radius-sm);
    padding:       12px 16px;
    font-size:     14px;
    font-weight:   600;
    color:         #5a4200;
    margin-bottom: 20px;
    line-height:   1.5;
}
@media (prefers-color-scheme: dark) {
    .mb-credit-notice { color: var(--mb-pri); background: rgba(201,162,39,.06); }
}