/* ============================================================
   Amri Date / Time Picker
   ============================================================ */

/* ─── Trigger Buttons ─── */
.dp-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dp-pair-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
    user-select: none;
}
/* inside white card (booking form) */
.dp-white .dp-pair-label { color: #555; }

.dp-controls {
    display: flex;
    gap: 6px;
}
.dp-date-btn,
.dp-time-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    background: #fff;
    border: 1.5px solid #d8d8d8;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: #111;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    font-family: inherit;
    text-align: left;
    min-width: 0;
}
.dp-date-btn { flex: 1.6; }
.dp-time-btn { flex: 1; }
.dp-date-btn i { color: #888; flex-shrink: 0; font-size: 0.82rem; }
.dp-date-btn span,
.dp-time-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.dp-date-btn .dp-empty ,
.dp-time-btn .dp-empty  { color: #aaa; font-weight: 400; }
.dp-date-btn:hover,
.dp-time-btn:hover      { border-color: #888; }
.dp-date-btn.dp-active,
.dp-time-btn.dp-active  { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }
.dp-date-btn.dp-err,
.dp-time-btn.dp-err     { border-color: var(--danger, #dc3545) !important; }

/* ─── Calendar Overlay ─── */
.dp-cal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9010;
    align-items: flex-start;
    justify-content: center;
    padding-top: calc(var(--header-h, 72px) + 10px);
    background: rgba(0,0,0,0.45);
}
.dp-cal-overlay.open { display: flex; }

.dp-cal-popup {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 20px 16px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 95vw;
    animation: dpPopIn 0.18s ease;
}
@keyframes dpPopIn {
    from { opacity:0; transform: translateY(-8px); }
    to   { opacity:1; transform: translateY(0); }
}
.dp-cal-nav {
    background: none;
    border: 1.5px solid #e0e0e0;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
    transition: background 0.15s;
    color: #333;
    font-size: 0.78rem;
}
.dp-cal-nav:hover { background: #f5f5f5; }

.dp-cal-months { display: flex; gap: 32px; }

.dp-month { width: 252px; }

.dp-month-header {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #111;
}
.dp-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.dp-day-hdr {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #999;
    padding: 0 0 8px;
    text-transform: uppercase;
}
.dp-day-empty { }
.dp-day {
    display: flex; align-items: center; justify-content: center;
    height: 34px;
    font-size: 0.88rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    position: relative;
    z-index: 1;
    color: #222;
    font-weight: 400;
}
.dp-day:not(.dp-past):hover { background: #f0f0f0; }
.dp-day.dp-past  { color: #ccc; cursor: default; pointer-events: none; }
.dp-day.dp-today::after {
    content: '';
    position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--primary, #FF4D00);
}
.dp-day.dp-sel-start,
.dp-day.dp-sel-end {
    background: #111 !important;
    color: #fff !important;
    border-radius: 50%;
    font-weight: 700;
}
.dp-day.dp-in-range {
    background: #f0f0f0;
    border-radius: 0;
    color: #111;
}
.dp-day.dp-sel-start.dp-in-range-start { border-radius: 50% 0 0 50%; }
.dp-day.dp-sel-end.dp-in-range-end     { border-radius: 0 50% 50% 0; }

/* ─── Time Picker Overlay ─── */
.dp-time-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9010;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
}
.dp-time-overlay.open { display: flex; }

.dp-time-popup {
    position: relative;
    background: #fff;
    border-radius: 20px;
    width: 400px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    animation: dpPopIn 0.18s ease;
}
.dp-time-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.dp-time-hdr h3 { font-size: 1rem; font-weight: 700; color: #111; }
.dp-time-close {
    background: none; border: none; cursor: pointer;
    color: #888; font-size: 1rem; padding: 4px 6px; border-radius: 6px;
    transition: background 0.15s;
}
.dp-time-close:hover { background: #f5f5f5; color: #111; }

.dp-time-body {
    overflow-y: auto;
    padding: 14px 20px 20px;
    flex: 1;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ddd #fff;
}
.dp-time-body::-webkit-scrollbar { width: 5px; }
.dp-time-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.dp-time-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 14px 0 8px;
}
.dp-time-section-label:first-child { margin-top: 0; }

.dp-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 4px;
}
.dp-time-slot {
    padding: 11px 8px;
    background: #f5f5f5;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    color: #222;
    font-family: inherit;
}
.dp-time-slot:hover { background: #ebebeb; }
.dp-time-slot.dp-sel {
    background: #111 !important;
    color: #fff !important;
    border-color: #111;
    font-weight: 600;
}

/* ─── Mobile ─── */
@media (max-width: 680px) {
    .dp-cal-overlay { padding-top: 80px; align-items: flex-start; }
    .dp-cal-popup { padding: 16px 8px; gap: 4px; }
    .dp-cal-months { gap: 0; }
    .dp-month { width: 100%; min-width: 0; }
    .dp-hidden-month { display: none !important; }
    .dp-controls { flex-wrap: wrap; }
}