/* header.css — RTL-friendly header + Cart Drawer + Delivery UI
   ✅ Shipping default: 2 OMR
   ✅ Pickup (office): 1 OMR after selecting office
*/

/* ======================= */
/* Tokens */
/* ======================= */
:root{
  --hdr-bg: rgba(255,255,255,0.85);
  --hdr-border: rgba(0,0,0,0.06);
  --hdr-text: #1f2937;
  --hdr-muted:#6b7280;

  --brand:#0ea5a6;

  --cart-border:#6ee7b7;
  --cart-pill:#059669;
  --cart-pill-text:#ecfdf5;

  /* Delivery UI */
  --del-border: rgba(148,163,184,.35);
  --del-bg: rgba(236,253,245,.75);
  --del-chip: rgba(14,165,166,.10);
  --del-accent: #0ea5a6;
  --del-text: #0f172a;
  --del-muted: #64748b;

  /* Drawer spacing */
  --drawer-pad: 1rem;

  /* Select caret */
  --caret: rgba(14,165,166,.95);
}

/* Body padding for fixed header */
body{ padding-top: 72px; }
@media (max-width: 860px){ body{ padding-top: 64px; } }

/* ======================= */
/* Header */
/* ======================= */
.site-header{
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  background: var(--hdr-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hdr-border);
}

.site-header .bar{
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  position: relative;
  z-index: 1;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight: 800;
  color: var(--hdr-text);
  text-decoration:none;
}
.brand img{
  height: 38px;
  width:auto;
  border-radius: .6rem;
  background:#fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.brand span{
  font-size: 1.05rem;
  letter-spacing:.2px;
}

/* Nav */
.nav{
  margin-inline-start: auto;
  display:flex;
  align-items:center;
  gap:.8rem;
  position: relative;
  z-index: 1;
}
.site-header .nav a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .7rem;
  border-radius:.8rem;
  color: var(--hdr-text);
  text-decoration:none;
  font-weight:600;
  transition: background .2s ease, color .2s ease, transform .08s ease;
  flex-direction: row !important;
}
.site-header .nav a:hover{ background: rgba(14,165,166,.08); color:#0b7f80; }
.site-header .nav a.active{ background: rgba(14,165,166,.12); color:#0b7f80; }

/* Cart button */
.cart-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .8rem;
  border-radius: 999px;
  border:1px solid var(--cart-border);
  background: linear-gradient(135deg,#f0fdf4,#ecfdf5);
  box-shadow: 0 3px 8px rgba(16,185,129,.14);
  color: var(--hdr-text);
  transition: box-shadow .18s ease, transform .08s ease, background .18s ease;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.cart-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(16,185,129,.2);
  background: linear-gradient(135deg,#dcfce7,#ecfdf5);
}
.cart-link .cart-icon{ flex-shrink: 0; }

.cart-link .cart-text{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.cart-link .cart-text .label{ font-size: .9rem; }
.cart-link .cart-total{
  font-size: .8rem;
  font-weight: 600;
  color: var(--hdr-muted);
  direction: ltr;
}

/* Hint under total (desktop only) */
.cart-freehint{
  font-size:.72rem;
  color:#0f766e;
  margin-top:.05rem;
  white-space: nowrap;
}
.cart-freehint.reached{ font-weight:700; }

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 1.3rem;
  height: 1.3rem;
  font-size:.75rem;
  border-radius: 999px;
  background: var(--cart-pill);
  color: var(--cart-pill-text);
  padding:0 .4rem;
}

/* Hamburger */
.hamburger{
  display:none;
  border:1px solid var(--hdr-border);
  background:#fff;
  width:38px;
  height:38px;
  border-radius:.8rem;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position: relative;
  z-index: 3;
}
.hamburger span{ width:18px; height:2px; background:#0b7f80; position:relative; display:block; }
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  inset:auto 0;
  height:2px;
  background:#0b7f80;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* Mobile nav */
@media (max-width: 860px){
  .nav{
    display:none;
    position: fixed;
    inset-block-start: 56px;
    inset-inline: 0;
    background: var(--hdr-bg);
    padding: .75rem;
    border-bottom:1px solid var(--hdr-border);
    flex-direction: column;
    gap:.25rem;
    z-index: 1001;
  }
  .nav.open{ display:flex !important; }
  .hamburger{ display:flex; }

  .site-header .bar{
    padding:.5rem .75rem;
    gap:.5rem;
  }
  .brand img{ height:30px; }

  .cart-link{
    margin-inline-start: auto;
    padding:.25rem .7rem;
    gap:.35rem;
    box-shadow: 0 2px 5px rgba(16,185,129,.18);
  }
  .cart-link .cart-text .label{ font-size:.8rem; }
  .cart-link .cart-total{ font-size:.72rem; }
  .cart-freehint{ display:none; }

  .cart-link .cart-icon{ width:18px; height:18px; }
  .cart-link .badge{
    min-width:1.1rem;
    height:1.1rem;
    font-size:.7rem;
  }

  html.nav-open{ overflow:hidden; }
}

/* ======================= */
/* Cart Drawer */
/* ======================= */
.cart-drawer[hidden]{ display:none; }

.cart-drawer{
  position: fixed;
  inset: 0;
  z-index: 1200;
  display:flex;
  pointer-events:none;
  isolation: isolate;
}
.cart-drawer:not([hidden]){ pointer-events:auto; }

.cart-drawer__overlay{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.35);
  opacity:0;
  transition: opacity .18s ease;
  z-index: 0;
}

.cart-drawer__panel{
  position: relative;
  margin-inline-start: auto;
  width: min(360px, 100%);
  height: 100%;
  background:#fff;
  box-shadow: -4px 0 20px rgba(15,23,42,.18);
  display:flex;
  flex-direction: column;
  padding: var(--drawer-pad);
  transform: translateX(100%);
  transition: transform .22s ease-out;
  z-index: 2;
  will-change: transform;
}

/* RTL desktop/tablet: start off-screen to the left */
:root[dir="rtl"] .cart-drawer__panel,
html[dir="rtl"] .cart-drawer__panel,
body[dir="rtl"] .cart-drawer__panel{
  transform: translateX(-100%);
}

.cart-drawer:not([hidden]) .cart-drawer__overlay{ opacity:1; }
.cart-drawer:not([hidden]) .cart-drawer__panel{ transform: translateX(0); }

.cart-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}

.cart-drawer__title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--hdr-text);
}

.cart-drawer__close{
  border:none;
  background:transparent;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color:var(--hdr-muted);
  padding:0 .25rem;
}
.cart-drawer__close:hover{ color:#ef4444; }

/* Scroll area */
.cart-drawer__body{
  flex:1;
  overflow-y:auto;
  padding-block:.25rem .85rem;
  min-height: 0;
}

.cart-drawer__items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* Item card */
.cart-item{
  display:flex;
  flex-direction: row;
  align-items:flex-start;
  gap:0.9rem;
  padding:0.75rem 0.9rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 4px 12px rgba(15,23,42,0.05);
}
:root[dir="rtl"] .cart-item,
html[dir="rtl"] .cart-item,
body[dir="rtl"] .cart-item{
  flex-direction: row-reverse;
}

.cart-item__image{ flex-shrink:0; }
.cart-item__image img{
  width:82px;
  height:82px;
  border-radius:0.9rem;
  object-fit:cover;
  background:#f3f4f6;
}

.cart-item__content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.cart-item__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
}
.cart-item__row--top{ align-items:baseline; }
.cart-item__row--bottom{ margin-top:0.35rem; }

.cart-item__title{
  font-size:0.9rem;
  font-weight:800;
  color:#111827;
}

[data-cart-item-price],
.cart-item__price{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:0.25rem;
  font-size:0.85rem;
  font-weight:800;
  direction:ltr;
}

[data-cart-item-price] .cart-price-old,
.cart-item__price .cart-price-old{
  text-decoration: line-through;
  color:#9ca3af;
  font-size:0.78rem;
  font-weight:600;
  opacity:.85;
}

[data-cart-item-price] .cart-price-now,
.cart-item__price .cart-price-now{
  color:#f97316;
  font-size:0.9rem;
  font-weight:900;
}

.cart-item__meta{
  font-size:0.78rem;
  color:#6b7280;
}

.cart-item__quantity{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.2rem 0.5rem;
  border-radius:999px;
  background:#f3f4f6;
}

.cart-item__qty-btn{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#fff;
  cursor:pointer;
  font-size:0.95rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cart-item__qty-btn:hover{ background:#f9fafb; }

.cart-item__qty{
  min-width:22px;
  text-align:center;
  font-size:0.85rem;
  font-weight:800;
}

.cart-item__remove{
  border:0;
  padding:0.35rem 0.9rem;
  border-radius:999px;
  font-size:0.8rem;
  cursor:pointer;
  background:#fee2e2;
  color:#b91c1c;
  margin-inline-start:auto;
  white-space:nowrap;
  font-weight:800;
}
.cart-item__remove:hover{ background:#fecaca; }

.cart-drawer__empty{
  font-size:.85rem;
  color:var(--hdr-muted);
  text-align:center;
  margin-top:1.5rem;
}
.cart-drawer__empty[hidden]{ display:none !important; }

/* ======================= */
/* Footer (Sticky) */
/* ======================= */
.cart-drawer__footer{
  margin-top: auto;
  border-top:1px solid var(--hdr-border);
  padding-top:.75rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;

  position: sticky;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -10px 25px rgba(15,23,42,.06);

  z-index: 1;
}

.cart-drawer__summary{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.85rem;
}

.cart-drawer__summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-drawer__summary-row span:first-child{ color: var(--hdr-muted); }

.cart-drawer__summary-row span:last-child{
  color:#111827;
  font-weight:800;
  direction:ltr;
}

.cart-drawer__summary-row--total span:last-child{
  color:#f97316;
  font-size:.95rem;
  font-weight:900;
}

.is-free{
  color: inherit !important;
  font-weight: inherit !important;
}

/* Actions row (buttons) */
.cart-drawer__actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.1rem;
  flex-wrap: wrap; /* ✅ important when delivery block accidentally lands here */
}

.cart-drawer__back-btn{
  border-radius:.9rem;
  padding:.6rem 1rem;
  font-size:.9rem;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  color:#374151;
  cursor:pointer;
  min-width:92px;
  font-weight:800;
}
.cart-drawer__back-btn:hover{ background:#f3f4f6; }

.cart-drawer__checkout{
  border:none;
  border-radius: 1rem;
  padding: .78rem;
  font-size: 1rem;
  font-weight: 900;
  cursor:pointer;
  background: linear-gradient(135deg,#f97316,#fb923c);
  color:#fff;
  box-shadow: 0 4px 12px rgba(248,113,113,.35);
  transition: transform .08s ease, box-shadow .16s ease, filter .12s ease;
  flex: 1 1 auto;
  min-width: 0;
}
.cart-drawer__checkout:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(248,113,113,.45);
  filter: brightness(1.03);
}
.cart-drawer__checkout:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(248,113,113,.35);
}

/* Mobile drawer: slide from bottom (RTL-safe) */
@media (max-width: 640px){
  .cart-drawer__panel{
    width:100%;
    border-radius: 1rem 1rem 0 0;
    margin-inline-start:0;

    transform: translateY(100%);
    box-shadow: 0 -4px 20px rgba(15,23,42,.22);
  }
  .cart-drawer:not([hidden]) .cart-drawer__panel{ transform: translateY(0); }

  /* NOTE: no RTL transform here (mobile is vertical). */
  .cart-drawer__footer{ border-radius: 14px 14px 0 0; }
}

/* Mobile safe-area for bottom button */
.cart-drawer__footer{
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px){
  .cart-drawer__panel{
    padding-bottom: calc(var(--drawer-pad) + env(safe-area-inset-bottom, 0px));
  }
}
/* ======================= */
/* Delivery Controls (Pickup) */
/* ======================= */
.bh-delivery{
  margin-top: .25rem;
  padding: .75rem .8rem;
  border: 1px solid var(--del-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--del-bg), rgba(255,255,255,.95));
  box-shadow: 0 8px 22px rgba(16,185,129,.10);

  width: 100%;
  box-sizing: border-box;
}

/* ✅ If delivery got inserted inside actions row, force it to be full-width ABOVE buttons */
.cart-drawer__actions > .bh-delivery{
  flex: 0 0 100%;
  order: -1;
}

.bh-delivery__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.bh-delivery__hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: var(--del-chip);
  color: #0f766e;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.bh-switch{
  display:flex;
  align-items:center;
  gap:.55rem;
  cursor:pointer;
  user-select:none;
  position: relative;
}

.bh-switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.bh-switch__track{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148,163,184,.35);
  position: relative;
  flex-shrink: 0;
  transition: background .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}

.bh-switch__thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position:absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  transition: transform .18s ease;
}
:root[dir="rtl"] .bh-switch__thumb,
html[dir="rtl"] .bh-switch__thumb,
body[dir="rtl"] .bh-switch__thumb{
  left:auto;
  right:3px;
}

.bh-switch input:focus-visible + .bh-switch__track{
  outline: 2px solid rgba(14,165,166,.35);
  outline-offset: 3px;
}

.bh-switch input:checked + .bh-switch__track{
  background: rgba(14,165,166,.55);
  box-shadow: inset 0 0 0 1px rgba(14,165,166,.25);
}

.bh-switch input:checked + .bh-switch__track .bh-switch__thumb{
  transform: translateX(18px);
}
:root[dir="rtl"] .bh-switch input:checked + .bh-switch__track .bh-switch__thumb,
html[dir="rtl"] .bh-switch input:checked + .bh-switch__track .bh-switch__thumb,
body[dir="rtl"] .bh-switch input:checked + .bh-switch__track .bh-switch__thumb{
  transform: translateX(-18px);
}

.bh-switch__label{
  font-size: .92rem;
  font-weight: 950;
  color: var(--del-text);
}

/* Office select block */
.bh-delivery__select{
  margin-top: .7rem;
  padding-top: .65rem;
  border-top: 1px dashed rgba(148,163,184,.45);
}
.bh-delivery__select.is-hidden{ display:none; }

.bh-delivery__label{
  display:block;
  font-size:.82rem;
  font-weight: 950;
  color: var(--del-muted);
  margin-bottom: .45rem;
}

/* Select styling */
.bh-delivery__dropdown{
  width:100%;
  padding: .7rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.55);
  background:#fff;
  font-size: .92rem;
  font-weight: 900;
  color:#111827;
  outline:none;

  -webkit-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--caret) 50%),
    linear-gradient(135deg, var(--caret) 50%, transparent 50%);
  background-position:
    1.05rem 55%,
    .82rem 55%;
  background-size:
    7px 7px,
    7px 7px;
  background-repeat: no-repeat;

  transition: border-color .16s ease, box-shadow .16s ease;
}

.bh-delivery__dropdown:focus{
  border-color: rgba(14,165,166,.65);
  box-shadow: 0 0 0 4px rgba(14,165,166,.14);
}

.bh-delivery__dropdown option{
  font-weight: 900;
  color:#111827;
  background:#fff;
}
.bh-delivery__dropdown option[disabled][hidden]{ color:#94a3b8; }

.bh-delivery__note{
  margin-top: .5rem;
  font-size: .8rem;
  color: #0f766e;
  line-height: 1.45;
}
.bh-delivery__note b{ font-weight: 950; }

/* ======================= */
/* Modal confirm delete */
/* ======================= */
.cart-confirm[hidden]{ display:none; }

.cart-confirm{
  position:fixed;
  inset:0;
  z-index:1300;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-family: inherit;
}

.cart-confirm__overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  transition:opacity .18s ease;
}

.cart-confirm__dialog{
  position:relative;
  width:min(320px, 92%);
  background:#fff;
  border-radius:1rem;
  padding:1rem 1.1rem .9rem;
  box-shadow:0 18px 45px rgba(15,23,42,.25);
  transform:translateY(10px) scale(.96);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:auto;
}

.cart-confirm:not([hidden]){ pointer-events:auto; }
.cart-confirm:not([hidden]) .cart-confirm__overlay{ opacity:1; }
.cart-confirm:not([hidden]) .cart-confirm__dialog{
  opacity:1;
  transform:translateY(0) scale(1);
}

.cart-confirm__title{
  margin:0 0 .4rem;
  font-size:.98rem;
  font-weight:900;
  color:#111827;
}
.cart-confirm__text{
  margin:0 0 .9rem;
  font-size:.85rem;
  color:#4b5563;
}

.cart-confirm__actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
}

.cart-confirm__btn{
  border-radius:.7rem;
  border:1px solid transparent;
  padding:.45rem .9rem;
  font-size:.85rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  font-weight: 900;
}

.cart-confirm__btn--danger{
  background:#f97316;
  border-color:#fb923c;
  color:#fff;
  box-shadow:0 4px 10px rgba(248,113,113,.35);
}
.cart-confirm__btn--danger:hover{
  filter:brightness(1.03);
  box-shadow:0 6px 14px rgba(248,113,113,.45);
}

.cart-confirm__btn--ghost{
  background:#f9fafb;
  border-color:#e5e7eb;
  color:#374151;
}
.cart-confirm__btn--ghost:hover{ background:#f3f4f6; }

/* Shipping progress hidden (shipping is fixed) */
.ship-progress{ display:none !important; }