/*
 * RahkarTheme — classic-base override layer.
 *
 * PrestaShop core ALWAYS auto-loads the forked classic `assets/css/theme.css`
 * (200 KB of Bootstrap + Bootstrap-TouchSpin + classic theme rules). We can't
 * drop it — 41 templates use the Bootstrap grid (col-xs-*) and core JS widgets
 * (quantity spinner, modals, form validation) depend on its styles.
 *
 * theme.css loads AFTER our global chrome CSS (tokens/global/header/…) but with
 * the same specificity it wins, so its legacy globals (#wrapper bg, .h6 size,
 * .data-sheet cells, heading sizes, …) keep bleeding into the rahkar design.
 *
 * THIS sheet is registered with a very high priority (loads dead LAST, after
 * theme.css AND the per-page CSS), so a plain selector here beats theme.css with
 * no specificity gymnastics. Put global classic-base neutralizers here — keep it
 * SMALL and only for rules that genuinely fight the design (not a place for new
 * component styles; those belong in their own component sheet).
 */

/* The classic base paints the whole page shell grey (#f6f6f6). The rahkar
   design is white surfaces on a white page — let the (white) body show through. */
#wrapper {
  padding-top: 0;
  background: #FFF;
}
.container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.done {
  margin-right: 0;
}
#header {
  background: transparent !important;
  box-shadow: none;
}
.product-prices div {
  margin-bottom: 0;
}

/* ── Custom checkbox / radio — global, theme-wide restyle ─────────────────────
   The classic base (theme.css) renders every .custom-checkbox / .custom-radio
   (checkout terms & gift, carrier & payment pickers, address selector, account
   consent, faceted filters) as a grey #979797 box/circle with a #24b9d7 dot —
   off-brand and dated. We restyle the VISUALS only — border, radius, fill, tick,
   dot — with design tokens, and leave the classic POSITIONING/layout untouched so
   no form shifts (checkout radios float, the account box is absolutely placed).
   The native <input> stays hidden by the classic base (opacity:0 overlay) and
   keeps firing its events; we only repaint the fake span.

   This sheet loads dead-last (priority 200), so these plain selectors beat
   theme.css by source order. The faceted-filter column keeps its own richer skin
   (scoped under `#search_filters .rpa-facet__label`, higher specificity), so it
   overrides these rules and is unaffected. */

/* Checkbox box — square, rounded, primary fill on check (skip colour swatches). */
.custom-checkbox input[type="checkbox"] + span:not(.color) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--wp--preset--color--border, #d3d7de);
  border-radius: 5px;
  background: var(--wp--preset--color--base, #fff);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.custom-checkbox input[type="checkbox"]:checked + span:not(.color) {
  background: var(--wp--preset--color--primary, #0a66c2);
  border-color: var(--wp--preset--color--primary, #0a66c2);
}
.custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
}
.custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked {
  color: #fff;
}

/* Radio circle — token border; centred primary dot on check. */
.custom-radio {
  border-color: var(--wp--preset--color--border, #d3d7de);
  background: var(--wp--preset--color--base, #fff);
  transition: border-color 0.15s ease;
}
.custom-radio:has(input[type="radio"]:checked) {
  border-color: var(--wp--preset--color--primary, #0a66c2);
}
.custom-radio input[type="radio"]:checked + span {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--wp--preset--color--primary, #0a66c2);
  transform: translate(-50%, -50%);
}