/* DiscountLane — local-currency display + header switcher (pairs with dl-currency.php / .js).
   The AED text stays in the page; in another currency it is hidden and the converted figure
   is painted from data-dl-show. Delete this file with the other two to remove the feature. */

/* ---- converted prices ---- */
html.dl-cur-on [data-dl-show] > * { display: none !important; }
html.dl-cur-on [data-dl-show]::after {
  content: attr(data-dl-show);
  white-space: nowrap;
}
html.dl-cur-pending .woocommerce-Price-amount { visibility: hidden; }

/* ---- what the customer actually pays ---- */
.dl-cur-charged {
  display: block;
  margin-top: 2px;
  font: 500 12px/1.4 var(--text, Inter, system-ui, sans-serif);
  color: var(--slate, #5b6b7d);
  white-space: nowrap;
}
.dl-cur-note {
  margin: 12px 0 16px !important;
  padding: 10px 12px;
  font: 400 12.5px/1.5 var(--text, Inter, system-ui, sans-serif) !important;
  color: var(--slate, #5b6b7d) !important;
  background: var(--mist, #f5f7fa);
  border: 1px solid var(--line, #e4e8ee);
}
body.dl-v2 .dl-cur-note:not(#dl-sq):not(#dl-sq) { border-radius: var(--sq-sm, 10px) !important; }
.dl-cur-pdp {
  margin: 4px 0 10px !important;
  font: 400 12.5px/1.4 var(--text, Inter, system-ui, sans-serif) !important;
  color: var(--slate, #5b6b7d) !important;
}

/* ---- header switcher ---- */
.dl-cur-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  min-height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--navy, #1f3044) !important;
  font: 700 13px/1 var(--text, Inter, system-ui, sans-serif) !important;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
body.dl-v2 .dl-cur-btn:not(#dl-sq):not(#dl-sq) { border-radius: 8px !important; }
.dl-cur-btn:hover, .dl-cur-btn[aria-expanded="true"] { background: var(--mist, #f5f7fa) !important; color: var(--ink, #14212f) !important; }
.dl-cur-btn:focus-visible { outline: 2px solid var(--green, #37c12d) !important; outline-offset: 2px; }
.dl-cur-btn__sym { font-weight: 500; color: var(--slate, #5b6b7d); font-size: 12px; }
.dl-cur-btn svg { flex: 0 0 auto; opacity: .7; transition: transform .16s ease; }
.dl-cur-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

body.dl-v2 #masthead .header-icons > .dl-cur-sw { min-width: 0 !important; }

/* phone header: the code and chevron only, sized like its neighbours. The theme spaces the
   icons 20px apart, which pushed the bag off a 390px screen once a third item joined: close
   the gaps only when the switcher is there. */
.handheld-header-links:has(.dl-cur-sw) { min-width: 0 !important; display: flex !important; justify-content: flex-end !important; }
.handheld-header-links > ul:has(> li.dl-cur-sw) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}
.handheld-header-links > ul:has(> li.dl-cur-sw) > li { margin: 0 !important; padding: 0 !important; }
/* phone header: the code and chevron only, sized like its neighbours */
.handheld-header-links li.dl-cur-sw {
  display: flex !important;
  align-items: center;
  list-style: none;
  width: auto !important;
  flex: 0 0 auto !important;
}
.dl-cur-btn--phone { padding: 0 4px !important; min-width: 40px !important; font-size: 13px !important; }
.dl-cur-btn--phone .dl-cur-btn__sym { display: none; }

/* ---- the menu (fixed, so the header never clips it) ---- */
.dl-cur-menu {
  position: fixed;
  z-index: 100050;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line, #e4e8ee);
  box-shadow: 0 18px 40px -12px rgba(20, 33, 47, .28), 0 2px 6px rgba(20, 33, 47, .06);
  font-family: var(--text, Inter, system-ui, sans-serif);
  color: var(--ink, #14212f);
  text-align: left;
}
.dl-cur-menu[hidden] { display: none !important; }
body.dl-v2 .dl-cur-menu:not(#dl-sq):not(#dl-sq) { border-radius: var(--sq-md, 16px) !important; }
.dl-cur-menu__h {
  margin: 4px 8px 6px !important;
  font: 700 11px/1.2 var(--text, Inter, system-ui, sans-serif) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate, #5b6b7d) !important;
}
.dl-cur-menu__list { display: flex; flex-direction: column; }
.dl-cur-menu [data-cur] {
  display: grid !important;
  grid-template-columns: 44px 1fr auto 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink, #14212f) !important;
  text-align: left;
  font: 400 14px/1.2 var(--text, Inter, system-ui, sans-serif) !important;
  text-transform: none !important;
  cursor: pointer;
}
body.dl-v2 .dl-cur-menu [data-cur]:not(#dl-sq):not(#dl-sq) { border-radius: var(--sq-sm, 10px) !important; }
.dl-cur-menu [data-cur]:hover, .dl-cur-menu [data-cur]:focus-visible { background: var(--mist, #f5f7fa) !important; outline: none; }
.dl-cur-menu [data-cur]:focus-visible { box-shadow: inset 0 0 0 2px var(--green, #37c12d) !important; }
.dl-cur-menu__code { font-weight: 700; color: var(--navy, #1f3044); letter-spacing: .02em; }
.dl-cur-menu__name { color: var(--ink, #14212f); }
.dl-cur-menu__here[hidden] { display: none !important; }
.dl-cur-menu__here { display: block; margin-top: 2px; font-weight: 400; font-style: normal; color: var(--slate, #5b6b7d); font-size: 12px; }
.dl-cur-menu__sym { color: var(--slate, #5b6b7d); font-size: 13px; unicode-bidi: isolate; }
.dl-cur-menu__tick { display: flex; color: var(--green-dark, #2fae26); visibility: hidden; }
.dl-cur-menu [aria-checked="true"] { background: rgba(55, 193, 45, .08) !important; }
.dl-cur-menu [aria-checked="true"] .dl-cur-menu__tick { visibility: visible; }
.dl-cur-menu [aria-checked="true"] .dl-cur-menu__name { font-weight: 600; }
.dl-cur-menu__foot {
  margin: 6px 8px 4px !important;
  padding-top: 8px;
  border-top: 1px solid var(--line, #e4e8ee);
  font: 400 12px/1.45 var(--text, Inter, system-ui, sans-serif) !important;
  color: var(--slate, #5b6b7d) !important;
}
.dl-cur-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .dl-cur-btn, .dl-cur-btn svg { transition: none; }
}

/* Longer converted totals ("KWD 8.869") ran under the cart count bubble, which is pinned to the
   cart cell's right edge (right:2px, 18px wide). Reserve that strip inside the link itself so the
   figure always ends 4px left of the bubble, whatever its length. */
html.dl-cur-on body.dl-v2 #masthead .header-icons > .header-icon__cart > a { padding-right: 24px !important; }
html.dl-cur-on body.dl-v2 #masthead .header-icon__cart .cart-items-total-price { padding-right: 0 !important; }

/* ---- the row inside the phone slide-out menu ---- */
.dl-cur-oc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 16px 8px;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--line, #e4e8ee);
}
.dl-cur-oc__lbl { font: 500 13px/1.3 var(--text, Inter, system-ui, sans-serif); color: var(--slate, #5b6b7d); }
.dl-cur-btn--oc { padding: 0 10px !important; border: 1px solid var(--line, #e4e8ee) !important; }