/**
 * DZ COD — front-end styles.
 *
 * The colour palette is NOT here. It's generated from the plugin settings and
 * printed inline as CSS custom properties on .dzcod (see DZCOD_Plugin::palette).
 * Available variables:
 *
 *   --dz-accent   button / focus / selected state
 *   --dz-bg       form background
 *   --dz-field    input and rate-row background
 *   --dz-ink      body text
 *   --dz-muted    labels, hints, placeholders
 *   --dz-line     borders
 *   --dz-soft     stepper buttons, subtle fills
 *
 * To restyle, override those variables from your theme rather than editing
 * this file — plugin updates overwrite it.
 */

/**
 * Defensive container.
 *
 * Themes vary wildly in what they do to a product summary — floats, grids,
 * negative margins, fixed widths. These rules stop the form inheriting any of
 * it, and stop the form pushing the page wider than the viewport, which is
 * what makes a layout look "not mobile friendly" even though nothing is
 * technically broken.
 */
.dzcod-wrap{
  container-type:inline-size;
  overflow-x:clip;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  float:none;
  clear:both;
  box-sizing:border-box;
}
.dzcod-wrap--wide{max-width:720px;margin-inline:auto}
.dzcod{
  display:flex;flex-direction:column;gap:1em;margin:1.5em 0;padding:1.25em;border:1px solid var(--dz-line);
  border-radius:10px;background:var(--dz-bg);font-size:inherit;font-family:inherit;line-height:1.5;
  color:var(--dz-ink)}
.dzcod *,.dzcod *::before,.dzcod *::after{box-sizing:border-box}
/* Nothing inside may overflow its column: long product names, Arabic strings
   and price cells all break rather than widen the page. */
.dzcod,.dzcod *{max-width:100%;min-width:0}
.dzcod{overflow-wrap:break-word;word-wrap:break-word}
/* Themes commonly style form elements globally; reset what would leak in. */
.dzcod input,.dzcod select,.dzcod textarea,.dzcod button{
  max-width:100%;margin:0;float:none;text-transform:none;letter-spacing:normal}
.dzcod fieldset{min-inline-size:0;max-width:100%}
.dzcod img{max-width:100%;height:auto}
/* .dzcod__field sets display:flex, which outranks the browser's own [hidden]
   rule — a field switched off (quantity) kept showing. */
.dzcod [hidden]{display:none!important}
.dzcod__head{display:flex;flex-direction:column;gap:4px}
.dzcod__title{margin:0;font-size:1.3em;font-weight:700;line-height:1.25}
.dzcod__sub{margin:0;font-size:.9em;color:var(--dz-muted)}
.dzcod__field{display:flex;flex-direction:column;gap:.45em;margin:0;padding:0;border:0;width:100%;
  min-inline-size:0}
.dzcod__field>label{display:block;margin:0}
.dzcod__field>label,.dzcod__shipping>legend{font-size:.9em;font-weight:600;letter-spacing:.01em;
  padding:0;margin:0;line-height:1.3;color:var(--dz-ink)}
.dzcod__shipping{border:0;padding:0;margin:0;background:transparent;box-shadow:none}
.dzcod__shipping>legend{float:left;width:100%;margin:0 0 9px;padding:0;background:transparent;
  color:var(--dz-ink)}
.dzcod__shipping>legend+*{clear:both}
.dzcod input[type=text],.dzcod input[type=tel],.dzcod input[type=email],.dzcod input[type=number],
.dzcod select,.dzcod textarea{
  width:100%;padding:.75em .85em;border:1px solid var(--dz-line);border-radius:8px;font-family:inherit;
  font-size:max(16px,1em);line-height:1.4;background:var(--dz-field);color:var(--dz-ink);
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.dzcod input::placeholder,.dzcod textarea::placeholder{color:var(--dz-muted);opacity:1}
/* Native select arrow sits on the inline-end edge in both directions. */
.dzcod select{padding-inline-end:2.4em;min-height:3.1em;line-height:1.6;text-overflow:ellipsis}
/* Arabic descenders need more room than Latin, or they clip. */
.dzcod[dir=rtl] input,.dzcod[dir=rtl] select,.dzcod[dir=rtl] textarea{line-height:1.75}
.dzcod[dir=rtl] .dzcod__title,.dzcod[dir=rtl] .dzcod__field>label,
.dzcod[dir=rtl] .dzcod__shipping>legend{line-height:1.6}
/* Phone stays LTR so digits type in order, but aligns to the reading side. */
.dzcod[dir=rtl] input[type=tel]{text-align:right}
.dzcod input:focus,.dzcod select:focus,.dzcod textarea:focus{outline:none;border-color:var(--dz-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dz-accent) 18%,transparent)}
.dzcod .dzcod__err{border-color:#c0392b}
.dzcod__row{display:grid;grid-template-columns:1fr;gap:12px}
@container (min-width:440px){.dzcod__row{grid-template-columns:1fr 1fr}}
@container (min-width:560px){
  .dzcod{padding:1.75em 1.9em;gap:1.2em}
}
@supports not (container-type:inline-size){
  /* No container queries: fall back to the viewport, and stay single-column
     on phones where two columns would be unusable. */
  @media(min-width:782px){.dzcod__row{grid-template-columns:1fr 1fr}}
}

/* Last-resort guard: whatever the theme does, never exceed the screen. */
@media (max-width:600px){
  .dzcod{padding:1em}
  .dzcod__row{grid-template-columns:1fr}
}
.dzcod__stepper{display:flex;align-items:stretch;max-width:150px;direction:ltr}
.dzcod__stepper button{width:44px;border:1px solid var(--dz-line);background:var(--dz-soft);font-size:18px;
  line-height:1;cursor:pointer;color:var(--dz-ink)}
.dzcod__stepper button:first-child{border-radius:8px 0 0 8px}
.dzcod__stepper button:last-child{border-radius:0 8px 8px 0}
.dzcod__stepper input{border-radius:0;text-align:center;-moz-appearance:textfield}
.dzcod__stepper input::-webkit-outer-spin-button,.dzcod__stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.dzcod__rates{display:flex;flex-direction:column;gap:10px;width:100%}
.dzcod .dzcod__rates label.dzcod__rate{display:flex;align-items:center;gap:.8em;width:100%;
  min-height:3.4em;padding:1em 1.1em;margin:0;border:1px solid var(--dz-line);border-radius:8px;
  background:var(--dz-field);color:var(--dz-ink);cursor:pointer;font-size:1em;font-weight:400;
  line-height:1.35;text-align:start;transition:border-color .15s,background .15s}
.dzcod .dzcod__rates label.dzcod__rate:hover{border-color:color-mix(in srgb,var(--dz-accent) 45%,var(--dz-line))}
.dzcod .dzcod__rates label.dzcod__rate:has(input:checked){border-color:var(--dz-accent);
  background:color-mix(in srgb,var(--dz-accent) 14%,var(--dz-field));
  box-shadow:inset 0 0 0 1px var(--dz-accent)}
.dzcod .dzcod__rates label.dzcod__rate:focus-within{outline:2px solid var(--dz-accent);outline-offset:2px}
.dzcod .dzcod__rates .dzcod__rate input[type=radio]{flex:0 0 auto;width:20px;height:20px;margin:0;
  accent-color:var(--dz-accent);cursor:pointer}
.dzcod .dzcod__rates .dzcod__rate span{flex:1 1 auto;min-width:0;font-weight:500}
.dzcod .dzcod__rates .dzcod__rate b{flex:0 0 auto;margin-inline-start:auto;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:isolate}
.dzcod__hint{margin:0;font-size:.9em;color:var(--dz-muted)}
.dzcod__totals{margin:.25em 0 0;padding:.9em 0 0;border-top:1px dashed var(--dz-line);display:flex;
  flex-direction:column;gap:.45em}
.dzcod__totals>div{display:flex;justify-content:space-between;gap:12px;margin:0}
.dzcod__totals dt{margin:0;color:var(--dz-muted);font-size:.95em}
.dzcod__totals dd{margin:0;font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}
.dzcod__grand dt,.dzcod__grand dd{font-weight:700;font-size:1.2em;color:var(--dz-ink)}
.dzcod button.dzcod__submit{display:block;width:100%;padding:.95em 1.25em;border:0;border-radius:8px;
  background:var(--dz-accent);color:#fff;font-family:inherit;font-size:1.05em;font-weight:700;
  line-height:1.3;text-align:center;cursor:pointer;transition:filter .15s,opacity .15s}
.dzcod button.dzcod__submit:hover{filter:brightness(1.07);background:var(--dz-accent);color:#fff}
.dzcod button.dzcod__submit:disabled{opacity:.6;cursor:progress}
.dzcod button.dzcod__submit:focus-visible{outline:3px solid var(--dz-accent);outline-offset:2px}
.dzcod__alert{padding:.7em .85em;border-radius:8px;background:#fdecea;color:#8e2a20;font-size:.95em}
/**
 * Honeypot — hidden from people, visible to naive bots.
 *
 * NOT off-screen positioning. `left:-9999px` is harmless in LTR, but in RTL
 * the browser treats it as content to the left of the page and adds 9999px of
 * scrollable width — the product page then opens on a blank area with the real
 * content off to one side.
 *
 * The clip technique hides it without occupying any space in either direction,
 * and bots still fill it in because it's a real focusable field in the DOM.
 */
.dzcod__turnstile{align-items:flex-start}
.dzcod__turnstile .cf-turnstile{max-width:100%;overflow:hidden}
.dzcod__turnstile iframe{max-width:100%}

.dzcod__hp{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.dzcod[dir=rtl]{text-align:right}
@media(prefers-reduced-motion:reduce){.dzcod *{transition:none!important}}

/* Variation buttons -------------------------------------------------------
   The underlying <select> stays in the DOM (visually hidden) so the browser
   still owns the value; these only write to it. */
.dzcod__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dzcod__pills{display:flex;flex-wrap:wrap;gap:.5em}
/* Swatch rings sit outside the box, so a row of them needs a little more air. */
.dzcod__pills:has(.dzcod__pill--img){gap:.75em}
.dzcod .dzcod__pills .dzcod__pill{
  min-height:2.8em;padding:.6em 1.1em;margin:0;
  border:2px solid var(--dz-line);border-radius:8px;
  background:var(--dz-field);color:var(--dz-ink);
  font-family:inherit;font-size:1em;font-weight:500;line-height:1.2;
  cursor:pointer;transition:border-color .15s,background .15s,color .15s,opacity .15s,filter .15s}
.dzcod .dzcod__pills .dzcod__pill:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--dz-accent) 55%,var(--dz-line))}
.dzcod .dzcod__pills .dzcod__pill.is-on{
  border-color:var(--dz-accent);
  background:var(--dz-field);
  color:var(--dz-ink);
  font-weight:600}

/* Once a choice is made, the rest recede. Before that everything sits at full
   strength — dimming an untouched row just looks broken. */
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on){
  opacity:.4}
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on) i,
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on) img{
  filter:grayscale(.7)}
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on):not(.is-off):hover,
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on):not(.is-off):focus-visible{
  opacity:1}
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on):not(.is-off):hover i,
.dzcod .dzcod__pills.has-selection .dzcod__pill:not(.is-on):not(.is-off):hover img{
  filter:none}
.dzcod .dzcod__pills .dzcod__pill.is-off{
  opacity:.4;cursor:not-allowed;
  background:linear-gradient(to top left,transparent calc(50% - 1px),
    var(--dz-line) calc(50% - 1px),var(--dz-line) calc(50% + 1px),
    transparent calc(50% + 1px)),var(--dz-field)}
.dzcod .dzcod__pills .dzcod__pill:focus-visible{
  outline:2px solid var(--dz-accent);outline-offset:2px}

/* Swatches ----------------------------------------------------------------
   A swatch is the thing itself, not a button with the thing inside it. No
   border, no padding, no label: a square photo, or a square of colour. The
   chrome a text pill needs would only compete with what it is showing.

   Selection is a ring set off the edge, which reads on a photo of any colour
   — a border drawn on the swatch would vanish into a dark image. */
.dzcod .dzcod__pills .dzcod__pill--img{
  display:block;min-height:0;padding:0;border:0;background:none;
  border-radius:8px;line-height:0;
  outline:2px solid transparent;outline-offset:2px}
.dzcod[dir=rtl] .dzcod__pills .dzcod__pill--img{padding:0}

/* Colour swatches, exactly as they were before image swatches existed: the
   dab and its name in one pill. */
.dzcod .dzcod__pills .dzcod__pill--dot{
  display:flex;align-items:center;gap:.55em;padding:.4em .95em .4em .45em}
.dzcod[dir=rtl] .dzcod__pills .dzcod__pill--dot{padding:.45em .5em .45em 1em}

.dzcod .dzcod__pills .dzcod__pill--img img{
  width:var(--dz-swatch,66px);height:var(--dz-swatch,66px);
  object-fit:cover;border-radius:8px;display:block;
  background:var(--dz-soft)}

.dzcod .dzcod__pills .dzcod__pill--dot i{
  width:1.5em;height:1.5em;border-radius:50%;display:block;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35)}

.dzcod .dzcod__pills .dzcod__pill--img:hover:not(:disabled){
  border-color:transparent;
  outline-color:color-mix(in srgb,var(--dz-accent) 45%,transparent)}

.dzcod .dzcod__pills .dzcod__pill--img.is-on{
  border-color:transparent;background:none;
  outline-color:var(--dz-accent)}

/* Unavailable: the diagonal that marks a sold-out text pill would be lost on
   a photo, so these just drain instead. */
.dzcod .dzcod__pills .dzcod__pill--img.is-off{
  background:none;opacity:.35}
.dzcod .dzcod__pills .dzcod__pill--img.is-off img{filter:grayscale(1)}

/* Labels inside the fields ------------------------------------------------
   Réglages → « Libellés dans les champs ». The PHP has already copied each
   label into its placeholder; here the labels are hidden visually but kept
   for screen readers. Same clip technique as the honeypot, for the same RTL
   reason.

   Two exceptions stay visible:
   - quantity has no placeholder to carry it, so its label moves beside the
     stepper instead of above it — still saves the line;
   - variation buttons have no box to put the text in, so the attribute
     name stays above them. As a dropdown, the name is its first option. */
.dzcod--compact .dzcod__field:not(.dzcod__field--qty):not(.dzcod__field--attr)>label,
.dzcod--compact:not([data-attr-style=buttons]) .dzcod__field--attr>label,
.dzcod--compact .dzcod__shipping>legend{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dzcod--compact .dzcod__field--qty{flex-direction:row;align-items:center;
  justify-content:space-between;gap:1em}
.dzcod--compact .dzcod__field--qty .dzcod__stepper{flex:0 0 auto;width:150px}