/* WATEEN_FLOW_V1 — STAGING | canonical account/cart/checkout visual owner */
body:has(.wx-auth-wrap),
body:has(.wx-checkout),
body:has(.cartLayout){background:var(--wt-color-canvas,#f3f6f8)}

/* Shared legacy flow cards still used by cart/checkout fallbacks */
.box,.checkoutMain,.checkoutSide,.checkout-panel,.checkout-summary,.review-card,.review-side,.auth-card,.profile-card,.order-card{
  border-color:#e2eaec!important;
  border-radius:22px!important;
  box-shadow:0 9px 26px rgba(8,63,77,.055)!important;
}
.field input,.field select,.field textarea{border-color:#dfe8ea!important}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(11,94,114,.50)!important;
  box-shadow:0 0 0 4px rgba(169,206,214,.17)!important;
}
.auth-mark,.profile-avatar,.checkout-panel-icon{
  background:linear-gradient(145deg,#fff0f2,#f3fafb)!important;
  color:var(--wt-color-red,#ff3b4a)!important;
}
.checkout-step.active{
  border-color:rgba(255,59,74,.22)!important;
  background:#fff5f6!important;
  color:var(--wt-color-red,#ff3b4a)!important;
}
.checkout-step.active span{background:var(--wt-color-red,#ff3b4a)!important}

/* Account / sign-in — WATEEN SMART GATE | one canonical flow skin */
.wx-auth-wrap{max-width:1220px;margin:0 auto;padding:30px 20px 64px;direction:rtl}
.wx-auth-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(370px,.94fr);gap:20px;align-items:stretch;margin-top:14px}
.wx-auth-brand{position:relative;isolation:isolate;overflow:hidden;min-height:615px;border:1px solid rgba(255,255,255,.08);border-radius:34px;padding:35px 37px;background:radial-gradient(ellipse at 55% 54%,rgba(255,59,74,.16),transparent 47%),radial-gradient(ellipse at 90% 5%,rgba(15,130,164,.16),transparent 44%),linear-gradient(155deg,#06111c,#10283a 74%,#071822);color:#fff;box-shadow:0 23px 60px rgba(6,17,28,.17);display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}
.wx-auth-brand:before,.wx-auth-brand:after{display:none}
.wx-auth-brand>div{position:relative;z-index:1}
.wx-brandmark{height:66px;width:66px;flex:none;background:url('/wateen-brand-mark.webp') center/contain no-repeat;border-radius:16px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.wx-gate-copy{max-width:520px}
.wx-gate-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1px;color:#ffb0bd;margin-top:16px}
.wx-auth-brand h2{font-size:clamp(31px,3.5vw,47px);line-height:1.16;letter-spacing:-.7px;margin:12px 0 12px;color:#fff}
.wx-auth-brand h2 em{font-style:normal;color:#ff8b9d}
.wx-auth-brand p{font-size:14px;line-height:1.9;color:#c3d0d8;margin:0;max-width:480px}
.wx-portal-scene{height:242px;width:242px;max-width:76%;margin:4px auto -2px;display:grid;place-items:center;position:relative;filter:drop-shadow(0 0 17px rgba(248,77,106,.13))}
.wx-portal-ring{position:absolute;inset:0;border:1px solid rgba(255,143,164,.32);border-radius:50%;box-shadow:inset 0 0 30px rgba(248,77,106,.07),0 0 18px rgba(248,77,106,.08)}
.wx-portal-ring-outer{inset:1%;border-width:2px;animation:wxPortalPulse 5s ease-in-out infinite}
.wx-portal-ring-middle{inset:15%;border-color:rgba(163,214,233,.36);box-shadow:0 0 32px rgba(31,161,197,.09);animation:wxPortalPulse 5s ease-in-out -1.6s infinite}
.wx-portal-ring-inner{inset:28%;background:radial-gradient(circle,rgba(255,89,112,.17),rgba(255,89,112,.015));border-color:rgba(255,255,255,.24)}
.wx-portal-core{position:relative;z-index:1;text-align:center;display:grid;gap:3px;place-items:center}
.wx-portal-core strong{font-size:34px;line-height:1.2;font-weight:950;color:#fff;text-shadow:0 0 18px rgba(255,135,156,.22)}
.wx-portal-core small{font-size:9px;color:#d4dbe1;letter-spacing:.1px}
.wx-portal-spark{position:absolute;z-index:1;width:6px;height:6px;background:#ff9eae;box-shadow:0 0 18px #f75875;border-radius:50%}
.wx-spark-one{top:16%;right:19%}.wx-spark-two{bottom:17%;left:19%;width:4px;height:4px;background:#b3e6f2}
@keyframes wxPortalPulse{0%,100%{transform:scale(.99);opacity:.75}50%{transform:scale(1.035);opacity:1}}
.wx-auth-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:5px}
.wx-auth-point{display:flex;align-items:center;justify-content:center;gap:5px;min-height:43px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.065);color:#e8edf1;font-size:10px;line-height:1.5;text-align:center}
.wx-auth-point b{color:#ffabb9;font-size:17px}
.wx-auth-card{border:1px solid #e2e9ec;background:#fff;border-radius:32px;padding:34px;box-shadow:0 14px 46px rgba(6,17,28,.075);display:flex;flex-direction:column;justify-content:center}
.wx-auth-head h1{font-size:clamp(27px,2.7vw,34px);letter-spacing:-.4px;color:#0c2534}
.wx-kicker{color:#d72743;background:#fff0f2;border:1px solid #ffdbe0;border-radius:999px;padding:5px 9px;font-weight:850;display:inline-block}
.wx-sub{color:#657680;line-height:1.8}
.wx-auth-tabs{background:#f2f5f7;border:1px solid #e8edf0;border-radius:16px;padding:4px}
.wx-auth-tab{border-radius:12px;min-height:42px}
.wx-auth-tab.active{background:#fff;color:#d62846;box-shadow:0 5px 14px rgba(6,17,28,.07)}
.wx-field{position:relative}
.wx-field label{color:#304550}
.wx-field input,.wx-field select,.wx-field textarea{border:1px solid #dce5e8;background:#fcfdfd;border-radius:14px;min-height:50px;transition:border-color .18s,box-shadow .18s,background .18s}
.wx-field input:focus,.wx-field select:focus,.wx-field textarea:focus{border-color:#e84b64;box-shadow:0 0 0 3px rgba(232,75,100,.12);background:#fff;outline:0}
.wx-field:has(.wx-password-toggle) input{padding-left:75px}
.wx-password-toggle{position:absolute;left:8px;bottom:7px;border:0;border-radius:9px;background:#edf3f5;color:#425664;font-size:12px;font-weight:800;min-width:57px;height:34px;cursor:pointer}
.wx-password-toggle:focus-visible,.wx-auth-tab:focus-visible,.wx-menu-card:focus-visible{outline:3px solid #ff8095;outline-offset:2px}
.wx-primary{background:linear-gradient(135deg,#eb2f4e,#ff6075);color:#fff;border:0;border-radius:14px;font-weight:900;box-shadow:0 10px 24px rgba(237,40,71,.14)}
.wx-secondary,.wx-back{border-radius:13px}
@media(prefers-reduced-motion:reduce){.wx-portal-ring{animation:none!important}.wx-menu-card,.wx-primary{transition:none!important}}

/* Checkout */
.wx-checkout{max-width:1320px!important;margin:auto!important;padding:34px 18px 74px!important}
.wx-checkout .wx-topline{padding:6px 0 18px!important}
.wx-checkout .wx-title{font-size:clamp(32px,3.6vw,48px)!important;letter-spacing:-.8px!important}
.wx-checkout-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 390px!important;
  gap:18px!important;
  align-items:start!important;
}
.wx-panel{
  border:1px solid #e2e7eb!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 36px rgba(21,34,46,.05)!important;
}
.wx-checkout-main{display:grid!important;gap:14px!important}
.wx-checkout-main>.wx-panel{padding:22px!important}
.wx-checkout-side{
  position:sticky!important;
  top:92px!important;
  padding:22px!important;
  box-shadow:0 18px 54px rgba(20,35,48,.08)!important;
}
.wx-checkout-address{border-radius:15px!important;border-color:#e1e6ea!important;transition:.18s!important}
.wx-checkout-address.selected{
  border-color:#ff5a70!important;
  background:#fff5f7!important;
  box-shadow:0 0 0 3px rgba(255,41,71,.06)!important;
}
.wx-summary-item{border-radius:14px!important;padding:9px!important}
.wx-summary-pic{background:#f4f1ec!important;border-radius:12px!important;overflow:hidden!important}
.wx-total-row{padding:9px 0!important}
.wx-trust{background:#f7fafb!important;border-radius:14px!important;padding:11px!important;color:#6a7883!important}

/* Cart */
.cartLayout{max-width:1180px;margin:auto!important;gap:18px!important}
.cartLayout .box{
  border:1px solid #e1e6ea!important;
  border-radius:22px!important;
  box-shadow:0 13px 40px rgba(20,35,48,.06)!important;
}
.cartLayout .box:last-child{position:sticky;top:92px;height:max-content}
.cartItem{border-color:#edf0f2!important}
.cartItem img{background:#f5f2ed!important;border-radius:14px!important}
body:has(.cartLayout) .pageHead{max-width:1180px;margin:auto;padding-top:30px!important}
body:has(.cartLayout) .pageHead h1{font-size:38px!important}

@media(max-width:820px){
  .wx-auth-wrap{padding:16px 12px 46px}
  .wx-auth-grid{grid-template-columns:1fr;gap:12px}
  .wx-auth-brand{min-height:0;padding:24px;border-radius:25px;gap:10px}
  .wx-auth-points{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .wx-auth-brand h2{font-size:31px}
  .wx-auth-card{padding:25px 20px;border-radius:25px}
  .wx-auth-head h1{font-size:28px}
  .wx-checkout{padding:20px 12px 60px!important}
  .wx-checkout-grid{grid-template-columns:1fr!important}
  .wx-checkout-side{position:static!important}
  .wx-checkout .wx-title{font-size:32px!important}
  .cartLayout{grid-template-columns:1fr!important}
  .cartLayout .box:last-child{position:static}
  .cartItem{grid-template-columns:72px 1fr!important}
  .cartItem>b{grid-column:2!important}
}
@media(max-width:520px){
  .wx-auth-brand{min-height:0}
  .wx-auth-brand p{font-size:12px}
  .wx-auth-point{padding:8px 5px;font-size:9px;min-height:42px}
  .wx-portal-scene{width:180px;height:180px;margin:0 auto -1px}
  .wx-brandmark{width:54px;height:54px}
  body:has(.cartLayout) .pageHead h1{font-size:30px!important}
}


/* WATEEN_ACCOUNT_ACCENT_PANEL_V1 | smart gate continues inside profile */
.wx-profile-shell{max-width:1120px;padding-top:30px}
.wx-profile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.wx-profile-overline{font-size:12px;color:#7b8a92;font-weight:800}
.wx-account-hero{isolation:isolate;min-height:194px;padding:31px;display:flex;align-items:center;gap:19px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 18% 22%,rgba(255,72,103,.18),transparent 39%),radial-gradient(ellipse at 95% 10%,rgba(18,159,201,.16),transparent 34%),linear-gradient(145deg,var(--wt-color-navy,#06111c),var(--wt-color-navy-soft,#0b2332));border:1px solid rgba(255,255,255,.1);border-radius:28px;box-shadow:0 18px 45px rgba(6,17,28,.13);animation:wxProfileEnter .35s ease-out}
.wx-account-hero:after{display:none}
.wx-avatar{width:72px;height:72px;border-radius:22px;background:#fff;color:#f13a59;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:30px;font-weight:950;flex:none}
.wx-profile-intro{min-width:0;flex:1;position:relative;z-index:1}
.wx-profile-welcome{font-size:12px;font-weight:850;color:#ffa7b6}
.wx-account-hero h1{margin:6px 0;font-size:clamp(23px,2.5vw,33px);line-height:1.35;color:#fff;overflow-wrap:anywhere}
.wx-account-hero p{margin:0;color:#c3cfd9;font-size:13px;overflow-wrap:anywhere;line-height:1.8;direction:ltr;text-align:right}
.wx-profile-seal{width:112px;height:112px;border-radius:50%;border:1px solid rgba(255,153,173,.33);box-shadow:0 0 0 16px rgba(255,128,152,.045),0 0 0 34px rgba(255,128,152,.025);display:grid;place-content:center;text-align:center;color:#fff;flex:none}
.wx-profile-seal span{font-size:41px;font-weight:950;line-height:1}.wx-profile-seal small{font-size:9px;letter-spacing:2px;color:#b7c5d0}
.wx-profile-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:23px 0 13px}
.wx-profile-heading h2{margin:7px 0 0;font-size:23px;line-height:1.35;color:#0b2938}
.wx-profile-heading p{margin:0;color:#72838e;font-size:12px}
.wx-profile-shell .wx-account-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.wx-profile-shell .wx-menu-card{border:1px solid #e0e8eb;border-radius:21px;background:#fff;text-align:right;min-height:129px;padding:18px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;column-gap:11px;box-shadow:0 8px 24px rgba(6,17,28,.045);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;cursor:pointer}
.wx-profile-shell .wx-menu-card:hover{transform:translateY(-3px);border-color:#f9b0bd;box-shadow:0 14px 26px rgba(6,17,28,.08)}
.wx-profile-shell .wx-menu-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(140deg,#fff1f4,#eff7f9);color:#dc3954;display:grid;place-items:center;font-size:24px;margin:0}
.wx-menu-text{display:grid;gap:7px;min-width:0}.wx-menu-text strong{font-size:16px;color:#183748}.wx-menu-text small{font-size:11px;color:#73858d;line-height:1.65}
.wx-menu-arrow{font-size:17px;color:#e34260;align-self:center}
.wx-profile-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 2px;margin-top:10px;border-top:1px solid #e3eaed}
.wx-profile-footer p{margin:0;color:#809098;font-size:12px}
@keyframes wxProfileEnter{from{transform:translateY(8px);opacity:.65}to{transform:translateY(0);opacity:1}}
@media(max-width:820px){.wx-profile-shell .wx-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wx-profile-seal{width:88px;height:88px}.wx-profile-heading{align-items:start;flex-direction:column}.wx-profile-shell .wx-menu-card{grid-template-columns:44px 1fr;min-height:117px;padding:14px}.wx-profile-shell .wx-menu-icon{width:44px;height:44px}.wx-profile-shell .wx-menu-arrow{display:none}}
@media(max-width:520px){.wx-profile-shell{padding-top:18px}.wx-profile-overline{font-size:10px}.wx-account-hero{min-height:160px;padding:20px 15px;gap:12px;border-radius:23px}.wx-avatar{width:52px;height:52px;border-radius:17px;font-size:25px}.wx-account-hero h1{font-size:22px}.wx-account-hero p{font-size:11px}.wx-profile-seal{display:none}.wx-profile-heading h2{font-size:20px}.wx-profile-shell .wx-account-grid{gap:9px}.wx-profile-shell .wx-menu-card{display:flex;flex-direction:column;align-items:flex-start;min-height:132px;gap:10px;padding:14px}.wx-menu-text strong{font-size:14px}.wx-menu-text small{font-size:10px}.wx-profile-footer{margin-top:16px}.wx-portal-scene{height:164px;width:164px}.wx-auth-point{font-size:8px}}
@media(prefers-reduced-motion:reduce){.wx-account-hero{animation:none}}