/* =========================
   MODAL
========================= */

.modal{

    display:flex;

    position:fixed;

    inset:0;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    z-index:9999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s;

}

.modal.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/* =========================
   Modal Card
========================= */

.modal-content{

    width:560px;

    max-width:92vw;

    max-height:88vh;

    overflow-y:auto;

    background:#fff;

    border-radius:24px;

    padding:32px;

    position:relative;

    box-shadow:0 24px 70px rgba(12,33,71,.18);

    animation:fadeUp .3s ease;

}

/* =========================
   Close
========================= */

.close{

    position:absolute;

    top:18px;

    right:24px;

    font-size:28px;

    cursor:pointer;

    color:#999;

    transition:.25s;

}

.close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/* =========================
   Title
========================= */

.modal-content h2{

    margin-bottom:28px;

    color:var(--primary);
    font-size:clamp(1.4rem, 2vw, 1.9rem);
    letter-spacing:var(--tracking-tight);

}

.modal-content h3{

    margin:0;

    color:#222;
    font-size:var(--text-xl);

}

.modal-content p{

    color:#666;

    line-height:var(--line-relaxed);

}

/* =========================
   Time List
========================= */

#timeList{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* =========================
   Time Button
========================= */

.time-btn{

    width:100%;

    min-height:52px;
    padding:16px 18px;

    border:none;

    border-radius:14px;

    text-align:left;

    cursor:pointer;

    transition:.25s;

    font-size:var(--text-base);

    line-height:var(--line-relaxed);

}

/* 尚未建立 */

.time-btn.empty{

    background:#f5f6fa;

    border-left:6px solid #cfcfcf;

}

/* 已建立 */

.time-btn.booked{

    background:#ecfff3;

    border-left:6px solid #2ecc71;

}

.time-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

/* =========================
   Spot Grid
========================= */

.spot-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    margin:24px 0;

}

/* =========================
   Spot Button
========================= */

.spot-btn{

    min-height:52px;
    padding:16px 18px;

    border:none;

    border-radius:14px;

    background:#f5f6fa;

    cursor:pointer;

    font-size:var(--text-base);

    font-weight:600;

    transition:.25s;

}

.spot-btn:hover{

    background:var(--accent);

    color:white;

    transform:translateY(-2px);

}

/* =========================
   Main Button
========================= */

.book-now{

    width:100%;

    margin-top:24px;

    min-height:52px;
    padding:16px;

    border:none;

    border-radius:50px;

    background:var(--accent);

    color:white;

    font-size:var(--text-base);

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.book-now:hover{

    opacity:.9;

    transform:translateY(-2px);

}

/* =========================
   Back Button
========================= */

.back-btn{

    width:100%;

    margin-top:14px;

    min-height:48px;
    padding:14px;

    border:none;

    border-radius:12px;

    background:#8f8f8f;

    color:white;

    font-size:var(--text-sm);

    cursor:pointer;

    transition:.25s;

}

.back-btn:hover{

    background:#666;

}

/* =========================
   Scrollbar
========================= */

.modal-content::-webkit-scrollbar{

    width:8px;

}

.modal-content::-webkit-scrollbar-thumb{

    background:#d4d4d4;

    border-radius:20px;

}

/* =========================
   Mobile
========================= */

@media(max-width:768px){

    .modal-content{

        width:95vw;

        padding:24px;

        border-radius:20px;

    }

    .spot-grid{

        grid-template-columns:1fr;

    }

    .time-btn{

        padding:16px;

    }

}