/* =====================================================
   TravelEngine — User Dashboard
   ===================================================== */

/* ── Variables (inherits from main CSS) ── */
:root {
  --d-surface:  var(--te-surface, #fff);
  --d-bg:       var(--te-bg,      #F4F6FA);
  --d-border:   var(--te-border,  #E2E8F0);
  --d-text:     var(--te-text,    #0F172A);
  --d-muted:    var(--te-muted,   #64748B);
  --d-trek:     var(--te-trek,    #E8401B);
  --d-hotel:    var(--te-hotel,   #1B4FE8);
  --d-green:    var(--te-green,   #059669);
  --d-radius:   var(--r-lg,       16px);
  --d-shadow:   0 2px 16px rgba(0,0,0,.07);
}

/* ─── LAYOUT ─── */
/* Inherit the theme's active font (set via Customizer → Typography).
   This ensures the dashboard always matches the rest of the site. */
.te-dash,
.te-dash-login-wrap,
.te-dash * {
  font-family: inherit;
}
.te-dash { max-width:1100px; margin:0 auto; padding:0 16px 64px; }

/* ─── LOGIN SCREEN ─── */
.te-dash-login-wrap {
  min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px;
  background: var(--d-bg);
}

.te-dash-login-card {
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: 0 4px 32px rgba(0,0,0,.09);
  max-width: 420px; width: 100%;
  overflow: hidden;
}
/* Same gradient accent bar used on trek/hotel cards */
.te-dash-login-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--d-trek) 0%, var(--d-hotel) 100%);
}
.te-dash-login-card-inner { padding: 36px 36px 30px; text-align: center; }

.te-dash-login-brand  { margin-bottom: 18px; }
.te-dash-brand-logo   { max-height: 44px; max-width: 150px; object-fit: contain; }
.te-dash-brand-name   { font-size: 20px; font-weight: 900; color: var(--d-text); letter-spacing: -.02em; }

.te-dash-login-card h1 {
  font-size: clamp(17px,3vw,22px); font-weight: 800;
  margin: 0 0 8px; color: var(--d-text); letter-spacing: -.02em;
}
.te-dash-login-sub { color: var(--d-muted); font-size: 14px; margin: 0 0 24px; line-height: 1.55; }

/*
 * Google button — uses .te-btn .te-btn--trek .te-btn--block .te-btn--lg from main.css.
 * That gives it the EXACT same background, hover, shadow and font as every other
 * primary CTA on the site (trek booking buttons, hotel booking buttons, etc.).
 * The rules below only handle layout and the Google icon badge.
 */
.te-dash-google-btn {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 11px !important;
  text-decoration: none !important;
  /* All color/radius/font/hover from .te-btn--trek in main.css */
}
/* White circle behind the Google G so it reads on any brand color */
.te-dash-google-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
}

.te-dash-login-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--d-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 18px 0;
}
.te-dash-login-divider::before,
.te-dash-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--d-border); }

.te-dash-login-terms { font-size: 12px; color: var(--d-muted); margin-top: 16px; }
.te-dash-login-terms a { color: var(--d-trek); text-decoration: underline; }

/* ─── ALERT ─── */
.te-dash-alert { display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:16px; }
.te-dash-alert--err  { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.te-dash-alert--warn { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
.te-dash-alert--ok   { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }

/* ─── TOPBAR ─── */
.te-dash-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 0 20px; border-bottom:1px solid var(--d-border); margin-bottom:28px; flex-wrap:wrap; }
.te-dash-user   { display:flex; align-items:center; gap:12px; }
.te-dash-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--d-border); flex-shrink:0; }
.te-dash-greeting { display:block; font-size:16px; font-weight:700; color:var(--d-text); }
.te-dash-email    { display:block; font-size:12.5px; color:var(--d-muted); }
.te-dash-logout { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--d-muted); text-decoration:none; padding:7px 14px; border:1.5px solid var(--d-border); border-radius:8px; transition:color .15s,border-color .15s; }
.te-dash-logout:hover { color:var(--d-trek); border-color:var(--d-trek); }

/* ─── STATS ─── */
.te-dash-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:28px; }
.te-dash-stat  { background:var(--d-surface); border:1px solid var(--d-border); border-radius:var(--d-radius); padding:18px 20px; }
.te-dash-stat-n { display:block; font-size:28px; font-weight:900; color:var(--d-text); line-height:1; margin-bottom:4px; }
.te-dash-stat-l { display:block; font-size:12px; color:var(--d-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.te-c-green  { color:var(--d-green)  !important; }
.te-c-orange { color:var(--d-trek)   !important; }
.te-c-blue   { color:var(--d-hotel)  !important; }
.te-c-red    { color:#EF4444         !important; }

/* ─── TABS ─── */
.te-dash-tabs { display:flex; gap:0; border-bottom:2px solid var(--d-border); overflow-x:auto; scrollbar-width:none; margin-bottom:24px; }
.te-dash-tabs::-webkit-scrollbar { display:none; }
.te-dash-tab  { display:inline-flex; align-items:center; gap:6px; padding:12px 16px; font-size:13.5px; font-weight:700; color:var(--d-muted); background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s; }
.te-dash-tab:hover { color:var(--d-text); }
.te-dash-tab.is-active { color:var(--d-trek); border-bottom-color:var(--d-trek); }
.te-dash-badge { background:var(--d-hotel); color:#fff; font-size:11px; font-weight:800; padding:2px 7px; border-radius:20px; min-width:20px; text-align:center; }
.te-dash-badge--red { background:#EF4444; }

/* ─── PANELS ─── */
.te-dash-panel { display:none; }
.te-dash-panel.is-active { display:block; }
.te-dash-section-head { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--d-muted); margin-bottom:16px; }

/* ─── EMPTY STATE ─── */
.te-dash-empty { text-align:center; padding:56px 24px; color:var(--d-muted); }
.te-dash-empty svg { opacity:.3; margin-bottom:14px; }
.te-dash-empty p { font-size:15px; margin:0 0 4px; }

/* ─── BOOKING CARDS ─── */
.te-dash-list { display:flex; flex-direction:column; gap:12px; }
.te-dash-card { display:grid; grid-template-columns:80px 1fr auto; gap:0; background:var(--d-surface); border:1px solid var(--d-border); border-radius:var(--d-radius); overflow:hidden; transition:box-shadow .15s; }
.te-dash-card:hover { box-shadow:var(--d-shadow); }
.te-dash-card-thumb { position:relative; aspect-ratio:1/1; background:var(--d-bg); }
.te-dash-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.te-dash-card-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--d-bg); color:var(--d-muted); }
.te-dash-type-badge { position:absolute; top:6px; left:6px; font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; color:#fff; text-transform:uppercase; }
.te-dash-type-badge--trek  { background:var(--d-trek); }
.te-dash-type-badge--hotel { background:var(--d-hotel); }
.te-dash-card-body { padding:14px 16px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.te-dash-card-title { font-size:15px; font-weight:700; color:var(--d-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.te-dash-card-meta  { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--d-muted); }
.te-dash-card-meta span { display:inline-flex; align-items:center; gap:4px; }
.te-dash-ref { font-family:monospace; }
.te-dash-card-foot  { display:flex; align-items:center; gap:10px; margin-top:2px; }
.te-dash-card-amt   { font-size:15px; font-weight:800; color:var(--d-text); margin-left:auto; }
.te-dash-card-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding:14px 12px; border-left:1px solid var(--d-border); justify-content:center; }

/* ─── STATUS BADGES ─── */
.te-dash-status { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.te-dash-status--green  { background:#D1FAE5; color:#065F46; }
.te-dash-status--yellow { background:#FEF3C7; color:#92400E; }
.te-dash-status--blue   { background:#DBEAFE; color:#1E40AF; }
.te-dash-status--red    { background:#FEE2E2; color:#991B1B; }
.te-dash-status--gray   { background:#F1F5F9; color:#475569; }
.te-dash-refund-badge   { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; margin-top:3px; }
.te-dash-refund-badge--pending  { background:#FEF3C7; color:#92400E; }
.te-dash-refund-badge--approved { background:#D1FAE5; color:#065F46; }
.te-dash-refund-badge--rejected { background:#FEE2E2; color:#991B1B; }
.te-dash-refund-badge--paid     { background:#D1FAE5; color:#065F46; border:1px solid #6EE7B7; }

/* ─── CANCELLATIONS LIST ─── */
.te-dash-cancel-list { display:flex; flex-direction:column; gap:10px; }
.te-dash-cxl-row { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; background:var(--d-surface); border:1px solid var(--d-border); border-radius:12px; padding:14px 18px; flex-wrap:wrap; }
.te-dash-cxl-name { display:block; font-size:15px; font-weight:700; color:var(--d-text); }
.te-dash-cxl-meta { display:block; font-size:12px; color:var(--d-muted); margin-top:2px; }
.te-dash-cxl-amounts { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--d-muted); text-align:right; }
.te-dash-cxl-right { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }

/* ─── PROFILE ─── */
.te-dash-profile { background:var(--d-surface); border:1px solid var(--d-border); border-radius:var(--d-radius); padding:28px; }
.te-dash-profile-head { display:flex; align-items:center; gap:18px; margin-bottom:28px; flex-wrap:wrap; }
.te-dash-profile-av { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid var(--d-border); flex-shrink:0; }
.te-dash-profile-dn { font-size:20px; font-weight:800; color:var(--d-text); }
.te-dash-profile-em { font-size:13px; color:var(--d-muted); margin-top:2px; }
.te-dash-profile-provider { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--d-muted); margin-top:6px; }
.te-dash-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.te-form-hint { font-size:12px; color:var(--d-muted); margin:4px 0 0; }

/* ─── BUTTONS (extend theme) ─── */
.te-dash-btn-danger { background:#EF4444; color:#fff; border-color:#EF4444; }
.te-dash-btn-danger:hover { background:#DC2626; border-color:#DC2626; }
.te-dash-btn-danger-outline { background:transparent; color:#EF4444; border:1.5px solid #EF4444; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s; }
.te-dash-btn-danger-outline:hover { background:#FEE2E2; }

/* ─── MODAL ─── */
.te-dash-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.te-dash-modal-overlay[hidden] { display:none; }
.te-dash-modal { background:var(--d-surface); border-radius:var(--d-radius); padding:36px 32px 28px; max-width:420px; width:100%; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.22); text-align:center; }
.te-dash-modal-x { position:absolute; top:14px; right:14px; background:none; border:none; cursor:pointer; color:var(--d-muted); padding:4px; line-height:1; border-radius:6px; transition:color .15s; }
.te-dash-modal-x:hover { color:var(--d-text); }
.te-dash-modal-icon { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.te-dash-modal-icon--warn { background:#FEF3C7; color:#F59E0B; }
.te-dash-modal-h { font-size:20px; font-weight:800; margin:0 0 10px; color:var(--d-text); }
.te-dash-modal-body { font-size:14px; color:var(--d-muted); margin:0 0 24px; line-height:1.6; }
.te-dash-modal-actions { display:flex; gap:10px; justify-content:center; }

/* ─── SPINNER ─── */
.te-spin { animation:te-spin .7s linear infinite; }
@keyframes te-spin { to { transform:rotate(360deg); } }

/* ─── TOAST ─── */
.te-dash-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#0F172A; color:#fff; font-size:14px; font-weight:600; padding:12px 24px; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.22); z-index:20000; max-width:380px; text-align:center; transition:opacity .3s; }
.te-dash-toast.te-toast-ok  { background:#059669; }
.te-dash-toast.te-toast-err { background:#DC2626; }
.te-dash-toast[hidden] { display:none; }

/* ─── RESPONSIVE ─── */
@media(max-width:680px) {
  .te-dash-login-card-inner { padding:28px 20px 24px; }
  .te-dash-card { grid-template-columns:64px 1fr; }
  .te-dash-card-actions { grid-column:1/-1; flex-direction:row; padding:10px 14px 14px; border-left:none; border-top:1px solid var(--d-border); justify-content:flex-end; }
  .te-dash-stats { grid-template-columns:1fr 1fr; }
  .te-dash-form-2col { grid-template-columns:1fr; }
  .te-dash-cxl-row { grid-template-columns:1fr; }
  .te-dash-cxl-amounts,.te-dash-cxl-right { align-items:flex-start; text-align:left; }
  .te-dash-modal { padding:28px 20px 22px; }
  .te-dash-modal-actions { flex-direction:column-reverse; }
  .te-dash-modal-actions .te-btn { width:100%; justify-content:center; }
}
@media(max-width:380px) {
  .te-dash-tab { padding:10px 10px; font-size:12px; gap:4px; }
  .te-dash-stats { grid-template-columns:1fr 1fr; gap:8px; }
  .te-dash-stat-n { font-size:22px; }
}

/* ─── BOOKING ITEM WRAPPER (card + note stacked) ─── */
.te-dash-booking-item {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ─── CANCELLATION SUPPORT NOTE ─── */
.te-dash-cancel-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 6px 0 0;
  padding: 9px 12px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 8px;
  color: #0369A1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
.te-dash-cancel-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #0284C7;
}
@media(max-width:680px) {
  .te-dash-cancel-note {
    font-size: 11.5px;
  }
}

/* ══════════════════════════════════════════════════════════
   FIND & CLAIM BOOKING — section in Overview tab
   ══════════════════════════════════════════════════════════ */

/* Collapsible toggle button */
.te-claim-wrap {
  border-top: 1px dashed var(--d-border);
  padding-top: 20px;
}

.te-claim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-muted);
  transition: color .15s;
  font-family: inherit;
}
.te-claim-toggle:hover { color: var(--d-text); }
.te-claim-toggle svg:first-child { color: var(--d-trek); flex-shrink:0; }

.te-claim-chevron {
  margin-left: auto;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.te-claim-toggle[aria-expanded="true"] .te-claim-chevron {
  transform: rotate(180deg);
}

/* Form card */
.te-claim-form-box {
  margin-top: 14px;
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.te-claim-intro {
  font-size: 13.5px;
  color: var(--d-muted);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* Fields row */
.te-claim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 560px) {
  .te-claim-fields { grid-template-columns: 1fr; }
}

.te-claim-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--d-muted);
  margin-bottom: 6px;
}

.te-claim-field .te-form-input {
  width: 100%;
}

/* Success panel */
.te-claim-success {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  background: #D1FAE5;
  border: 1px solid #6EE7B7;
  border-radius: 10px;
  font-size: 13.5px;
}
.te-claim-success svg {
  color: var(--d-green, #059669);
  flex-shrink: 0;
  width: 22px; height: 22px;
}
.te-claim-success > div {
  flex: 1;
  min-width: 0;
}
.te-claim-success strong {
  display: block;
  color: #065F46;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.te-claim-success span {
  color: #047857;
  font-size: 12.5px;
}
.te-claim-success .te-btn {
  flex-shrink: 0;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .te-claim-form-box {
    background: var(--d-surface);
    border-color: var(--d-border);
  }
  .te-claim-success {
    background: rgba(5,150,105,.15);
    border-color: rgba(5,150,105,.3);
  }
  .te-claim-success strong { color: #6EE7B7; }
  .te-claim-success span   { color: #34D399; }
}