/* ============================================================
   V7 — Booking & Client Management polish
   ============================================================ */

/* Client management page shell */
.management-page {
    background: #fbf6f5;
}

.management-page .agendamento-header {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 28px;
}

.management-page .management-main {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 28px 72px;
    box-sizing: border-box;
}

.management-page .management-shell {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

.management-booking-view {
    display: none;
}

.management-booking-view.is-visible {
    display: block;
}

.management-page .step-header {
    max-width: 780px;
    margin: 14px auto 30px;
}

.management-page .step-header .title-primary {
    font-size: clamp(2rem, 3.4vw, 3.15rem);
}

.management-page #booking-details-card {
    background: #fffdfc;
    border: 1px solid #eadedc;
    box-shadow: 0 18px 50px rgba(78, 52, 47, .08);
}

.management-actions {
    margin-top: 0;
}

.management-support {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    text-decoration: none;
}

/* Premium management modal / bottom-sheet */
.management-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(33, 29, 28, .46);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.management-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.management-modal-card {
    position: relative;
    width: min(100%, 520px);
    max-height: min(760px, calc(100dvh - 48px));
    overflow-y: auto;
    padding: 34px;
    box-sizing: border-box;
    background: #fffdfc;
    border: 1px solid rgba(138, 99, 91, .18);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(49, 32, 29, .2);
    transform: translateY(18px) scale(.985);
    transition: transform .24s ease;
}

.management-modal-overlay.is-open .management-modal-card {
    transform: translateY(0) scale(1);
}

.management-modal-card .modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #eadedc;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: #6f5b56;
    cursor: pointer;
}

.management-modal-hero {
    text-align: center;
    padding: 4px 24px 8px;
}

.management-modal-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #f0e7e6;
    color: #8a635b;
}

.management-modal-hero.is-danger .management-modal-icon {
    background: #fff0ef;
    color: #b84f4f;
}

.management-modal-eyebrow {
    margin: 0 0 8px;
    color: #8a635b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
}

.management-modal-title {
    margin: 0;
    color: #211d1c;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(30px, 5vw, 38px);
    line-height: 1.02;
    font-weight: 600;
}

.management-modal-description {
    max-width: 390px;
    margin: 12px auto 0;
    color: #705d58;
    font-size: 14px;
    line-height: 1.55;
}

.management-modal-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0;
    padding: 14px 16px;
    border: 1px solid #eadedc;
    border-radius: 14px;
    background: #fbf6f5;
}

.management-modal-summary span {
    color: #8a6d66;
    font-size: 12px;
}

.management-modal-summary strong {
    color: #3a302e;
    text-align: right;
    font-size: 14px;
}

.management-reschedule-form {
    margin-top: 18px;
}

.management-date-label {
    display: block;
    margin-bottom: 8px;
    color: #4d3d39;
    font-size: 13px;
    font-weight: 700;
}

.management-date-input {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid #dcc3bd;
    border-radius: 13px;
    outline: none;
    background: #fff;
    color: #211d1c;
    font: 500 15px/1 'Inter', sans-serif;
}

.management-date-input:focus {
    border-color: #9d7168;
    box-shadow: 0 0 0 3px rgba(157, 113, 104, .11);
}

.management-reschedule-message {
    margin: 14px 0 10px;
    color: #7b6863;
    font-size: 13px;
    line-height: 1.45;
}

.management-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.management-slot-btn {
    min-height: 46px;
    border: 1px solid #d7b8b1;
    border-radius: 11px;
    background: #fff;
    color: #7e574f;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.management-slot-btn:hover,
.management-slot-btn.is-selected {
    border-color: #8a635b;
    background: #8a635b;
    color: #fff;
}

.management-reschedule-confirm {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e5d2ce;
    border-radius: 16px;
    background: #fbf6f5;
}

.management-reschedule-confirm span,
.management-reschedule-confirm strong {
    display: block;
}

.management-reschedule-confirm span {
    margin-bottom: 5px;
    color: #8a6d66;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.management-reschedule-confirm strong {
    margin-bottom: 14px;
    color: #211d1c;
    font-size: 16px;
}

.management-modal-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.management-primary-btn,
.management-danger-btn,
.management-secondary-btn {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font: 700 14px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: .18s ease;
}

.management-primary-btn {
    border: 1px solid #8a635b;
    background: #8a635b;
    color: #fff;
}

.management-danger-btn {
    border: 1px solid #bc5959;
    background: #bc5959;
    color: #fff;
}

.management-secondary-btn {
    border: 1px solid #dcc7c2;
    background: #fff;
    color: #725650;
}

.management-primary-btn:disabled,
.management-danger-btn:disabled {
    opacity: .58;
    cursor: wait;
}

.management-modal-feedback {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4ecea;
    color: #765c56;
    font-size: 13px;
    text-align: center;
}

.management-modal-feedback.is-error {
    background: #fff0ef;
    color: #a34646;
}

body.management-modal-open {
    overflow: hidden;
}

/* Booking desktop: use the available screen instead of a phone-width column */
@media (min-width: 900px) {
    body.agendamento-page:not(.management-page) .agendamento-header {
        max-width: 940px;
        padding-top: 26px;
    }

    body.agendamento-page:not(.management-page) .agendamento-main {
        max-width: 940px;
        padding-inline: 28px;
    }

    body.agendamento-page:not(.management-page) .progress-bar-container {
        max-width: 360px;
        margin-bottom: 34px;
    }

    body.agendamento-page:not(.management-page) #step-1 .step-header {
        margin-bottom: 28px;
    }

    body.agendamento-page:not(.management-page) #step-1 .services-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
        align-items: stretch;
    }

    body.agendamento-page:not(.management-page) #step-1 .service-category-title,
    body.agendamento-page:not(.management-page) #step-1 .services-list > p {
        grid-column: 1 / -1;
    }

    body.agendamento-page:not(.management-page) #step-1 .service-category-title {
        margin: 30px 0 2px !important;
        padding-bottom: 10px !important;
        font-size: 15px !important;
        letter-spacing: .08em;
    }

    body.agendamento-page:not(.management-page) #step-1 .service-card {
        min-height: 112px;
        border-radius: 16px;
    }

    body.agendamento-page:not(.management-page) #step-1 .service-card-content {
        padding: 18px 20px;
    }

    body.agendamento-page:not(.management-page) #step-1 .service-card-title {
        font-size: 20px;
    }

    body.agendamento-page:not(.management-page) #step-1 .step-footer {
        max-width: 620px;
        margin: 34px auto 0;
    }

    body.agendamento-page:not(.management-page) #step-2,
    body.agendamento-page:not(.management-page) #step-3,
    body.agendamento-page:not(.management-page) #step-4,
    body.agendamento-page:not(.management-page) #step-5 {
        max-width: 660px;
        margin-inline: auto;
    }

    .management-booking-view.is-visible {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
        gap: 26px;
        align-items: start;
    }

    .management-page .step-header {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        text-align: left;
        margin: 12px 0 4px;
    }

    .management-page #booking-details-card {
        grid-column: 1;
        grid-row: 2 / span 2;
        margin: 0;
        padding: 28px;
        border-radius: 20px;
    }

    .management-page .management-actions {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .management-page .management-actions .action-card {
        min-height: 118px;
        padding: 18px;
        border-radius: 18px;
    }

    .management-page .management-support {
        grid-column: 2;
        grid-row: 3;
        margin: 0;
        min-height: 86px;
        padding: 18px;
        border-radius: 18px;
    }
}

/* Mobile: persistent Continue CTA on service selection */
@media (max-width: 767px) {
    body.agendamento-page:not(.management-page) {
        padding-bottom: 0;
    }

    body.agendamento-page:not(.management-page) #step-1 {
        padding-bottom: 112px;
    }

    body.agendamento-page:not(.management-page) #step-1 .step-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(251,246,245,.99) 72%, rgba(251,246,245,.88));
        border-top: 1px solid rgba(138,99,91,.12);
        box-shadow: 0 -12px 34px rgba(60,41,37,.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body.agendamento-page:not(.management-page) #step-1 .step-footer .btn-next {
        width: min(100%, 440px);
        min-height: 52px;
        margin: 0 auto;
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(138,99,91,.2);
    }

    body.agendamento-page:not(.management-page) #step-1 .step-footer .secure-badge {
        display: none;
    }

    .management-page .agendamento-header {
        max-width: 100%;
        padding: 18px 22px 10px;
    }

    .management-page .management-main {
        max-width: 100%;
        padding: 8px 16px 52px;
    }

    .management-page .management-shell {
        width: 100%;
    }

    .management-page .step-header {
        margin: 8px auto 24px;
    }

    .management-page #booking-details-card {
        padding: 20px;
        border-radius: 18px;
    }

    .management-page .management-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .management-page .management-actions .action-card {
        min-height: 126px;
        border-radius: 16px;
        padding: 16px 10px;
    }

    .management-page .management-support {
        margin-top: 14px;
        padding: 16px;
        border-radius: 16px;
    }

    .management-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .management-modal-card {
        width: 100%;
        max-width: none;
        max-height: min(86dvh, 760px);
        padding: 28px 18px calc(20px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid #eadedc;
        border-radius: 26px 26px 0 0;
        transform: translateY(32px);
        box-shadow: 0 -18px 60px rgba(49, 32, 29, .2);
    }

    .management-modal-overlay.is-open .management-modal-card {
        transform: translateY(0);
    }

    .management-modal-card::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        margin: -15px auto 17px;
        border-radius: 999px;
        background: #dac8c4;
    }

    .management-modal-card .modal-close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
    }

    .management-modal-hero {
        padding-inline: 18px;
    }

    .management-modal-title {
        font-size: 31px;
    }

    .management-modal-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .management-modal-summary strong {
        text-align: left;
    }

    .management-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 370px) {
    .management-page .management-actions {
        grid-template-columns: 1fr;
    }
    .management-page .management-actions .action-card {
        min-height: 100px;
    }
    .management-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   V13 — MULTI-ESPECIALISTAS
   ========================================================= */
.time-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.time-slot strong { font-size: .95rem; font-weight: 600; }
.time-slot small { font-size: .66rem; opacity: .72; font-weight: 500; }
.booking-empty-slots { color: var(--text-secondary); grid-column: 1/-1; padding: 12px 0; }

.specialists-section {
    margin: 22px 0 16px;
    padding: 20px;
    border: 1px solid rgba(138, 99, 91, .16);
    border-radius: 18px;
    background: rgba(255,255,255,.64);
    box-shadow: 0 10px 30px rgba(64, 37, 32, .05);
}
.specialists-section-head { margin-bottom: 14px; }
.specialists-eyebrow {
    display: block;
    color: var(--primary-color);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    margin-bottom: 5px;
}
.specialists-section h4 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-family: var(--font-title);
    font-size: 1.32rem;
    font-weight: 500;
}
.specialists-section p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.specialists-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.specialist-choice-card {
    appearance: none;
    border: 1px solid rgba(138, 99, 91, .16);
    background: #fffdfa;
    border-radius: 14px;
    padding: 11px;
    display: grid;
    grid-template-columns: 48px 1fr 24px;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
    min-width: 0;
}
.specialist-choice-card:hover { border-color: rgba(138,99,91,.38); transform: translateY(-1px); }
.specialist-choice-card.selected {
    border-color: var(--primary-color);
    background: rgba(203,165,158,.11);
    box-shadow: 0 0 0 2px rgba(138,99,91,.07);
}
.specialist-choice-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #efe4e1;
}
.specialist-choice-initials { display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--primary-color); }
.specialist-choice-copy { display:flex;flex-direction:column;gap:2px;min-width:0; }
.specialist-choice-copy strong { font-size: .84rem; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.specialist-choice-copy small { font-size: .68rem; color: var(--text-secondary); }
.specialist-choice-check {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(138,99,91,.22);
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: transparent;
    font-size: .72rem;
}
.specialist-choice-card.selected .specialist-choice-check { background:var(--primary-color);color:#fff;border-color:var(--primary-color); }

@media (max-width: 520px) {
    .specialists-section { padding: 16px; margin-top: 18px; }
    .specialists-grid { grid-template-columns: 1fr; }
    .specialist-choice-card { grid-template-columns: 54px 1fr 24px; min-height: 74px; }
    .specialist-choice-photo { width: 54px; height: 54px; }
    .specialist-choice-copy strong { font-size: .9rem; }
}

/* V18 — service cards without stock images */
.booking-summary-service-clean,
.booking-review-service-head {
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:1.25rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid rgba(138,99,91,.12);
}
.booking-summary-icon {
    width:52px;
    height:52px;
    border-radius:15px;
    display:grid;
    place-items:center;
    flex:0 0 52px;
    color:var(--primary-color);
    background:linear-gradient(145deg,rgba(203,165,158,.20),rgba(255,255,255,.95));
    border:1px solid rgba(138,99,91,.12);
}
body.agendamento-page:not(.management-page) #step-1 .service-card {
    min-height:96px;
    padding:18px 20px;
}
body.agendamento-page:not(.management-page) #step-1 .service-card-content { width:calc(100% - 34px); }

/* =========================================================
   V19 — MEUS AGENDAMENTOS: MULTIPLE SAVED BOOKINGS
   ========================================================= */
.management-saved-section {
    width: min(100%, 860px);
    margin: 0 auto 28px;
    padding: 22px;
    border: 1px solid rgba(138,99,91,.11);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 55px rgba(77,51,46,.06);
}
.management-saved-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}
.management-saved-heading .eyebrow { margin:0 0 5px; font-size:.65rem; letter-spacing:.16em; color:var(--primary-dark); }
.management-saved-heading h2 { margin:0; font-family:var(--font-heading); font-size:1.85rem; line-height:1.05; font-weight:600; }
.management-new-booking-link { color:var(--primary-dark); text-decoration:none; font-size:.78rem; font-weight:600; border-bottom:1px solid rgba(138,99,91,.25); padding-bottom:3px; white-space:nowrap; }
.management-saved-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.management-saved-card {
    appearance:none;
    width:100%;
    min-width:0;
    padding:16px 17px;
    display:grid;
    gap:5px;
    text-align:left;
    border:1px solid rgba(138,99,91,.11);
    border-radius:16px;
    background:#fffdfc;
    color:var(--text-primary);
    cursor:pointer;
    transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.management-saved-card:hover { transform:translateY(-2px); border-color:rgba(138,99,91,.28); box-shadow:0 10px 28px rgba(77,51,46,.07); }
.management-saved-card.is-active { border-color:rgba(138,99,91,.55); background:linear-gradient(145deg,#fffdfc,#f7ece9); box-shadow:0 10px 30px rgba(138,99,91,.10); }
.management-saved-card strong { font-size:.92rem; line-height:1.3; overflow-wrap:anywhere; }
.management-saved-card > span:not(.management-saved-status) { font-size:.76rem; color:var(--text-secondary); }
.management-saved-card small { font-size:.7rem; color:var(--text-muted); }
.management-saved-status { width:max-content; max-width:100%; padding:4px 8px; border-radius:999px; background:#f0e7e6; color:#8a635b; font-size:.62rem; font-weight:700; }
.management-saved-status.status-confirmed { background:#edf5ed; color:#3d7b46; }
.management-saved-status.status-pending { background:#fff4df; color:#9a681d; }
.management-saved-status.status-cancelled,
.management-saved-status.status-no_show { background:#fff0f0; color:#b44949; }
.management-saved-status.status-completed { background:#f1f1f1; color:#686868; }
.management-device-note { margin:12px 2px 0; color:var(--text-muted); font-size:.68rem; }

@media (max-width: 680px) {
    .management-saved-section { margin-bottom:18px; padding:15px; border-radius:19px; }
    .management-saved-heading { align-items:flex-start; flex-direction:column; gap:9px; }
    .management-saved-heading h2 { font-size:1.6rem; }
    .management-saved-list { display:flex; overflow-x:auto; gap:9px; padding:1px 1px 8px; scroll-snap-type:x mandatory; scrollbar-width:none; }
    .management-saved-list::-webkit-scrollbar { display:none; }
    .management-saved-card { flex:0 0 min(82vw,285px); scroll-snap-align:start; }
}