/* ═══════════════════════════════════════════════════════════════════════════
   Gujarat Haj House Booking Manager — Frontend Stylesheet v2.0
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ghb-primary:    #1b3b2f;
  --ghb-primary-l:  #2e5a47;
  --ghb-accent:     #d6a32d;
  --ghb-accent-l:   #e8b840;
  --ghb-light:      #f4f7f4;
  --ghb-light-2:    #e8f0e8;
  --ghb-danger:     #dc2626;
  --ghb-success:    #16a34a;
  --ghb-warning:    #ca8a04;
  --ghb-info:       #2563eb;
  --ghb-border:     #e5e7eb;
  --ghb-text:       #111827;
  --ghb-muted:      #6b7280;
  --ghb-radius:     10px;
  --ghb-radius-lg:  16px;
  --ghb-shadow:     0 4px 20px rgba(0,0,0,.09);
  --ghb-shadow-lg:  0 8px 40px rgba(0,0,0,.14);
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
.ghb-wrap, .ghb-wrap * { box-sizing: border-box; }
.ghb-wrap { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ghb-text); line-height: 1.6; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ghb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all .18s; text-decoration: none; white-space: nowrap; }
.ghb-btn:disabled { opacity: .55; cursor: not-allowed; }
.ghb-btn-primary   { background: var(--ghb-primary);  color: #fff;  border-color: var(--ghb-primary);  }
.ghb-btn-primary:hover { background: var(--ghb-primary-l); border-color: var(--ghb-primary-l); color: #fff; }
.ghb-btn-outline   { background: transparent; color: var(--ghb-primary); border-color: var(--ghb-primary); }
.ghb-btn-outline:hover { background: var(--ghb-primary); color: #fff; }
.ghb-btn-ghost     { background: transparent; color: var(--ghb-muted); border-color: var(--ghb-border); }
.ghb-btn-ghost:hover { background: var(--ghb-light); color: var(--ghb-text); }
.ghb-btn-danger    { background: var(--ghb-danger); color: #fff; border-color: var(--ghb-danger); }
.ghb-btn-danger:hover { background: #b91c1c; }
.ghb-btn-google    { background: #fff; color: #374151; border: 2px solid #e5e7eb; width: 100%; font-size: 15px; padding: 12px; }
.ghb-btn-google:hover { background: #f9fafb; }
.ghb-btn-lg  { padding: 12px 26px; font-size: 15px; }
.ghb-btn-sm  { padding: 6px 14px;  font-size: 12px; }

/* ── Form Elements ────────────────────────────────────────────────────────── */
.ghb-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--ghb-border); border-radius: 8px; font-size: 14px; background: #fff; color: var(--ghb-text); transition: border-color .15s; }
.ghb-input:focus { outline: none; border-color: var(--ghb-primary); box-shadow: 0 0 0 3px rgba(27,59,47,.1); }
.ghb-field { display: flex; flex-direction: column; gap: 5px; }
.ghb-field label { font-size: 13px; font-weight: 600; color: #374151; }
.ghb-field--full { grid-column: 1 / -1; }
.ghb-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ghb-msg { font-size: 13px; min-height: 18px; margin-top: 4px; }
.ghb-msg.success { color: var(--ghb-success); }
.ghb-msg.error   { color: var(--ghb-danger);  }
.ghb-msg.info    { color: var(--ghb-info);    }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.ghb-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ghb-badge-pending      { background: #fef3c7; color: #92400e; }
.ghb-badge-confirmed    { background: #d1fae5; color: #065f46; }
.ghb-badge-rejected     { background: #fee2e2; color: #991b1b; }
.ghb-badge-cancelled    { background: #f3f4f6; color: #374151; }
.ghb-badge-checked_in   { background: #dbeafe; color: #1e40af; }
.ghb-badge-checked_out  { background: #e0e7ff; color: #3730a3; }
.ghb-badge-no_show      { background: #fce7f3; color: #9d174d; }
.ghb-badge-paid         { background: #d1fae5; color: #065f46; }
.ghb-badge-unpaid       { background: #fee2e2; color: #991b1b; }
.ghb-badge-partial      { background: #fef3c7; color: #92400e; }

/* ── Notice / Alert ───────────────────────────────────────────────────────── */
.ghb-notice { padding: 14px 18px; border-radius: var(--ghb-radius); font-size: 14px; margin-bottom: 16px; }
.ghb-notice-error { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--ghb-danger); }
.ghb-notice-warn  { background: #fef3c7; color: #92400e; border-left: 4px solid var(--ghb-warning); }
.ghb-notice-info  { background: #dbeafe; color: #1e40af; border-left: 4px solid var(--ghb-info); }

/* ── Sections & Dividers ──────────────────────────────────────────────────── */
.ghb-section-divider { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--ghb-muted); border-bottom: 2px solid var(--ghb-border); padding-bottom: 6px; margin: 18px 0 12px; }
.ghb-radio-group { display: flex; flex-direction: column; gap: 8px; }
.ghb-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ghb-radio input { accent-color: var(--ghb-primary); width: 16px; height: 16px; }
.ghb-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ghb-filter-tab { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--ghb-border); font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--ghb-muted); transition: all .15s; text-decoration: none; }
.ghb-filter-tab:hover, .ghb-filter-tab.active { background: var(--ghb-primary); color: #fff; border-color: var(--ghb-primary); }
.ghb-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ghb-page-header h1 { font-size: 24px; font-weight: 700; color: var(--ghb-primary); margin: 0; }
.ghb-empty-state { text-align: center; padding: 48px 20px; }
.ghb-empty-icon  { font-size: 56px; margin-bottom: 12px; }
.ghb-empty-state p { color: var(--ghb-muted); margin-bottom: 16px; }
.ghb-tag { display: inline-block; background: var(--ghb-light-2); color: var(--ghb-primary); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SEARCH
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-hero-search { background: linear-gradient(135deg, var(--ghb-primary) 0%, #2e5a47 100%); padding: 48px 32px; border-radius: var(--ghb-radius-lg); margin-bottom: 32px; }
.ghb-hero-inner { max-width: 1000px; margin: 0 auto; }
.ghb-hero-search h1 { color: #fff; font-size: 30px; font-weight: 700; margin: 0 0 6px; }
.ghb-hero-search p  { color: rgba(255,255,255,.75); margin: 0 0 24px; font-size: 15px; }
.ghb-search-form--hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: flex-end; }
.ghb-search-form--hero .ghb-field label { color: rgba(255,255,255,.85); font-size: 12px; }
.ghb-search-form--hero .ghb-field--btn { justify-content: flex-end; }
.ghb-search-notice { padding: 12px 18px; border-radius: 8px; font-size: 14px; background: #fef3c7; color: #92400e; margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROOM CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.ghb-room-card  { background: #fff; border-radius: var(--ghb-radius-lg); box-shadow: var(--ghb-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s; }
.ghb-room-card:hover { transform: translateY(-5px); box-shadow: var(--ghb-shadow-lg); }
.ghb-room-thumb { height: 200px; background: linear-gradient(135deg, var(--ghb-primary), #2e5a47); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ghb-room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ghb-room-type-badge { position: absolute; top: 12px; left: 12px; background: var(--ghb-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.ghb-badge-lg { font-size: 13px; padding: 6px 14px; }
.ghb-featured-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 999px; }
.ghb-room-body    { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.ghb-room-name    { font-size: 17px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 4px; }
.ghb-room-meta    { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ghb-muted); margin-bottom: 10px; }
.ghb-room-desc    { font-size: 13px; color: var(--ghb-muted); margin-bottom: 10px; flex: 1; }
.ghb-room-amenities { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.ghb-amenity-tag  { background: var(--ghb-light); color: var(--ghb-primary); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; }
.ghb-amenity-more { background: var(--ghb-light-2); color: var(--ghb-muted); }
.ghb-room-footer  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ghb-border); }
.ghb-room-price .amount { font-size: 22px; font-weight: 700; color: var(--ghb-primary); }
.ghb-room-price .per    { font-size: 12px; color: var(--ghb-muted); }
.ghb-room-actions { display: flex; gap: 6px; }
.ghb-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ghb-results-header h2 { font-size: 20px; font-weight: 700; color: var(--ghb-primary); margin: 0; }
.ghb-results-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ROOM DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-room-detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.ghb-gallery-main  { position: relative; border-radius: var(--ghb-radius); overflow: hidden; background: var(--ghb-light); aspect-ratio: 16/9; }
.ghb-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.ghb-gallery-placeholder { display: flex; align-items: center; justify-content: center; font-size: 64px; height: 280px; }
.ghb-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ghb-gallery-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.ghb-gallery-thumb.active, .ghb-gallery-thumb:hover { border-color: var(--ghb-primary); }
.ghb-room-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 20px 0 16px; }
.ghb-room-detail-name { font-size: 26px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 6px; }
.ghb-room-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ghb-muted); }
.ghb-room-detail-price-badge { text-align: right; flex-shrink: 0; }
.ghb-price-big { font-size: 28px; font-weight: 700; color: var(--ghb-primary); }
.ghb-price-per  { font-size: 13px; color: var(--ghb-muted); }
.ghb-room-description, .ghb-amenities-section, .ghb-pricing-section, .ghb-policies-section { margin: 20px 0; }
.ghb-room-description h3, .ghb-amenities-section h3, .ghb-pricing-section h3, .ghb-policies-section h3 { font-size: 16px; font-weight: 700; color: var(--ghb-primary); margin-bottom: 10px; border-bottom: 2px solid var(--ghb-light-2); padding-bottom: 6px; }
.ghb-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ghb-amenity-item { display: flex; align-items: center; gap: 8px; background: var(--ghb-light); padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.ghb-amenity-icon { font-size: 16px; flex-shrink: 0; }
.ghb-pricing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ghb-pricing-table th, .ghb-pricing-table td { padding: 8px 10px; border-bottom: 1px solid var(--ghb-border); }
.ghb-pricing-table th { background: var(--ghb-light); font-weight: 600; color: var(--ghb-primary); }
.ghb-policy-list { list-style: none; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
/* Sidebar */
.ghb-sidebar-booking-card, .ghb-sidebar-calendar-card { background: #fff; border-radius: var(--ghb-radius-lg); padding: 22px; box-shadow: var(--ghb-shadow); margin-bottom: 16px; }
.ghb-sidebar-price { text-align: center; margin-bottom: 18px; }
.ghb-estimate-box { background: var(--ghb-light); border-radius: 8px; padding: 12px; font-size: 13px; margin-bottom: 14px; }
.ghb-estimate-row { display: flex; justify-content: space-between; padding: 3px 0; }
.ghb-estimate-total { font-weight: 700; border-top: 1px solid var(--ghb-border); padding-top: 8px; margin-top: 6px; }
.ghb-sidebar-trust { margin-top: 16px; font-size: 12px; color: var(--ghb-muted); display: flex; flex-direction: column; gap: 5px; }
.ghb-trust-item { display: flex; align-items: center; gap: 6px; }
.ghb-mini-calendar { min-height: 100px; }
.ghb-cal-legend { display: flex; gap: 12px; font-size: 12px; margin-top: 10px; flex-wrap: wrap; }
.ghb-cal-legend-item { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; }
.ghb-cal-available { background: #d1fae5; color: #065f46; }
.ghb-cal-booked    { background: #fee2e2; color: #991b1b; }
/* Mini calendar grid */
.ghb-mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 11px; text-align: center; }
.ghb-mini-cal-day  { padding: 4px; border-radius: 4px; cursor: default; }
.ghb-mini-cal-day.available { background: #d1fae5; color: #065f46; }
.ghb-mini-cal-day.booked    { background: #fee2e2; color: #991b1b; }
.ghb-mini-cal-day.today     { font-weight: 700; outline: 2px solid var(--ghb-primary); }
.ghb-mini-cal-day.other-month { opacity: .35; }
.ghb-mini-cal-header { font-weight: 700; font-size: 11px; color: var(--ghb-muted); padding: 4px 0; text-align: center; }
.ghb-mini-cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ghb-modal-content { background: #fff; border-radius: var(--ghb-radius-lg); max-height: 92vh; overflow-y: auto; position: relative; animation: ghbSlideUp .2s ease-out; }
.ghb-modal-sm { max-width: 420px; width: 100%; padding: 28px; }
.ghb-modal-lg { max-width: 860px; width: 100%; }
.ghb-modal-center { text-align: center; }
.ghb-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ghb-muted); z-index: 1; line-height: 1; }
.ghb-modal-close:hover { color: var(--ghb-text); }
@keyframes ghbSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Split layout */
.ghb-modal-body-split { display: grid; grid-template-columns: 280px 1fr; }
.ghb-bm-summary { background: var(--ghb-light); padding: 28px 22px; border-radius: var(--ghb-radius-lg) 0 0 var(--ghb-radius-lg); }
.ghb-bm-room-thumb { height: 140px; border-radius: 8px; background: linear-gradient(135deg, var(--ghb-primary), #2e5a47); overflow: hidden; margin-bottom: 14px; }
.ghb-bm-room-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ghb-bm-summary h3 { font-size: 16px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 8px; }
.ghb-bm-meta { font-size: 13px; color: var(--ghb-muted); margin-bottom: 12px; line-height: 1.8; }
.ghb-bm-price-card { background: #fff; border-radius: 8px; padding: 12px; font-size: 13px; margin-bottom: 14px; border: 1.5px solid var(--ghb-border); }
.ghb-bm-price-row  { display: flex; justify-content: space-between; padding: 3px 0; }
.ghb-bm-total-row  { font-weight: 700; font-size: 15px; border-top: 1px solid var(--ghb-border); margin-top: 6px; padding-top: 8px; }
.ghb-bm-form-wrap  { padding: 28px; }
.ghb-bm-form-wrap h2 { font-size: 18px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 18px; }
.ghb-form-actions  { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.ghb-gateway-options { margin-top: 10px; }
/* Success modal */
.ghb-success-anim { font-size: 64px; margin-bottom: 14px; animation: ghbBounce .4s ease; }
.ghb-success-ref-box { background: var(--ghb-light); border-radius: 8px; padding: 12px 18px; margin: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ghb-success-ref-box span { font-size: 12px; color: var(--ghb-muted); }
.ghb-success-ref-box strong { font-size: 20px; color: var(--ghb-primary); letter-spacing: 1px; }
@keyframes ghbBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH (Guest Dashboard – logged out)
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; border-radius: var(--ghb-radius-lg); overflow: hidden; box-shadow: var(--ghb-shadow-lg); }
.ghb-auth-brand  { background: linear-gradient(160deg, var(--ghb-primary), #2e5a47); padding: 48px 36px; display: flex; align-items: center; }
.ghb-auth-brand-inner { color: #fff; }
.ghb-auth-logo  { font-size: 64px; margin-bottom: 16px; }
.ghb-auth-brand h1 { font-size: 26px; margin: 0 0 10px; }
.ghb-auth-brand p  { opacity: .8; font-size: 15px; line-height: 1.6; }
.ghb-auth-forms { background: #fff; padding: 40px 36px; }
.ghb-auth-tabs  { display: flex; gap: 4px; background: var(--ghb-light); border-radius: 8px; padding: 4px; margin-bottom: 24px; }
.ghb-auth-tab   { flex: 1; padding: 9px; border: none; background: transparent; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ghb-muted); transition: all .15s; }
.ghb-auth-tab.active { background: #fff; color: var(--ghb-primary); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.ghb-auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--ghb-muted); font-size: 13px; }
.ghb-auth-divider::before, .ghb-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--ghb-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   GUEST DASHBOARD (logged in)
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-dashboard-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.ghb-dash-sidebar { background: #fff; border-radius: var(--ghb-radius-lg); padding: 20px; box-shadow: var(--ghb-shadow); position: sticky; top: 20px; }
.ghb-dash-user-card { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--ghb-border); margin-bottom: 16px; }
.ghb-dash-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--ghb-primary); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ghb-dash-user-name  { font-weight: 700; font-size: 14px; }
.ghb-dash-user-email { font-size: 12px; color: var(--ghb-muted); word-break: break-all; }
.ghb-dash-nav { display: flex; flex-direction: column; gap: 2px; }
.ghb-dash-nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ghb-text); transition: all .15s; cursor: pointer; }
.ghb-dash-nav-item:hover, .ghb-dash-nav-item.active { background: var(--ghb-light); color: var(--ghb-primary); }
.ghb-dash-nav-logout { color: var(--ghb-danger); margin-top: 8px; }
.ghb-dash-main { min-height: 400px; }
.ghb-dash-tab { background: #fff; border-radius: var(--ghb-radius-lg); padding: 24px; box-shadow: var(--ghb-shadow); }
.ghb-dash-tab h2 { font-size: 20px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 20px; }
.ghb-dash-tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ghb-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.ghb-dash-stat { background: var(--ghb-light); border-radius: 10px; padding: 16px; text-align: center; }
.ghb-dash-stat .num { display: block; font-size: 26px; font-weight: 700; color: var(--ghb-primary); }
.ghb-dash-stat .lbl { display: block; font-size: 12px; color: var(--ghb-muted); margin-top: 4px; }
/* Booking rows in dashboard */
.ghb-booking-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ghb-border); gap: 12px; }
.ghb-booking-row-main { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.ghb-booking-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Booking cards */
.ghb-booking-card { border: 1.5px solid var(--ghb-border); border-radius: var(--ghb-radius); overflow: hidden; margin-bottom: 14px; }
.ghb-booking-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--ghb-light); gap: 10px; flex-wrap: wrap; }
.ghb-booking-ref { font-size: 14px; font-weight: 700; color: var(--ghb-primary); margin-right: 6px; }
.ghb-booking-card-actions { display: flex; gap: 6px; }
.ghb-booking-card-body { padding: 14px 16px; }
.ghb-booking-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; font-size: 13px; }
.ghb-booking-detail-grid > div { display: flex; flex-direction: column; }
.ghb-booking-detail-grid .lbl { font-size: 11px; color: var(--ghb-muted); margin-bottom: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING CONFIRMATION
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-confirmation-card { max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--ghb-radius-lg); padding: 40px; box-shadow: var(--ghb-shadow-lg); text-align: center; }
.ghb-confirmation-icon { font-size: 72px; margin-bottom: 16px; }
.ghb-confirmation-card h1 { font-size: 26px; color: var(--ghb-primary); margin: 0 0 10px; }
.ghb-confirmation-ref-box { background: var(--ghb-light); border-radius: 10px; padding: 18px; margin: 24px 0; }
.ghb-confirmation-ref-box span { display: block; font-size: 12px; color: var(--ghb-muted); margin-bottom: 6px; }
.ghb-confirmation-ref-box strong { font-size: 24px; color: var(--ghb-primary); letter-spacing: 1px; }
.ghb-confirmation-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; font-size: 14px; margin: 20px 0; }
.ghb-confirmation-detail-grid > div { display: flex; flex-direction: column; background: var(--ghb-light); padding: 10px 14px; border-radius: 8px; }
.ghb-confirmation-detail-grid span { font-size: 11px; color: var(--ghb-muted); margin-bottom: 4px; }
.ghb-confirmation-detail-grid strong { font-size: 14px; color: var(--ghb-text); }
.ghb-confirmation-actions { display: flex; gap: 10px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.ghb-confirmation-note { font-size: 13px; color: var(--ghb-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   INVOICE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-invoice-paper { background: #fff; border-radius: var(--ghb-radius-lg); padding: 40px; box-shadow: var(--ghb-shadow-lg); max-width: 800px; margin: 0 auto; }
.ghb-invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.ghb-invoice-brand { display: flex; align-items: flex-start; gap: 16px; }
.ghb-invoice-brand-logo { font-size: 48px; flex-shrink: 0; }
.ghb-invoice-brand h1 { font-size: 20px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 4px; }
.ghb-invoice-brand p  { font-size: 13px; color: var(--ghb-muted); margin: 0; }
.ghb-invoice-meta h2 { font-size: 22px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 10px; text-align: right; }
.ghb-invoice-meta-table { font-size: 13px; border-collapse: collapse; }
.ghb-invoice-meta-table th { text-align: right; color: var(--ghb-muted); padding: 3px 8px 3px 0; }
.ghb-invoice-meta-table td { padding: 3px 0; }
.ghb-invoice-divider { border: none; border-top: 2px solid var(--ghb-light-2); margin: 20px 0; }
.ghb-invoice-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; font-size: 14px; }
.ghb-invoice-info-grid h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ghb-muted); margin: 0 0 10px; }
.ghb-invoice-info-grid p { margin: 0 0 4px; }
.ghb-invoice-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.ghb-invoice-table th { background: var(--ghb-primary); color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.ghb-invoice-table td { padding: 10px 14px; border-bottom: 1px solid var(--ghb-border); }
.ghb-invoice-table tfoot tr:first-child td, .ghb-invoice-table tfoot tr:first-child th { border-top: 2px solid var(--ghb-primary); }
.ghb-invoice-total-row th, .ghb-invoice-total-row td { font-size: 17px; font-weight: 700; color: var(--ghb-primary); }
.ghb-invoice-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ghb-border); font-size: 13px; color: var(--ghb-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
.ghb-contact-info h1 { font-size: 28px; font-weight: 700; color: var(--ghb-primary); margin-bottom: 10px; }
.ghb-contact-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: #fff; border-radius: var(--ghb-radius); box-shadow: var(--ghb-shadow); margin-bottom: 12px; }
.ghb-contact-icon { font-size: 28px; flex-shrink: 0; }
.ghb-contact-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--ghb-primary); margin-bottom: 4px; }
.ghb-contact-card p { font-size: 14px; color: var(--ghb-muted); margin: 0; }
.ghb-contact-form-wrap { background: #fff; border-radius: var(--ghb-radius-lg); padding: 28px; box-shadow: var(--ghb-shadow); }
.ghb-contact-form-wrap h2 { font-size: 20px; font-weight: 700; color: var(--ghb-primary); margin: 0 0 20px; }
.ghb-contact-form-wrap .ghb-field { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET
   ═══════════════════════════════════════════════════════════════════════════ */
.ghb-widget { background: var(--ghb-primary); border-radius: var(--ghb-radius-lg); padding: 22px; }
.ghb-widget-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ghb-widget-icon { font-size: 22px; }
.ghb-widget h3 { color: #fff; margin: 0; font-size: 16px; }
.ghb-widget .ghb-field label { color: rgba(255,255,255,.85); font-size: 13px; }
.ghb-widget .ghb-field { margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ghb-room-detail-layout { grid-template-columns: 1fr; }
  .ghb-modal-body-split   { grid-template-columns: 1fr; }
  .ghb-bm-summary { border-radius: var(--ghb-radius-lg) var(--ghb-radius-lg) 0 0; }
  .ghb-auth-layout { grid-template-columns: 1fr; }
  .ghb-auth-brand  { display: none; }
  .ghb-dashboard-layout { grid-template-columns: 1fr; }
  .ghb-dash-sidebar { position: static; }
  .ghb-contact-layout { grid-template-columns: 1fr; }
  .ghb-invoice-info-grid { grid-template-columns: 1fr; }
  .ghb-invoice-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .ghb-rooms-grid { grid-template-columns: 1fr; }
  .ghb-search-form--hero { grid-template-columns: 1fr 1fr; }
  .ghb-hero-search { padding: 28px 18px; }
  .ghb-hero-search h1 { font-size: 22px; }
  .ghb-form-grid  { grid-template-columns: 1fr; }
  .ghb-dash-stats { grid-template-columns: 1fr 1fr; }
  .ghb-modal-lg   { max-width: 100%; }
  .ghb-confirmation-detail-grid { grid-template-columns: 1fr; }
}

/* ── v2.1 Additions ───────────────────────────────────────────────────────── */
.ghb-input-sm { padding:7px 10px; font-size:13px; }

/* Ensure policies section shows correct times */
.ghb-policy-list { font-size:14px; line-height:2; }

/* Fix operator nav on mobile - hamburger toggle */
.ghb-op-mobile-toggle { display:none; background:var(--ghb-primary); color:#fff; border:none;
                          padding:10px 16px; cursor:pointer; font-size:16px; }
@media (max-width:900px) {
  .ghb-op-mobile-toggle { display:block; }
  .ghb-op-sidebar.open  { display:flex; position:fixed; left:0; top:0; bottom:0; z-index:9999; width:240px; }
}

/* Confirmation detail grid fix */
.ghb-confirmation-detail-grid > div > span { font-size:11px; color:#6b7280; margin-bottom:2px; }

/* Invoice table fix for mobile */
@media (max-width:600px) {
  .ghb-invoice-table { font-size:12px; }
  .ghb-invoice-table th, .ghb-invoice-table td { padding:7px 8px; }
}

/* Loading spinner */
.ghb-loading { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
                border-top-color:#fff; border-radius:50%; animation:ghb-spin .6s linear infinite; margin-right:6px; }
@keyframes ghb-spin { to { transform:rotate(360deg); } }

/* Fix for check-in/out time display in policies */
.ghb-policy-list li { padding:4px 0; }