/* ======================================================================
   CUSTOM BOOKING — Card System & Visual Improvements
   Paleta Dark / Cyan — Bootstrap 5 — EasyAppointments
   Carregado APÓS custom.css para sobrescrever apenas o necessário
   ====================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   STEP 4 — BOOKING SUMMARY CARDS
   ───────────────────────────────────────────────────────────────────── */

/* Container principal dos dois cards de resumo */
.booking-summary {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    max-width:      640px;
    margin:         0 auto 20px;
}

/* Card base — fundo escuro translúcido + borda sutil */
.booking-card {
    background:    rgba(255, 255, 255, .04);
    border:        1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    padding:       22px 24px;
    text-align:    left !important; /* cancela text-center herdado do Bootstrap */
    transition:    border-color .18s ease;
}

.booking-card:hover {
    border-color: rgba(0, 212, 255, .22);
}

/* Accent ciano no topo do card de serviço */
.booking-card--service {
    border-top: 2px solid rgba(0, 212, 255, .40);
}

/* Card de localização do estabelecimento */
.booking-card--location {
    border-top: 2px solid rgba(0, 212, 255, .20);
}

/* ─── CONTEÚDO INJETADO PELO JS ──────────────────────────────────────
   O JS preenche #appointment-details e #customer-details com divs:
     > div.mb-2.fw-bold.fs-3    → título (serviço / "Contact Info")
     > div.mb-2.fw-bold.text-muted → subtítulo (provider / nome)
     > div.mb-2 [com i.fas]     → linhas de dado (data, duração, etc.)
   ──────────────────────────────────────────────────────────────────── */

/* Título grande: nome do serviço / "Contact Info" */
.booking-card--service > div > .fw-bold.fs-3,
.booking-card--contact > div > .fw-bold.fs-3 {
    font-size:     20px !important;
    font-weight:   800 !important;
    line-height:   1.3;
    color:         #f0f4f8;
    margin-bottom: 6px !important;
    display:       block;
}

/* Subtítulo: nome do provider / nome do cliente */
.booking-card--service > div > .fw-bold.text-muted,
.booking-card--contact > div > .fw-bold.text-muted {
    font-size:      13px !important;
    font-weight:    500 !important;
    color:          rgba(255, 255, 255, .48) !important;
    margin-bottom:  16px !important;
    display:        block;
}

/* Linhas de dado: data, duração, timezone, preço / email, telefone, endereço */
.booking-card--service > div > .mb-2:not(.fw-bold),
.booking-card--contact > div > .mb-2:not(.fw-bold) {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size:     14px;
    color:         rgba(255, 255, 255, .80);
    margin-bottom: 0 !important;
}

/* Remove border na última linha de dado */
.booking-card--service > div > .mb-2:not(.fw-bold):last-child,
.booking-card--contact > div > .mb-2:not(.fw-bold):last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Ícones FontAwesome nas linhas de dado — cor ciano */
.booking-card--service > div > .mb-2 i,
.booking-card--contact > div > .mb-2 i {
    color:       #00d4ff;
    width:       16px;
    text-align:  center;
    flex-shrink: 0;
    font-size:   13px;
}

/* ─── CAPTCHA — garante max-width alinhado ao restante ──────────────── */
#book-appointment-wizard #wizard-frame-4 .frame-content.row {
    max-width: 640px;
    margin:    0 auto;
}

/* ─── TERMOS / POLÍTICA ─────────────────────────────────────────────── */
#book-appointment-wizard #wizard-frame-4 .d-flex.fs-6 {
    justify-content: flex-start !important;
    flex-direction:  column;
    gap:             8px;
    max-width:       640px;
    margin:          0 auto 20px;
    padding:         0 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   PÁGINAS DE SUCESSO E CANCELAMENTO (message_layout)
   ───────────────────────────────────────────────────────────────────── */

/* Fundo escuro consistente com o booking wizard */
body {
    background:
        radial-gradient(ellipse 1100px 600px at 12% 0%, rgba(0, 212, 255, .09), transparent 58%),
        radial-gradient(ellipse  750px 450px at 90% 8%, rgba(0, 212, 255, .05), transparent 58%),
        #090d12;
    min-height: 100vh;
    color:      #f0f4f8;
}

/* Frame de sucesso / mensagem — estilo card consistente */
#success-frame,
#message-frame {
    background:    rgba(13, 21, 32, 1);
    border:        1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding:       44px 32px;
    text-align:    center;
    color:         #f0f4f8;
    box-shadow:    0 20px 60px rgba(0, 0, 0, .55);
    max-width:     560px;
    margin:        32px auto;
}

/* Ícone de sucesso */
.confirmation-icon-wrap {
    margin-bottom: 20px;
}

.confirmation-icon-wrap #success-icon,
.confirmation-icon-wrap #message-icon,
#success-frame #success-icon,
#message-frame #message-icon {
    width:         64px;
    height:        auto;
    display:       block !important;
    margin:        0 auto !important;
    float:         none !important;
}

/* Título principal */
.confirmation-title,
#success-frame h4,
#message-frame h4 {
    font-size:      22px;
    font-weight:    800;
    color:          #f0f4f8;
    margin-bottom:  10px;
    letter-spacing: .01em;
    line-height:    1.3;
}

/* Divisor decorativo */
.success-divider {
    width:      56px;
    height:     2px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .55), transparent);
    border:     none;
    margin:     18px auto;
}

/* Texto principal */
.confirmation-message,
#success-frame p,
#message-frame p {
    font-size:     15px;
    color:         rgba(255, 255, 255, .65);
    line-height:   1.7;
    margin-bottom: 8px;
}

/* Dica de spam / texto secundário */
.success-hint,
#success-frame p.text-muted small,
#message-frame p.text-muted small {
    font-size:  12px;
    color:      rgba(255, 255, 255, .32);
    line-height: 1.5;
    display:    block;
    margin-top: 4px;
}

/* Container dos botões de ação */
.confirmation-actions {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             10px;
    margin-top:      28px;
}

/* Botões de ação */
.confirmation-actions .btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    border-radius:   999px;
    font-weight:     700;
    font-size:       14px;
    padding:         13px 28px;
    min-width:       200px;
    width:           100%;
    max-width:       320px;
    transition:      all .18s ease;
    text-decoration: none;
}

/* Botão primário */
.confirmation-actions .btn-primary {
    background:  linear-gradient(135deg, #00d4ff, #00aef0);
    border:      none;
    color:       #001018 !important;
    font-weight: 900;
    box-shadow:  0 4px 20px rgba(0, 212, 255, .28);
}

.confirmation-actions .btn-primary:hover {
    filter:     brightness(1.08);
    box-shadow: 0 6px 28px rgba(0, 212, 255, .42);
    transform:  translateY(-1px);
    color:      #001018 !important;
}

/* Botão secundário (Google Calendar) */
.confirmation-actions .btn-outline-secondary {
    background:   rgba(255, 255, 255, .05);
    border:       1px solid rgba(255, 255, 255, .15);
    color:        #f0f4f8 !important;
}

.confirmation-actions .btn-outline-secondary:hover {
    background:   rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .26);
    transform:    translateY(-1px);
    color:        #f0f4f8 !important;
}

/* Linha "Powered by" no rodapé do message_layout */
#message-frame .mt-2,
#success-frame .mt-2 {
    color:     rgba(255, 255, 255, .28);
    font-size: 12px;
    margin-top: 24px !important;
}

#message-frame .mt-2 a,
#success-frame .mt-2 a {
    color:           rgba(0, 212, 255, .60);
    text-decoration: none;
}

#message-frame .mt-2 a:hover,
#success-frame .mt-2 a:hover {
    color: #00d4ff;
}

/* ─────────────────────────────────────────────────────────────────────
   STEP 4 — FRASE RESUMO & CONTACT LABEL:VALUE
   ───────────────────────────────────────────────────────────────────── */

/* Frase resumo: "com Gabriel às 21:00" — subtítulo do card de serviço */
.appt-phrase {
    font-size:     14px !important;
    font-weight:   500 !important;
    color:         rgba(0, 212, 255, .70) !important;
    letter-spacing: .01em;
}

/* Linha label:value no card de contato */
.contact-row {
    display:     flex;
    align-items: baseline;
    gap:         8px;
}

.contact-label {
    flex-shrink:    0;
    min-width:      72px;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color:          rgba(255, 255, 255, .38);
}

.contact-value {
    font-size: 14px;
    color:     rgba(255, 255, 255, .82);
    word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────────────
   STEPS 1–3 — UX & HIERARQUIA VISUAL
   ───────────────────────────────────────────────────────────────────── */

/* Texto auxiliar abaixo do frame-title */
.step-helper {
    text-align:    center;
    color:         rgba(255, 255, 255, .36);
    font-size:     13px;
    margin-top:    -18px;
    margin-bottom: 28px;
    line-height:   1.5;
}

/* Label de seção dentro do step (Data / Horários / Endereço) */
.step-section-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, .38);
    margin-bottom:  10px;
    margin-top:     0;
    display:        flex;
    align-items:    center;
    gap:            8px;
    line-height:    1;
}

.step-section-label i {
    color:     rgba(0, 212, 255, .65);
    font-size: 11px;
    width:     12px;
    text-align: center;
}

/* Step 1 — service-description com padding uniforme */
#book-appointment-wizard #wizard-frame-1 #service-description {
    margin-top: 4px;
}

/* Step 2 — label timezone com ícone embutido */
#book-appointment-wizard #wizard-frame-2 label[for="select-timezone"] i {
    color: rgba(0, 212, 255, .55);
    font-size: 11px;
}

/* Step 3 — notes textarea redimensionável */
#book-appointment-wizard #notes {
    resize:     vertical;
    min-height: 76px;
}

/* Estado disabled dos botões de navegação */
#book-appointment-wizard .command-buttons .btn:disabled,
#book-appointment-wizard .command-buttons .btn[disabled] {
    opacity:    0.35;
    cursor:     not-allowed;
    transform:  none !important;
    box-shadow: none !important;
    filter:     none !important;
}

/* Span vazio do comando "voltar" no step 1 (espaçador) */
#book-appointment-wizard #wizard-frame-1 .command-buttons span {
    display: block;
    width:   0;
}

/* Step 2 mobile — label de seção com margem extra */
@media (max-width: 767px) {
    #book-appointment-wizard #wizard-frame-2 .col-12:last-child .step-section-label {
        margin-top: 18px;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVO
   ───────────────────────────────────────────────────────────────────── */

/* Botões lado a lado em telas >= 480px */
@media (min-width: 480px) {
    .confirmation-actions {
        flex-direction:  row;
        flex-wrap:       wrap;
        justify-content: center;
    }

    .confirmation-actions .btn {
        width: auto;
    }
}

/* Ajustes mobile */
@media (max-width: 575px) {
    #success-frame,
    #message-frame {
        padding:       32px 18px;
        margin:        16px;
        border-radius: 14px;
    }

    .booking-card {
        padding: 18px 16px;
    }

    .booking-card--service > div > .fw-bold.fs-3,
    .booking-card--contact > div > .fw-bold.fs-3 {
        font-size: 17px !important;
    }
}