/* ============================================================
   زيت علاء — الواجهة النهائية المتجاوبة v26
   زبون + مدير + مسوق + إدارة المسوقين
   ============================================================ */
:root{
  --z26-bg:#07070a;
  --z26-bg-soft:#0d0d12;
  --z26-card:#111116;
  --z26-card-2:#15151b;
  --z26-field:#09090d;
  --z26-line:rgba(255,255,255,.105);
  --z26-line-strong:rgba(230,31,83,.48);
  --z26-text:#fff;
  --z26-muted:#b9b3b7;
  --z26-pink:#e61f53;
  --z26-pink-2:#b40e39;
  --z26-success:#52d38d;
  --z26-danger:#ff6680;
  --z26-radius:18px;
  --z26-radius-sm:13px;
  --z26-shadow:0 22px 70px rgba(0,0,0,.38);
}
html{background:var(--z26-bg);scroll-behavior:smooth}
body.ui-v22{
  min-height:100dvh!important;
  background:
    radial-gradient(circle at 88% -8%,rgba(230,31,83,.14),transparent 30%),
    linear-gradient(180deg,#09090c 0%,#050506 100%)!important;
  color:var(--z26-text)!important;
}
body.ui-v22::before{
  opacity:.38!important;
  background-size:72px 72px!important;
}
.ui-v22 *{box-sizing:border-box}
.ui-v22 .wrap{width:min(1160px,calc(100% - 28px))!important}
.ui-v22 .panel,
.ui-v22 .authCard,
.ui-v22 .sectionCard,
.ui-v22 .modalCard,
.ui-v22 .modalBox{
  border:1px solid var(--z26-line)!important;
  border-radius:var(--z26-radius)!important;
  background:linear-gradient(145deg,rgba(18,18,23,.985),rgba(10,10,13,.985))!important;
  box-shadow:var(--z26-shadow)!important;
}
.ui-v22 .panelHead{
  min-height:64px!important;
  padding:15px 18px!important;
  align-items:center!important;
  border-bottom:1px solid var(--z26-line)!important;
}
.ui-v22 .panelHead h2{
  font-size:clamp(22px,2.6vw,32px)!important;
  line-height:1.25!important;
  letter-spacing:-.2px!important;
}
.ui-v22 .panelBody{padding:18px!important}
.ui-v22 .field{gap:7px!important}
.ui-v22 .field label{
  color:#f3eef1!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.ui-v22 .field label small{
  color:var(--z26-muted)!important;
  font-size:10.5px!important;
  font-weight:700!important;
}
.ui-v22 .field input,
.ui-v22 .field select,
.ui-v22 .field textarea,
.ui-v22 .smartComboControl{
  min-height:48px!important;
  border:1px solid rgba(255,255,255,.135)!important;
  border-radius:var(--z26-radius-sm)!important;
  background:var(--z26-field)!important;
  color:#fff!important;
  padding:11px 13px!important;
  font-size:14px!important;
  box-shadow:none!important;
}
.ui-v22 .field textarea{
  min-height:106px!important;
  resize:vertical!important;
  line-height:1.65!important;
}
.ui-v22 .field input::placeholder,
.ui-v22 .field textarea::placeholder{color:#777178!important}
.ui-v22 .field input:focus,
.ui-v22 .field select:focus,
.ui-v22 .field textarea:focus,
.ui-v22 .smartCombo:focus-within .smartComboControl,
.ui-v22 .cityCombo:focus-within input{
  border-color:var(--z26-pink)!important;
  box-shadow:0 0 0 3px rgba(230,31,83,.13)!important;
}
.ui-v22 .btn{
  min-height:43px!important;
  border-radius:12px!important;
  border:1px solid var(--z26-line)!important;
  background:#17171d!important;
  color:#fff!important;
  padding:9px 14px!important;
  font-size:13px!important;
  font-weight:850!important;
  box-shadow:none!important;
}
.ui-v22 .btn.primary,
.ui-v22 .btn.gold{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--z26-pink),var(--z26-pink-2))!important;
  box-shadow:0 12px 28px rgba(230,31,83,.18)!important;
}
.ui-v22 .btn:disabled{
  cursor:not-allowed!important;
  opacity:.42!important;
  filter:saturate(.35)!important;
  box-shadow:none!important;
}
.ui-v22 .btn:not(:disabled):hover{
  transform:translateY(-1px)!important;
  border-color:var(--z26-line-strong)!important;
}
.ui-v22 .empty{
  min-height:96px!important;
  display:grid!important;
  place-items:center!important;
  padding:20px!important;
  border-radius:15px!important;
  border:1px dashed rgba(255,255,255,.15)!important;
  background:#0b0b0f!important;
  color:#cfc8cc!important;
  font-size:13px!important;
}

/* ===================== واجهة الزبون ===================== */
.public-site .topbar{
  position:sticky!important;
  top:0!important;
  z-index:80!important;
  border-bottom:1px solid var(--z26-line)!important;
  background:rgba(7,7,10,.91)!important;
  backdrop-filter:blur(18px)!important;
}
.public-site .nav{
  height:76px!important;
  gap:14px!important;
}
.public-site .brand{gap:9px!important}
.public-site .brand img{width:68px!important;height:68px!important}
.public-site .brandText b{font-size:17px!important}
.public-site .brandText span{font-size:10.5px!important}
.public-site .navActions{gap:6px!important}
.public-site .navActions .btn{
  min-height:39px!important;
  padding:8px 12px!important;
  font-size:12px!important;
  white-space:nowrap!important;
}
.public-site .section{
  padding:25px 0 42px!important;
  min-height:calc(100dvh - 76px)!important;
}
.public-site #delivery,
.public-site #distributors,
.public-site #track{
  align-items:flex-start!important;
}
.public-site #delivery>.panel,
.public-site #distributors>.panel,
.public-site #track>.panel{
  width:100%!important;
  margin-top:18px!important;
}
.public-site .deliveryLayout{
  display:grid!important;
  grid-template-columns:minmax(0,1.42fr) minmax(270px,.58fr)!important;
  grid-template-areas:
    "form summary"
    "submit summary"!important;
  gap:14px!important;
  align-items:start!important;
}
.public-site #orderForm{
  grid-area:form!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:11px!important;
  padding:15px!important;
  border:1px solid var(--z26-line)!important;
  border-radius:16px!important;
  background:#0c0c10!important;
}
.public-site #orderForm .span2{grid-column:1/-1!important}
.public-site .priceBox{
  grid-area:summary!important;
  position:sticky!important;
  top:94px!important;
  display:block!important;
  margin:0!important;
  padding:14px!important;
  min-height:220px!important;
  border:1px solid var(--z26-line)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(230,31,83,.13),transparent 43%),
    #0c0c10!important;
}
.public-site .priceEmptyState{
  min-height:190px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  text-align:center;
  color:var(--z26-muted);
}
.public-site .priceEmptyIcon{
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid rgba(230,31,83,.36);
  border-radius:14px;
  background:rgba(230,31,83,.1);
  color:#ff5a83;
  font-size:25px;
}
.public-site .priceEmptyState b{color:#fff;font-size:17px}
.public-site .priceEmptyState small{max-width:190px;line-height:1.65;font-size:11.5px}
.public-site .priceValues{display:grid;gap:9px}
.public-site .priceBox.is-empty .priceValues{display:none!important}
.public-site .priceBox.has-city .priceEmptyState{display:none!important}
.public-site .priceLine{
  min-height:58px!important;
  padding:11px 13px!important;
  border:1px solid var(--z26-line)!important;
  border-radius:13px!important;
  background:#09090d!important;
}
.public-site .priceLine span{font-size:12px!important;color:#d4cdd1!important}
.public-site .priceLine b{font-size:19px!important;color:#fff!important}
.public-site .totalLine{
  border-color:rgba(230,31,83,.48)!important;
  background:linear-gradient(135deg,rgba(230,31,83,.16),rgba(180,14,57,.09))!important;
}
.public-site .totalLine b{font-size:24px!important}
.public-site .deliveryConfirmWrap{
  grid-area:submit!important;
  margin:0!important;
}
.public-site .deliveryConfirmWrap .btn{
  width:100%!important;
  min-height:49px!important;
}
.public-site .cityCombo{position:relative!important}
.public-site .cityCombo input{padding-left:48px!important}
.public-site .cityComboToggle{
  left:6px!important;
  top:6px!important;
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  border:1px solid var(--z26-line)!important;
  background:#18181e!important;
}
.public-site .cityComboList{
  top:calc(100% + 6px)!important;
  right:0!important;
  left:0!important;
  max-height:min(330px,46vh)!important;
  padding:5px!important;
  border:1px solid rgba(230,31,83,.42)!important;
  border-radius:13px!important;
  background:#111116!important;
  box-shadow:0 22px 60px rgba(0,0,0,.68)!important;
}
.public-site .cityComboList button{
  min-height:42px!important;
  padding:9px 10px!important;
  border-radius:9px!important;
  font-size:13px!important;
}
.public-site .filters{
  grid-template-columns:repeat(4,minmax(0,1fr)) auto!important;
  gap:9px!important;
  margin-bottom:12px!important;
}
.public-site .gridCards{
  grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;
  gap:9px!important;
}
.public-site .distCard,
.public-site .orderCard{
  padding:13px!important;
  border-radius:14px!important;
  border:1px solid var(--z26-line)!important;
  background:#0c0c10!important;
  box-shadow:none!important;
}
.public-site .floatingWhats{
  left:14px!important;
  bottom:calc(env(safe-area-inset-bottom) + 16px)!important;
  padding:11px 14px!important;
  font-size:12px!important;
  box-shadow:0 14px 34px rgba(230,31,83,.28)!important;
}

/* ===================== لوحة المدير ===================== */
.admin-app .shell,
.partner-admin .managerShell{
  grid-template-columns:218px minmax(0,1fr)!important;
}
.admin-app .sidebar,
.partner-admin .sidebar{
  padding:11px!important;
  background:#08080b!important;
  border-left:1px solid var(--z26-line)!important;
}
.admin-app .menu,
.partner-admin .sideMenu{gap:4px!important}
.admin-app .menu .btn,
.partner-admin .sideMenu .btn{
  min-height:38px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  justify-content:flex-start!important;
  background:transparent!important;
}
.admin-app .menu .btn.active,
.partner-admin .sideMenu .btn.active{
  background:rgba(230,31,83,.14)!important;
  border-color:rgba(230,31,83,.42)!important;
}
.admin-app .main,
.partner-admin .managerMain{
  max-width:1750px!important;
  padding:12px!important;
}
.admin-app .panel,
.partner-admin .panel{
  margin-bottom:9px!important;
  box-shadow:none!important;
}
.admin-app .panelHead,
.partner-admin .panelHead{
  min-height:52px!important;
  padding:11px 13px!important;
}
.admin-app .panelHead h2,
.partner-admin .panelHead h2{font-size:17px!important}
.admin-app .panelBody,
.partner-admin .panelBody{padding:12px!important}
.admin-app .grid,
.partner-admin .grid,
.admin-app .filters,
.partner-admin .filters{gap:8px!important}
.admin-app .cards,
.partner-admin .cards{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:8px!important;
}
.admin-app .card,
.admin-app .report,
.admin-app .stat,
.admin-app .cityBox,
.partner-admin .card,
.partner-admin .report,
.partner-admin .stat{
  padding:11px!important;
  border-radius:13px!important;
  border:1px solid var(--z26-line)!important;
  background:#0c0c10!important;
  box-shadow:none!important;
}
.admin-app .cityGrid{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;
  gap:8px!important;
}
.admin-app .cityBox::after{display:none!important}
.admin-app .compactForm{grid-template-columns:minmax(200px,1fr) auto auto!important}
.admin-app .compactForm.deliveryForm{
  grid-template-columns:minmax(190px,1fr) 115px auto auto auto!important;
}

/* ===================== بوابة المسوق ===================== */
.partner-portal .topbar{
  background:rgba(7,7,10,.94)!important;
  border-bottom:1px solid var(--z26-line)!important;
}
.partner-portal .section{padding:22px 0 38px!important}
.partner-portal .authCardWide{
  max-width:1040px!important;
  padding:16px!important;
}
.partner-portal .formSection{
  padding:13px!important;
  border-radius:15px!important;
  border:1px solid var(--z26-line)!important;
  background:#0c0c10!important;
}
.partner-portal .panel,
.partner-portal .orderCard,
.partner-portal .transactionCard,
.partner-portal .withdrawalCard{
  border:1px solid var(--z26-line)!important;
  background:#0c0c10!important;
  box-shadow:none!important;
}

/* ===================== موبايل وتابلت ===================== */
@media(max-width:1000px){
  .admin-app .shell,
  .partner-admin .managerShell{grid-template-columns:1fr!important}
  .public-site .deliveryLayout{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "form"
      "summary"
      "submit"!important;
  }
  .public-site .priceBox{
    position:static!important;
    min-height:auto!important;
  }
  .public-site .priceEmptyState{min-height:110px!important}
}
@media(max-width:760px){
  body.ui-v22{
    padding-bottom:calc(env(safe-area-inset-bottom) + 105px)!important;
  }
  .ui-v22 .wrap{width:calc(100% - 16px)!important}
  .public-site .topbar{position:sticky!important}
  .public-site .nav{
    height:66px!important;
    gap:7px!important;
  }
  .public-site .brand img{width:57px!important;height:57px!important}
  .public-site .brandText{display:none!important}
  .public-site .navActions{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .public-site .navActions::-webkit-scrollbar{display:none}
  .public-site .navActions .btn{
    min-height:36px!important;
    padding:7px 9px!important;
    font-size:10.5px!important;
  }
  .public-site .section{
    min-height:auto!important;
    padding:12px 0 28px!important;
  }
  .public-site #delivery>.panel,
  .public-site #distributors>.panel,
  .public-site #track>.panel{margin-top:0!important}
  .public-site .panelHead{
    min-height:58px!important;
    padding:12px!important;
  }
  .public-site .panelHead h2{font-size:25px!important}
  .public-site .panelBody{padding:10px!important}
  .public-site .deliveryLayout{
    gap:10px!important;
  }
  .public-site #orderForm{
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:11px!important;
  }
  .public-site #orderForm .span2{grid-column:auto!important}
  .public-site .field input,
  .public-site .field select,
  .public-site .field textarea{font-size:16px!important}
  .public-site .field textarea{min-height:100px!important}
  .public-site .priceBox{
    order:0!important;
    padding:10px!important;
  }
  .public-site .priceValues{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .public-site .priceLine{
    min-height:76px!important;
    display:grid!important;
    align-content:center!important;
    justify-items:center!important;
    gap:4px!important;
    padding:8px 5px!important;
    text-align:center!important;
  }
  .public-site .priceLine span{font-size:10px!important}
  .public-site .priceLine b{font-size:16px!important}
  .public-site .totalLine b{font-size:18px!important}
  .public-site .deliveryConfirmWrap .btn{
    min-height:51px!important;
    font-size:14px!important;
  }
  .public-site .filters{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  .public-site .filters>.field:nth-child(4),
  .public-site .filters>.btn{grid-column:1/-1!important}
  .public-site .gridCards{grid-template-columns:1fr!important}
  .public-site .cityComboList{
    position:fixed!important;
    z-index:240!important;
    top:auto!important;
    right:8px!important;
    left:8px!important;
    bottom:calc(env(safe-area-inset-bottom) + 78px)!important;
    max-height:55dvh!important;
    border-radius:17px!important;
  }
  .public-site .floatingWhats{
    left:9px!important;
    bottom:calc(env(safe-area-inset-bottom) + 74px)!important;
    padding:10px 12px!important;
    font-size:11px!important;
  }
  .admin-app .main,
  .partner-admin .managerMain{padding:8px!important}
  .admin-app .grid.two,
  .admin-app .grid.three,
  .admin-app .grid.four,
  .partner-admin .grid.two,
  .partner-admin .grid.three,
  .partner-admin .grid.four{grid-template-columns:1fr!important}
  .admin-app .compactForm,
  .admin-app .compactForm.deliveryForm{grid-template-columns:1fr!important}
  .admin-app .cards,
  .partner-admin .cards{grid-template-columns:1fr!important}
  .admin-app .cityGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .partner-portal .grid.two,
  .partner-portal .grid.three{grid-template-columns:1fr!important}
}
@media(max-width:430px){
  .public-site .filters{grid-template-columns:1fr!important}
  .public-site .filters>*{grid-column:auto!important}
  .public-site .priceValues{grid-template-columns:1fr!important}
  .public-site .priceLine{
    min-height:52px!important;
    display:flex!important;
    justify-content:space-between!important;
    text-align:right!important;
    padding:10px 12px!important;
  }
  .admin-app .cityGrid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .ui-v22 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}