/* ==========================================================
   SpaMaster 360 v28.3 — New Reservation Clean Modal
   Limpia scroll + autocomplete sin romper estructura original
   ========================================================== */

:root{
    --sm360-clean-ink:#0F172A;
    --sm360-clean-muted:#64748B;
    --sm360-clean-purple:#6D4AFF;
    --sm360-clean-green:#16A34A;
    --sm360-clean-red:#EF4444;
}

/* Modal: scroll funcional */
.agenda-v221-modal-backdrop{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    align-items:flex-start!important;
    padding:18px 0!important;
}

.agenda-v221-modal{
    max-height:calc(100vh - 36px)!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
}

.agenda-v221-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
    flex:0 0 auto!important;
}

.agenda-v221-modal-body{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-height:calc(100vh - 112px)!important;
    padding-bottom:24px!important;
}

/* Nueva reserva visual */
.sm360-clean-reservation-modal,
.agenda-reservation-pro.sm360-clean-reservation-modal{
    border-radius:28px!important;
    background:
        radial-gradient(circle at 8% 6%,rgba(109,74,255,.10),transparent 30%),
        radial-gradient(circle at 96% 8%,rgba(22,163,74,.06),transparent 28%),
        linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.76))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 24px 70px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.90)!important;
    backdrop-filter:blur(24px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.18)!important;
}

/* Cards internas */
.sm360-clean-reservation-modal .agenda-v221-form-card{
    border-radius:22px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68))!important;
    border:1px solid rgba(148,163,184,.20)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88)!important;
    overflow:visible!important;
}

/* Inputs */
.sm360-clean-reservation-modal input,
.sm360-clean-reservation-modal select,
.sm360-clean-reservation-modal textarea{
    border-radius:16px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.88)!important;
    color:var(--sm360-clean-ink)!important;
}

.sm360-clean-reservation-modal input:focus,
.sm360-clean-reservation-modal select:focus,
.sm360-clean-reservation-modal textarea:focus{
    outline:none!important;
    border-color:rgba(109,74,255,.46)!important;
    box-shadow:0 0 0 4px rgba(109,74,255,.10),0 12px 28px rgba(109,74,255,.08)!important;
}

/* Buscador cliente: una sola lupa, estructura original intacta */
.agenda-client-search-wrap.sm360-clean-client-search{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:52px!important;
    overflow:visible!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.74))!important;
    border:1px solid rgba(148,163,184,.25)!important;
    box-shadow:0 12px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.90)!important;
    z-index:100!important;
}

.agenda-client-search-wrap.sm360-clean-client-search::before,
.agenda-client-search-wrap.sm360-clean-client-search::after{
    content:none!important;
    display:none!important;
}

.sm360-clean-search-icon{
    width:50px!important;
    min-width:50px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
}

.sm360-clean-search-icon::before{
    content:""!important;
    width:21px!important;
    height:21px!important;
    background:linear-gradient(135deg,#6D4AFF,#2F80ED)!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

.agenda-client-search-wrap.sm360-clean-client-search #arClientSearch{
    flex:1!important;
    min-height:52px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    padding-left:0!important;
    border-radius:0!important;
}

.sm360-clean-client-clear{
    width:48px!important;
    min-width:48px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:0 18px 18px 0!important;
    border-left:1px solid rgba(148,163,184,.16)!important;
    background:rgba(248,250,252,.62)!important;
    color:#64748B!important;
    font-size:0!important;
    cursor:pointer!important;
}

.sm360-clean-client-clear::before{
    content:""!important;
    width:19px!important;
    height:19px!important;
    background:#64748B!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

/* Dropdown/lista de clientes: no se corta y queda sobre el modal */
#arClientSuggestions,
.agenda-client-suggestions,
.agenda-client-results,
.client-suggestions{
    z-index:999999!important;
    max-height:260px!important;
    overflow-y:auto!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88))!important;
    border:1px solid rgba(148,163,184,.24)!important;
    box-shadow:0 22px 60px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.92)!important;
    backdrop-filter:blur(22px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
}

/* Evitar que el modal corte dropdowns internos */
.sm360-clean-reservation-modal,
.sm360-clean-reservation-modal .agenda-v221-form-card,
.sm360-clean-reservation-modal .agenda-v221-field{
    overflow:visible!important;
}

/* Horario */
.sm360-clean-time-panel{
    margin-top:14px!important;
    padding:16px!important;
    border-radius:22px!important;
    background:
        radial-gradient(circle at 8% 10%,rgba(109,74,255,.09),transparent 34%),
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.68))!important;
    border:1px solid rgba(148,163,184,.22)!important;
    box-shadow:0 16px 38px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.86)!important;
}

.sm360-clean-time-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    margin-bottom:12px!important;
}

.sm360-clean-time-head span{
    color:#64748B!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-size:12px!important;
    font-weight:780!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
}

.sm360-clean-time-head b{
    padding:5px 10px!important;
    border-radius:999px!important;
    background:rgba(109,74,255,.10)!important;
    color:#5E2BFF!important;
    font-size:12px!important;
}

.sm360-clean-time-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:14px!important;
}

.sm360-clean-time-grid label{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
}

.sm360-clean-time-grid label span{
    color:#475569!important;
    font-size:12px!important;
    font-weight:740!important;
}

/* Botones */
.sm360-clean-cancel-btn,
.sm360-clean-save-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding:0 18px!important;
    border-radius:16px!important;
    font-family:var(--sc-font-display,"General Sans",sans-serif)!important;
    font-weight:820!important;
    transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease!important;
}

.sm360-clean-cancel-btn{
    color:#B4232A!important;
    background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(254,226,226,.78))!important;
    border:1px solid rgba(239,68,68,.30)!important;
    box-shadow:0 12px 28px rgba(239,68,68,.10), inset 0 1px 0 rgba(255,255,255,.90)!important;
}

.sm360-clean-save-btn{
    color:#fff!important;
    background:radial-gradient(circle at 22% 14%,rgba(255,255,255,.24),transparent 34%), linear-gradient(135deg,#22C55E,#16A34A 58%,#0F7A3D)!important;
    border:1px solid rgba(255,255,255,.32)!important;
    box-shadow:0 16px 36px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.32)!important;
}

.sm360-clean-cancel-btn:hover,
.sm360-clean-save-btn:hover{
    transform:translateY(-2px) scale(1.02)!important;
}

.sm360-clean-btn-icon{
    width:18px!important;
    height:18px!important;
    display:inline-block!important;
    background:currentColor!important;
    mask:var(--sm360-clean-icon) center/contain no-repeat!important;
    -webkit-mask:var(--sm360-clean-icon) center/contain no-repeat!important;
}

.sm360-clean-icon-x{
    --sm360-clean-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

.sm360-clean-icon-check{
    --sm360-clean-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background:#fff!important;
}

@media(max-width:640px){
    .sm360-clean-time-grid{grid-template-columns:1fr!important;}
}