/* ==========================================================================
   Eworld Safaris — Client portal, auth & booking experience
   Prefixes: .ew-p-* (portal / booking / checkout)   .ew-auth-* (sign in / register)
   Colours follow the Theme manager (--primary, --accent, --secondary, --ew-*).
   ========================================================================== */

/* ---------- Design tokens ---------- */
.ew-auth, .ew-p-hero, .ew-p-wrap {
  --ep-navy: var(--primary, #001853);
  --ep-navy-rgb: var(--ew-primary-rgb, 0,24,83);
  --ep-accent: var(--ew-btn-bg, var(--accent, #FF6B00));
  --ep-accent-rgb: var(--ew-accent-rgb, 255,107,0);
  --ep-accent-dk: var(--accent-hover, #E05E00);
  --ep-teal: var(--secondary, #009ea9);
  --ep-teal-rgb: var(--ew-secondary-rgb, 0,158,169);
  --ep-ink: var(--text-dark, #1F2937);
  --ep-muted: var(--text-muted, #6B7280);
  --ep-line: #E6EAF3;
  --ep-soft: #F3F6FB;
  --ep-radius: 22px;
  --ep-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -14px rgba(var(--ep-navy-rgb), .16);
  --ep-shadow-lg: 0 40px 90px -34px rgba(var(--ep-navy-rgb), .45);
  font-family: var(--font-body, 'Outfit', system-ui, sans-serif);
  color: var(--ep-ink);
}
.min-w-0 { min-width: 0; }

@keyframes ew-p-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ew-p-spin { to { transform: rotate(360deg); } }
@keyframes ew-p-ring { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ew-p-draw { to { stroke-dashoffset: 0; } }
@keyframes ew-p-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

/* ---------- Page hero (portal / booking / checkout) ---------- */
.ew-p-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 138px 0 112px; }
@media (min-width: 992px) { .ew-p-hero { padding: 186px 0 128px; } }
.ew-p-hero-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; transform: scale(1.05); }
.ew-p-hero-shade { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(var(--ep-accent-rgb), .30), transparent 62%),
    linear-gradient(115deg, rgba(var(--ep-navy-rgb), .97) 0%, rgba(var(--ep-navy-rgb), .86) 48%, rgba(var(--ep-navy-rgb), .62) 100%); }
.ew-p-hero-path { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: -1; color: rgba(255,255,255,.2); pointer-events: none; }
.ew-p-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.72); margin-bottom: 16px; }
.ew-p-crumbs a, .ew-p-crumbs span { color: inherit; text-decoration: none; font-weight: 500; }
.ew-p-crumbs a:hover { color: #fff; }
.ew-p-crumbs span[aria-current] { color: #fff; }
.ew-p-crumb-sep { font-size: 9px; opacity: .6; }
.ew-p-hero-title { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: #fff; margin: 0; }
.ew-p-hero-title em { font-style: normal; color: var(--ew-banner-accent, var(--accent, #FF6B00)); position: relative; }
.ew-p-hero-sub { margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: 17px; max-width: 640px; }

/* ---------- Portal body wrapper ---------- */
.ew-p-wrap { position: relative; isolation: isolate; margin-top: -72px; padding-bottom: 96px; }
.ew-p-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 72px; bottom: 0; background: var(--ep-soft); z-index: -1; }
@media (max-width: 767px) { .ew-p-wrap { margin-top: -56px; padding-bottom: 64px; } .ew-p-wrap::before { top: 56px; } }
.ew-p-main > *:first-child { margin-top: 0; }

/* ---------- Cards ---------- */
.ew-p-card { background: #fff; border: 1px solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 30px; margin-bottom: 22px; animation: ew-p-rise .5s both; }
.ew-p-card-flat { padding: 24px 26px; }
@media (max-width: 575px) { .ew-p-card { padding: 22px 18px; border-radius: 20px; } }
.ew-p-block-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ew-p-block-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 3px; color: var(--ep-navy); }
.ew-p-block-head p { margin: 0; color: var(--ep-muted); font-size: 14.5px; }
.ew-p-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--ep-navy), rgba(var(--ep-teal-rgb), 1)); box-shadow: 0 10px 22px -8px rgba(var(--ep-navy-rgb), .55); }
.ew-p-num i { font-size: 17px; }

.ew-p-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 36px 0 16px; }
.ew-p-section-title h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--ep-navy); margin: 0; }

/* ---------- Buttons ---------- */
.ew-p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 15px; border: 1.5px solid transparent;
  font: 600 15px/1 var(--font-body, 'Outfit', sans-serif); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.ew-p-btn i { font-size: .95em; transition: transform .25s ease; }
.ew-p-btn:hover i.fa-arrow-right, .ew-p-btn:hover i.fa-paper-plane { transform: translateX(3px); }
.ew-p-btn:focus-visible { outline: 3px solid rgba(var(--ep-accent-rgb), .45); outline-offset: 2px; }
.ew-p-btn-primary { color: var(--ew-btn-text, #fff) !important; background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); box-shadow: 0 14px 28px -12px rgba(var(--ep-accent-rgb), .75); }
.ew-p-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(var(--ep-accent-rgb), .85); filter: brightness(1.05); }
.ew-p-btn-primary:active { transform: translateY(0); }
.ew-p-btn-outline { background: #fff; color: var(--ep-navy); border-color: var(--ep-line); }
.ew-p-btn-outline:hover { border-color: var(--ep-navy); transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(var(--ep-navy-rgb), .5); color: var(--ep-navy); }
.ew-p-btn-ghost { background: transparent; color: var(--ep-navy); border-color: var(--ep-line); }
.ew-p-btn-ghost:hover { background: rgba(var(--ep-navy-rgb), .05); border-color: rgba(var(--ep-navy-rgb), .35); color: var(--ep-navy); }
.ew-p-btn-soft { background: rgba(var(--ep-navy-rgb), .07); color: var(--ep-navy); }
.ew-p-btn-soft:hover { background: rgba(var(--ep-navy-rgb), .13); color: var(--ep-navy); }
.ew-p-btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ew-p-btn-glass:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.ew-p-btn-whatsapp { background: #1FB855; color: #fff; box-shadow: 0 14px 26px -12px rgba(31,184,85,.7); }
.ew-p-btn-whatsapp:hover { background: #18a24a; color: #fff; transform: translateY(-2px); }
.ew-p-btn-lg { height: 58px; padding: 0 32px; border-radius: 17px; font-size: 16px; }
.ew-p-btn-sm { height: 40px; padding: 0 17px; font-size: 13.5px; border-radius: 12px; }
.ew-p-btn-block { width: 100%; }
.ew-p-link { color: var(--ep-accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, gap .2s; }
.ew-p-link:hover { color: var(--ep-accent-dk); gap: 9px; }
.ew-p-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ew-p-actions-center { justify-content: center; margin-top: 4px; }

/* ---------- Forms ---------- */
.ew-p-form .ew-p-field { margin-bottom: 18px; }
.ew-p-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ep-navy); margin: 0 0 8px; }
.ew-p-field label b { color: var(--ep-accent); font-weight: 700; }
.ew-p-field label small { font-weight: 500; color: var(--ep-muted); }
.ew-p-input { position: relative; }
.ew-p-input > i:first-child { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: #9AA5B8; font-size: 15px; pointer-events: none; transition: color .2s; }
.ew-p-input input, .ew-p-textarea, .ew-p-qty input { font: 500 15.5px/1.4 var(--font-body, 'Outfit', sans-serif); color: var(--ep-ink); }
.ew-p-input input { width: 100%; height: 54px; padding: 0 16px 0 46px; border: 1.5px solid var(--ep-line); border-radius: 15px; background: #FBFCFE; transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none; }
.ew-p-input input::placeholder, .ew-p-textarea::placeholder { color: #A5AEBF; font-weight: 400; }
.ew-p-input input:hover { border-color: #CFD6E4; }
.ew-p-input input:focus, .ew-p-textarea:focus { outline: none; border-color: var(--ep-accent); background: #fff; box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .14); }
.ew-p-input:focus-within > i:first-child { color: var(--ep-accent); }
.ew-p-input.is-disabled input { background: #F1F4F9; color: var(--ep-muted); cursor: not-allowed; }
.ew-p-input input[type="date"] { padding-right: 12px; }
.ew-p-input:has(.ew-p-eye) input { padding-right: 52px; }
.ew-p-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: #8A95AA; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s; }
.ew-p-eye:hover { background: rgba(var(--ep-navy-rgb), .06); color: var(--ep-navy); }
.ew-p-textarea { width: 100%; padding: 15px 17px; border: 1.5px solid var(--ep-line); border-radius: 15px; background: #FBFCFE; resize: vertical; min-height: 120px; transition: border-color .2s, box-shadow .2s; }
.ew-p-hint { display: block; margin-top: 7px; font-size: 12.5px; color: var(--ep-muted); }
.ew-p-hint.is-ok { color: #059669; font-weight: 600; } .ew-p-hint.is-bad { color: #DC2626; font-weight: 600; }
.ew-p-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.ew-p-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.ew-p-span-2 { grid-column: span 2; }
.ew-p-grid-2, .ew-p-grid-3 { row-gap: 0; }
.ew-p-block > .ew-p-grid-2:last-child, .ew-p-block > .ew-p-grid-3:last-child, .ew-p-block > .ew-p-field:last-child { margin-bottom: -18px; }
@media (max-width: 767px) { .ew-p-grid-2, .ew-p-grid-3 { grid-template-columns: 1fr; } .ew-p-span-2 { grid-column: auto; } }
@media (min-width: 768px) and (max-width: 991px) { .ew-p-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ew-p-form-foot { margin-top: 8px; padding-top: 22px; border-top: 1px dashed var(--ep-line); display: flex; gap: 12px; flex-wrap: wrap; }
.ew-p-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; flex-wrap: wrap; }
.ew-p-fine { font-size: 12.5px; color: var(--ep-muted); text-align: center; margin: 14px 0 0; line-height: 1.55; }
.ew-p-fine i { margin-right: 4px; }

/* custom checkbox */
.ew-p-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ep-ink); cursor: pointer; margin: 0; user-select: none; }
.ew-p-check input { position: absolute; opacity: 0; pointer-events: none; }
.ew-p-check-box { width: 21px; height: 21px; border-radius: 7px; border: 1.5px solid #C5CDDD; display: grid; place-items: center; color: transparent; font-size: 11px; transition: all .2s; background: #fff; }
.ew-p-check input:checked + .ew-p-check-box { background: var(--ep-accent); border-color: var(--ep-accent); color: #fff; }
.ew-p-check input:focus-visible + .ew-p-check-box { box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .2); }

/* quantity stepper */
.ew-p-qty { display: flex; align-items: center; height: 54px; border: 1.5px solid var(--ep-line); border-radius: 15px; background: #FBFCFE; overflow: hidden; }
.ew-p-qty button { flex: 0 0 52px; height: 100%; border: 0; background: transparent; color: var(--ep-navy); cursor: pointer; transition: background .2s, color .2s; }
.ew-p-qty button:hover { background: rgba(var(--ep-accent-rgb), .1); color: var(--ep-accent); }
.ew-p-qty input { flex: 1; min-width: 0; width: 100%; text-align: center; border: 0; background: transparent; font-weight: 700; font-size: 17px; -moz-appearance: textfield; appearance: textfield; }
.ew-p-qty input::-webkit-outer-spin-button, .ew-p-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ew-p-qty input:focus { outline: none; }
.ew-p-qty:focus-within { border-color: var(--ep-accent); box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .14); }

/* password strength */
.ew-p-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.ew-p-strength span { height: 5px; border-radius: 4px; background: #E7EBF3; transition: background .25s; }
.ew-p-strength em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: var(--ep-muted); margin-top: 2px; }
.ew-p-strength[data-score="1"] span:nth-child(-n+1) { background: #EF4444; }
.ew-p-strength[data-score="2"] span:nth-child(-n+2) { background: #F59E0B; }
.ew-p-strength[data-score="3"] span:nth-child(-n+3) { background: #84CC16; }
.ew-p-strength[data-score="4"] span:nth-child(-n+4) { background: #10B981; }
.ew-p-strength[data-score="0"] span:nth-child(-n+1) { background: #EF4444; }

.ew-p-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #9AA5B8; font-size: 13px; }
.ew-p-or::before, .ew-p-or::after { content: ""; flex: 1; height: 1px; background: var(--ep-line); }
.ew-p-google i { color: #EA4335; font-size: 1.1em; }

/* ---------- Alerts / chips ---------- */
.ew-p-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 15px; font-size: 14.5px; font-weight: 500; margin-bottom: 18px; line-height: 1.5; animation: ew-p-rise .35s both; }
.ew-p-alert > i { margin-top: 3px; }
.ew-p-alert > span { flex: 1; }
.ew-p-alert-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; padding: 0 2px; }
.ew-p-alert-x:hover { opacity: 1; }
.ew-p-alert.is-success { background: #E7F8EF; color: #067647; border: 1px solid #BDEBD3; }
.ew-p-alert.is-error { background: #FEEDED; color: #B42318; border: 1px solid #F8C9C5; }
.ew-p-alert.is-info { background: #EAF3FF; color: #175CD3; border: 1px solid #C6DDFB; }

.ew-p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-p-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ew-p-chip i { font-size: 11px; }
.ew-p-chip.is-pending { background: #FFF4DB; color: #A15C07; }
.ew-p-chip.is-confirmed { background: #E3F7EC; color: #067647; }
.ew-p-chip.is-completed { background: #E0F2FE; color: #0B6AA2; }
.ew-p-chip.is-cancelled { background: #FDE8E8; color: #B42318; }
.ew-p-chip.is-unpaid { background: #FFEBDD; color: #C2410C; }
.ew-p-chip.is-partial { background: #FEF3C7; color: #92400E; }
.ew-p-chip.is-paid { background: #E3F7EC; color: #067647; }
.ew-p-chip.is-refund { background: #EEE8FD; color: #5B34C4; }
.ew-p-chip.is-neutral { background: #EEF1F7; color: #475467; }

/* ---------- Avatar ---------- */
.ew-p-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--ep-accent), rgba(var(--ep-teal-rgb), 1)); box-shadow: 0 10px 22px -10px rgba(var(--ep-navy-rgb), .6); }
.ew-p-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ew-p-avatar-xl { width: 88px; height: 88px; font-size: 30px; border: 4px solid rgba(255,255,255,.9); }

/* ---------- Welcome hero (dashboard) ---------- */
.ew-p-hero.is-account { padding-bottom: 118px; }
.ew-p-welcome { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ew-p-welcome-txt { flex: 1 1 320px; min-width: 0; }
.ew-p-welcome-txt small { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ew-p-welcome-txt small i { color: #FFC247; }
.ew-p-welcome-txt h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 6px 0 8px; color: #fff; }
.ew-p-welcome-txt h1 em { font-style: normal; color: var(--ew-banner-accent, var(--accent, #FF6B00)); }
.ew-p-welcome-txt p { margin: 0; color: rgba(255,255,255,.8); font-size: 15px; }
.ew-p-welcome-txt p i { color: #FFC247; margin-right: 4px; }
.ew-p-welcome-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .ew-p-welcome { gap: 16px; }
  .ew-p-avatar-xl { width: 72px; height: 72px; font-size: 25px; }
  .ew-p-welcome-actions { width: 100%; } .ew-p-welcome-actions .ew-p-btn { flex: 1 1 100%; }
}

/* ---------- Sidebar ---------- */
.ew-p-side { position: sticky; top: 112px; background: #fff; border: 1px solid var(--ep-line); border-radius: var(--ep-radius); box-shadow: var(--ep-shadow); padding: 22px 16px 16px; animation: ew-p-rise .5s both; }
.ew-p-side-user { display: flex; align-items: center; gap: 13px; padding: 4px 8px 18px; margin-bottom: 8px; border-bottom: 1px dashed var(--ep-line); }
.ew-p-side-user b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ep-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-p-side-user small { display: block; color: var(--ep-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-p-side-nav { display: flex; flex-direction: column; gap: 4px; }
.ew-p-side-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 14px; color: var(--ep-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.ew-p-side-nav a i { width: 20px; text-align: center; font-size: 15px; color: #8A95AA; transition: color .2s; }
.ew-p-side-nav a span { flex: 1; }
.ew-p-side-nav a em { font-style: normal; font-size: 11.5px; font-weight: 700; min-width: 24px; height: 22px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); }
.ew-p-side-nav a:hover { background: var(--ep-soft); transform: translateX(2px); }
.ew-p-side-nav a:hover i { color: var(--ep-accent); }
.ew-p-side-nav a.is-active { color: #fff; background: linear-gradient(135deg, var(--ep-navy), rgba(var(--ep-navy-rgb), .82)); box-shadow: 0 14px 26px -14px rgba(var(--ep-navy-rgb), .8); transform: none; }
.ew-p-side-nav a.is-active i { color: #fff; }
.ew-p-side-nav a.is-active em { background: rgba(255,255,255,.2); color: #fff; }
.ew-p-side-nav a.is-logout { margin-top: 6px; color: #C0392B; }
.ew-p-side-nav a.is-logout i { color: #E26B5E; }
.ew-p-side-nav a.is-logout:hover { background: #FDEDEC; }
.ew-p-side-due { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px 14px; border-radius: 15px; background: #FFF3E8; color: #B54708; font-size: 13.5px; text-decoration: none; transition: transform .2s; }
.ew-p-side-due:hover { transform: translateY(-2px); color: #B54708; }
.ew-p-side-due span { flex: 1; line-height: 1.35; }
.ew-p-side-due > i:last-child { font-size: 12px; }
.ew-p-side-help { margin-top: 14px; padding: 20px 18px; border-radius: 18px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(220px 120px at 100% 0%, rgba(var(--ep-accent-rgb), .45), transparent 70%), linear-gradient(135deg, var(--ep-navy), rgba(var(--ep-navy-rgb), .86)); }
.ew-p-side-help > i { font-size: 22px; color: #FFC247; margin-bottom: 10px; display: block; }
.ew-p-side-help b { display: block; font-size: 16px; }
.ew-p-side-help p { margin: 3px 0 12px; font-size: 13px; color: rgba(255,255,255,.78); }
.ew-p-side-help a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.ew-p-side-help a:hover { background: rgba(255,255,255,.26); color: #fff; }
@media (max-width: 991px) {
  .ew-p-side { position: static; padding: 14px; }
  .ew-p-side-user { padding-bottom: 12px; }
  .ew-p-side-nav { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 2px; scrollbar-width: none; }
  .ew-p-side-nav::-webkit-scrollbar { display: none; }
  .ew-p-side-nav a { flex: 0 0 auto; padding: 10px 15px; background: var(--ep-soft); }
  .ew-p-side-nav a span { flex: 0 0 auto; }
  .ew-p-side-nav a:hover { transform: none; }
  .ew-p-side-help { display: none; }
}

/* ---------- Stat tiles ---------- */
.ew-p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ew-p-stat { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lbl ico" "val val" "sub sub"; align-items: start; row-gap: 2px; padding: 20px 20px 18px; background: #fff; border: 1px solid var(--ep-line); border-radius: 22px; box-shadow: var(--ep-shadow); animation: ew-p-rise .5s both; transition: transform .25s, box-shadow .25s; min-width: 0; overflow: hidden; }
.ew-p-stat::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; opacity: .07; background: currentColor; pointer-events: none; }
.ew-p-stat:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -20px rgba(var(--ep-navy-rgb), .3); }
.ew-p-stat:nth-child(2) { animation-delay: .06s; } .ew-p-stat:nth-child(3) { animation-delay: .12s; } .ew-p-stat:nth-child(4) { animation-delay: .18s; }
.ew-p-stat-ico { grid-area: ico; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 18px; color: #fff; }
.ew-p-stat > div { display: contents; }
.ew-p-stat small { grid-area: lbl; align-self: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-muted); }
.ew-p-stat b { grid-area: val; display: block; font-size: clamp(22px, 2.1vw, 27px); font-weight: 700; letter-spacing: -.02em; color: var(--ep-navy); line-height: 1.2; margin: 8px 0 0; word-break: break-word; }
.ew-p-stat em { grid-area: sub; font-style: normal; font-size: 12.5px; color: var(--ep-muted); }
.ew-p-stat.is-navy { color: var(--ep-navy); } .ew-p-stat.is-orange { color: var(--ep-accent); } .ew-p-stat.is-teal { color: var(--ep-teal); } .ew-p-stat.is-violet { color: #7C4DFF; }
.ew-p-stat.is-navy .ew-p-stat-ico { background: linear-gradient(135deg, var(--ep-navy), rgba(var(--ep-navy-rgb), .65)); box-shadow: 0 12px 22px -10px rgba(var(--ep-navy-rgb), .7); }
.ew-p-stat.is-orange .ew-p-stat-ico { background: linear-gradient(135deg, var(--ep-accent), #FFA25C); box-shadow: 0 12px 22px -10px rgba(var(--ep-accent-rgb), .75); }
.ew-p-stat.is-teal .ew-p-stat-ico { background: linear-gradient(135deg, var(--ep-teal), #3DD6C4); box-shadow: 0 12px 22px -10px rgba(var(--ep-teal-rgb), .75); }
.ew-p-stat.is-violet .ew-p-stat-ico { background: linear-gradient(135deg, #7C4DFF, #B197FC); box-shadow: 0 12px 22px -10px rgba(124,77,255,.65); }

/* ---------- Next trip ---------- */
.ew-p-next { display: grid; grid-template-columns: minmax(240px, 38%) 1fr; background: #fff; border: 1px solid var(--ep-line); border-radius: 26px; overflow: hidden; box-shadow: var(--ep-shadow); animation: ew-p-rise .55s both; }
.ew-p-next-img { position: relative; min-height: 270px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 18px; }
.ew-p-next-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ep-navy-rgb), .05) 30%, rgba(var(--ep-navy-rgb), .78) 100%); }
.ew-p-next-days { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 18px; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ew-p-next-days b { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.ew-p-next-days span { font-size: 14px; font-weight: 600; opacity: .92; }
.ew-p-next-body { padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ew-p-next-body h3 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--ep-navy); margin: 0; line-height: 1.25; }
.ew-p-next-foot { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--ep-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 767px) { .ew-p-next { grid-template-columns: 1fr; } .ew-p-next-img { min-height: 190px; } .ew-p-next-body { padding: 22px 20px; } }

/* ---------- Booking cards ---------- */
.ew-p-list { display: grid; gap: 18px; }
.ew-p-bk { display: grid; grid-template-columns: 200px 1fr; gap: 0; background: #fff; border: 1px solid var(--ep-line); border-radius: 22px; overflow: hidden; box-shadow: var(--ep-shadow); transition: transform .25s, box-shadow .25s; animation: ew-p-rise .5s both; }
.ew-p-bk[hidden] { display: none; }
.ew-p-bk:hover { transform: translateY(-3px); box-shadow: 0 26px 46px -22px rgba(var(--ep-navy-rgb), .32); }
.ew-p-bk-img { position: relative; background-size: cover; background-position: center; min-height: 160px; display: block; }
.ew-p-bk-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(var(--ep-navy-rgb), .5)); }
.ew-p-bk-count { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ew-p-bk-main { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ew-p-bk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ew-p-bk-ref { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ep-accent); text-transform: uppercase; }
.ew-p-bk-ref span { color: var(--ep-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.ew-p-bk-title { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ep-navy); margin: 4px 0 0; }
.ew-p-bk-price { text-align: right; flex: 0 0 auto; }
.ew-p-bk-price small { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ep-muted); font-weight: 600; }
.ew-p-bk-price b { font-size: 20px; font-weight: 700; color: var(--ep-navy); letter-spacing: -.01em; white-space: nowrap; }
.ew-p-bk-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; color: var(--ep-muted); font-size: 14px; }
.ew-p-bk-meta li { display: inline-flex; align-items: center; gap: 8px; }
.ew-p-bk-meta i { color: var(--ep-accent); font-size: 13px; width: 14px; text-align: center; }
.ew-p-bk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.ew-p-bk-note { padding: 12px 14px; border-radius: 13px; font-size: 13.5px; display: flex; gap: 10px; background: #FEF3F2; color: #B42318; }
.ew-p-bk.is-compact { grid-template-columns: 138px 1fr; }
.ew-p-bk.is-compact .ew-p-bk-main { padding: 18px 20px; gap: 10px; }
.ew-p-bk.is-compact .ew-p-bk-title { font-size: 16.5px; }
.ew-p-bk.is-compact .ew-p-bk-img { min-height: 130px; }
@media (max-width: 767px) {
  .ew-p-bk, .ew-p-bk.is-compact { grid-template-columns: 1fr; }
  .ew-p-bk-img { min-height: 150px; } .ew-p-bk.is-compact .ew-p-bk-img { min-height: 104px; }
  .ew-p-bk-main, .ew-p-bk.is-compact .ew-p-bk-main { padding: 18px; }
  .ew-p-bk-top { flex-direction: column; gap: 8px; } .ew-p-bk-price { text-align: left; }
}
/* progress track */
.ew-p-track { list-style: none; display: flex; padding: 0; margin: 6px 0 4px; }
.ew-p-track li { flex: 1; position: relative; text-align: center; font-size: 12px; color: var(--ep-muted); font-weight: 600; }
.ew-p-track li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; border-radius: 3px; background: #E7EBF3; }
.ew-p-track li:first-child::before { display: none; }
.ew-p-track li.is-on::before { background: linear-gradient(90deg, var(--ep-teal), var(--ep-accent)); }
.ew-p-track li span { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 7px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #fff; border: 2px solid #D5DBE8; color: #98A2B3; }
.ew-p-track li span i { font-size: 11px; }
.ew-p-track li.is-on span { background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); border-color: transparent; color: #fff; box-shadow: 0 8px 16px -8px rgba(var(--ep-accent-rgb), .8); }
.ew-p-track li.is-on { color: var(--ep-navy); }
.ew-p-track em { font-style: normal; display: block; }

/* toolbar + pills */
.ew-p-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ew-p-toolbar h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--ep-navy); margin: 0; }
.ew-p-toolbar p { margin: 3px 0 0; color: var(--ep-muted); font-size: 14px; }
.ew-p-pills { display: flex; gap: 8px; margin-top: 20px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ew-p-pills::-webkit-scrollbar { display: none; }
.ew-p-pill { flex: 0 0 auto; border: 1.5px solid var(--ep-line); background: #fff; color: var(--ep-ink); height: 40px; padding: 0 16px; border-radius: 999px; font: 600 13.5px/1 var(--font-body, 'Outfit', sans-serif); cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: all .2s; }
.ew-p-pill em { font-style: normal; font-size: 11.5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--ep-soft); color: var(--ep-muted); font-weight: 700; }
.ew-p-pill:hover { border-color: rgba(var(--ep-navy-rgb), .4); }
.ew-p-pill.is-active { background: var(--ep-navy); border-color: var(--ep-navy); color: #fff; box-shadow: 0 12px 22px -12px rgba(var(--ep-navy-rgb), .8); }
.ew-p-pill.is-active em { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Empty states ---------- */
.ew-p-empty { text-align: center; padding: 48px 28px; border: 2px dashed #D6DCEA; border-radius: 24px; background: rgba(255,255,255,.7); }
.ew-p-empty[hidden] { display: none; }
.ew-p-empty-ico { width: 78px; height: 78px; border-radius: 26px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 30px; color: var(--ep-accent); background: rgba(var(--ep-accent-rgb), .12); }
.ew-p-empty h3 { font-size: 20px; font-weight: 700; color: var(--ep-navy); margin: 0 0 6px; }
.ew-p-empty p { color: var(--ep-muted); max-width: 440px; margin: 0 auto 22px; font-size: 15px; line-height: 1.6; }
.ew-p-empty-sm { padding: 30px 20px; }

/* ---------- Suggested safaris ---------- */
.ew-p-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.ew-p-mini { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ep-line); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--ep-shadow); transition: transform .25s, box-shadow .25s; animation: ew-p-rise .5s both; }
.ew-p-mini:hover { transform: translateY(-5px); box-shadow: 0 28px 46px -22px rgba(var(--ep-navy-rgb), .35); color: inherit; }
.ew-p-mini-img { position: relative; height: 150px; background-size: cover; background-position: center; transition: transform .6s; }
.ew-p-mini-img em { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ep-navy); }
.ew-p-mini-img em i { color: #F5A623; }
.ew-p-mini-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.ew-p-mini-body small { font-size: 12.5px; color: var(--ep-muted); font-weight: 600; }
.ew-p-mini-body small i { color: var(--ep-accent); margin-right: 4px; }
.ew-p-mini-body b { font-size: 15.5px; font-weight: 700; color: var(--ep-navy); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ew-p-mini-body > span { font-size: 13px; color: var(--ep-muted); }
.ew-p-mini-body strong { color: var(--ep-accent); font-size: 15px; }

/* ---------- Profile ---------- */
.ew-p-profile-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ew-p-profile-head .ew-p-avatar-xl { border-color: #fff; box-shadow: 0 0 0 1.5px var(--ep-line), 0 16px 30px -14px rgba(var(--ep-navy-rgb), .6); }
.ew-p-profile-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ep-navy); margin: 0 0 3px; }
.ew-p-profile-head p { margin: 0 0 12px; color: var(--ep-muted); font-size: 14.5px; }
.ew-p-profile-head p i { margin-right: 6px; color: var(--ep-accent); }
.ew-p-tabs { display: flex; gap: 6px; border-bottom: 1.5px solid var(--ep-line); margin: -6px 0 26px; overflow-x: auto; scrollbar-width: none; }
.ew-p-tabs::-webkit-scrollbar { display: none; }
.ew-p-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 14px 18px; font-weight: 600; font-size: 14.5px; color: var(--ep-muted); text-decoration: none; position: relative; transition: color .2s; }
.ew-p-tabs a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1.5px; height: 3px; border-radius: 3px; background: var(--ep-accent); transform: scaleX(0); transition: transform .25s; }
.ew-p-tabs a:hover { color: var(--ep-navy); }
.ew-p-tabs a.is-active { color: var(--ep-navy); }
.ew-p-tabs a.is-active::after { transform: scaleX(1); }
.ew-p-tabs a.is-active i { color: var(--ep-accent); }
.ew-p-tabpane { display: none; }
.ew-p-tabpane.is-active { display: block; animation: ew-p-rise .35s both; }
.ew-p-signout { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px; }
.ew-p-signout h3 { font-size: 16.5px; font-weight: 700; color: var(--ep-navy); margin: 0 0 3px; }
.ew-p-signout p { margin: 0; color: var(--ep-muted); font-size: 14px; }

/* ---------- Booking stepper ---------- */
.ew-p-wrap.is-steps .container { position: relative; }
.ew-p-steps-card { background: #fff; border: 1px solid var(--ep-line); border-radius: 22px; box-shadow: var(--ep-shadow); padding: 20px 28px; margin-bottom: 26px; animation: ew-p-rise .45s both; }
.ew-p-steps { display: flex; list-style: none; margin: 0; padding: 0; }
.ew-p-step { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ew-p-step:last-child { flex: 0 0 auto; }
.ew-p-step:not(:last-child)::after { content: ""; flex: 1; height: 3px; margin: 0 16px; border-radius: 3px; background: #E7EBF3; min-width: 18px; }
.ew-p-step.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--ep-teal), var(--ep-accent)); }
.ew-p-step-dot { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: #F0F3F9; color: #98A2B3; border: 2px solid #E0E5F0; transition: all .3s; }
.ew-p-step.is-active .ew-p-step-dot { background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); color: #fff; border-color: transparent; box-shadow: 0 0 0 6px rgba(var(--ep-accent-rgb), .16), 0 12px 22px -8px rgba(var(--ep-accent-rgb), .8); }
.ew-p-step.is-done .ew-p-step-dot { background: linear-gradient(135deg, var(--ep-teal), #31C7B8); color: #fff; border-color: transparent; }
.ew-p-step-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ew-p-step-txt small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-muted); font-weight: 600; }
.ew-p-step-txt b { font-size: 14.5px; font-weight: 700; color: var(--ep-muted); white-space: nowrap; }
.ew-p-step.is-active .ew-p-step-txt b, .ew-p-step.is-done .ew-p-step-txt b { color: var(--ep-navy); }
@media (max-width: 767px) {
  .ew-p-steps-card { padding: 14px 14px; border-radius: 18px; }
  .ew-p-step { gap: 9px; }
  .ew-p-step-txt { display: none; }
  .ew-p-step.is-active { flex: 3 1 0; }
  .ew-p-step.is-active .ew-p-step-txt { display: flex; overflow: hidden; }
  .ew-p-step.is-active .ew-p-step-txt small { display: none; }
  .ew-p-step.is-active .ew-p-step-txt b { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .ew-p-step:not(:last-child)::after { margin: 0 6px; min-width: 8px; }
  .ew-p-step-dot { width: 34px; height: 34px; font-size: 13px; }
  .ew-p-step.is-active .ew-p-step-dot { box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .16), 0 10px 18px -8px rgba(var(--ep-accent-rgb), .8); }
}

/* ---------- Payment method cards ---------- */
.ew-p-pays { display: grid; gap: 14px; margin-bottom: 24px; }
.ew-p-pays.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 767px) { .ew-p-pays.is-compact { grid-template-columns: 1fr; } }
.ew-p-pay { display: block; margin: 0; cursor: pointer; position: relative; }
.ew-p-pay input { position: absolute; opacity: 0; pointer-events: none; }
.ew-p-pay-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--ep-line); border-radius: 19px; background: #fff; transition: border-color .2s, box-shadow .2s, background .2s, transform .2s; height: 100%; }
.ew-p-pay:hover .ew-p-pay-card { border-color: rgba(var(--ep-accent-rgb), .55); transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(var(--ep-navy-rgb), .4); }
.ew-p-pay input:checked + .ew-p-pay-card { border-color: var(--ep-accent); background: rgba(var(--ep-accent-rgb), .045); box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .13); }
.ew-p-pay input:focus-visible + .ew-p-pay-card { outline: 3px solid rgba(var(--ep-accent-rgb), .5); outline-offset: 2px; }
.ew-p-pay-ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 21px; color: var(--ep-navy); background: rgba(var(--ep-navy-rgb), .07); transition: all .2s; }
.ew-p-pay input:checked + .ew-p-pay-card .ew-p-pay-ico { background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); color: #fff; box-shadow: 0 12px 22px -10px rgba(var(--ep-accent-rgb), .8); }
.ew-p-pay-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ew-p-pay-txt b { font-size: 16px; font-weight: 700; color: var(--ep-navy); }
.ew-p-pay-txt small { font-size: 13px; color: var(--ep-muted); line-height: 1.45; }
.ew-p-pay-tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #CBD3E3; display: grid; place-items: center; color: transparent; font-size: 11px; transition: all .2s; }
.ew-p-pay input:checked + .ew-p-pay-card .ew-p-pay-tick { background: var(--ep-accent); border-color: var(--ep-accent); color: #fff; }
.ew-p-pays.is-compact .ew-p-pay-card { padding: 14px 16px; gap: 13px; }
.ew-p-pays.is-compact .ew-p-pay-ico { width: 44px; height: 44px; border-radius: 14px; font-size: 18px; }
.ew-p-pays.is-compact .ew-p-pay-txt b { font-size: 15px; }
.ew-p-pays.is-compact .ew-p-pay-txt small { font-size: 12.5px; }
.ew-p-assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--ep-line); }
.ew-p-assure span { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "i b" "i s"; column-gap: 12px; align-items: center; }
.ew-p-assure i { grid-area: i; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--ep-teal-rgb), .12); color: var(--ep-teal); font-size: 16px; }
.ew-p-assure b { grid-area: b; font-size: 13.5px; font-weight: 700; color: var(--ep-navy); align-self: end; }
.ew-p-assure small { grid-area: s; font-size: 12px; color: var(--ep-muted); align-self: start; }
@media (max-width: 767px) { .ew-p-assure { grid-template-columns: 1fr; } }

/* ---------- Order summary ---------- */
.ew-p-sum { position: sticky; top: 108px; background: #fff; border: 1px solid var(--ep-line); border-radius: 26px; overflow: hidden; box-shadow: var(--ep-shadow); animation: ew-p-rise .55s both; }
.ew-p-sum-img { position: relative; height: 190px; background-size: cover; background-position: center; }
.ew-p-sum-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--ep-navy-rgb), .62)); }
.ew-p-sum-ref { position: absolute; z-index: 1; left: 16px; bottom: 14px; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ew-p-sum-ref i { color: #FFC247; }
.ew-p-sum-body { padding: 24px; }
.ew-p-sum-body h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.32; color: var(--ep-navy); margin: 0 0 12px; }
.ew-p-sum-list, .ew-p-sum-lines { list-style: none; margin: 16px 0 0; padding: 0; }
.ew-p-sum-list li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--ep-line); font-size: 14px; }
.ew-p-sum-list li span { color: var(--ep-muted); display: inline-flex; gap: 9px; align-items: center; } .ew-p-sum-list li span i { color: var(--ep-accent); width: 15px; text-align: center; font-size: 13px; }
.ew-p-sum-list li b { font-weight: 600; color: var(--ep-ink); text-align: right; }
.ew-p-sum-lines { margin-top: 6px; }
.ew-p-sum-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 14px; color: var(--ep-muted); }
.ew-p-sum-lines li[hidden] { display: none; }
.ew-p-sum-lines li b { color: var(--ep-ink); font-weight: 600; }
.ew-p-sum-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 18px; padding: 16px 18px; border-radius: 17px; background: linear-gradient(135deg, rgba(var(--ep-navy-rgb), .06), rgba(var(--ep-teal-rgb), .08)); }
.ew-p-sum-total span { font-weight: 600; color: var(--ep-navy); }
.ew-p-sum-total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ep-accent); }
.ew-p-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 18px; font-size: 12.5px; color: var(--ep-muted); font-weight: 500; }
.ew-p-trust i { color: var(--ep-teal); margin-right: 5px; }
@media (max-width: 991px) { .ew-p-sum { position: static; } }

/* ---------- Result / notice / wait ---------- */
.ew-p-notice { display: flex; align-items: center; gap: 20px; }
.ew-p-notice h2 { font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--ep-navy); }
.ew-p-notice p { margin: 0; color: var(--ep-muted); font-size: 15px; line-height: 1.55; }
.ew-p-notice-ico { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; font-size: 28px; }
.ew-p-notice.is-success { background: linear-gradient(135deg, #F2FBF6, #fff 60%); }
.ew-p-notice.is-success .ew-p-notice-ico { background: #DDF5E7; color: #12A150; }
.ew-p-result { text-align: center; padding: 48px 34px; }
.ew-p-result h2 { font-size: clamp(25px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; color: var(--ep-navy); margin: 8px 0 10px; }
.ew-p-result > p { max-width: 520px; margin: 0 auto 24px; color: var(--ep-muted); font-size: 16px; line-height: 1.65; }
.ew-p-result > p b { color: var(--ep-ink); }
.ew-p-result.is-success { background: radial-gradient(520px 220px at 50% -40px, rgba(18,161,80,.12), transparent 70%), #fff; }
.ew-p-result-ring { width: 104px; height: 104px; margin: 0 auto 6px; animation: ew-p-pop .6s both; }
.ew-p-result-ring svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ew-p-result-ring circle { stroke: #12A150; stroke-dasharray: 151; stroke-dashoffset: 151; fill: #E3F7EC; animation: ew-p-draw .8s .1s forwards; }
.ew-p-result-ring path { stroke: #12A150; stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ew-p-draw .5s .75s forwards; }
.ew-p-result-ico { width: 96px; height: 96px; margin: 0 auto 8px; border-radius: 32px; display: grid; place-items: center; font-size: 38px; background: #FFF1DA; color: #D9830B; animation: ew-p-pop .6s both; }
.ew-p-result-ref { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 16px; background: var(--ep-soft); border: 1px dashed #C9D1E2; }
.ew-p-result-ref small { color: var(--ep-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ew-p-result-ref b { font-size: 17px; letter-spacing: .04em; color: var(--ep-navy); }
.ew-p-result-ref button, [data-ew-copy].ew-p-btn-soft { cursor: pointer; }
.ew-p-result-ref button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #fff; color: var(--ep-navy); box-shadow: 0 1px 2px rgba(16,24,40,.1); transition: all .2s; }
.ew-p-result-ref button:hover { background: var(--ep-navy); color: #fff; }
.ew-p-result-ref button.is-copied { background: #12A150; color: #fff; }
@media (max-width: 575px) { .ew-p-result-ref { flex-wrap: wrap; justify-content: center; padding: 12px 16px; } }
.ew-p-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ew-p-timeline::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: repeating-linear-gradient(180deg, #CBD3E3 0 6px, transparent 6px 12px); }
.ew-p-timeline li { position: relative; display: flex; gap: 18px; padding: 10px 0 20px; }
.ew-p-timeline li:last-child { padding-bottom: 0; }
.ew-p-timeline li > span { position: relative; z-index: 1; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #D5DBE8; color: var(--ep-muted); font-weight: 700; }
.ew-p-timeline li.is-done > span { background: linear-gradient(135deg, var(--ep-teal), #31C7B8); border-color: transparent; color: #fff; }
.ew-p-timeline b { display: block; font-size: 16px; color: var(--ep-navy); margin-bottom: 3px; }
.ew-p-timeline p { margin: 0; color: var(--ep-muted); font-size: 14.5px; line-height: 1.55; }
.ew-p-prose { color: var(--ep-ink); font-size: 15px; line-height: 1.7; }
.ew-p-prose > *:first-child { margin-top: 0; }
.ew-p-prose p { margin: 0 0 12px; color: var(--ep-muted); }
.ew-p-prose strong, .ew-p-prose b { color: var(--ep-navy); }
.ew-p-prose ul, .ew-p-prose ol { padding-left: 20px; color: var(--ep-muted); }
.ew-p-prose table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ep-line); border-radius: 16px; overflow: hidden; margin: 14px 0; font-size: 14.5px; }
.ew-p-prose th, .ew-p-prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ep-line); }
.ew-p-prose tr:last-child th, .ew-p-prose tr:last-child td { border-bottom: 0; }
.ew-p-prose th { background: var(--ep-soft); color: var(--ep-muted); font-weight: 600; width: 38%; }
.ew-p-pay-amount { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 6px; padding: 20px 22px; border-radius: 19px; background: linear-gradient(135deg, rgba(var(--ep-navy-rgb), .06), rgba(var(--ep-teal-rgb), .09)); }
.ew-p-pay-amount small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ep-muted); font-weight: 600; }
.ew-p-pay-amount b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ep-accent); }
.ew-p-wait { text-align: center; padding: 46px 34px; }
.ew-p-wait h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ep-navy); margin: 22px 0 8px; }
.ew-p-wait > p { color: var(--ep-muted); max-width: 460px; margin: 0 auto 24px; font-size: 16px; line-height: 1.6; }
.ew-p-pulse { position: relative; width: 104px; height: 104px; margin: 0 auto; border-radius: 34px; display: grid; place-items: center; font-size: 42px; color: #fff; background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); box-shadow: 0 22px 40px -16px rgba(var(--ep-accent-rgb), .8); }
.ew-p-pulse span { position: absolute; inset: 0; border-radius: 34px; border: 2px solid var(--ep-accent); animation: ew-p-ring 2.2s ease-out infinite; }
.ew-p-pulse span:nth-child(2) { animation-delay: 1.1s; }
.ew-p-wait-steps { list-style: none; margin: 0 auto 26px; padding: 0; max-width: 400px; text-align: left; display: grid; gap: 12px; }
.ew-p-wait-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 15px; background: var(--ep-soft); font-size: 14.5px; font-weight: 500; }
.ew-p-wait-steps li span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--ep-navy); color: #fff; }
.ew-p-wait-status { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; font-weight: 600; color: var(--ep-muted); font-size: 14.5px; }
.ew-p-wait-status a { color: var(--ep-accent); }
.ew-p-spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(var(--ep-accent-rgb), .2); border-top-color: var(--ep-accent); animation: ew-p-spin .8s linear infinite; }

/* ==========================================================================
   AUTH — split-screen
   ========================================================================== */
.ew-auth { position: relative; overflow: hidden; padding: 136px 0 72px;
  background:
    radial-gradient(700px 420px at 8% 0%, rgba(var(--ep-accent-rgb), .12), transparent 65%),
    radial-gradient(760px 480px at 100% 100%, rgba(var(--ep-teal-rgb), .13), transparent 65%),
    linear-gradient(180deg, #F1F4FB, #F8FAFD); }
@media (min-width: 992px) { .ew-auth { padding: 178px 0 104px; } }
.ew-auth-card { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); max-width: 1080px; margin: 0 auto; background: #fff; border-radius: 34px; overflow: hidden; box-shadow: var(--ep-shadow-lg), 0 0 0 1px rgba(var(--ep-navy-rgb), .05); animation: ew-p-rise .6s both; }
.ew-auth-card-wide { max-width: 1140px; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
.ew-auth-brand { position: relative; color: #fff; display: flex; min-height: 100%; isolation: isolate; }
.ew-auth-brand-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; }
.ew-auth-brand-shade { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(var(--ep-accent-rgb), .35), transparent 70%),
    linear-gradient(165deg, rgba(var(--ep-navy-rgb), .62) 0%, rgba(var(--ep-navy-rgb), .84) 55%, rgba(var(--ep-navy-rgb), .96) 100%); }
.ew-auth-brand-in { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 44px 44px 38px; width: 100%; }
.ew-auth-logo img { height: 54px; width: auto; display: block; }
.ew-auth-tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ew-auth-tag i { color: #FFC247; }
.ew-auth-brand-copy h2 { font-size: clamp(27px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1.14; color: #fff; margin: 18px 0 14px; }
.ew-auth-brand-copy h2 em { font-style: normal; color: var(--ew-banner-accent, var(--accent, #FF6B00)); }
.ew-auth-brand-copy > p { color: rgba(255,255,255,.8); font-size: 15.5px; line-height: 1.65; margin: 0 0 26px; max-width: 420px; }
.ew-auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ew-auth-perks li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.92); }
.ew-auth-perks li span { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); color: #FFC247; font-size: 15px; }
.ew-auth-trust { font-size: 12.5px; color: rgba(255,255,255,.7); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ew-auth-trust i { color: #5FE0CF; margin-right: 2px; }
.ew-auth-form { padding: 50px 54px 44px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ew-auth-head { margin-bottom: 26px; }
.ew-auth-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 22px; color: #fff; margin-bottom: 18px; background: linear-gradient(135deg, var(--ep-accent), var(--ep-accent-dk)); box-shadow: 0 16px 28px -12px rgba(var(--ep-accent-rgb), .8); }
.ew-auth-head h1 { font-size: 31px; font-weight: 700; letter-spacing: -.025em; color: var(--ep-navy); margin: 0 0 6px; }
.ew-auth-head p { margin: 0; color: var(--ep-muted); font-size: 15.5px; }
.ew-auth-alt { text-align: center; margin: 26px 0 0; color: var(--ep-muted); font-size: 14.5px; }
@media (max-width: 991px) {
  .ew-auth-card, .ew-auth-card-wide { grid-template-columns: 1fr; max-width: 560px; border-radius: 28px; }
  .ew-auth-brand-in { padding: 26px 26px 24px; gap: 14px; }
  .ew-auth-logo img { height: 44px; }
  .ew-auth-brand-copy > p, .ew-auth-perks, .ew-auth-trust { display: none; }
  .ew-auth-brand-copy h2 { font-size: 24px; margin: 14px 0 0; }
  .ew-auth-form { padding: 32px 26px 30px; }
}
@media (max-width: 575px) {
  .ew-auth-form { padding: 28px 20px 26px; }
  .ew-auth-head h1 { font-size: 27px; }
  .ew-auth-card, .ew-auth-card-wide { border-radius: 24px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 575px) {
  .ew-p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ew-p-stat { padding: 16px 14px 14px; border-radius: 18px; }
  .ew-p-stat-ico { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
  .ew-p-stat small { font-size: 10.5px; letter-spacing: .04em; }
  .ew-p-stat b { font-size: 19px; }
  .ew-p-stat em { font-size: 11.5px; }
  .ew-p-profile-head { flex-direction: column; text-align: center; gap: 14px; }
  .ew-p-profile-head .ew-p-chips { justify-content: center; }
  .ew-p-section-title h2 { font-size: 19px; }
  .ew-p-side-nav { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 18px; }
  .ew-p-block-head { align-items: flex-start; }
  .ew-p-block-head h2 { font-size: 18px; }
  .ew-p-result { padding: 36px 20px; }
  .ew-p-wait { padding: 36px 18px; }
  .ew-p-actions-center .ew-p-btn { flex: 1 1 100%; }
  .ew-p-form-foot .ew-p-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ew-auth *, .ew-p-card, .ew-p-bk, .ew-p-stat, .ew-p-mini, .ew-p-next, .ew-p-side, .ew-p-sum, .ew-p-steps-card, .ew-p-result-ring, .ew-p-result-ico, .ew-p-pulse span { animation: none !important; }
  .ew-p-result-ring circle, .ew-p-result-ring path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   PHASE 7 — FLAT BRAND COLOURS
   Every decorative gradient in the portal / auth screens is replaced with the
   solid primary (navy) or accent colour from the Theme manager.
   ========================================================================== */
.ew-p-num { background: var(--ep-navy); box-shadow: 0 10px 22px -10px rgba(var(--ep-navy-rgb), .5); }
.ew-p-avatar { background: var(--ep-navy); box-shadow: none; }
.ew-p-btn-primary { background: var(--ep-accent); box-shadow: 0 12px 24px -12px rgba(var(--ep-accent-rgb), .7); }
.ew-p-btn-primary:hover { background: var(--ep-accent-dk); filter: none; }
.ew-p-btn-danger { background: #C0392B; color: #fff; }
.ew-p-btn-danger:hover { background: #A52F23; color: #fff; transform: translateY(-1px); }
.ew-p-hero-shade { background: rgba(var(--ep-navy-rgb), .86); }
.ew-p-side-nav a.is-active { background: var(--ep-navy); box-shadow: 0 14px 26px -16px rgba(var(--ep-navy-rgb), .7); }
.ew-p-side-help { background: var(--ep-navy); }
.ew-p-stat.is-navy .ew-p-stat-ico { background: var(--ep-navy); box-shadow: none; }
.ew-p-stat.is-orange .ew-p-stat-ico { background: var(--ep-accent); box-shadow: none; }
.ew-p-stat.is-teal .ew-p-stat-ico { background: var(--ep-teal); box-shadow: none; }
.ew-p-stat.is-violet .ew-p-stat-ico, .ew-p-stat.is-gold .ew-p-stat-ico { background: #E8A317; box-shadow: none; }
.ew-p-stat.is-violet, .ew-p-stat.is-gold { color: #E8A317; }
.ew-p-next-img::before { background: rgba(var(--ep-navy-rgb), .38); }
.ew-p-bk-img::after { background: rgba(var(--ep-navy-rgb), .14); }
.ew-p-sum-img::after { background: rgba(var(--ep-navy-rgb), .3); }
.ew-p-track li.is-on::before { background: var(--ep-accent); }
.ew-p-track li.is-on span { background: var(--ep-accent); box-shadow: none; }
.ew-p-step.is-done:not(:last-child)::after { background: var(--ep-accent); }
.ew-p-step.is-active .ew-p-step-dot { background: var(--ep-accent); }
.ew-p-step.is-done .ew-p-step-dot, .ew-p-timeline li.is-done > span { background: var(--ep-teal); }
.ew-p-pay input:checked + .ew-p-pay-card .ew-p-pay-ico { background: var(--ep-accent); box-shadow: none; }
.ew-p-sum-total, .ew-p-pay-amount { background: rgba(var(--ep-navy-rgb), .06); }
.ew-p-notice.is-success { background: #F2FBF6; }
.ew-p-result.is-success { background: #fff; }
.ew-p-pulse { background: var(--ep-accent); box-shadow: 0 18px 34px -16px rgba(var(--ep-accent-rgb), .7); }
.ew-auth { background: var(--ep-soft); }
.ew-auth-brand-shade { background: rgba(var(--ep-navy-rgb), .84); }
.ew-auth-ico { background: var(--ep-accent); box-shadow: 0 14px 26px -14px rgba(var(--ep-accent-rgb), .7); }
/* informational colours: brand tints instead of blue */
.ew-p-alert.is-info { background: rgba(var(--ep-navy-rgb), .06); color: var(--ep-navy); border-color: rgba(var(--ep-navy-rgb), .16); }
.ew-p-chip.is-completed { background: rgba(var(--ep-teal-rgb), .14); color: #0B6B63; }

/* ==========================================================================
   PHASE 7 — Wishlist heart + toast (loaded on every public page)
   ========================================================================== */
.ew-wish { position: absolute; top: 12px; right: 12px; z-index: 6; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center;
  background: #fff; color: var(--primary, #001853); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); transition: transform .2s ease, background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.ew-wish:hover { transform: scale(1.1); color: var(--accent, #FF6B00); }
.ew-wish:focus-visible { outline: 3px solid rgba(255,107,0,.5); outline-offset: 2px; }
.ew-wish.is-saved { background: var(--accent, #FF6B00); color: #fff; }
.ew-wish.is-saved:hover { color: #fff; }
.ew-wish.is-busy { opacity: .6; pointer-events: none; }
.ew-wish.is-saved i { animation: ew-wish-pop .38s ease; }
@keyframes ew-wish-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.ew-wish-toast { position: fixed; left: 50%; bottom: 26px; z-index: 99999; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px; background: var(--primary, #001853); color: #fff; font: 600 14px/1.35 var(--font-body, 'Outfit', system-ui, sans-serif); box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); transition: opacity .25s ease, transform .25s ease; }
.ew-wish-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.ew-wish-toast a { color: var(--accent, #FF6B00); text-decoration: none; font-weight: 700; white-space: nowrap; }
.ew-wish-toast a:hover { text-decoration: underline; }

/* ==========================================================================
   PHASE 7 — Portal components
   ========================================================================== */
.ew-p-muted { color: var(--ep-muted); font-size: 14px; margin: 0; }
.ew-p-sub { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ep-navy); margin: 30px 0 14px; padding-top: 22px; border-top: 1px dashed var(--ep-line); }
.ew-p-sub.is-first { margin-top: 0; padding-top: 0; border-top: 0; }
.ew-p-sub i { color: var(--ep-accent); }
.ew-p-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ew-p-card-title h3 { font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ep-navy); margin: 0; display: flex; align-items: center; gap: 11px; }
.ew-p-card-title h3 i { color: var(--ep-accent); font-size: 16px; width: 20px; text-align: center; }
.ew-p-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.ew-p-eyebrow i { color: var(--ep-accent); }
.ew-p-stats.has-gap { margin-top: 0; }
.ew-p-bk-title a { color: inherit; text-decoration: none; }
.ew-p-bk-title a:hover { color: var(--ep-accent); }

/* progress meters */
.ew-p-meter { height: 8px; border-radius: 999px; background: #E7EBF3; overflow: hidden; }
.ew-p-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--ep-accent); animation: ew-p-grow .9s cubic-bezier(.2,.8,.2,1) both; }
.ew-p-meter[aria-valuenow="100"] > span { background: #12A150; }
.ew-p-meter.is-light { background: rgba(255,255,255,.22); }
@keyframes ew-p-grow { from { width: 0; } }
.ew-p-pay-bar { margin-top: 2px; }
.ew-p-pay-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ep-muted); margin-bottom: 7px; }
.ew-p-pay-bar-top b { color: var(--ep-navy); font-weight: 700; }
.ew-p-pay-bar-top i { color: #12A150; margin-right: 3px; }
.ew-p-meter-cap { margin-top: 9px; margin-bottom: 18px; }

/* next-trip hero card with countdown */
.ew-p-trip { position: relative; isolation: isolate; border-radius: 26px; overflow: hidden; color: #fff; margin-bottom: 22px; box-shadow: var(--ep-shadow-lg); animation: ew-p-rise .55s both; }
.ew-p-trip-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.ew-p-trip-shade { position: absolute; inset: 0; z-index: -1; background: rgba(var(--ep-navy-rgb), .8); }
.ew-p-trip-in { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.ew-p-trip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ew-p-trip .ew-p-chip { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.ew-p-trip h2 { font-size: clamp(23px, 2.6vw, 31px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.ew-p-trip h2 a { color: #fff; text-decoration: none; }
.ew-p-trip-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; color: rgba(255,255,255,.88); font-size: 14.5px; }
.ew-p-trip-meta i { color: var(--ep-accent); margin-right: 8px; }
.ew-p-count { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); gap: 12px; }
.ew-p-count > div { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); border-radius: 16px; padding: 13px 8px 11px; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ew-p-count b { display: block; font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ew-p-count small { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.ew-p-count.is-done > div { display: none; }
.ew-p-count-done { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: 17px; }
.ew-p-count-done[hidden] { display: none; }
.ew-p-count-done i { color: #FFC247; margin-right: 8px; }
.ew-p-trip-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 26px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); }
.ew-p-trip-pay { flex: 1 1 280px; min-width: 0; }
.ew-p-trip-pay .ew-p-pay-bar-top { color: rgba(255,255,255,.78); }
.ew-p-trip-pay .ew-p-pay-bar-top b { color: #fff; }
.ew-p-trip-pay .ew-p-pay-bar-top i { color: #6EE7A8; }
.ew-p-trip .ew-p-btn-glass { background: rgba(255,255,255,.14); }
@media (max-width: 767px) {
  .ew-p-trip { border-radius: 22px; }
  .ew-p-trip-in { padding: 22px 18px 20px; gap: 14px; }
  .ew-p-count { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .ew-p-count > div { padding: 11px 4px 9px; border-radius: 14px; }
  .ew-p-count b { font-size: 25px; }
  .ew-p-count small { font-size: 9.5px; letter-spacing: .08em; }
  .ew-p-trip-foot .ew-p-bk-actions { width: 100%; } .ew-p-trip-foot .ew-p-bk-actions .ew-p-btn { flex: 1 1 auto; }
}

/* quick actions */
.ew-p-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ew-p-q { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: #fff; border: 1px solid var(--ep-line); border-radius: 18px; box-shadow: var(--ep-shadow); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; animation: ew-p-rise .5s both; }
.ew-p-q:hover { transform: translateY(-3px); border-color: rgba(var(--ep-accent-rgb), .45); box-shadow: 0 22px 38px -22px rgba(var(--ep-navy-rgb), .35); color: inherit; }
.ew-p-q-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); transition: background .25s, color .25s; }
.ew-p-q:hover .ew-p-q-ico { background: var(--ep-accent); color: #fff; }
.ew-p-q.is-alert .ew-p-q-ico { background: var(--ep-accent); color: #fff; }
.ew-p-q.is-wa .ew-p-q-ico { background: rgba(31,184,85,.14); color: #17A34A; }
.ew-p-q.is-wa:hover .ew-p-q-ico { background: #1FB855; color: #fff; }
.ew-p-q-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-p-q-txt b { font-size: 14.5px; font-weight: 700; color: var(--ep-navy); line-height: 1.25; }
.ew-p-q-txt small { font-size: 12.5px; color: var(--ep-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-p-q-go { font-size: 11px; color: #A5AEBF; transition: transform .2s, color .2s; }
.ew-p-q:hover .ew-p-q-go { transform: translateX(3px); color: var(--ep-accent); }
@media (max-width: 991px) and (min-width: 576px) { .ew-p-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .ew-p-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ew-p-q { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; }
  .ew-p-q-go { display: none; }
  .ew-p-q-txt { width: 100%; } .ew-p-q-txt small { white-space: normal; }
}

/* two-column rows */
.ew-p-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; margin-top: 34px; align-items: start; }
.ew-p-duo.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.ew-p-duo > .ew-p-card { margin-bottom: 0; }
.ew-p-feed-card.is-wide { grid-column: 1 / -1; }
.ew-p-duo.is-even { margin-bottom: 22px; }
@media (max-width: 1199px) { .ew-p-duo, .ew-p-duo.is-even { grid-template-columns: minmax(0, 1fr); } }

/* readiness card + ring */
.ew-p-ring { position: relative; flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-items: center; text-decoration: none; }
.ew-p-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ew-p-ring circle { fill: none; stroke-width: 9; }
.ew-p-ring .trk { stroke: #E7EBF3; }
.ew-p-ring .val { stroke: var(--ep-accent); stroke-linecap: round; animation: ew-p-ringfill 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ew-p-ringfill { from { stroke-dashoffset: 263.9; } }
.ew-p-ring b { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ep-navy); }
.ew-p-ring b small { font-size: 12px; font-weight: 700; margin-left: 1px; color: var(--ep-muted); }
.ew-p-ring.is-sm { width: 64px; height: 64px; margin-left: auto; }
.ew-p-ring.is-sm circle { stroke-width: 11; }
.ew-p-ring.is-sm b { font-size: 17px; }
.ew-p-ready-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.ew-p-ready h3 { font-size: 18px; font-weight: 700; color: var(--ep-navy); margin: 0 0 4px; }
.ew-p-ready p { margin: 0; color: var(--ep-muted); font-size: 14px; line-height: 1.5; }
.ew-p-todo { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.ew-p-todo a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--ep-soft); color: var(--ep-ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, transform .2s; }
.ew-p-todo a:hover { background: rgba(var(--ep-accent-rgb), .1); transform: translateX(2px); }
.ew-p-todo a i { color: #A5AEBF; } .ew-p-todo a span { flex: 1; }
.ew-p-todo a em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ep-accent); }
.ew-p-miles { display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--ep-line); }
.ew-p-miles a { display: flex; align-items: center; gap: 11px; padding: 7px 4px; color: var(--ep-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.ew-p-miles a i { color: #C5CDDD; width: 18px; text-align: center; }
.ew-p-miles a.is-done { color: var(--ep-ink); } .ew-p-miles a.is-done i { color: #12A150; }
.ew-p-miles a:hover { color: var(--ep-accent); }
.ew-p-ready-x { margin: 10px 0 0; text-align: right; }
.ew-p-ready-x button { border: 0; background: none; color: var(--ep-muted); font: 500 12.5px/1 inherit; cursor: pointer; padding: 6px 2px; text-decoration: underline; }
.ew-p-ready-x button:hover { color: var(--ep-navy); }

/* activity feed */
.ew-p-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; }
.ew-p-feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 0; }
.ew-p-feed li + li { border-top: 1px dashed var(--ep-line); }
.ew-p-feed-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 15px; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); }
.tone-teal .ew-p-feed-ico { background: rgba(var(--ep-teal-rgb), .14); color: #0B6B63; }
.tone-orange .ew-p-feed-ico { background: rgba(var(--ep-accent-rgb), .14); color: var(--ep-accent); }
.tone-red .ew-p-feed-ico { background: #FDE8E8; color: #C0392B; }
.ew-p-feed a { font-size: 14.5px; font-weight: 700; color: var(--ep-navy); text-decoration: none; line-height: 1.35; display: block; }
.ew-p-feed a:hover { color: var(--ep-accent); }
.ew-p-feed p { margin: 2px 0 0; font-size: 13px; color: var(--ep-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ew-p-feed time { font-size: 12px; color: #98A2B3; white-space: nowrap; padding-top: 3px; }

/* saved strip + cards with hearts */
.ew-p-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px; margin: 0 -2px; scrollbar-width: thin; }
.ew-p-save { position: relative; flex: 0 0 min(250px, 74%); scroll-snap-align: start; background: #fff; border: 1px solid var(--ep-line); border-radius: 20px; overflow: hidden; box-shadow: var(--ep-shadow); transition: transform .25s, box-shadow .25s; }
.ew-p-save:hover { transform: translateY(-4px); box-shadow: 0 26px 42px -22px rgba(var(--ep-navy-rgb), .35); }
.ew-p-save-img { display: block; height: 140px; background-size: cover; background-position: center; }
.ew-p-save-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; text-decoration: none; color: inherit; }
.ew-p-save-body small { font-size: 12.5px; color: var(--ep-muted); font-weight: 600; } .ew-p-save-body small i { color: var(--ep-accent); margin-right: 4px; }
.ew-p-save-body b { font-size: 14.5px; font-weight: 700; color: var(--ep-navy); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.ew-p-save-body span { font-size: 13px; color: var(--ep-muted); } .ew-p-save-body strong { color: var(--ep-accent); }
.ew-p-mini { position: relative; }
.ew-p-mini-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.ew-p-mini-link:hover { color: inherit; }

/* bookings finder */
.ew-p-finder { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ew-p-search, .ew-p-sort { position: relative; margin: 0; }
.ew-p-search { flex: 1 1 260px; }
.ew-p-search > i, .ew-p-sort > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9AA5B8; font-size: 14px; pointer-events: none; }
.ew-p-search input, .ew-p-sort select { width: 100%; height: 48px; padding: 0 16px 0 42px; border: 1.5px solid var(--ep-line); border-radius: 14px; background: #FBFCFE; font: 500 14.5px/1 var(--font-body, 'Outfit', sans-serif); color: var(--ep-ink); appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; }
.ew-p-sort select { padding-right: 38px; cursor: pointer; background: #FBFCFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A95AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; }
.ew-p-search input:focus, .ew-p-sort select:focus { outline: none; border-color: var(--ep-accent); background-color: #fff; box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .14); }
@media (max-width: 575px) { .ew-p-sort { flex: 1 1 100%; } }

/* select inputs (forms) */
.ew-p-input.is-select select { width: 100%; height: 54px; padding: 0 42px 0 46px; border: 1.5px solid var(--ep-line); border-radius: 15px; font: 500 15.5px/1.4 var(--font-body, 'Outfit', sans-serif); color: var(--ep-ink); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s, box-shadow .2s;
  background: #FBFCFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A95AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 17px center; }
.ew-p-input.is-select select:focus { outline: none; border-color: var(--ep-accent); background-color: #fff; box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .14); }
.ew-p-input.is-select:focus-within > i:first-child { color: var(--ep-accent); }
.ew-p-btn.is-loading { pointer-events: none; opacity: .85; }
.ew-p-btn.is-loading::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ew-p-spin .7s linear infinite; }

/* side menu extras */
.ew-p-side-meter { display: block; margin: -2px 6px 12px; padding: 11px 12px; border-radius: 14px; background: var(--ep-soft); text-decoration: none; color: var(--ep-muted); font-size: 12.5px; transition: background .2s; }
.ew-p-side-meter:hover { background: rgba(var(--ep-accent-rgb), .1); color: var(--ep-muted); }
.ew-p-side-meter b { color: var(--ep-navy); }
.ew-p-side-meter .ew-p-meter { display: block; margin-top: 7px; height: 6px; }
.ew-p-side-nav a em.is-alert { background: var(--ep-accent); color: #fff; }
@media (max-width: 991px) { .ew-p-side-meter { display: none; } }

/* booking detail */
.ew-p-bd { display: grid; grid-template-columns: 290px minmax(0, 1fr); padding: 0; overflow: hidden; }
.ew-p-bd-img { position: relative; display: block; min-height: 280px; background-size: cover; background-position: center; }
.ew-p-bd-img::after { content: ""; position: absolute; inset: 0; background: rgba(var(--ep-navy-rgb), .12); }
.ew-p-bd-img .ew-p-bk-count { z-index: 1; }
.ew-p-bd-main { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ew-p-bd-main h2 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--ep-navy); margin: 0; }
.ew-p-bd .ew-p-bd-wide { grid-column: 1 / -1; }
.ew-p-bd .ew-p-track.ew-p-bd-wide { margin: 0; padding: 20px 28px 22px; border-top: 1px dashed var(--ep-line); }
.ew-p-bd .ew-p-bk-note.ew-p-bd-wide { margin: 0 28px 24px; }
.ew-p-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ew-p-facts > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 11px 13px; border-radius: 14px; background: var(--ep-soft); min-width: 0; }
.ew-p-facts i { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 14px; background: #fff; color: var(--ep-accent); }
.ew-p-facts small { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ep-muted); align-self: end; }
.ew-p-facts b { font-size: 13.5px; font-weight: 700; color: var(--ep-navy); align-self: start; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991px) { .ew-p-bd { grid-template-columns: 1fr; } .ew-p-bd-img { min-height: 190px; } .ew-p-bd-main { padding: 20px 18px 18px; } .ew-p-bd .ew-p-track.ew-p-bd-wide { padding: 18px 12px 20px; } .ew-p-bd .ew-p-bk-note.ew-p-bd-wide { margin: 0 18px 20px; } }
@media (max-width: 575px) { .ew-p-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ew-p-facts > div { grid-template-columns: 1fr; padding: 11px 12px; row-gap: 2px; } .ew-p-facts i { grid-row: auto; margin-bottom: 4px; } }

.ew-p-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ew-p-figs > div { background: var(--ep-soft); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ew-p-figs small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ep-muted); }
.ew-p-figs b { display: block; margin-top: 3px; font-size: 16.5px; font-weight: 700; color: var(--ep-navy); letter-spacing: -.01em; word-break: break-word; }
.ew-p-figs b.is-ok { color: #067647; } .ew-p-figs b.is-due { color: #C2410C; }
.ew-p-paycard .ew-p-btn-block { margin-top: 4px; }
.ew-p-ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.ew-p-ledger li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; }
.ew-p-ledger li + li { border-top: 1px dashed var(--ep-line); }
.ew-p-ledger-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); font-size: 15px; }
.ew-p-ledger b { display: block; font-size: 14px; color: var(--ep-navy); }
.ew-p-ledger small { display: block; font-size: 12px; color: var(--ep-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-p-ledger-amt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ew-p-ledger-amt .ew-p-chip { padding: 3px 10px; font-size: 11px; }
.ew-p-receipt { margin-top: 14px; }
.ew-p-dl { margin: 0; }
.ew-p-dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px dashed var(--ep-line); }
.ew-p-dl > div:last-child { border-bottom: 0; }
.ew-p-dl dt { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ep-muted); }
.ew-p-dl dd { margin: 0; font-weight: 600; color: var(--ep-navy); text-align: right; word-break: break-word; font-size: 14.5px; }

.ew-p-days { display: grid; gap: 10px; }
.ew-p-day { border: 1.5px solid var(--ep-line); border-radius: 16px; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ew-p-day[open] { border-color: rgba(var(--ep-accent-rgb), .45); box-shadow: 0 14px 28px -22px rgba(var(--ep-navy-rgb), .4); }
.ew-p-day summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ew-p-day summary::-webkit-details-marker { display: none; }
.ew-p-day-n { flex: 0 0 auto; padding: 6px 12px; border-radius: 10px; background: var(--ep-navy); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ew-p-day-n b { font-size: 14px; margin-left: 3px; }
.ew-p-day-t { flex: 1; min-width: 0; font-weight: 700; color: var(--ep-navy); font-size: 15px; line-height: 1.35; }
.ew-p-day summary > i { color: #98A2B3; font-size: 12px; transition: transform .25s; }
.ew-p-day[open] summary > i { transform: rotate(180deg); color: var(--ep-accent); }
.ew-p-day-body { padding: 0 16px 16px 16px; color: #475467; font-size: 14.5px; line-height: 1.65; }
.ew-p-day-body p { margin: 0 0 12px; }
.ew-p-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ew-p-incl:has(ul:only-child) { grid-template-columns: 1fr; }
.ew-p-incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.ew-p-incl li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: var(--ep-ink); }
.ew-p-incl li i { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.ew-p-incl .is-yes i { background: #E3F7EC; color: #067647; } .ew-p-incl .is-no i { background: #FDE8E8; color: #B42318; }
@media (max-width: 767px) { .ew-p-incl { grid-template-columns: 1fr; } .ew-p-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ew-p-figs > div { padding: 10px; } .ew-p-figs b { font-size: 14px; } }

.ew-p-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; position: relative; }
.ew-p-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ew-p-stars label { margin: 0; font-size: 32px; line-height: 1; color: #D5DBE8; cursor: pointer; transition: color .15s, transform .15s; }
.ew-p-stars label:hover { transform: scale(1.12); }
.ew-p-stars input:checked ~ label, .ew-p-stars label:hover, .ew-p-stars label:hover ~ label { color: #F5A623; }
.ew-p-stars input:focus-visible + label { outline: 3px solid rgba(var(--ep-accent-rgb), .4); outline-offset: 2px; border-radius: 6px; }
.ew-p-stars.is-static { flex-direction: row; gap: 3px; font-size: 20px; color: #F5A623; }
.ew-p-thanks { display: grid; gap: 10px; justify-items: start; }
.ew-p-thanks p { margin: 0; color: #475467; line-height: 1.65; }
.ew-p-file { width: 100%; padding: 12px; border: 1.5px dashed #CBD3E3; border-radius: 14px; background: #FBFCFE; font: 500 14px/1.4 inherit; color: var(--ep-muted); }
.ew-p-file::file-selector-button { margin-right: 12px; border: 0; border-radius: 10px; padding: 9px 14px; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); font: 600 13px/1 inherit; cursor: pointer; }
.ew-p-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 28px; }
.ew-p-help h3 { font-size: 16.5px; font-weight: 700; color: var(--ep-navy); margin: 0 0 3px; }
.ew-p-help p { margin: 0; color: var(--ep-muted); font-size: 14px; }

/* wishlist page */
.ew-p-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 22px; }
.ew-p-wcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ep-line); border-radius: 22px; overflow: hidden; box-shadow: var(--ep-shadow); transition: transform .3s, box-shadow .3s, opacity .3s; animation: ew-p-rise .5s both; }
.ew-p-wcard:hover { transform: translateY(-4px); box-shadow: 0 28px 46px -24px rgba(var(--ep-navy-rgb), .38); }
.ew-p-wcard.is-leaving { opacity: 0; transform: scale(.94); }
.ew-p-wcard-media { position: relative; }
.ew-p-wcard-img { display: block; height: 190px; background-size: cover; background-position: center; }
.ew-p-wcard-tag { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: var(--ep-navy); color: #fff; font-size: 11.5px; font-weight: 600; }
.ew-p-wcard-rate { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ep-navy); font-size: 12px; font-weight: 700; }
.ew-p-wcard-rate i { color: #F5A623; margin-right: 3px; }
.ew-p-wcard-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.ew-p-wcard-body h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 43px; }
.ew-p-wcard-body h3 a { color: var(--ep-navy); text-decoration: none; } .ew-p-wcard-body h3 a:hover { color: var(--ep-accent); }
.ew-p-wcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ep-line); }
.ew-p-wcard-foot .ew-p-bk-price { text-align: left; }
.ew-p-wcard-foot .ew-p-bk-price b { font-size: 18px; }
@media (max-width: 575px) { .ew-p-wgrid { grid-template-columns: 1fr; } }

/* messages */
.ew-p-threads { display: grid; gap: 12px; }
.ew-p-thread { background: #fff; border: 1px solid var(--ep-line); border-radius: 18px; box-shadow: var(--ep-shadow); overflow: hidden; animation: ew-p-rise .45s both; }
.ew-p-thread.is-new { border-color: rgba(var(--ep-accent-rgb), .55); }
.ew-p-thread summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.ew-p-thread summary::-webkit-details-marker { display: none; }
.ew-p-thread-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); }
.ew-p-thread-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ew-p-thread-main b { font-size: 15px; color: var(--ep-navy); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ew-p-thread-main small { font-size: 12.5px; color: var(--ep-muted); margin-top: 2px; }
.ew-p-newtag { padding: 4px 10px; border-radius: 999px; background: var(--ep-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ew-p-thread-go { color: #98A2B3; font-size: 12px; transition: transform .25s; }
.ew-p-thread[open] .ew-p-thread-go { transform: rotate(180deg); }
.ew-p-thread-body { padding: 0 18px 18px; display: grid; gap: 12px; }
.ew-p-bubble { padding: 14px 16px; border-radius: 16px; background: var(--ep-soft); }
.ew-p-bubble.is-team { background: rgba(var(--ep-teal-rgb), .1); }
.ew-p-bubble small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ep-muted); margin-bottom: 4px; }
.ew-p-bubble p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ep-ink); word-break: break-word; }
@media (max-width: 575px) {
  .ew-p-thread summary { flex-wrap: wrap; row-gap: 8px; padding: 14px; }
  .ew-p-thread-main { flex: 1 1 calc(100% - 70px); }
  .ew-p-thread-main b { white-space: normal; }
  .ew-p-thread-go { margin-left: auto; }
}

/* profile tabs */
.ew-p-profile-txt { flex: 1; }
.ew-p-avatar-lg { width: 76px; height: 76px; font-size: 26px; }
.ew-p-photo { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding: 16px 18px; border-radius: 18px; background: var(--ep-soft); }
.ew-p-photo b { color: var(--ep-navy); font-size: 15px; }
.ew-p-photo .ew-p-hint { margin: 2px 0 10px; }
.ew-p-filebtn { position: relative; overflow: hidden; margin: 0; }
.ew-p-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ew-p-check-sm { font-size: 13px; color: var(--ep-muted); }
.ew-p-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ew-p-pick { position: relative; margin: 0; cursor: pointer; }
.ew-p-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ew-p-pick span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--ep-line); border-radius: 14px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ep-ink); transition: border-color .2s, background .2s, color .2s; }
.ew-p-pick span i { width: 18px; text-align: center; color: #98A2B3; transition: color .2s; }
.ew-p-pick:hover span { border-color: rgba(var(--ep-navy-rgb), .35); }
.ew-p-pick input:checked + span { border-color: var(--ep-accent); background: rgba(var(--ep-accent-rgb), .08); color: var(--ep-navy); }
.ew-p-pick input:checked + span i { color: var(--ep-accent); }
.ew-p-pick input:focus-visible + span { box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .22); }
.ew-p-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ew-p-suggest button { border: 1.5px solid var(--ep-line); background: #fff; color: var(--ep-muted); border-radius: 999px; padding: 6px 13px; font: 600 12.5px/1 inherit; cursor: pointer; transition: all .2s; }
.ew-p-suggest button:hover { border-color: var(--ep-accent); color: var(--ep-accent); }
.ew-p-suggest button.is-on { background: rgba(var(--ep-accent-rgb), .1); border-color: var(--ep-accent); color: var(--ep-accent); }
.ew-p-switches { display: grid; gap: 12px; margin-bottom: 18px; }
.ew-p-switch { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 16px 18px; border: 1.5px solid var(--ep-line); border-radius: 16px; background: #fff; cursor: pointer; position: relative; transition: border-color .2s; }
.ew-p-switch:hover { border-color: rgba(var(--ep-navy-rgb), .3); }
.ew-p-switch-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ew-p-switch-txt b { font-size: 15px; color: var(--ep-navy); display: flex; align-items: center; gap: 10px; }
.ew-p-switch-txt b i { color: var(--ep-accent); width: 18px; text-align: center; }
.ew-p-switch-txt small { font-size: 13px; color: var(--ep-muted); font-weight: 400; line-height: 1.5; padding-left: 28px; }
.ew-p-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ew-p-switch-ui { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; background: #CBD3E3; position: relative; transition: background .25s; }
.ew-p-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(16,24,40,.3); transition: transform .25s; }
.ew-p-switch input:checked ~ .ew-p-switch-ui { background: var(--ep-accent); }
.ew-p-switch input:checked ~ .ew-p-switch-ui::after { transform: translateX(20px); }
.ew-p-switch input:focus-visible ~ .ew-p-switch-ui { box-shadow: 0 0 0 4px rgba(var(--ep-accent-rgb), .25); }
.ew-p-session, .ew-p-row-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1.5px solid var(--ep-line); border-radius: 16px; background: #fff; }
.ew-p-session-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--ep-navy-rgb), .08); color: var(--ep-navy); font-size: 18px; }
.ew-p-session > div, .ew-p-row-card > div { flex: 1; min-width: 0; }
.ew-p-session b, .ew-p-row-card b { color: var(--ep-navy); font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ew-p-session small { color: var(--ep-muted); font-size: 13px; display: block; margin-top: 2px; }
.ew-p-row-card p { margin: 2px 0 0; color: var(--ep-muted); font-size: 13.5px; }
.ew-p-danger { margin-top: 26px; border: 1.5px solid #F4C7C2; border-radius: 16px; background: #FFF8F7; }
.ew-p-danger summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 14.5px; color: #B42318; list-style: none; display: flex; align-items: center; gap: 10px; }
.ew-p-danger summary::-webkit-details-marker { display: none; }
.ew-p-danger form { padding: 0 18px 18px; }
.ew-p-danger p { color: #7A271A; font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
@media (max-width: 575px) {
  .ew-p-photo { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ew-p-session { flex-wrap: wrap; } .ew-p-session .ew-p-btn { width: 100%; }
  .ew-p-row-card { flex-wrap: wrap; } .ew-p-row-card .ew-p-btn { width: 100%; }
  .ew-p-switch { padding: 14px; }
  .ew-p-switch-txt small { padding-left: 0; }
  .ew-p-ring.is-sm { margin-left: 0; }
  .ew-p-profile-head .ew-p-ring.is-sm { position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; }
  .ew-p-profile-head { position: relative; }
  .ew-p-help { padding: 20px 18px; } .ew-p-help .ew-p-bk-actions { width: 100%; } .ew-p-help .ew-p-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ew-p-trip, .ew-p-q, .ew-p-thread, .ew-p-wcard, .ew-p-meter > span, .ew-p-ring .val, .ew-wish.is-saved i { animation: none !important; }
  .ew-wish-toast { transition: none; }
}
.ew-p-review .ew-p-card-title + .ew-p-muted { margin-bottom: 20px; }
/* Profile tabs on phones: a 2x2 grid so every tab (and the active one) is always visible */
@media (max-width: 575px) {
  .ew-p-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; margin: -4px 0 22px; overflow: visible; }
  .ew-p-tabs a { justify-content: center; gap: 8px; padding: 12px 8px; font-size: 13.5px; border: 1.5px solid var(--ep-line); border-radius: 12px; background: #fff; text-align: center; line-height: 1.2; }
  .ew-p-tabs a::after { display: none; }
  .ew-p-tabs a.is-active { background: #fff4ea; border-color: var(--ep-accent); }
}