/* Mediscan Hospital — Booking UI v3.0 HMS-style */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.dab-wrapper {
    font-family: 'Inter', Arial, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    color: #1e293b;
    font-size: 14px;
}

/* ── Step Indicator ── */
.dab-steps { display:flex; align-items:center; margin-bottom:28px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
.dab-step { display:flex; align-items:center; gap:8px; opacity:.42; transition:opacity .3s; flex-shrink:0; font-size:13px; font-weight:500; color:#64748b; white-space:nowrap; }
.dab-step.active { opacity:1; color:#1d4ed8; }
.dab-step.done   { opacity:1; color:#16a34a; }
.step-circle { width:32px; height:32px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s; }
.step-number { font-size:14px; font-weight:700; color:#64748b; }
.step-check  { display:none; font-size:15px; color:#fff; }
.dab-step.active .step-circle { background:#1d4ed8; box-shadow:0 0 0 4px rgba(29,78,216,.15); }
.dab-step.active .step-number { color:#fff; }
.dab-step.done .step-circle   { background:#16a34a; }
.dab-step.done .step-number   { display:none; }
.dab-step.done .step-check    { display:block; }
.dab-step-line { flex:1; height:2px; background:#e2e8f0; margin:0 10px; min-width:24px; transition:background .3s; }
.dab-step.done + .dab-step-line { background:#16a34a; }

/* ── Step Content ── */
.dab-step-content { display:none; animation:dabFadeIn .32s ease; }
.dab-step-content.active { display:block; }
@keyframes dabFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── Two-Column Layout ── */
.dab-two-col-layout { display:grid; grid-template-columns:1fr 1.45fr; gap:20px; align-items:start; }
@media(max-width:800px){ .dab-two-col-layout{grid-template-columns:1fr;} }

/* ── Panels ── */
.dab-panel { background:#fff; border:1px solid #e8edf3; border-radius:12px; padding:24px 26px; box-shadow:0 1px 4px rgba(0,0,0,.05); margin-bottom:16px; }
.dab-panel:last-child { margin-bottom:0; }
.dab-panel-title { font-size:16px; font-weight:700; color:#0f172a; margin:0 0 18px; padding-bottom:13px; border-bottom:1px solid #f1f5f9; }

/* ── Form Fields ── */
.dab-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media(max-width:560px){ .dab-field-row{grid-template-columns:1fr;} }
.dab-field { display:flex; flex-direction:column; gap:5px; }
.dab-field label { font-size:13px; font-weight:600; color:#374151; }
.req { color:#ef4444; margin-left:2px; }
.dab-field input[type=text],.dab-field input[type=tel],.dab-field input[type=email],.dab-field input[type=number],.dab-field input[type=date],.dab-field select,.dab-field textarea {
    padding:10px 13px; border:1.5px solid #d1d5db; border-radius:8px; font-family:inherit; font-size:14px; color:#111827; background:#fff;
    outline:none; transition:border-color .2s,box-shadow .2s; box-sizing:border-box; width:100%; appearance:none; -webkit-appearance:none;
}
.dab-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.dab-field input:focus,.dab-field select:focus,.dab-field textarea:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.dab-field textarea { resize:vertical; min-height:78px; line-height:1.6; }

/* ── Doctor Cards ── */
.dab-doctors-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:14px 0 18px; }
.dab-doc-card { border:2px solid #e8edf2; border-radius:12px; padding:14px; cursor:pointer; transition:all .22s; position:relative; background:#fff; display:flex; gap:12px; align-items:flex-start; }
.dab-doc-card:hover { border-color:#93c5fd; box-shadow:0 4px 16px rgba(29,78,216,.1); }
.dab-doc-card.selected { border-color:#2563eb; background:#eff6ff; box-shadow:0 4px 16px rgba(29,78,216,.15); }
.ddc-img { width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#dbeafe; display:flex; align-items:center; justify-content:center; border:2px solid #e2e8f0; }
.ddc-img img { width:100%; height:100%; object-fit:cover; }
.ddc-no-img { font-size:22px; }
.dab-doc-card.selected .ddc-img { border-color:#2563eb; }
.ddc-body { flex:1; min-width:0; }
.ddc-name  { display:block; font-size:14px; font-weight:700; color:#0f172a; }
.ddc-title { display:block; font-size:11px; color:#64748b; margin-top:2px; }
.ddc-quals { display:block; font-size:11px; color:#3b82f6; margin-top:2px; }
.ddc-schedule { display:block; font-size:11px; color:#94a3b8; margin-top:5px; padding-top:5px; border-top:1px dashed #e2e8f0; }
.doc-time { font-size:11px; color:#64748b; display:block; margin-top:2px; }
.ddc-check { position:absolute; top:8px; right:10px; width:20px; height:20px; border-radius:50%; background:#2563eb; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; opacity:0; transition:opacity .2s; }
.dab-doc-card.selected .ddc-check { opacity:1; }

/* ── Selected Doctor Preview (step 3 top) ── */
.dab-selected-doc { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#eff6ff,#dbeafe); border:1.5px solid #bfdbfe; border-radius:12px; padding:14px 18px; margin-bottom:16px; animation:dabFadeIn .3s ease; }
.dab-selected-doc img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid #2563eb; flex-shrink:0; }
.dab-selected-doc strong { display:block; font-size:15px; font-weight:700; color:#0f172a; }
.dab-selected-doc span  { display:block; font-size:13px; color:#475569; }
.dab-selected-doc small { display:block; font-size:12px; color:#94a3b8; margin-top:2px; }

/* ── Calendar ── */
.dab-calendar { margin-bottom:16px; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-nav-btn { width:30px; height:30px; border:1px solid #e2e8f0; border-radius:7px; background:#fff; color:#64748b; cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.cal-nav-btn:hover:not(:disabled){ background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
.cal-nav-btn:disabled { opacity:.35; cursor:not-allowed; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px; }
.cal-head { font-size:11px; font-weight:600; color:#94a3b8; padding:4px 0; text-transform:uppercase; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; border-radius:7px; cursor:default; color:#94a3b8; transition:all .15s; }
.cal-day.empty    { background:transparent; }
.cal-day.disabled { color:#cbd5e1; }
.cal-day.available { color:#1e293b; cursor:pointer; }
.cal-day.available:hover { background:#dbeafe; color:#1d4ed8; }
.cal-day.today    { color:#1d4ed8; font-weight:700; }
.cal-day.selected { background:#1d4ed8!important; color:#fff!important; font-weight:700; box-shadow:0 2px 8px rgba(29,78,216,.35); }

/* ── Time Slots ── */
.dab-slots-hint { font-size:14px; font-weight:700; color:#0f172a; margin:16px 0 10px; padding-top:16px; border-top:1px solid #f1f5f9; }
.dab-slots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
@media(max-width:480px){ .dab-slots-grid{grid-template-columns:repeat(3,1fr);} }
.time-slot,.dab-slot-btn {
    padding:9px 4px; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:8px;
    font-family:inherit; font-size:12px; font-weight:600; color:#374151; cursor:pointer; text-align:center; transition:all .15s; white-space:nowrap;
}
.time-slot:hover:not(:disabled):not(.unavailable),.dab-slot-btn:hover:not(:disabled):not(.unavailable){ background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
.time-slot.selected,.dab-slot-btn.selected { background:#1d4ed8; border-color:#1d4ed8; color:#fff; box-shadow:0 2px 8px rgba(29,78,216,.3); }
.time-slot.unavailable,.dab-slot-btn.unavailable { background:#f1f5f9; color:#cbd5e1; cursor:not-allowed; text-decoration:line-through; }

/* ── Step 3 Summary (left col) ── */
.dab-col-left,.dab-col-right { display:flex; flex-direction:column; gap:16px; }
.dab-summary-row { display:flex; padding:9px 0; border-bottom:1px solid #f1f5f9; font-size:14px; gap:12px; }
.dab-summary-row:last-child { border-bottom:none; }
.sum-label,.sum-k { color:#94a3b8; font-weight:500; flex-shrink:0; min-width:110px; font-size:13px; }
.sum-value,.sum-v { color:#111827; font-weight:600; flex:1; }

/* ── Confirm Summary (step 4) ── */
.dab-confirm-summary { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; margin-bottom:6px; }
.dab-confirm-row { display:flex; padding:12px 18px; border-bottom:1px solid #f1f5f9; font-size:14px; gap:16px; }
.dab-confirm-row:last-child { border-bottom:none; }
.dab-confirm-label { color:#94a3b8; font-weight:500; min-width:120px; flex-shrink:0; }
.dab-confirm-value { color:#111827; font-weight:600; }

/* ── Buttons ── */
.dab-btn-next,.dab-btn-submit,.dab-confirm-btn {
    padding:11px 24px; background:#1d4ed8; color:#fff; border:none; border-radius:8px;
    font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
    transition:background .2s,box-shadow .2s,transform .1s; display:inline-flex; align-items:center; gap:6px;
}
.dab-btn-next:hover,.dab-btn-submit:hover,.dab-confirm-btn:hover { background:#1e40af; box-shadow:0 4px 14px rgba(29,78,216,.3); }
.dab-btn-next:active,.dab-btn-submit:active { transform:scale(.98); }
.dab-btn-next:disabled,.dab-btn-submit:disabled { background:#94a3b8; cursor:not-allowed; }
.dab-btn-back { padding:11px 20px; background:transparent; color:#64748b; border:1.5px solid #d1d5db; border-radius:8px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; }
.dab-btn-back:hover { border-color:#2563eb; color:#2563eb; background:#eff6ff; }
.dab-btn-reset { padding:11px 24px; background:#1d4ed8; color:#fff; border:none; border-radius:8px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; margin-top:16px; }
.dab-btn-reset:hover { background:#1e40af; }
.dab-confirm-btn-full { display:block; width:100%; margin-top:14px; padding:14px; background:#1d4ed8; color:#fff; border:none; border-radius:10px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; text-align:center; transition:background .2s,box-shadow .2s; }
.dab-confirm-btn-full:hover { background:#1e40af; box-shadow:0 4px 18px rgba(29,78,216,.35); }
.dab-nav-row { display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:12px; }
.dab-nav-row .dab-btn-next { flex:1; justify-content:center; }

/* ── Success ── */
.dab-success { text-align:center; padding:48px 24px 40px; animation:dabFadeIn .45s ease; }
.success-icon { font-size:64px; margin-bottom:16px; animation:dabBounce .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes dabBounce { 0%{transform:scale(0)} 100%{transform:scale(1)} }
.dab-success h2 { font-size:24px; font-weight:700; color:#16a34a; margin:0 0 10px; }
.dab-success p  { color:#64748b; font-size:15px; margin:0 0 18px; line-height:1.7; }
.dab-success-details { background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:10px; padding:16px 24px; max-width:380px; margin:0 auto 22px; text-align:left; font-size:14px; color:#166534; line-height:2; }

/* ── Error ── */
.dab-error-msg { background:#fef2f2; border:1.5px solid #fecaca; color:#991b1b; padding:14px 18px; border-radius:8px; font-size:14px; text-align:center; margin-top:16px; }

/* ── Responsive ── */
@media(max-width:600px){
    .dab-panel { padding:16px 14px; }
    .dab-panel-title { font-size:15px; }
    .step-label { display:none; }
    .dab-step-line { min-width:14px; }
    .dab-doctors-grid { grid-template-columns:1fr; }
    .dab-success { padding:30px 16px; }
}

/* ── Doctor Preview Card (shown on doctor select) ── */
.dab-doc-preview-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 2px solid #93c5fd;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    animation: dabFadeIn 0.25s ease;
}
.ddp-img {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #dbeafe;
    border: 2.5px solid #2563eb;
    display: flex; align-items: center; justify-content: center;
}
.ddp-img img { width: 100%; height: 100%; object-fit: cover; }
.ddp-no-img  { font-size: 26px; }
.ddp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ddp-info strong { font-size: 15px; font-weight: 700; color: #0f172a; }
.ddp-info span   { font-size: 12px; color: #475569; }
.ddp-info #ddp-quals { color: #2563eb; }
.ddp-info #ddp-dept  { display: inline-block; background: #dbeafe; color: #1e40af; border-radius: 20px; padding: 1px 10px; font-size: 11px; font-weight: 600; margin-top: 3px; }
.ddp-tick {
    position: absolute; top: 10px; right: 12px;
    background: #16a34a; color: #fff;
    border-radius: 20px; padding: 3px 10px;
    font-size: 11px; font-weight: 700;
}

/* ── Calendar grid fix ── */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-head { font-size: 11px; font-weight: 600; color: #94a3b8; padding: 4px 0; text-align: center; text-transform: uppercase; }
.cal-day  {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 500;
    border-radius: 7px;
    cursor: default;
    color: #94a3b8;
    transition: all 0.15s;
    text-align: center;
}
.cal-day.empty    { background: transparent; }
.cal-day.disabled { color: #cbd5e1 !important; cursor: not-allowed; }
.cal-day.available { color: #1e293b; cursor: pointer; }
.cal-day.available:hover { background: #dbeafe; color: #1d4ed8; }
.cal-day.today    { color: #1d4ed8; font-weight: 700; }
.cal-day.selected { background: #1d4ed8 !important; color: #fff !important; font-weight: 700; box-shadow: 0 2px 8px rgba(29,78,216,.35); }

/* ── Time slot fix ── */
.time-slot {
    padding: 9px 4px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px; font-weight: 600;
    color: #374151;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    white-space: nowrap;
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.time-slot:hover:not(:disabled) { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.time-slot.selected { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(29,78,216,.3); }
.time-slot.unavailable { background: #f1f5f9; color: #cbd5e1; cursor: not-allowed; text-decoration: line-through; }

/* ── Full/Booked Slot ── */
.time-slot.slot-full {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    position: relative;
    opacity: 0.75;
}
.slot-full-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
}

/* ════════════════════════════════
   SERIAL NUMBER SECTION — Premium Calendar Style
   ═══════════════════════════════ */

/* Header with availability stats */
.dab-serial-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}
.serial-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.serial-btn:hover:not(:disabled) {
    background: #dbeafe;
    border-color: #2563eb;
    color: #1d4ed8;
    transform: scale(1.07);
}
.serial-btn.selected {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(29,78,216,.35);
    transform: scale(1.07);
}
/* Booked = RED clearly */
.serial-btn.serial-full {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
    opacity: 1;
}
/* Stats bar */
.dab-serial-stats-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}
.dab-sstat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ssnum { font-size: 20px; font-weight: 800; line-height: 1; }
.sslbl { font-size: 11px; font-weight: 500; color: #64748b; }
.dab-sstat.avail .ssnum { color: #15803d; }
.dab-sstat.bkd   .ssnum { color: #ef4444; }
.dab-sstat.tot   .ssnum { color: #1d4ed8; }

/* Legend — one horizontal row */
.dab-serial-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.dab-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}
.dab-leg-dot {
    width: 16px; height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}
.leg-avail { background: #f8fafc; border: 2px solid #e2e8f0; }
.leg-sel   { background: #1d4ed8; border: 2px solid #1d4ed8; }
.leg-full  { background: #fef2f2; border: 2px solid #fca5a5; }

/* Doctor schedule */
.dab-serial-schedule {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dab-sched-days, .dab-sched-time {
    font-size: 12px; color: #1e40af; font-weight: 500;
}
/* Selected serial indicator */
.dab-serial-picked {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #15803d;
    margin-top: 4px;
    text-align: center;
}


/* ════════════════════════════════════
   SUCCESS OVERLAY POPUP — Smooth
   ════════════════════════════════════ */
.dab-success-popup {
    background: #fff;
    border-radius: 20px;
    padding: 40px 32px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    animation: dabPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes dabPopIn {
    0%   { transform: translateY(30px) scale(0.92); opacity: 0; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Animated checkmark */
.dab-success-checkmark {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
}
.dab-success-checkmark svg {
    width: 100%;
    height: 100%;
    animation: dabCircleIn 0.4s ease forwards;
}
.dab-check-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: dabCheckDraw 0.5s 0.3s ease forwards;
}
@keyframes dabCircleIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes dabCheckDraw {
    to { stroke-dashoffset: 0; }
}

.dab-success-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.dab-success-sub {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.6;
}
.dab-success-card {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    text-align: left;
}
.suc-row {
    padding: 5px 0;
    font-size: 13px;
    color: #166534;
    font-weight: 500;
    border-bottom: 1px solid #d1fae5;
    line-height: 1.5;
}
.suc-row:last-child { border-bottom: none; }
.dab-success-close-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.dab-success-close-btn:hover {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    box-shadow: 0 4px 16px rgba(29,78,216,.35);
    transform: translateY(-1px);
}