/* ═══════════════════════════════════════════════════════
   Hotel Customer Portal — Styles v2.4
   Aesthetic: Refined luxury hotel · warm neutrals + deep indigo
   Font: Outfit (display) + DM Sans (body)
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --c0:  #4338ca; --c0h: #3730a3; --c0l: #eef2ff;
  --cg:  #059669; --cgl: #ecfdf5;
  --cr:  #dc2626; --crl: #fef2f2;
  --cy:  #b45309; --cyl: #fffbeb;
  --cp:  #7c3aed; --cpl: #f5f3ff;
  /* Text */
  --tx: #1e1b4b; --ts: #6b7280; --tl: #9ca3af;
  /* Surface */
  --wh: #ffffff; --bg: #f8f8fc; --bg2: #f1f0f9;
  /* Borders */
  --bd: #e5e4f0; --bd2: #d1cfe8;
  /* Shadow */
  --sh:  0 1px 4px rgba(67,56,202,.06), 0 4px 16px rgba(67,56,202,.07);
  --sh2: 0 8px 40px rgba(67,56,202,.16);
  --sh3: 0 2px 8px rgba(67,56,202,.12);
  /* Radius */
  --r: 16px; --r2: 10px; --r3: 8px;
  /* Font */
  --fd: 'Outfit', sans-serif;
  --f:  'DM Sans', -apple-system, sans-serif;
}

/* ── Reset ── */
.hcp-wrap *, .hcp-wrap *::before, .hcp-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hcp-wrap h1,.hcp-wrap h2,.hcp-wrap h3,.hcp-wrap h4,.hcp-wrap h5,.hcp-wrap h6 { margin: 0 !important; padding: 0 !important; }
.hcp-wrap p { margin: 0 !important; padding: 0 !important; }
.hcp-wrap ul,.hcp-wrap ol,.hcp-wrap li { margin: 0 !important; padding: 0 !important; }
.hcp-wrap input[type="file"] { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }

/* ── Base ── */
.hcp-wrap { font-family: var(--f); color: var(--tx); -webkit-font-smoothing: antialiased; max-width: 460px; margin: 0 auto; padding: 24px 16px 56px; }
.hcp-dash-wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 60px; }

/* ════════════════════════════════════════
   AUTH BOX
════════════════════════════════════════ */
.hcp-auth-box { background: var(--wh); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh2); overflow: hidden; }

/* Brand bar */
.hcp-auth-brand {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  padding: 18px 28px;
}
.hcp-auth-brand-icon { font-size: 26px; line-height: 1; }
.hcp-auth-brand-name {
  font-size: 18px; font-weight: 800; font-family: var(--fd);
  color: #fff; letter-spacing: -.2px;
}

/* Tabs */
.hcp-auth-tabs { display: flex; border-bottom: 1px solid var(--bd); }
.hcp-auth-tabs .hcp-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 12px; font-size: 13px; font-weight: 600; font-family: var(--f); color: var(--ts); text-decoration: none; border-bottom: 3px solid transparent; background: var(--bg); transition: all .18s; }
.hcp-auth-tabs .hcp-tab:hover:not(.active) { color: var(--tx); background: var(--wh); }
.hcp-auth-tabs .hcp-tab.active { color: var(--c0); background: var(--wh); border-bottom-color: var(--c0); }

/* Form body */
.hcp-auth-form { padding: 28px 30px 30px; }
.hcp-auth-hero { margin-bottom: 24px; }
.hcp-auth-hero h2 { font-size: 22px; font-weight: 800; font-family: var(--fd); color: var(--tx); margin-bottom: 6px !important; letter-spacing: -.3px; }
.hcp-auth-hero p { font-size: 13px; color: var(--ts); line-height: 1.5; }

/* Fields */
.hcp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.hcp-field label { font-size: 13px; font-weight: 600; color: var(--tx); letter-spacing: 0; }
.hcp-required { color: var(--cr); }
.hcp-hint { font-size: 11px; color: var(--ts); margin-top: 4px; display: block; }
.hcp-hint-inline { font-size: 11px; color: var(--ts); font-weight: 400; }
.hcp-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Inputs */
.hcp-input { flex: 1; width: 100%; border: 1.5px solid var(--bd); background: var(--bg); border-radius: var(--r2); outline: none; padding: 11px 13px; font-size: 14px; font-family: var(--f); color: var(--tx); display: block; transition: border-color .15s, box-shadow .15s, background .15s; }
.hcp-input:focus { border-color: var(--c0); box-shadow: 0 0 0 3px rgba(67,56,202,.1); background: var(--wh); }
.hcp-input::placeholder { color: var(--tl); }
.hcp-input--disabled { opacity: .5; cursor: not-allowed; background: var(--bg) !important; }

/* Input group */
.hcp-input-group { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--bd); border-radius: var(--r2); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.hcp-input-group:focus-within { border-color: var(--c0); box-shadow: 0 0 0 3px rgba(67,56,202,.1); background: var(--wh); }
.hcp-input-icon { padding: 0 10px 0 13px; color: var(--tl); display: flex; align-items: center; flex-shrink: 0; }
.hcp-input-group .hcp-input { border: none !important; background: transparent !important; box-shadow: none !important; padding: 11px 6px 11px 0; }
.hcp-input-group .hcp-input:focus { border: none !important; box-shadow: none !important; }

/* Eye button */
.hcp-eye-btn { background: none; border: none; cursor: pointer; color: var(--tl); padding: 0 12px; display: flex; align-items: center; justify-content: center; transition: color .15s; flex-shrink: 0; height: 44px; }
.hcp-eye-btn:hover { color: var(--c0); }
.hcp-eye-btn svg { pointer-events: none; }

/* Strength */
.hcp-strength-wrap { height: 4px; background: var(--bd); border-radius: 2px; margin-top: 8px; overflow: hidden; }
#hcp-strength-bar { height: 100%; border-radius: 2px; width: 0; transition: width .3s, background .3s; }
.hcp-strength-label { font-size: 11px; font-weight: 600; margin-top: 4px; display: block; }

/* Misc */
.hcp-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hcp-checkbox-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ts); cursor: pointer; user-select: none; }
.hcp-checkbox-wrap input { width: 15px; height: 15px; accent-color: var(--c0); cursor: pointer; flex-shrink: 0; }
.hcp-terms { margin-bottom: 16px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r3); padding: 10px 14px; }
.hcp-text-link { font-size: 13px; color: var(--c0); text-decoration: none; font-weight: 600; }
.hcp-text-link:hover { text-decoration: underline; }
.hcp-auth-footer { text-align: center; font-size: 13px; color: var(--ts); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bd); }
.hcp-auth-footer a { color: var(--c0); text-decoration: none; font-weight: 700; }

/* Alert */
.hcp-alert { padding: 11px 14px; border-radius: var(--r3); font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.hcp-alert.ok  { background: var(--cgl); border: 1px solid #6ee7b7; color: #065f46; }
.hcp-alert.err { background: var(--crl); border: 1px solid #fca5a5; color: #991b1b; }

/* Primary button */
.hcp-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 22px; background: var(--c0); color: #fff; border: none; border-radius: var(--r2); font-size: 15px; font-weight: 700; font-family: var(--fd); cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s; letter-spacing: .01em; }
.hcp-submit-btn:hover { background: var(--c0h); box-shadow: 0 4px 14px rgba(67,56,202,.35); }
.hcp-submit-btn:active { transform: scale(.98); }
.hcp-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.hcp-loader { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: hcpSpin .7s linear infinite; flex-shrink: 0; }
@keyframes hcpSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════
   DASHBOARD — HEADER
════════════════════════════════════════ */
.hcp-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  border-radius: var(--r); padding: 20px 24px; margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(67,56,202,.30);
  flex-wrap: wrap; gap: 14px; position: relative; overflow: hidden;
}
.hcp-dash-head::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.07); pointer-events: none;
}
.hcp-dash-head::after {
  content: ''; position: absolute; bottom: -50px; right: 120px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.hcp-dash-identity { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }

/* Avatar */
.hcp-avatar-wrap { position: relative; flex-shrink: 0; width: 58px; height: 58px; }
.hcp-avatar { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 22px; font-weight: 800; font-family: var(--fd); display: flex; align-items: center; justify-content: center; border: 2.5px solid rgba(255,255,255,.5); }
.hcp-avatar-img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block; border: 2.5px solid rgba(255,255,255,.6); box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.hcp-avatar-edit { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--c0); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .15s; }
.hcp-avatar-edit:hover { transform: scale(1.15); }

.hcp-dash-name h2 { font-size: 19px; font-weight: 800; font-family: var(--fd); color: #fff; margin-bottom: 3px; letter-spacing: -.2px; }
.hcp-dash-name span { font-size: 13px; color: rgba(255,255,255,.7); }

.hcp-signout-btn { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--r3); padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: var(--f); color: #fff; cursor: pointer; transition: all .15s; position: relative; z-index: 1; backdrop-filter: blur(4px); }
.hcp-signout-btn:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════
   STATS
════════════════════════════════════════ */
.hcp-stat-row { display: grid; gap: 12px; margin-bottom: 16px; }
.hcp-stat-row--2 { grid-template-columns: repeat(2, 1fr); }
.hcp-stat-card { display: flex; align-items: center; gap: 16px; background: var(--wh); border: 1px solid var(--bd); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh); transition: transform .15s, box-shadow .15s; }
.hcp-stat-card:hover { transform: translateY(-1px); box-shadow: var(--sh2); }
.hcp-stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hcp-stat-icon--blue   { background: var(--c0l); color: var(--c0); }
.hcp-stat-icon--green  { background: var(--cgl); color: var(--cg); }
.hcp-stat-icon--purple { background: var(--cpl); color: var(--cp); }
.hcp-stat-card strong { display: block; font-size: 28px; font-weight: 900; font-family: var(--fd); color: var(--tx); line-height: 1; letter-spacing: -1px; }
.hcp-stat-card span { display: block; font-size: 12px; font-weight: 600; color: var(--ts); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }

/* ════════════════════════════════════════
   TAB NAV
════════════════════════════════════════ */
.hcp-tab-nav { display: flex; gap: 2px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 12px; padding: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.hcp-tab-btn { flex: 1; min-width: 80px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; font-family: var(--f); color: var(--ts); text-decoration: none; transition: all .2s; white-space: nowrap; background: none; border: none; cursor: pointer; outline: none; }
.hcp-tab-btn:hover:not(.active) { background: rgba(255,255,255,.7); color: var(--tx); }
.hcp-tab-btn.active { background: var(--wh); color: var(--c0); box-shadow: var(--sh3); }
.hcp-tab-count { color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px; background: var(--c0); font-family: var(--fd); }
.hcp-tab-count--red    { background: var(--cr); }
.hcp-tab-count--purple { background: var(--cp); }
.hcp-tab-body { display: flex; flex-direction: column; gap: 14px; }

/* ════════════════════════════════════════
   BOOKING CARD
════════════════════════════════════════ */
.hcp-booking-item { background: var(--wh); border: 1.5px solid var(--bd); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: border-color .2s, box-shadow .2s, transform .15s; }
.hcp-booking-item:hover { border-color: #a5b4fc; box-shadow: 0 6px 28px rgba(67,56,202,.13); transform: translateY(-1px); }

/* Badges */
.hcp-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; font-family: var(--fd); white-space: nowrap; flex-shrink: 0; letter-spacing: .02em; }
.hcp-badge--pending   { background: var(--cyl); color: var(--cy); border: 1px solid #fde68a; }
.hcp-badge--confirmed { background: var(--cgl); color: var(--cg); border: 1px solid #6ee7b7; }
.hcp-badge--cancelled { background: var(--crl); color: var(--cr); border: 1px solid #fca5a5; }
.hcp-badge--completed { background: var(--cpl); color: var(--cp); border: 1px solid #c4b5fd; }

/* Top: image + content */
.hcp-bk-top { display: flex; align-items: stretch; min-height: 168px; }

/* Image panel */
.hcp-bk-img-panel { position: relative; width: 180px; flex-shrink: 0; overflow: hidden; border-radius: 10px; }
.hcp-bk-img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; transition: transform .4s; border-radius: 10px; }
.hcp-booking-item:hover .hcp-bk-img { transform: scale(1.04); }
.hcp-bk-img-placeholder { width: 100%; height: 100%; min-height: 180px; background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #a5b4fc; border-radius: 10px; }
.hcp-bk-img-placeholder svg { opacity: .5; }
.hcp-bk-img-placeholder span { font-size: 11px; font-weight: 600; color: #a5b4fc; letter-spacing: .04em; text-transform: uppercase; }
.hcp-bk-img-badge { position: absolute !important; top: 10px; left: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

/* Content panel */
.hcp-bk-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px 16px; gap: 14px; min-width: 0; }

/* Title */
.hcp-bk-title { display: flex; flex-direction: column; gap: 5px; }
.hcp-bk-hotel { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--ts); text-transform: uppercase; letter-spacing: .08em; }
.hcp-bk-hotel svg { flex-shrink: 0; opacity: .6; }
.hcp-bk-content h4 { font-size: 18px; font-weight: 800; font-family: var(--fd); color: var(--tx); margin: 0 !important; padding: 0 !important; line-height: 1.2; letter-spacing: -.2px; }

/* Dates */
.hcp-bk-dates { display: flex; align-items: stretch; background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; }
.hcp-bk-date-item { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; }
.hcp-bk-date-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ts); text-transform: uppercase; letter-spacing: .07em; }
.hcp-bk-date-lbl svg { flex-shrink: 0; }
.hcp-bk-date-item strong { font-size: 15px; font-weight: 800; font-family: var(--fd); color: var(--tx); display: block; margin: 0 !important; line-height: 1.3; }
.hcp-bk-date-item em { font-size: 11px; color: var(--ts); font-style: normal; display: block; margin-top: 1px; }
.hcp-bk-date-sep { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; position: relative; min-width: 110px; padding: 0; }
.hcp-bk-sep-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--bd2); transform: translateY(-50%); z-index: 0; }
.hcp-bk-sep-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: var(--c0); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--fd); border-radius: 30px; padding: 6px 14px; white-space: nowrap; box-shadow: 0 3px 10px rgba(67,56,202,.35); letter-spacing: .02em; }

/* Meta */
.hcp-bk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hcp-bk-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ts); background: var(--bg2); border: 1px solid var(--bd); border-radius: 20px; padding: 4px 11px; font-weight: 500; }
.hcp-bk-meta-chip svg { flex-shrink: 0; opacity: .65; }
.hcp-bk-total { font-size: 17px; font-weight: 900; font-family: var(--fd); color: var(--tx); margin-left: auto !important; letter-spacing: -.3px; }

/* Footer */
.hcp-bk-footer { padding: 13px 20px; border-top: 1px solid var(--bd); background: var(--bg); }
.hcp-bk-footer--actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Action buttons */
.hcp-cancel-trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1.5px solid #fca5a5; color: var(--cr); border-radius: var(--r3); padding: 7px 15px; font-size: 12px; font-weight: 600; font-family: var(--f); cursor: pointer; transition: all .15s; }
.hcp-cancel-trigger:hover { background: var(--cr); color: #fff; border-color: var(--cr); }
.hcp-cancel-trigger:disabled { opacity: .5; cursor: not-allowed; }

.hcp-continue-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--c0); color: #fff; border: none; border-radius: var(--r3); padding: 8px 16px; font-size: 12px; font-weight: 600; font-family: var(--f); cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s; }
.hcp-continue-btn:hover { background: var(--c0h); box-shadow: 0 3px 12px rgba(67,56,202,.3); color: #fff; }

.hcp-invoice-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--c0); color: #fff; border: none; border-radius: var(--r3); padding: 8px 16px; font-size: 12px; font-weight: 700; font-family: var(--fd); cursor: pointer; transition: background .15s, box-shadow .15s; margin-left: auto; letter-spacing: .01em; }
.hcp-invoice-btn:hover { background: var(--c0h); box-shadow: 0 3px 12px rgba(67,56,202,.3); }
.hcp-invoice-btn:disabled, .hcp-invoice-btn.hcp-loading { opacity: .65; cursor: not-allowed; }

/* ════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.hcp-empty-state { text-align: center; padding: 60px 24px; background: var(--bg); border: 1.5px dashed var(--bd2); border-radius: var(--r); }
.hcp-empty-icon { font-size: 56px; margin-bottom: 14px; display: block; }
.hcp-empty-state h3 { font-size: 20px; font-weight: 800; font-family: var(--fd); margin-bottom: 8px; }
.hcp-empty-state p { color: var(--ts); font-size: 14px; margin-bottom: 24px; }

/* ════════════════════════════════════════
   PROFILE CARD
════════════════════════════════════════ */
.hcp-profile-card {
  background: var(--wh); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 28px 28px 24px; box-shadow: var(--sh);
}
.hcp-profile-card > h3 {
  font-size: 20px; font-weight: 800; font-family: var(--fd);
  color: var(--tx); margin-bottom: 22px !important; letter-spacing: -.2px;
}

/* Photo section */
.hcp-photo-section {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  border: 1.5px solid #c7d2fe; border-radius: 14px;
  padding: 20px 22px; margin-bottom: 24px;
}
.hcp-photo-avatar-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; overflow: hidden; cursor: pointer; }
.hcp-photo-avatar-img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(67,56,202,.2); }
.hcp-photo-avatar-initials { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--c0), var(--cp)); color: #fff; font-size: 28px; font-weight: 900; font-family: var(--fd); display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(67,56,202,.2); user-select: none; }
.hcp-photo-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; color: transparent; }
.hcp-photo-avatar-wrap:hover .hcp-photo-overlay { background: rgba(0,0,0,.5); color: #fff; }
.hcp-photo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; justify-content: center; }
.hcp-photo-name { font-size: 17px; font-weight: 800; font-family: var(--fd); color: var(--tx); margin: 0 0 4px 0 !important; padding: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.hcp-photo-hint { font-size: 12px; color: var(--ts); margin: 0 0 12px 0 !important; padding: 0 !important; line-height: 1.4; }
.hcp-photo-upload-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: var(--wh); border: 1.5px solid var(--bd2); border-radius: var(--r3); font-size: 13px; font-weight: 600; font-family: var(--f); color: var(--tx); cursor: pointer; transition: all .15s; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: fit-content; }
.hcp-photo-upload-btn:hover { border-color: var(--c0); color: var(--c0); background: var(--c0l); }

/* Profile form fields */
.hcp-profile-card .hcp-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.hcp-profile-card .hcp-two-cols .hcp-field { margin-bottom: 0; }
.hcp-profile-card .hcp-field { margin-bottom: 18px; }
.hcp-profile-card .hcp-field label { display: block; font-size: 13px; font-weight: 600; color: var(--tx); margin-bottom: 7px; }
.hcp-profile-card .hcp-submit-btn { margin-top: 6px; width: auto; display: inline-flex; padding: 12px 30px; font-size: 14px; border-radius: var(--r2); }

.hcp-textarea { width: 100%; border: 1.5px solid var(--bd); border-radius: var(--r3); padding: 11px 14px; font-size: 13px; font-family: var(--f); color: var(--tx); resize: vertical; outline: none; background: var(--bg); }
.hcp-textarea:focus { border-color: var(--c0); box-shadow: 0 0 0 3px rgba(67,56,202,.1); background: var(--wh); }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.hcp-modal-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(30,27,75,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.hcp-modal { background: var(--wh); border-radius: var(--r); padding: 30px 28px 26px; max-width: 400px; width: 92%; box-shadow: var(--sh2); animation: hcpPop .22s ease; }
.hcp-modal-icon { font-size: 44px; text-align: center; margin-bottom: 14px; }
.hcp-modal h3 { font-size: 20px; font-weight: 800; font-family: var(--fd); margin-bottom: 8px; text-align: center; }
.hcp-modal #hcp-modal-ref { font-size: 13px; color: var(--ts); text-align: center; margin-bottom: 18px; }
.hcp-modal label { font-size: 12px; font-weight: 700; display: block; margin-bottom: 5px; color: var(--ts); text-transform: uppercase; letter-spacing: .04em; }
.hcp-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.hcp-btn-outline { flex: 1; padding: 12px; background: none; border: 1.5px solid var(--bd); border-radius: var(--r3); font-size: 14px; font-weight: 600; font-family: var(--f); color: var(--ts); cursor: pointer; transition: all .15s; }
.hcp-btn-outline:hover { border-color: var(--tx); color: var(--tx); }
.hcp-btn-danger { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--cr); color: #fff; border: none; border-radius: var(--r3); font-size: 14px; font-weight: 700; font-family: var(--fd); cursor: pointer; transition: background .15s; }
.hcp-btn-danger:hover { background: #b91c1c; }
.hcp-btn-danger:disabled { opacity: .6; cursor: not-allowed; }
@keyframes hcpPop { from { opacity: 0; transform: scale(.93) translateY(8px); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════
   CONTINUE BOOKING MODAL
════════════════════════════════════════ */
.hcp-continue-modal-inner { position: relative; max-width: 520px; width: 96%; padding: 28px 28px 24px; max-height: 92vh; overflow-y: auto; border-radius: var(--r); background: var(--wh); box-shadow: var(--sh2); animation: hcpPop .22s ease; }
.hcp-modal-close-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1.5px solid var(--bd); background: var(--bg); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ts); transition: all .15s; z-index: 10; }
.hcp-modal-close-x:hover { border-color: var(--cr); background: var(--crl); color: var(--cr); }
.hcp-continue-progress { display: flex; align-items: center; justify-content: center; padding-right: 40px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--bd); }
.hcp-continue-step { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ts); flex-shrink: 0; }
.hcp-continue-step-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bd); background: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: var(--fd); color: var(--ts); transition: all .22s; }
.hcp-continue-step.active .hcp-continue-step-dot { background: var(--c0); border-color: var(--c0); color: #fff; box-shadow: 0 0 0 3px rgba(67,56,202,.18); }
.hcp-continue-step.done   .hcp-continue-step-dot { background: var(--cg); border-color: var(--cg); color: #fff; }
.hcp-continue-step.active span { color: var(--c0); font-weight: 700; }
.hcp-continue-step.done   span { color: var(--cg); font-weight: 700; }
.hcp-continue-step-line { flex: 1; height: 2px; min-width: 36px; max-width: 90px; background: var(--bd); margin: 0 6px 18px; border-radius: 2px; transition: background .3s; }
.hcp-continue-pane h3 { font-size: 20px; font-weight: 800; font-family: var(--fd); color: var(--tx); margin-bottom: 4px; }
.hcp-continue-sub { display: block; font-size: 13px; color: var(--ts); margin-bottom: 18px; }
.hcp-continue-summary { border: 1.5px solid var(--bd); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.hcp-cs-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--bd); gap: 12px; }
.hcp-cs-row:last-child { border-bottom: none; }
.hcp-cs-row > span   { color: var(--ts); white-space: nowrap; }
.hcp-cs-row > strong { font-weight: 600; color: var(--tx); text-align: right; }
.hcp-cs-total { background: var(--c0l); }
.hcp-cs-total > span   { font-size: 15px; font-weight: 700; color: var(--tx); }
.hcp-cs-total > strong { font-size: 18px; font-weight: 900; color: var(--c0); font-family: var(--fd); }
.hcp-continue-pane .hcp-field { margin-bottom: 14px; }
.hcp-continue-pane .hcp-field label { display: block; font-size: 11px; font-weight: 700; color: var(--ts); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.hcp-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hcp-payment-amount-box { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--c0), var(--cp)); color: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.hcp-payment-amount-box span   { font-size: 13px; opacity: .85; }
.hcp-payment-amount-box strong { font-size: 24px; font-weight: 900; font-family: var(--fd); letter-spacing: -.5px; }
.hcp-gw-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hcp-gw-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--bd); border-radius: 12px; cursor: pointer; transition: all .15s; user-select: none; }
.hcp-gw-option:hover     { border-color: #a5b4fc; background: var(--c0l); }
.hcp-gw-option.is-active { border-color: var(--c0); background: var(--c0l); }
.hcp-gw-radio  { display: none; }
.hcp-gw-icon   { font-size: 20px; flex-shrink: 0; }
.hcp-gw-label  { flex: 1; font-size: 14px; font-weight: 600; color: var(--tx); }
.hcp-gw-tick   { color: var(--c0); display: none; }
.hcp-gw-option.is-active .hcp-gw-tick { display: flex; }
.hcp-gw-info-box { background: var(--cgl); border: 1px solid #bbf7d0; border-radius: var(--r3); padding: 12px 15px; font-size: 13px; color: #166534; line-height: 1.6; margin-bottom: 10px; }
.hcp-secure-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ts); margin-bottom: 14px; }
#hcp-cb-pay-msg { padding: 10px 14px; border-radius: var(--r3); font-size: 13px; font-weight: 500; margin-bottom: 12px; }
#hcp-cb-pay-msg.err { background: var(--crl); border: 1px solid #fca5a5; color: #991b1b; }
#hcp-cb-pay-msg.ok  { background: var(--cgl); border: 1px solid #6ee7b7; color: #065f46; }
.hcp-modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.hcp-modal-actions .hcp-btn-outline { padding: 11px 18px; min-width: 90px; white-space: nowrap; }
.hcp-modal-actions .hcp-submit-btn  { flex: 1; margin: 0 !important; font-size: 14px; }

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
#hcp-toast { position: fixed; bottom: 26px; right: 26px; z-index: 99998; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; font-family: var(--f); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.2); max-width: 360px; animation: hcpPop .25s ease; }
#hcp-toast.ok  { background: var(--cg); }
#hcp-toast.err { background: var(--cr); }

/* ════════════════════════════════════════
   REFUND STATUS STRIP (on cancelled cards)
════════════════════════════════════════ */
.hcp-refund-strip {
  display: flex; align-items: center; gap: 8px;
  border-radius: 8px; padding: 8px 12px; margin-top: 10px;
  font-size: 12px; font-weight: 600; border: 1px solid;
}
.hcp-rs--full    { background: #dcfce7; border-color: #86efac; color: #166534; }
.hcp-rs--partial { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.hcp-rs--none    { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
/* New dynamic status variants */
.hcp-rs--refunded { background: #dcfce7; border-color: #4ade80; color: #15803d; }
.hcp-rs--failed   { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.hcp-rs--manual   { background: #ede9fe; border-color: #a78bfa; color: #4c1d95; }
.hcp-rs-icon     { display: flex; align-items: center; flex-shrink: 0; }
.hcp-rs-label    { flex: 1; }
.hcp-rs-ref      { font-weight: 400; font-size: 10px; opacity: .7; margin-left: 4px; }
.hcp-rs-status   {
  font-size: 10px; font-weight: 700; font-family: var(--fd);
  padding: 2px 9px; border-radius: 20px; letter-spacing: .03em;
  background: rgba(0,0,0,.08); flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
/* Badge color overrides by status */
.hcp-rs-badge--refunded  { background: #16a34a; color: #fff; }
.hcp-rs-badge--processing{ background: rgba(0,0,0,.12); color: inherit; }
.hcp-rs-badge--failed    { background: #ea580c; color: #fff; }
.hcp-rs-badge--manual    { background: #7c3aed; color: #fff; }
/* Spinner hidden — status shown as text only */
.hcp-rs-spinner { display: none !important; }
.hcp-rs-error-tip { cursor: help; opacity: .6; display: flex; align-items: center; flex-shrink: 0; }
@keyframes hcpSpin { to { transform: rotate(360deg); } }
.hcp-cancel-modal-inner { max-width: 480px; width: 96%; }

/* Refund banner */
.hcp-refund-banner {
  border-radius: 10px; padding: 12px 16px; font-size: 13px; font-weight: 600;
  margin-bottom: 14px; line-height: 1.5; display: none;
}
.hcp-rb--green   { background: #dcfce7; border: 1.5px solid #86efac; color: #166534; }
.hcp-rb--yellow  { background: #fef9c3; border: 1.5px solid #fde047; color: #854d0e; }
.hcp-rb--orange  { background: #ffedd5; border: 1.5px solid #fdba74; color: #9a3412; }
.hcp-rb--red     { background: #fee2e2; border: 1.5px solid #fca5a5; color: #991b1b; }
.hcp-rb--blocked { background: #f1f5f9; border: 1.5px solid #cbd5e1; color: #475569; }
.hcp-rb--loading { background: #f8fafc; border: 1.5px dashed #cbd5e1; color: #94a3b8; animation: hcpPulse 1.2s ease-in-out infinite; }
@keyframes hcpPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Policy timeline */
.hcp-refund-policy { background: var(--bg); border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; margin-bottom: 2px; }
.hcp-rp-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ts); padding: 10px 14px 8px; border-bottom: 1px solid var(--bd); }
.hcp-rp-rows { display: flex; flex-direction: column; }
.hcp-rp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--bd);
  transition: background .15s; position: relative;
}
.hcp-rp-row:last-child { border-bottom: none; }
.hcp-rp-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--bd); background: var(--bg);
  transition: all .2s;
}
.hcp-rp-row--full    .hcp-rp-dot { border-color: var(--cg); background: var(--cg); }
.hcp-rp-row--partial .hcp-rp-dot { border-color: #f59e0b; background: #f59e0b; }
.hcp-rp-row--partial2 .hcp-rp-dot { border-color: #f97316; background: #f97316; }
.hcp-rp-row--none    .hcp-rp-dot { border-color: var(--cr); background: var(--cr); }
.hcp-rp-row--blocked .hcp-rp-dot { border-color: #94a3b8; background: #94a3b8; }
.hcp-rp-info { flex: 1; min-width: 0; }
.hcp-rp-info strong { display: block; font-size: 12px; font-weight: 700; color: var(--tx); line-height: 1.3; }
.hcp-rp-info span   { display: block; font-size: 11px; color: var(--ts); line-height: 1.3; }
.hcp-rp-badge { font-size: 10px; font-weight: 700; font-family: var(--fd); padding: 2px 9px; border-radius: 20px; flex-shrink: 0; letter-spacing: .03em; }
.hcp-rp-badge--green  { background: #dcfce7; color: #166534; }
.hcp-rp-badge--yellow { background: #fef9c3; color: #854d0e; }
.hcp-rp-badge--orange { background: #ffedd5; color: #9a3412; }
.hcp-rp-badge--red    { background: #fee2e2; color: #991b1b; }
.hcp-rp-badge--gray   { background: #f1f5f9; color: #64748b; }

/* Active policy row highlight */
.hcp-rp-row.hcp-rp-active {
  background: var(--wh);
  box-shadow: inset 3px 0 0 var(--c0);
}
.hcp-rp-row--full.hcp-rp-active    { box-shadow: inset 3px 0 0 var(--cg); }
.hcp-rp-row--partial.hcp-rp-active { box-shadow: inset 3px 0 0 #f59e0b; }
.hcp-rp-row--partial2.hcp-rp-active{ box-shadow: inset 3px 0 0 #f97316; }
.hcp-rp-row--none.hcp-rp-active    { box-shadow: inset 3px 0 0 var(--cr); }
.hcp-rp-row--blocked.hcp-rp-active { box-shadow: inset 3px 0 0 #94a3b8; background: #f8fafc; }

/* Blocked confirm button */
.hcp-btn-danger.hcp-btn-blocked { background: #94a3b8 !important; cursor: not-allowed; opacity: .7; }
.hcp-btn-danger.hcp-btn-blocked:hover { background: #94a3b8 !important; }
@keyframes hcpFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hcp-dash-head      { animation: hcpFadeUp .35s ease both; }
.hcp-stat-row       { animation: hcpFadeUp .4s ease .05s both; }
.hcp-tab-nav        { animation: hcpFadeUp .4s ease .1s both; }
.hcp-tab-body       { animation: hcpFadeUp .4s ease .15s both; }
.hcp-booking-item   { animation: hcpFadeUp .35s ease both; }
.hcp-booking-item:nth-child(2) { animation-delay: .06s; }
.hcp-booking-item:nth-child(3) { animation-delay: .12s; }
.hcp-booking-item:nth-child(4) { animation-delay: .18s; }
.hcp-profile-card   { animation: hcpFadeUp .4s ease both; }
.hcp-auth-box       { animation: hcpFadeUp .4s ease both; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 640px) {
  .hcp-auth-form         { padding: 22px 18px; }
  .hcp-two-cols          { grid-template-columns: 1fr; }
  .hcp-stat-row          { grid-template-columns: 1fr 1fr; }
  .hcp-stat-row .hcp-stat-card:last-child { grid-column: 1/-1; }
  .hcp-bk-top            { flex-direction: column; }
  .hcp-bk-img-panel      { width: 100%; height: 170px; }
  .hcp-bk-img-placeholder{ min-height: 170px; }
  .hcp-bk-dates          { flex-direction: column; }
  .hcp-bk-date-sep       { flex-direction: row; min-width: auto; padding: 6px 18px; }
  .hcp-bk-sep-line       { position: static; height: 1px; flex: 1; transform: none; }
  .hcp-bk-meta           { gap: 6px; }
  .hcp-dash-head         { padding: 16px 18px; }
  .hcp-profile-card      { padding: 20px 18px; }
  .hcp-photo-section     { flex-direction: column; text-align: center; }
  .hcp-profile-card .hcp-two-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hcp-continue-modal-inner { padding: 20px 16px 18px; }
  .hcp-continue-step-line   { min-width: 22px; }
  .hcp-cs-row               { padding: 10px 13px; }
  .hcp-modal-actions        { flex-direction: column; }
  .hcp-modal-actions .hcp-btn-outline { min-width: 100%; }
}
@media (max-width: 400px) {
  .hcp-stat-row { grid-template-columns: 1fr; }
  .hcp-stat-row .hcp-stat-card:last-child { grid-column: auto; }
}

/* ════ PAYMENT METHOD TAG — absolute top-right of content panel ══ */
.hcp-bk-content { position: relative; }

.hcp-pay-tag {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  line-height: 1.4;
}
.hcp-pay-tag-icon { font-size: 13px; line-height: 1; display: inline-block; }
/* Online payment colours */
.hcp-pm--card     { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.hcp-pm--razorpay { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; }
.hcp-pm--bank     { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.hcp-pm--paypal   { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.hcp-pm--upi      { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
/* Pay on Arrive colour */
.hcp-pm--cash     { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }

/* Ensure title doesn't go under the tag */
.hcp-bk-title { display: flex; flex-direction: column; gap: 4px; padding-right: 140px; }

/* ════ CANCEL MODAL — remove loader from button ════════════════ */
#hcp-modal-confirm .hcp-loader { display: none !important; }

/* ════════ REFUND SUMMARY BOX (cancel modal) ════════ */
.hcp-refund-summary-box {
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  padding: 0;
  margin: 14px 0 4px;
  overflow: hidden;
  transition: border-color .2s;
}
.hcp-refund-summary-box.hcp-rsb--green   { border-color: #34d399; background: #f0fdf4; }
.hcp-refund-summary-box.hcp-rsb--yellow  { border-color: #fbbf24; background: #fefce8; }
.hcp-refund-summary-box.hcp-rsb--orange  { border-color: #f97316; background: #fff7ed; }
.hcp-refund-summary-box.hcp-rsb--red     { border-color: #f87171; background: #fef2f2; }
.hcp-refund-summary-box.hcp-rsb--blocked { border-color: #d1d5db; background: #f9fafb; }

.hcp-rsb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  gap: 12px;
}
.hcp-rsb-row:last-child { border-bottom: none; }
.hcp-rsb-row--note { justify-content: flex-start; }

.hcp-rsb-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.hcp-rsb-val {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.hcp-rsb-refund {
  font-size: 16px;
  font-weight: 800;
}
.hcp-rsb-note {
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
}
/* Hide note row when empty */
#hcp-rsb-note-row:empty,
#hcp-rsb-note:empty { display: none; }

/* ── Tab panel fade transitions ─────────────────────────────── */
.hcp-tab-panel { animation: hcpTabIn .18s ease; }
@keyframes hcpTabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Assigned Room Number badge ── */
.hcp-bk-room-no {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border: 1.5px solid #c4b5fd;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.hcp-bk-room-no svg { color: #7c3aed; flex-shrink: 0; }
.hcp-bk-room-no strong { font-weight: 800; color: #4c1d95; }