/* ===========================================================================
   account-center.css - the Account Center's styling, for pages without main.css
   ===========================================================================
   These rules are main.css's. index.html and flights.html load main.css and get
   them there, so THEY DO NOT LOAD THIS FILE - it exists for the six service
   pages (hotels, packages, cruises, visa, activities, my-bookings), which wear
   service-page.css instead and so had no styling for the modal at all. Without
   it the overlay opened as an unstyled block in the document flow: the "open"
   class was set and nothing appeared on screen.

   service-page.css already aliases --navy/--muted/--line/--coral/--coral-dark/
   --gold onto its own --sp-* palette, so only two values are missing here.
   --gold-dark is one of them because main.css USES it without ever defining it;
   supplying it makes one icon correct on these pages that is not on the landing
   page, which is the right way round.
   =========================================================================== */
:root {
  --gold-dark: #8A5A00;
  --shadow-lg: 0 30px 70px -20px rgba(10, 37, 64, .35);
}

#detailsModalOverlay .modal-card {max-width:480px;}
/* ---------- AUTH MODAL ---------- */
.modal-overlay {
  position:fixed; inset:0; z-index:300; background:rgba(10,37,64,0.6); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open {display:flex;}
.modal-card {
  background:#fff; border-radius:24px; box-shadow:var(--shadow-lg); padding:40px;
  width:100%; max-width:420px; max-height:90vh; overflow-y:auto; position:relative;
}
.modal-close {
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  background:rgba(10,37,64,0.06); display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:20px; line-height:1; transition:background .2s ease;
}
.modal-close:hover {background:rgba(10,37,64,0.12);}
.modal-card h2 {font-size:25px; font-weight:800;}
/* ---------- ACCOUNT CENTER MODAL ---------- */
#accountModalOverlay .modal-card {max-width:960px; padding:0; max-height:88vh; display:flex; flex-direction:column;}
.acct-header {display:flex; align-items:center; gap:16px; padding:24px 30px; border-bottom:1px solid var(--line); flex-shrink:0;}
.acct-header-avatar {width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--gold), var(--coral)); color:var(--on-accent, #12253F); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; flex-shrink:0; object-fit:cover;}
.acct-header-info {min-width:0; flex:1;}
.acct-header-name {font-size:18px; font-weight:800; color:var(--navy);}
.acct-header-email {font-size:13px; color:var(--muted); margin-top:2px;}
.acct-body {display:flex; flex:1; min-height:0; overflow:hidden;}
.acct-tabs {width:220px; flex-shrink:0; border-right:1px solid var(--line); padding:16px 10px; overflow-y:auto;}
.acct-tab {display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:12px; font-size:13.5px; font-weight:700; color:var(--muted); margin-bottom:3px; transition:background .15s ease, color .15s ease;}
.acct-tab:hover {background:rgba(10,37,64,0.05); color:var(--navy);}
.acct-tab.active {background:var(--navy); color:#fff;}
.acct-tab .dd-icon {width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.acct-panels {flex:1; min-width:0; overflow-y:auto; padding:26px 32px;}
.acct-panel {display:none;}
.acct-panel.active {display:block;}
.acct-panel h2 {font-size:17px; margin-bottom:18px;}
#accountModalOverlay .modal-card {max-width:100%; height:92vh; max-height:92vh;}
.acct-body {flex-direction:column;}
.acct-tabs {width:100%; display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:10px;}
.acct-tab {white-space:nowrap; margin-bottom:0;}
.acct-panels {padding:20px;}
.acct-row {display:flex; align-items:center; gap:16px; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--line); margin-bottom:12px; flex-wrap:wrap;}
.acct-row .ar-icon {width:44px; height:44px; border-radius:12px; background:rgba(255,176,32,0.14); color:var(--gold-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.acct-row .ar-main {flex:1; min-width:160px;}
.acct-row .ar-title {font-weight:700; font-size:14px; text-transform:capitalize;}
.acct-row .ar-sub {font-size:12.5px; color:var(--muted); margin-top:3px;}
.acct-row .ar-amount {font-weight:800; color:var(--navy); font-size:14.5px; white-space:nowrap;}
.acct-form-field {margin-bottom:16px; max-width:420px;}
.acct-form-field label {display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); margin-bottom:6px;}
.acct-form-field input, .acct-form-field select {
  width:100%; padding:12px 15px; border-radius:12px; border:1.5px solid var(--line); font-size:14px; color:var(--navy); outline:none; transition:border-color .2s ease;
}
.acct-form-field input:focus, .acct-form-field select:focus {border-color:var(--coral);}
.acct-form-grid {display:grid; grid-template-columns:1fr 1fr; gap:0 16px; max-width:620px;}
.acct-msg {margin-top:12px; font-size:13px; font-weight:600;}
.acct-msg.error {color:var(--coral-dark);}
.acct-star-input {display:flex; gap:6px; margin-bottom:16px; font-size:22px; color:var(--line);}
.acct-star-input span {cursor:pointer; transition:color .15s ease;}
.acct-star-input span.active {color:var(--gold);}
.acct-table {width:100%; border-collapse:collapse; font-size:13.5px;}
.acct-table th {text-align:left; padding:10px 12px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--line);}
.acct-table td {padding:12px; border-bottom:1px solid var(--line);}
.acct-table tr:last-child td {border-bottom:none;}
.acct-table-wrap {overflow-x:auto;}
.acct-empty {color:var(--muted); font-size:13px; padding:18px 0; text-align:center;}
.acct-notif-item {padding:12px; border-radius:12px; background:#fff; border:1px solid var(--line); margin-bottom:10px;}
.acct-notif-item.unread {border-color:rgba(255,176,32,0.4); background:rgba(255,176,32,0.05);}
.acct-notif-item .nt {font-size:13.5px; font-weight:700; color:var(--navy);}
.acct-notif-item .nm {font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4;}
.acct-notif-item .ndate {font-size:11.5px; color:var(--muted); margin-top:4px;}
.acct-notif-actions {display:flex; gap:8px; margin-top:8px;}
.acct-section-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.acct-section-head h2 {margin-bottom:0;}
.acct-notif-clearbar {position:sticky; bottom:0; display:flex; justify-content:flex-end; padding:14px 0 2px; margin-top:4px; background:linear-gradient(rgba(255,255,255,0), #fff 45%);}
.acct-empty-notif {padding:44px 10px;}
.acct-empty-notif .aei {font-size:38px; line-height:1; margin-bottom:12px;}
.acct-empty-notif .aet {font-weight:700; color:var(--navy); font-size:15px; margin-bottom:4px;}
.acct-empty-notif .aes {font-size:12.5px; color:var(--muted);}
#acctConfirmOverlay .modal-card {max-width:520px;}
#acctConfirmOverlay .modal-close, #acctConfirmOverlay .ticket-actions {display:none;}
Auth modal — step flow, inline errors, open/close motion
   ==========================================================================
   Additive: .modal-overlay / .modal-card / .modal-field keep every rule they
   already had. Nothing here restyles the modal, it only adds the states the
   stepped flow needs.
   ========================================================================== */

/* --- open / close motion -------------------------------------------------
   The overlay already toggles display:none <-> flex, which cannot be
   transitioned. Opacity and the card's lift are what animate; `display` is
   still what shows it. */
.modal-overlay.open {
  opacity:1;
  transition:opacity .22s ease;
}
.modal-overlay.open .modal-card {
  animation:authCardIn .26s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.closing { opacity:0; }
.modal-overlay.closing .modal-card { transform:translateY(6px) scale(.985); transition:transform .18s ease; }
.modal-overlay.open,
  .modal-overlay.closing,
  .modal-overlay.open .modal-card,
  .modal-overlay.closing .modal-card {
    animation:none; transition:none; transform:none;
  }
.modal-overlay { padding:12px; }

@media (max-width:760px){
  #accountModalOverlay .modal-card{max-width:100%; height:92vh; max-height:92vh;}
  .acct-body{flex-direction:column;}
  .acct-tabs{width:100%; display:flex; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:10px;}
  .acct-tab{white-space:nowrap; margin-bottom:0;}
  .acct-panels{padding:20px;}
}

@media (prefers-reduced-motion: reduce){
  .modal-overlay.open,
  .modal-overlay.closing,
  .modal-overlay.open .modal-card,
  .modal-overlay.closing .modal-card{
    animation:none; transition:none; transform:none;
  }
}

@media (max-width:480px){
  .modal-overlay{ padding:12px; }
}