/* NIT Library Room Booking System
 * Modern, mobile-first design matching NIT brand tokens:
 * Primary Teal: #00536a / #00627a, Dark Slate: #17212b, Accent Gold: #fbbd2c / #f6bf32
 * Neutral BG: #eef3f2 / #f5f8f8 / #ffffff, Border: #d5dddd
 */

.nit-booking-message { margin:1rem 0;padding:1rem 1.25rem;border-left:4px solid #00627a;background:#eef3f2;color:#17212b;font-weight:700 }
.nit-booking-message--success { border-color:#17734a;background:#e5f4ea }
.nit-booking-message--error { border-color:#9b2029;background:#fbecec }

body#opac-room-booking .nit-room-page { padding:0!important;background:#fff;color:#17212b }
body#opac-room-booking .nit-booking { max-width:none;width:min(100% - 3rem,1440px);margin:auto;padding:clamp(1.5rem,4vw,3.5rem) 0 }
body#opac-room-booking .nit-booking * { box-sizing:border-box }

/* Headings & Typography */
body#opac-room-booking .nit-booking h1,
body#opac-room-booking .nit-booking h2,
body#opac-room-booking .nit-booking h3,
body#opac-room-booking .nit-booking h4 { color:#17212b;letter-spacing:-.035em;font-weight:800 }
body#opac-room-booking .nit-booking h1 { font-size:clamp(2.2rem,4.5vw,4.5rem);line-height:1.05;margin:.35rem 0 .8rem }
body#opac-room-booking .nit-booking h2 { font-size:clamp(1.5rem,2.5vw,2.3rem);line-height:1.15;margin:.25rem 0 .75rem }
body#opac-room-booking .nit-booking h3 { font-size:1.35rem;margin:.25rem 0 .5rem }
body#opac-room-booking .nit-booking h4 { font-size:1.1rem;margin:0 0 .35rem }
body#opac-room-booking .nit-kicker { color:#00536a;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0 }

/* Hero Section */
body#opac-room-booking .nit-booking__hero { display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(1.5rem,4vw,4rem);align-items:end;padding:0 0 clamp(1.5rem,3vw,3rem);border-bottom:3px solid #f6bf32 }
body#opac-room-booking .nit-booking__hero>div>p:last-child { max-width:47rem;color:#41545e;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.55;margin:0 }
body#opac-room-booking .nit-booking__policy-summary { display:grid;gap:.4rem;min-width:0;padding:1.1rem 1.25rem;border-top:3px solid #00536a;background:#eff5f5;color:#40535c;font-size:.88rem }
body#opac-room-booking .nit-booking__policy-summary strong { color:#17212b;font-size:.95rem }

/* Top Navigation Tabs */
.nit-booking-nav { display:flex;gap:.5rem;margin:1.75rem 0 2rem;border-bottom:2px solid #d5dddd;padding-bottom:0 }
.nit-booking-nav__item { display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem;border:1px solid #d5dddd;border-bottom:0;background:#f5f8f8;color:#00536a;font-weight:700;font-size:.95rem;text-decoration:none!important;position:relative;top:2px;border-top:3px solid transparent }
.nit-booking-nav__item:hover { background:#e8f0f0;color:#003c4d }
.nit-booking-nav__item.active { background:#fff;color:#17212b;border-color:#d5dddd #d5dddd #fff;border-top-color:#f6bf32;font-weight:800 }
.nit-nav-icon { font-size:1.1rem }
.nit-nav-badge { display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;height:1.4rem;padding:0 .45rem;border-radius:10px;background:#f6bf32;color:#17212b;font-size:.75rem;font-weight:800 }

/* Buttons */
.nit-button { display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.4rem;border:0;border-radius:0;font-weight:800;font-size:.92rem;text-decoration:none!important;cursor:pointer;transition:background .15s ease }
.nit-button--gold { background:#f6bf32;color:#17212b!important }
.nit-button--gold:hover { background:#e9ad19 }
.nit-button--outline { background:#fff;border:1px solid #00536a;color:#00536a!important }
.nit-button--outline:hover { background:#00536a;color:#fff!important }
.nit-button--danger-outline { background:#fff;border:1px solid #9b2029;color:#9b2029!important;padding:.5rem 1rem;font-size:.85rem;min-height:40px }
.nit-button--danger-outline:hover { background:#9b2029;color:#fff!important }
.nit-btn-large { width:100%;min-height:52px;font-size:1.05rem }

/* Form Controls */
body#opac-room-booking .form-control,
body#opac-room-booking .form-select { width:100%;min-height:48px;padding:.7rem .85rem;border:1px solid #acbec5;border-radius:0;background:#fff;color:#17212b;font-size:.95rem;box-shadow:none }
body#opac-room-booking .form-control:focus,
body#opac-room-booking .form-select:focus { border-color:#00536a;outline:2px solid #00536a;outline-offset:1px }
textarea.form-control { min-height:80px;padding:.75rem }

/* Closed Banner & Notice */
.nit-booking-notice { display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin:1.5rem 0 2rem;padding:1.25rem 1.5rem;border-left:4px solid #f6bf32;background:#fff9e6;color:#17212b }
.nit-booking-notice--closed { border-color:#00536a;background:#eff5f5 }
.nit-booking-notice strong { display:block;font-size:1.05rem;margin-bottom:.3rem;color:#17212b }
.nit-booking-notice p { margin:0;color:#52636b;font-size:.92rem }

/* Step Headers */
.nit-step-section { margin-bottom:2.75rem }
.nit-step-header { display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem }
.nit-step-num { display:inline-flex;align-items:center;justify-content:center;padding:.3rem .75rem;background:#00536a;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0 }

/* Step 1: Finder Bar */
.nit-finder-bar { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) auto;gap:.85rem;align-items:end;padding:1.25rem;background:#eff5f5;border-top:3px solid #00536a }
.nit-finder-field { display:grid;gap:.45rem;margin:0 }
.nit-finder-label { font-size:.85rem;font-weight:700;color:#17212b }
.nit-finder-btn { min-height:48px }

/* Live Availability Status Bar */
.nit-availability-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin:0 0 1.25rem;padding:.75rem 1.1rem;background:#f5f8f8;border-left:3px solid #00536a;color:#354952;font-size:.95rem }
.nit-availability-bar strong { color:#17212b }
.nit-availability-bar__hours { font-size:.85rem;color:#677b83 }

/* Step 2: Progressive Room Cards */
.nit-room-cards-stack { display:grid;gap:1.25rem }
.nit-card-room { display:flex;flex-direction:column;border:1px solid #d5dddd;border-top:3px solid #00536a;background:#fff;transition:box-shadow .2s ease }
.nit-card-room:hover { box-shadow:0 4px 14px rgba(0,83,106,.08) }
.nit-card-room__main { padding:clamp(1.1rem,2vw,1.75rem) }
.nit-card-room__title-row { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:.5rem }
.nit-card-room__name { margin:0 0 .25rem;font-size:1.45rem }
.nit-card-room__loc { color:#52636b;font-size:.88rem;font-weight:700 }
.nit-card-room__badges { display:flex;gap:.5rem;flex-wrap:wrap }
.nit-card-room__desc { color:#41545e;font-size:.95rem;line-height:1.5;margin:0 0 1rem;max-width:55rem }
.nit-card-room__amenities { display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem }

/* Amenities & Badges */
.nit-pill { display:inline-flex;align-items:center;padding:.3rem .65rem;background:#eff5f5;color:#334852;font-size:.8rem;font-weight:700 }
.nit-pill--success { background:#e5f4ea;color:#0e6037 }
.nit-amenity-tag { display:inline-flex;align-items:center;padding:.25rem .55rem;background:#f8f9fa;border:1px solid #e1e7e7;color:#334852;font-size:.82rem;font-weight:600 }

/* Room Card Action Bar (Summary + Toggle) */
.nit-card-room__action-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1rem clamp(1.1rem,2vw,1.75rem);background:#f9fbfb;border-top:1px solid #d5dddd }
.nit-card-room__status-summary { display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem }
.nit-slot-range { color:#677b83;font-size:.85rem }
.nit-dot { width:10px;height:10px;border-radius:50%;display:inline-block }
.nit-dot--open { background:#166638 }
.nit-dot--closed { background:#873039 }
.nit-dot--none { background:#9aaab0 }
.nit-status-muted { color:#677b83 }
.nit-slot-toggle-btn { min-height:44px;gap:.65rem;padding:.55rem 1.25rem }
.nit-toggle-arrow { font-size:1.1rem;font-weight:800;transition:transform .2s ease }

/* Progressive Drawer: Time Slot Chips */
.nit-card-room__drawer { padding:1.25rem clamp(1.1rem,2vw,1.75rem);background:#eff5f5;border-top:1px solid #c9d8d8;animation:fadeInDrawer .2s ease }
@keyframes fadeInDrawer { from { opacity:0;transform:translateY(-6px) } to { opacity:1;transform:translateY(0) } }
.nit-drawer-header { margin-bottom:1rem;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem }
.nit-drawer-header h4 { margin:0;font-size:1.05rem }
.nit-drawer-header span { font-size:.85rem;color:#52636b }
.nit-slots-pills-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem }
.nit-slot-pill { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.65rem .75rem;min-height:50px;border:1px solid #00536a;background:#fff;text-decoration:none!important;transition:all .15s ease }
.nit-slot-pill:hover,
.nit-slot-pill:focus-visible { background:#00536a;color:#fff!important;transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,83,106,.2) }
.nit-slot-pill__time { font-size:.95rem;font-weight:800;color:#00536a }
.nit-slot-pill:hover .nit-slot-pill__time { color:#fff }
.nit-slot-pill__action { font-size:.72rem;font-weight:700;color:#5a727d;margin-top:.2rem }
.nit-slot-pill:hover .nit-slot-pill__action { color:#f6bf32 }

/* Step 3: Confirmation View */
.nit-confirm-page { margin-bottom:3rem }
.nit-stepper { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #d5dddd }
.nit-back-link { color:#00536a;font-weight:800;font-size:.9rem;text-decoration:none!important }
.nit-back-link:hover { text-decoration:underline!important }
.nit-stepper__steps { display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700 }
.nit-step.done { color:#166638 }
.nit-step-divider { color:#8da1a8 }
.nit-step.current { color:#17212b;font-weight:800 }
.nit-confirm-grid { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);gap:1.5rem;align-items:start }

/* Confirmation Summary Card */
.nit-confirm-summary-card { padding:1.75rem;background:#f5f8f8;border-top:3px solid #f6bf32;border-left:1px solid #d5dddd;border-right:1px solid #d5dddd;border-bottom:1px solid #d5dddd }
.nit-confirm-badges { display:flex;gap:.5rem;margin:.5rem 0 .75rem }
.nit-confirm-summary-desc { color:#52636b;font-size:.9rem;line-height:1.5;margin:0 0 1.25rem }
.nit-summary-specs { display:grid;gap:.85rem;padding:1.1rem 0;border-top:1px solid #d5dddd;border-bottom:1px solid #d5dddd }
.nit-summary-spec { display:flex;justify-content:space-between;gap:1rem;font-size:.92rem }
.nit-spec-label { color:#52636b;font-weight:700 }
.nit-spec-value { color:#17212b;font-weight:800;text-align:right }
.nit-summary-amenities { padding:.9rem 0;font-size:.88rem;color:#41545e;border-bottom:1px solid #d5dddd }
.nit-summary-amenities strong { color:#17212b;display:block;margin-bottom:.2rem }
.nit-summary-policy-brief { margin-top:1rem;padding:.75rem;background:#fff;border-left:3px solid #00536a;font-size:.8rem;color:#52636b;line-height:1.45 }

/* Confirmation Action Card (Form / Login / Kiosk) */
.nit-confirm-action-card { padding:1.75rem;background:#fff;border:1px solid #d5dddd;border-top:3px solid #00536a }
.nit-student-tag { display:grid;gap:.2rem;padding:.85rem 1rem;background:#eff5f5;border-left:3px solid #00536a;margin:1rem 0 1.25rem }
.nit-student-tag__label { font-size:.75rem;font-weight:700;color:#52636b;text-transform:uppercase;letter-spacing:.05em }
.nit-student-tag strong { color:#17212b;font-size:1.05rem }
.nit-student-tag span { color:#52636b;font-size:.85rem }
.nit-form-field { display:grid;gap:.4rem;margin-bottom:1.1rem;font-weight:700;font-size:.9rem;color:#17212b }
.nit-req { color:#9b2029 }
.nit-booking-form__consent { display:flex;align-items:flex-start;gap:.75rem;margin:1.25rem 0 1.5rem;font-size:.88rem;color:#41545e;line-height:1.45;cursor:pointer }
.nit-booking-form__consent input { width:18px;height:18px;margin-top:2px;flex-shrink:0 }

/* Authentication Options: Direct + Kiosk QR */
.nit-unauth-wrap { display:grid;gap:1.5rem }
.nit-auth-option { padding:1.35rem;border:1px solid #d5dddd;background:#fafcfc }
.nit-auth-option__header { margin-bottom:1rem }
.nit-auth-option__header h4 { margin:0 0 .35rem;font-size:1.15rem }
.nit-auth-option__header p { margin:0;color:#52636b;font-size:.88rem;line-height:1.45 }
.nit-opt-badge { display:inline-block;padding:.2rem .5rem;background:#e2e9ea;color:#00536a;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem }
.nit-opt-badge--secure { background:#e5f4ea;color:#0e6037 }
.nit-auth-divider { display:flex;align-items:center;text-align:center;color:#8899a0;font-weight:800;font-size:.85rem }
.nit-auth-divider:before,
.nit-auth-divider:after { content:'';flex:1;border-bottom:1px solid #d5dddd }
.nit-auth-divider span { padding:0 1rem }

/* Kiosk QR Code Card */
.nit-auth-option--kiosk { border-color:#00536a;background:#fff }
.nit-kiosk-qr-container { display:flex;gap:1.5rem;align-items:center;margin-top:1.25rem }
.nit-kiosk-qr-box { padding:.75rem;background:#fff;border:2px solid #00536a;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,83,106,.1);flex-shrink:0 }
.nit-kiosk-qr-img { width:170px;height:170px;object-fit:contain;display:block }
.nit-kiosk-meta { display:grid;gap:.6rem;min-width:0 }
.nit-kiosk-status { display:flex;align-items:center;gap:.65rem;padding:.5rem .85rem;background:#eff5f5;border-left:3px solid #00536a;font-size:.9rem }
.nit-pulse-dot { width:10px;height:10px;border-radius:50%;background:#0e6037;box-shadow:0 0 0 0 rgba(14,96,55,.7);animation:nitPulse 1.8s infinite }
@keyframes nitPulse { 0% { transform:scale(.95);box-shadow:0 0 0 0 rgba(14,96,55,.7) } 70% { transform:scale(1);box-shadow:0 0 0 8px rgba(14,96,55,0) } 100% { transform:scale(.95);box-shadow:0 0 0 0 rgba(14,96,55,0) } }
.nit-pulse-dot--claimed { background:#f6bf32;box-shadow:0 0 0 0 rgba(246,191,50,.7);animation:nitPulseAmber 1.5s infinite }
@keyframes nitPulseAmber { 0% { transform:scale(.95);box-shadow:0 0 0 0 rgba(246,191,50,.7) } 70% { transform:scale(1);box-shadow:0 0 0 8px rgba(246,191,50,0) } 100% { transform:scale(.95);box-shadow:0 0 0 0 rgba(246,191,50,0) } }
.nit-pulse-dot--expired { background:#9b2029;animation:none }
.nit-kiosk-subtext { margin:0;font-size:.85rem;color:#52636b;line-height:1.45 }
.nit-kiosk-timer-wrap { font-size:.82rem;color:#677b83 }
.nit-kiosk-timer-wrap strong { color:#17212b }

/* Kiosk Celebration Screen */
.nit-kiosk-success-card { padding:2.5rem 1.5rem;text-align:center;background:#eaf6ee;border:2px solid #166638 }
.nit-success-icon-large { font-size:3rem;margin-bottom:.5rem }
.nit-success-lead { font-size:1.15rem;color:#166638;font-weight:700;margin:0 0 1.5rem }
.nit-kiosk-reset-bar { display:flex;flex-direction:column;align-items:center;gap:.75rem;font-size:.9rem;color:#52636b }

/* Tab: My Reservations */
.nit-my-bookings-section { margin-bottom:3rem }
.nit-section-header { display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #d5dddd }
.nit-signin-prompt { display:flex;align-items:center;gap:1.5rem;padding:2rem;background:#eff5f5;border-top:3px solid #00536a }
.nit-signin-prompt__icon { font-size:2.5rem }
.nit-signin-prompt h3 { margin:0 0 .3rem }
.nit-signin-prompt p { margin:0;color:#52636b }
.nit-bookings-list { display:grid;gap:1rem }
.nit-booking-record { display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid #d5dddd;background:#fff;border-left:4px solid #00536a }
.nit-booking-record--approved { border-left-color:#166638 }
.nit-booking-record--pending { border-left-color:#f6bf32 }
.nit-booking-record--completed { border-left-color:#8da1a8;background:#fcfdfd }
.nit-booking-record--cancelled,
.nit-booking-record--rejected { border-left-color:#9b2029;background:#fdfcfc }
.nit-booking-record__header { display:flex;align-items:center;gap:.85rem;margin-bottom:.5rem }
.nit-booking-record__room { font-size:1.2rem;font-weight:800;color:#17212b }
.nit-booking-record__details { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1.5rem;font-size:.88rem;color:#41545e }
.nit-booking-record__note { grid-column:1/-1;padding:.4rem .6rem;background:#f5f8f8;font-size:.82rem;color:#00536a }
.nit-booking-record__col-actions { flex-shrink:0;text-align:right }
.nit-booking-deadline-passed { font-size:.8rem;color:#8da1a8;font-style:italic }

/* Status Badges */
.nit-status { display:inline-block;padding:.25rem .55rem;background:#edf2f2;color:#28434e;font-size:.78rem;font-weight:800;text-transform:capitalize }
.nit-status--approved { background:#e0f3e7;color:#166638 }
.nit-status--pending { background:#fff2cc;color:#795710 }
.nit-status--checked_in { background:#e1f0f4;color:#00536a }
.nit-status--completed { background:#edf2f2;color:#40535c }
.nit-status--cancelled,
.nit-status--rejected { background:#f7e3e3;color:#873039 }
.nit-status--no_show { background:#f7e3e3;color:#873039 }

/* Empty States */
.nit-empty-state { text-align:center;padding:3rem 1.5rem;background:#f5f8f8;border:1px solid #d5dddd }
.nit-empty-state__icon { font-size:2.5rem;margin-bottom:.5rem }
.nit-empty-state h3 { margin:0 0 .4rem }
.nit-empty-state p { margin:0 0 1.25rem;color:#52636b }

/* Guidelines / Rules Grid */
.nit-booking-rules-banner { margin-top:3.5rem;padding:2rem clamp(1rem,3vw,2.5rem);background:#f5f8f8;border-top:3px solid #00536a }
.nit-rules-brief { margin-bottom:1.25rem }
.nit-rules-brief h3 { margin:.25rem 0 0 }
.nit-rules-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-bottom:1.5rem }
.nit-rule-item { padding:1rem;background:#fff;border:1px solid #d5dddd;border-top:2px solid #00536a }
.nit-rule-item strong { display:block;color:#17212b;font-size:.92rem;margin-bottom:.3rem }
.nit-rule-item span { color:#52636b;font-size:.82rem;line-height:1.45;display:block }
.nit-rules-contact { color:#00536a;font-weight:800;font-size:.9rem;text-decoration:none!important }
.nit-rules-contact:hover { text-decoration:underline!important }

/* ========================================================
 * Responsive Breakpoints (Mobile Optimization)
 * ======================================================== */
@media(max-width:960px) {
  body#opac-room-booking .nit-booking__hero { grid-template-columns:1fr;gap:1.5rem }
  .nit-rules-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .nit-confirm-grid { grid-template-columns:1fr }
}

@media(max-width:768px) {
  body#opac-room-booking .nit-booking { width:calc(100% - 2rem);padding:1.5rem 0 }
  .nit-finder-bar { grid-template-columns:1fr;gap:1rem }
  .nit-finder-btn { width:100% }
  .nit-booking-nav { overflow-x:auto;white-space:nowrap;gap:.35rem }
  .nit-booking-nav__item { padding:.75rem 1rem;font-size:.9rem }
  .nit-kiosk-qr-container { flex-direction:column;text-align:center }
  .nit-kiosk-status { justify-content:center }
  .nit-booking-record { flex-direction:column;align-items:flex-start }
  .nit-booking-record__col-actions { width:100%;text-align:left;margin-top:.75rem }
  .nit-booking-record__col-actions button { width:100% }
  .nit-section-header { flex-direction:column;align-items:flex-start;gap:.75rem }
  .nit-section-header a { width:100% }
  .nit-signin-prompt { flex-direction:column;text-align:center;padding:1.5rem 1rem }
  .nit-slots-pills-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media(max-width:480px) {
  body#opac-room-booking .nit-booking h1 { font-size:2.2rem }
  .nit-slots-pills-grid { grid-template-columns:1fr }
  .nit-rules-grid { grid-template-columns:1fr }
  .nit-card-room__title-row { flex-direction:column;gap:.4rem }
  .nit-card-room__badges { width:100% }
}