:root {
  --ocean: #3d7a8a; --ocean-dark: #2c5f6e; --ocean-pale: #f2f9fb;
  --stone: #8a9090; --stone-dark: #4a5252;
  --text: #1a2020; --text-muted: #6b7878;
  --warning: #e07b3a; --warning-bg: #fdf3ec; --warning-border: rgba(224,123,58,0.3);
  --danger: #c04040; --danger-bg: #fff0f0; --danger-border: rgba(192,64,64,0.25);
  --success: #3a8a5a;
  --border: #dde6e8; --radius: 12px; --radius-sm: 8px;
  --shadow-md: 0 8px 32px rgba(0,0,0,0.13);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { font-family: 'DM Sans', sans-serif; background: #edf2f3; color: var(--text); min-height: 100vh; font-size: 16px; line-height: 1.5; width: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* HERO */
.hero { background: linear-gradient(160deg,#1a3540 0%,#2c5f6e 55%,#3d7a8a 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; position: relative; }
.hero-waves { position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Cpath d='M0 30 Q50 10 100 30 Q150 50 200 30 L200 60 L0 60Z' fill='rgba(255,255,255,0.025)'/%3E%3C/svg%3E") repeat-x bottom; background-size:200px; animation:waves 10s linear infinite; pointer-events:none; overflow:hidden; }
@keyframes waves { to { background-position-x:200px; } }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.hero-brand { text-align:center; margin-bottom:48px; animation:fadeUp .6s ease both; }
.hero-brand .eyebrow { font-size:11px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
.hero-brand h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(56px,11vw,92px); font-weight:300; color:white; letter-spacing:-1px; line-height:1; }
.hero-brand h1 em { font-style:italic; color:rgba(255,255,255,.65); }
.hero-brand .tagline { font-size:15px; color:rgba(255,255,255,.5); margin-top:16px; }

/* PORTAL CARD */
.portal-card { background:rgba(255,255,255,.97); border-radius:18px; padding:40px; width:100%; max-width:620px; box-shadow:0 24px 64px rgba(0,0,0,.28); animation:fadeUp .7s ease .1s both; overflow:visible; position:relative; z-index:10; }
.portal-card h2 { font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:400; margin-bottom:28px; }
.portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.field-group { display:flex; flex-direction:column; gap:7px; }

label, .field-label { font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }

/* SEARCH DROPDOWN — must escape card stacking context */
.search-wrapper { position:relative; z-index:1; }
.srch-input { height:52px; padding:0 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:17px; color:var(--text); background:white; transition:border-color .2s; width:100%; outline:none; cursor:pointer; }
.srch-input:focus { border-color:var(--ocean); box-shadow:0 0 0 3px rgba(61,122,138,.13); z-index:9999; position:relative; }
.srch-input::placeholder { color:#b0bcbe; }
.srch-input:disabled { background:#f8fafb; color:var(--text-muted); cursor:not-allowed; }
.form-input.err, .form-select.err { border-color:var(--danger) !important; box-shadow:0 0 0 3px rgba(180,40,40,.1); }

/* GLOBAL DROPDOWN — single instance appended to body, escapes all stacking contexts */
#global-dropdown { position:absolute; background:white; border:1.5px solid var(--border); border-radius:var(--radius-sm); box-shadow:0 12px 40px rgba(0,0,0,0.18); z-index:99999; max-height:260px; overflow-y:auto; display:none; min-width:200px; }
#global-dropdown.open { display:block; }
#global-dropdown .dropdown-item { display:block; padding:13px 16px; font-size:16px; cursor:pointer; border-bottom:1px solid #f0f5f6; transition:background .12s; color:var(--text); }
#global-dropdown .dropdown-item:last-child { border-bottom:none; }
#global-dropdown .dropdown-item:hover { background:var(--ocean-pale); color:var(--ocean-dark); }
#global-dropdown .dropdown-item.no-result { color:var(--text-muted); font-style:italic; cursor:default; }
#global-dropdown .dropdown-item.no-result:hover { background:white; }
.dropdown-list { display:none; } /* inline placeholders hidden — only global-dropdown renders */
.dropdown-item { padding:13px 16px; font-size:16px; cursor:pointer; border-bottom:1px solid #f0f5f6; transition:background .12s; }
.dropdown-item:last-child { border-bottom:none; }
.dropdown-item:hover,.dropdown-item.hl { background:var(--ocean-pale); color:var(--ocean-dark); }
.dropdown-item.no-result { color:var(--text-muted); font-style:italic; cursor:default; }
.dropdown-item.no-result:hover { background:white; }

/* CUSTOM CALENDAR */
.cal-wrapper { position:relative; }
.cal-trigger {
  height:52px; padding:0 16px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif;
  font-size:17px; color:var(--text); background:white;
  width:100%; outline:none; cursor:pointer; transition:border-color .2s;
  display:flex; align-items:center; gap:10px; user-select:none;
}
.cal-trigger:hover, .cal-trigger.open { border-color:var(--ocean); }
.cal-trigger .cal-icon { color:var(--stone); font-size:18px; flex-shrink:0; }
.cal-trigger .cal-val { flex:1; }
.cal-trigger .cal-val.placeholder { color:#b0bcbe; }
.cal-popup {
  display:none; background:white; border:1.5px solid var(--border);
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.18);
}
.cal-popup-x {
  position:absolute; top:calc(100% + 6px); left:0;
  background:white; border:1.5px solid var(--border);
  border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,0.18);
  z-index:99999; width:320px; padding:16px; display:none;
}

.cal-popup { display:none; background:white; border:1.5px solid var(--border); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.18); padding:14px; overflow-y:auto; scroll-behavior:smooth; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cal-nav {
  width:32px; height:32px; border:1.5px solid var(--border); border-radius:50%;
  background:white; cursor:pointer; font-size:16px; display:flex; align-items:center;
  justify-content:center; transition:all .15s; color:var(--ocean-dark);
}
.cal-nav:hover { background:var(--ocean-pale); border-color:var(--ocean); }
.cal-month-label { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:400; color:var(--text); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dow {
  text-align:center; font-size:10px; font-weight:600; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted); padding:2px 0 5px;
}
.cal-day {
  text-align:center; font-size:14px; padding:6px 2px; border-radius:7px;
  cursor:pointer; color:var(--text); transition:background .12s, color .12s;
  border:none; background:none; width:100%; font-family:'DM Sans',sans-serif;
}
.cal-day:hover:not(:disabled) { background:var(--ocean-pale); color:var(--ocean-dark); }
.cal-day.selected { background:var(--ocean); color:white; font-weight:500; }
.cal-day.today:not(.selected) { color:var(--ocean); font-weight:600; }
.cal-day:disabled { color:#ccc; cursor:not-allowed; }
.cal-day.empty { cursor:default; }
/* Small calendar for card header */
.cal-trigger.small { height:38px; font-size:14px; width:160px; padding:0 10px; }
.cal-trigger.small .cal-icon { font-size:15px; }
.cal-popup.small { width:270px; padding:10px; }
.cal-popup.small .cal-day { font-size:13px; padding:5px 2px; }
.cal-popup.small .cal-month-label { font-size:16px; }

/* NATIVE DATE INPUT — only for arrival date (card internal) */
input[type=date].card-date {
  height:44px; padding:0 12px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif;
  font-size:15px; color:var(--text); background:white; max-width:220px;
  width:100%; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none;
}
input[type=date].card-date:focus { border-color:var(--ocean); }

/* TRANSFER COUNT STEPPER (mobile) */
.qty-stepper { display:flex; align-items:center; gap:0; border:1.5px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; height:52px; background:white; }
.qty-stepper button { width:52px; height:100%; border:none; background:none; font-size:22px; cursor:pointer; color:var(--ocean-dark); transition:background .15s; flex-shrink:0; }
.qty-stepper button:hover { background:var(--ocean-pale); }
.qty-stepper button:active { background:var(--ocean-light); }
.qty-stepper .qty-val { flex:1; text-align:center; font-size:20px; font-weight:500; color:var(--text); font-family:'DM Sans',sans-serif; }

/* CARD BODY TRANSITION — animate collapse/expand */
.card-body-wrap {
  overflow:hidden;
  transition:max-height 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  max-height:1200px;
  opacity:1;
}
.card-body-wrap.collapsing {
  max-height:0 !important;
  opacity:0;
}

/* INPUTS generic */
.wf-input,.form-input,.form-select { height:52px; padding:0 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:17px; color:var(--text); background:white; transition:border-color .2s; width:100%; outline:none; -webkit-appearance:none; }
.wf-input:focus,.form-input:focus,.form-select:focus { border-color:var(--ocean); box-shadow:0 0 0 3px rgba(61,122,138,.13); }
.wf-input::placeholder { color:#b0bcbe; }
.card-input { height:44px; padding:0 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:15px; color:var(--text); background:white; transition:border-color .2s; width:100%; outline:none; -webkit-appearance:none; }
.card-input:focus { border-color:var(--ocean); box-shadow:0 0 0 3px rgba(61,122,138,.13); }
.card-input.err { border-color:var(--danger) !important; }

/* BTN */
.btn-primary { width:100%; height:56px; background:var(--ocean); color:white; border:none; border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:17px; font-weight:500; cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary:hover { background:var(--ocean-dark); }
.btn-ghost { height:40px; padding:0 16px; background:transparent; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.btn-ghost:hover { border-color:var(--ocean); color:var(--ocean); }
.btn-next { height:40px; padding:0 20px; background:var(--ocean); border:none; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:white; cursor:pointer; transition:background .2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-next:hover { background:var(--ocean-dark); }
.btn-delete { background:none; border:1.5px solid #ffd0d0; border-radius:var(--radius-sm); color:var(--danger); font-size:13px; font-weight:500; padding:7px 12px; cursor:pointer; display:flex; align-items:center; gap:5px; transition:all .2s; }
.btn-delete:hover { background:#fff5f5; }
.btn-danger { height:42px; padding:0 22px; background:#c04040; color:white; border:none; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; }
.btn-danger:hover { background:#a03030; }

/* ENGINE HEADER */
#page-engine,#page-customer,#page-payment { display:none; background:#edf2f3; }
.engine-header { background:white; border-bottom:1px solid var(--border); position:fixed; top:0; left:0; right:0; width:100%; z-index:200; box-shadow:0 1px 8px rgba(0,0,0,.06); }
.engine-header-inner { max-width:860px; margin:0 auto; height:68px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; }
.header-brand { display:flex; align-items:center; white-space:nowrap; }
.step-indicator { display:flex; align-items:center; }
.total-display { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:600; color:var(--ocean-dark); letter-spacing:-.5px; min-width:130px; }
.step { display:flex; align-items:center; gap:5px; padding:0 8px; color:var(--stone); white-space:nowrap; font-size:13px; }
.step.active { color:var(--ocean-dark); font-weight:500; }
.step.done { color:var(--success); }
.step-dot { width:7px; height:7px; border-radius:50%; background:var(--border); flex-shrink:0; }
.step.active .step-dot { background:var(--ocean); }
.step.done .step-dot { background:var(--success); }
.step-sep { color:var(--border); font-size:18px; }
.btn-ghost { height:40px; padding:0 16px; background:transparent; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.btn-ghost:hover { border-color:var(--ocean); color:var(--ocean); }
.btn-next { height:40px; padding:0 20px; background:var(--ocean); border:none; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:white; cursor:pointer; transition:background .2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-next:hover { background:var(--ocean-dark); }

/* ENGINE BODY */
.engine-body { max-width:860px; margin:0 auto; padding:92px 20px 80px; position:relative; }

/* TRANSFER CARD — fade-in animation */
@keyframes cardIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.transfer-card { background:white; border-radius:14px; margin-bottom:14px; border:1.5px solid var(--border); transition:border-color .4s,box-shadow .4s; overflow:visible; }
.transfer-card.active { border-color:var(--ocean); box-shadow:0 4px 24px rgba(61,122,138,.12); }
.transfer-card.c-nobooking { border-color:var(--danger); }
.transfer-card.c-multistage { border-color:var(--warning); }
.transfer-card.c-locked { opacity:.5; pointer-events:none; }
.transfer-card.c-collapsed .card-body { display:none; }

/* date-readonly: hidden when expanded, visible when collapsed */
.date-readonly { display:none; font-size:13px; color:var(--text-muted); white-space:nowrap; }

/* COLLAPSED state */
.transfer-card.c-collapsed .cal-trigger { display:none; }
.transfer-card.c-collapsed .date-readonly { display:inline; }
.transfer-card.c-collapsed .card-hdr-info { flex:1; }

/* Desktop collapsed: show bags read-only (already visible, just hide controls) */
.transfer-card.c-collapsed .bags-ctrl button { display:none; }
.transfer-card.c-collapsed .bags-ctrl { gap:4px; pointer-events:none; opacity:0.6; }

/* CARD HEADER */
.card-header { padding:14px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; border-radius:12px; user-select:none; }
.card-header.hdr-warn { background:var(--warning-bg); }
.card-header.hdr-danger { background:var(--danger-bg); }

.card-num { min-width:90px; height:52px; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:white; background:var(--stone-dark); line-height:1.3; padding:0 8px; text-align:center; }
.card-num.priced { background:var(--ocean-dark); }
.card-num.n-warn { background:var(--warning); }
.card-num.n-danger { background:var(--danger); }
.card-num .pv { font-size:17px; font-weight:500; font-family:'Cormorant Garamond',serif; margin-top:2px; letter-spacing:-.3px; }

.card-hdr-info { flex:1; min-width:0; }
.card-hdr-from { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-hdr-to { font-size:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }

.card-meta { display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* BLOCKED MODAL — warmer design */
.blocked-modal-box {
  background:white; border-radius:20px; padding:36px 32px;
  max-width:500px; width:calc(100% - 40px);
  box-shadow:0 24px 64px rgba(0,0,0,.28);
  text-align:center;
}
.blocked-icon { font-size:48px; margin-bottom:16px; }
.blocked-title { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; color:var(--text); margin-bottom:12px; }
.blocked-body { font-size:15px; color:var(--text-muted); line-height:1.7; margin-bottom:24px; }
.blocked-body a { color:var(--ocean); text-decoration:underline; font-weight:500; }
.blocked-close { height:48px; padding:0 32px; background:var(--ocean); color:white; border:none; border-radius:var(--radius); font-family:'DM Sans',sans-serif; font-size:16px; font-weight:500; cursor:pointer; transition:background .2s; }
.blocked-close:hover { background:var(--ocean-dark); }

.bags-ctrl { display:flex; align-items:center; gap:6px; }
.bags-ctrl button { width:30px; height:30px; border:1.5px solid var(--border); border-radius:50%; background:white; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; color:var(--ocean-dark); line-height:1; }
.bags-ctrl button:hover { border-color:var(--ocean); background:var(--ocean-pale); }
.bags-ctrl .bnum { min-width:22px; text-align:center; font-weight:500; font-size:16px; }
.collapse-btn { background:none; border:none; cursor:pointer; color:var(--stone); font-size:20px; padding:4px; transition:transform .2s; line-height:1; }
.collapse-btn.open { transform:rotate(180deg); }

/* CARD BODY */
.card-body { padding:0 18px 18px; }
.card-divider { height:1px; background:var(--border); margin:0 0 16px; }
.card-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.card-field { display:flex; flex-direction:column; gap:6px; }

/* Other extra fields — span full width */
.other-fields { display:none; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:14px 20px; }
.other-fields.vis { display:grid; }
.err-hint { font-size:12px; color:var(--danger); margin-top:2px; display:none; }
.err-hint.vis { display:block; }

/* ALERT STRIP */
.card-alert { margin:14px 0 0; padding:12px 14px; border-radius:var(--radius-sm); font-size:14px; line-height:1.55; display:none; }
.card-alert.vis { display:block; }
.card-alert.warn { background:var(--warning-bg); border:1px solid var(--warning-border); color:#7a4010; }
.card-alert.danger { background:var(--danger-bg); border:1px solid var(--danger-border); color:#7a1010; }

/* CARD ACTIONS */
.card-actions { display:flex; align-items:center; justify-content:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); gap:12px; }

/* ADD TRANSFER */
.add-transfer-btn { width:100%; padding:16px; border:2px dashed var(--border); border-radius:14px; background:transparent; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--text-muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:4px; }
.add-transfer-btn:hover { border-color:var(--ocean); color:var(--ocean); background:var(--ocean-pale); }

/* COMMENTS */
.comments-section { background:white; border-radius:14px; border:1.5px solid var(--border); margin-top:14px; overflow:hidden; }
.comments-header { padding:15px 18px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.comments-header span { font-size:15px; font-weight:500; color:var(--stone-dark); }
.comments-body { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.comments-body.open { max-height:300px; }
.comments-body textarea { width:100%; min-height:120px; padding:18px 20px; border:none; border-top:1px solid var(--border); font-family:'DM Sans',sans-serif; font-size:15px; resize:vertical; outline:none; color:var(--text); display:block; line-height:1.6; }

/* FAQ SECTION */
.faq-section { background:white; border-radius:14px; border:1.5px solid var(--border); margin-top:14px; overflow:hidden; }
.faq-title { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; color:var(--text); padding:20px 20px 12px; border-bottom:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q { padding:16px 20px; font-size:15px; font-weight:500; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; transition:background .15s; }
.faq-q:hover { background:var(--ocean-pale); }
.faq-q .faq-icon { font-size:18px; color:var(--stone); transition:transform .2s; flex-shrink:0; }
.faq-q.open .faq-icon { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a.open { max-height:500px; }
.faq-a p { padding:4px 20px 18px; font-size:14px; color:var(--text-muted); line-height:1.7; }
.faq-a p strong { color:var(--text); }

/* CUSTOMER / PAYMENT PAGES */
.page-body { max-width:720px; margin:0 auto; padding:92px 20px 80px; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:400; margin-bottom:6px; }
.section-sub { font-size:15px; color:var(--text-muted); margin-bottom:28px; }
.form-card { background:white; border-radius:14px; border:1.5px solid var(--border); padding:28px; margin-bottom:16px; }
.form-row { display:grid; gap:16px; margin-bottom:18px; }
.form-row.two { grid-template-columns:1fr 1fr; }
.form-row:last-child { margin-bottom:0; }
.form-field { display:flex; flex-direction:column; gap:7px; }
.tc-row { display:flex; gap:10px; align-items:flex-start; margin-top:18px; }
.tc-row input[type=checkbox] { margin-top:3px; accent-color:var(--ocean); width:18px; height:18px; cursor:pointer; flex-shrink:0; }
.tc-row label { font-size:14px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--text-muted); cursor:pointer; }
.tc-row a { color:var(--ocean); text-decoration:none; }

/* PAYMENT SUMMARY */
.pay-summary-card { background:white; border-radius:14px; border:1.5px solid var(--border); padding:28px; margin-bottom:20px; }
.pay-intro { font-size:16px; color:var(--text); margin-bottom:16px; line-height:1.6; }
.pay-client { font-size:15px; color:var(--stone-dark); margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.pay-client strong { color:var(--text); }

/* Payment summary — redesigned for readability */
.pay-transfers-table { width:100%; border-collapse:collapse; }
.pay-tr-row td { padding:10px 0; border-bottom:1px solid #f0f5f6; vertical-align:top; }
.pay-tr-row:last-child td { border-bottom:none; }
.pay-tr-block { flex:1; }
.pay-tr-date-sm { font-size:11px; font-weight:600; letter-spacing:0.5px; color:var(--stone); text-transform:uppercase; margin-bottom:3px; }
.pay-tr-route { font-size:14px; color:var(--stone-dark); line-height:1.5; }
.pay-tr-route .loc { color:var(--text); font-weight:500; }
.pay-tr-route .arrow { color:var(--stone); margin:0 2px; }
.pay-tr-price-cell { white-space:nowrap; text-align:right; padding-left:16px; color:var(--ocean-dark); font-weight:500; font-size:14px; width:80px; vertical-align:top; padding-top:10px; }
.pay-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; padding-top:16px; border-top:2px solid var(--border); }
.pay-total-label { font-size:15px; color:var(--stone-dark); }
.pay-total-amount { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; color:var(--ocean-dark); }
.pay-notice { font-size:13px; color:var(--text-muted); margin-top:6px; }

.stripe-card { background:white; border-radius:14px; border:1.5px solid var(--border); padding:28px; }
.stripe-badge { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--stone); margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.stripe-logo { background:#5469d4; color:white; font-size:12px; font-weight:700; padding:3px 10px; border-radius:5px; letter-spacing:.5px; }
.mock-notice { background:#e8f0fe; border:1px solid #b8ccf8; border-radius:8px; padding:12px 16px; font-size:13px; color:#2d4a8a; margin-top:18px; text-align:center; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:none; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:white; border-radius:16px; padding:32px; max-width:420px; width:calc(100% - 40px); box-shadow:0 24px 64px rgba(0,0,0,.3); }
.modal-box h3 { font-family:'Cormorant Garamond',serif; font-size:24px; margin-bottom:12px; }
.modal-box p { font-size:15px; color:var(--text-muted); margin-bottom:24px; line-height:1.6; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ── MOBILE ── */
@media(max-width:600px){
  /* Full width — no clipping */
  .page, [id^="page-"] { width:100%; overflow-x:hidden; }

  /* Portal */
  .portal-card { padding:24px 16px; border-radius:14px; margin:0 12px; width:calc(100% - 24px); box-sizing:border-box; }
  .portal-grid { grid-template-columns:1fr; gap:14px; }
  .hero-brand h1 { font-size:clamp(40px,13vw,68px); }
  .hero-brand { margin-bottom:28px; }

  /* Prevent iOS zoom on focus */
  .wf-input, .srch-input, .form-input, .form-select, .card-input, .cal-trigger { font-size:16px !important; }

  /* Engine header — compact, logo hidden */
  .engine-header-inner { gap:4px; padding:0 10px; height:60px; overflow:hidden; }
  .header-brand { display:none; }
  .total-display { font-size:28px; min-width:90px; font-weight:700; }
  .step .step-label { display:none; }
  .step { padding:0 3px; }
  .step-dot { width:6px; height:6px; }
  .btn-ghost { padding:0 10px; font-size:12px; height:34px; }
  .btn-next { padding:0 10px; font-size:12px; height:34px; flex-shrink:0; white-space:nowrap; }

  /* Cards — full width */
  .engine-body { padding:80px 10px 80px; }
  .transfer-card { border-radius:12px; }

  /* FIX 2: Card header compact — badge + date + bags all in one row */
  .card-header { padding:10px 12px; gap:8px; flex-wrap:nowrap; }
  .card-num { min-width:64px; height:44px; font-size:7px; border-radius:8px; flex-shrink:0; }
  .card-num .pv { font-size:13px; }
  .card-hdr-info { min-width:0; flex:1; overflow:hidden; }
  .card-hdr-from, .card-hdr-to { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Date trigger — smaller */
  .cal-trigger.small { height:34px; font-size:13px; width:118px; min-width:118px; padding:0 8px; }

  /* Bags control — compact */
  .bags-ctrl { gap:0; }
  .bags-ctrl button { width:30px; height:30px; font-size:16px; }
  .bags-ctrl .bags-val { font-size:15px; min-width:22px; }

  /* FIX 3: Card grid — single column with correct field ORDER for mobile */
  .card-body { padding:0 12px 12px; }
  .card-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    /* Reorder: pick-up town, pick-up accom, drop-off town, drop-off accom */
  }
  /* Use CSS order property to reorder the 4 fields */
  .card-grid .card-field:nth-child(1) { order:1; } /* Pick-up town */
  .card-grid .card-field:nth-child(2) { order:3; } /* Drop-off town */
  .card-grid .card-field:nth-child(3) { order:2; } /* Pick-up accom */
  .card-grid .card-field:nth-child(4) { order:4; } /* Drop-off accom */
  .other-fields { grid-column:1; }
  .other-fields.vis { grid-template-columns:1fr; }

  /* Form pages */
  .page-body { padding:76px 12px 80px; }
  .form-card { padding:18px 14px; }
  .form-row.two { grid-template-columns:1fr; }
  .section-title { font-size:22px; }

  /* Payment */
  .pay-summary-card { padding:16px 14px; }
  .pay-tr-price-cell { padding-left:8px; font-size:13px; }

  /* Comments/FAQ */
  .comments-header { padding:12px 14px; }
  .faq-q { padding:12px 14px; font-size:14px; }

  /* Collapsed mobile: hide bags entirely */
  .transfer-card.c-collapsed .bags-ctrl { display:none; }

  /* Mobile fullscreen calendar — bottom sheet */
  .cal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    z-index:99998; animation:fadeIn .2s ease;
  }
  .cal-popup.mobile-sheet {
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important;
    border-radius:20px 20px 0 0 !important;
    border:none !important;
    padding:0 0 8px !important;
    box-shadow:0 -8px 40px rgba(0,0,0,0.22) !important;
    z-index:99999 !important;
    animation:slideUp .25s cubic-bezier(.32,.72,0,1);
    max-height:90vh; overflow-y:auto;
  }
  @keyframes slideUp {
    from { transform:translateY(100%); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
  }
  .cal-sheet-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 20px 4px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
  }
  .cal-sheet-title {
    font-family:'Cormorant Garamond',serif; font-size:22px;
    font-weight:400; color:var(--text);
  }
  .cal-sheet-close {
    width:36px; height:36px; border-radius:50%; border:none;
    background:var(--ocean-pale); color:var(--ocean-dark);
    font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .cal-popup.mobile-sheet .cal-header { padding:14px 20px 0; }
  .cal-popup.mobile-sheet .cal-month-label { font-size:20px; }
  .cal-popup.mobile-sheet .cal-nav { width:38px; height:38px; font-size:18px; }
  .cal-popup.mobile-sheet .cal-grid { padding:8px 16px 16px; gap:4px; }
  .cal-popup.mobile-sheet .cal-dow { font-size:11px; padding:4px 0 8px; }
  .cal-popup.mobile-sheet .cal-day { font-size:16px; padding:10px 4px; border-radius:9px; }
}

/* Prevent iOS font-size zoom on focus */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select, textarea, input { font-size:16px !important; }
}