/* ════════════════════════════════════════════════════════════
   DELIVERY CALCULATOR — v9.07
   Built on the page design tokens (--pb-*) declared by
   page_blocks_assets(), so it inherits the exact same surfaces,
   hairlines, radii, elevation and dark-mode treatment as every
   other section on the site. No private colour, no private width.
════════════════════════════════════════════════════════════ */
.dlv{width:100%;box-sizing:border-box;background:var(--pb-surface);border:1px solid var(--pb-line);
  border-radius:var(--pb-r);box-shadow:var(--pb-shadow);overflow:hidden}
.dlv-hd{display:flex;align-items:center;gap:15px;padding:clamp(20px,2.6vw,26px);
  border-bottom:1px solid var(--pb-line)}
.dlv-hd-ic{width:50px;height:50px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;
  color:#fff;font-size:20px;background:var(--clr-primary);
  box-shadow:0 10px 22px -12px var(--clr-primary)}
.dlv-hd h2{margin:0;font-size:17px;font-weight:850;color:var(--clr-text);line-height:1.35}
.dlv-hd p{margin:5px 0 0;font-size:13.5px;color:var(--clr-text-3);line-height:1.6}
.dlv-bd{padding:clamp(20px,2.6vw,26px)}

/* select */
.dlv-field{position:relative}
.dlv-field>i{position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%);
  color:var(--clr-text-3);font-size:12px;pointer-events:none;transition:transform .2s}
.dlv-field:focus-within>i{transform:translateY(-50%) rotate(180deg);color:var(--clr-primary)}
.dlv-sel{width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;
  font:inherit;font-size:15px;font-weight:700;color:var(--clr-text);
  background:var(--clr-surface);border:1.5px solid var(--pb-line);border-radius:14px;
  padding:15px 18px;padding-inline-end:46px;cursor:pointer;
  transition:border-color .18s,box-shadow .18s}
/* The dropdown LIST of a native <select> is painted by the operating
   system, not by this stylesheet — `appearance:none` only restyles the
   closed control. Without a colour-scheme hint the OS draws a light
   popup with light text over a dark page (unreadable). Declaring the
   scheme makes the platform draw its own dark popup, and the explicit
   option colours cover the engines that ignore it. */
body.dark-mode .dlv-sel{background:rgba(255,255,255,.04);color-scheme:dark}
body.dark-mode .dlv-sel option,
body.dark-mode .dlv-sel optgroup{background:#1e293b;color:#f1f5f9}
.dlv-sel option{background:var(--clr-surface);color:var(--clr-text)}
.dlv-sel:hover{border-color:color-mix(in srgb,var(--clr-primary) 40%,var(--pb-line))}
.dlv-sel:focus{outline:none;border-color:var(--clr-primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--clr-primary) 16%,transparent)}

/* results */
.dlv-res{margin-top:20px}
.dlv-res[hidden]{display:none}
.dlv-wilaya{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:14px;font-weight:850;color:var(--clr-text)}
.dlv-wilaya .code{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;
  border-radius:8px;font-size:12px;font-weight:900;color:var(--clr-primary);
  background:color-mix(in srgb,var(--clr-primary) 12%,transparent)}
.dlv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.dlv-card{box-sizing:border-box;border-radius:var(--pb-r-sm);padding:18px;
  border:1px solid var(--pb-line);background:var(--clr-surface);
  display:flex;flex-direction:column;gap:12px}
body.dark-mode .dlv-card{background:rgba(255,255,255,.03)}
.dlv-card.on{border-color:color-mix(in srgb,var(--dlv-c) 42%,transparent);
  background:color-mix(in srgb,var(--dlv-c) 6%,var(--clr-surface))}
body.dark-mode .dlv-card.on{background:color-mix(in srgb,var(--dlv-c) 13%,transparent)}
.dlv-card.off{opacity:.62}
.dlv-card-top{display:flex;align-items:center;gap:10px}
.dlv-card-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;color:var(--dlv-c);background:color-mix(in srgb,var(--dlv-c) 13%,transparent)}
.dlv-card.off .dlv-card-ic{color:var(--clr-text-3);background:var(--clr-surface-2)}
.dlv-card-t{font-size:14px;font-weight:850;color:var(--clr-text)}
.dlv-badge{margin-inline-start:auto;font-size:10.5px;font-weight:900;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--dlv-c) 15%,transparent);color:var(--dlv-c);white-space:nowrap}
.dlv-card.off .dlv-badge{background:var(--clr-surface-2);color:var(--clr-text-3)}
.dlv-price{font-size:clamp(22px,3vw,28px);font-weight:900;line-height:1;color:var(--clr-text);
  letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.dlv-price .cur{font-size:13px;font-weight:800;color:var(--clr-text-3);letter-spacing:0}
.dlv-price.free{color:#10b981}
.dlv-meta{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.dlv-meta span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--clr-text-3)}
.dlv-meta i{font-size:11px;color:var(--dlv-c);width:14px;text-align:center}
.dlv-card.off .dlv-meta i{color:var(--clr-text-3)}
.dlv-none{display:flex;align-items:center;gap:10px;padding:16px 18px;border-radius:var(--pb-r-sm);
  font-size:13.5px;color:var(--clr-text-2);
  background:color-mix(in srgb,#f59e0b 8%,var(--clr-surface));
  border:1px solid color-mix(in srgb,#f59e0b 28%,transparent)}
.dlv-none i{color:#f59e0b;font-size:17px}
@media(prefers-reduced-motion:reduce){.dlv-field>i,.dlv-sel{transition:none}}