/**
 * "Odstúpenie od zmluvy" — design layer.
 *
 * The page is the odstupenie-od-zmluvy plugin's [withdrawal_form]. The plugin
 * exposes no output/template filters, so this sheet is a pure CSS override: it
 * loads after the plugin's own `oodz-style` handle and restyles its .oodz-*
 * classes into the design system (tokens, card shell, teal buttons). No plugin
 * file, markup, id or name attribute is touched, so its AJAX and validation JS
 * keep working.
 *
 * The page shell (.legal-crumbs / .legal-hero / .legal-help) is reused from
 * pages/legal.css, which is enqueued alongside this file.
 *
 * Constraints imposed by the plugin's JS — do not "fix" these:
 * - #oodz-success, #oodz-refund-info, #oodz-deadline-info, #oodz-produkty-row
 *   and #oodz-produkty-checkbox-row are toggled with jQuery .show(), which
 *   overwrites display with `block`. Never give them display:flex/grid — style
 *   an inner element instead.
 * - #oodz-wrapper is measured with .offset() for scroll — never display:none it.
 *
 * Everything is scoped under .odstupenie so the generic .oodz-* overrides can
 * never leak onto another page (the plugin ships its CSS site-wide).
 */

.odstupenie { margin-bottom: var(--space-9); }

/* ---- Wrapper ------------------------------------------------------------- */
/* Matches the legal pages' document card width rather than the plugin's 680px. */
.odstupenie .oodz-wrapper {
  max-width: 820px;
  margin: var(--space-8) auto 0;
}

/* ---- The form card ------------------------------------------------------- */
/* The plugin's .oodz-form is already a card — restyled in place with the design
   system's card shell instead of being nested inside a second card. */
.odstupenie .oodz-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
}

/* ---- Intro --------------------------------------------------------------- */
.odstupenie .oodz-intro { margin-bottom: var(--space-7); }
.odstupenie .oodz-title {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.odstupenie .oodz-intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

/* ---- Notice / note banners ----------------------------------------------- */
/* The plugin's four banners are one pattern in four palettes; re-cut as the
   design system's teal-50 callout, keeping only the semantic ones coloured. */
.odstupenie .oodz-custom-notice,
.odstupenie .oodz-guest-note,
.odstupenie .oodz-deadline-info,
.odstupenie .oodz-refund-info {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--teal-line-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  background: var(--teal-50);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
.odstupenie .oodz-custom-notice a { color: var(--teal); font-weight: 600; }
.odstupenie .oodz-custom-notice strong,
.odstupenie .oodz-refund-info strong { color: var(--ink); }
.odstupenie .oodz-custom-notice p { margin: 0 0 var(--space-2); }
.odstupenie .oodz-custom-notice p:last-child { margin-bottom: 0; }

.odstupenie .oodz-deadline-info { margin-bottom: var(--space-4); }

/* Deadline states keep their meaning: ok = green, warning = accent, expired = danger. */
.odstupenie .oodz-deadline-ok {
  border-color: var(--cmp-good-line);
  border-left-color: var(--stock-dot);
  background: var(--cmp-good-bg);
  color: var(--stock-green);
}
.odstupenie .oodz-deadline-warning {
  border-color: var(--save-bg);
  border-left-color: var(--accent);
  background: var(--save-bg);
  color: var(--save-text);
}
.odstupenie .oodz-deadline-expired {
  border-color: var(--danger-bg);
  border-left-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
}
.odstupenie .oodz-refund-info {
  margin-top: var(--space-2);
  border-color: var(--cmp-good-line);
  border-left-color: var(--stock-dot);
  background: var(--cmp-good-bg);
  color: var(--stock-green);
}
.odstupenie .oodz-guest-note {
  margin-top: var(--space-3);
  font-size: 14.5px;
}

/* ---- Fields -------------------------------------------------------------- */
.odstupenie .oodz-row { gap: var(--space-4); }
.odstupenie .oodz-field { margin-bottom: var(--space-5); }

.odstupenie .oodz-field > label,
.odstupenie .oodz-field fieldset legend {
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}
.odstupenie .oodz-req { color: var(--danger); margin-left: 2px; }
.odstupenie .oodz-optional { color: var(--muted); font-weight: 400; font-size: 13px; }
.odstupenie .oodz-field-help {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.odstupenie .oodz-form input[type="text"],
.odstupenie .oodz-form input[type="tel"],
.odstupenie .oodz-form input[type="email"],
.odstupenie .oodz-form input[type="date"],
.odstupenie .oodz-form input[type="number"],
.odstupenie .oodz-form input[type="url"],
.odstupenie .oodz-form select,
.odstupenie .oodz-form textarea {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
}
.odstupenie .oodz-form input::placeholder,
.odstupenie .oodz-form textarea::placeholder { color: var(--muted); }

.odstupenie .oodz-form input[type="text"]:focus,
.odstupenie .oodz-form input[type="tel"]:focus,
.odstupenie .oodz-form input[type="email"]:focus,
.odstupenie .oodz-form input[type="date"]:focus,
.odstupenie .oodz-form input[type="number"]:focus,
.odstupenie .oodz-form input[type="url"]:focus,
.odstupenie .oodz-form select:focus,
.odstupenie .oodz-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-50);
  background: var(--bg);
}
.odstupenie .oodz-form select { height: 48px; }

/* ---- Radio / checkbox ---------------------------------------------------- */
/* Native controls stay visible and get the brand accent. The legacy site needed
   a custom-CSS patch to un-hide these because Woodmart hid them; this theme
   does not, but the accent colour is set here explicitly. */
.odstupenie .oodz-radio-group { gap: var(--space-5); }
.odstupenie .oodz-radio-label,
.odstupenie .oodz-check-label {
  color: var(--ink-soft);
  font-size: 14.5px;
}
.odstupenie .oodz-radio-label input[type="radio"],
.odstupenie .oodz-check-label input[type="checkbox"],
.odstupenie .oodz-produkt-item input[type="checkbox"] {
  accent-color: var(--teal);
  width: 20px;
  height: 20px;
}
.odstupenie .oodz-field-gdpr {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--teal-50);
}
.odstupenie .oodz-check-label a { color: var(--teal); font-weight: 600; }

/* The plugin prints this paragraph with inline styles (font-size:13px;color:#555;
   margin:0;line-height:1.5) and exposes no filter to remove them, so !important
   is the only way to pull the off-palette grey onto the token. This is the live
   branch whenever oodz_gdpr_mode is "hidden" — which it is on this install. */
.odstupenie .oodz-field-gdpr-info p {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* ---- Product picker (partial withdrawal) --------------------------------- */
.odstupenie .oodz-produkty-checkboxes { gap: var(--space-2); }
.odstupenie .oodz-produkt-item {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .18s ease, background .18s ease;
}
.odstupenie .oodz-produkt-item:hover {
  background: var(--teal-50);
  border-color: var(--teal-line);
}
.odstupenie .oodz-produkt-name { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.odstupenie .oodz-produkt-meta { color: var(--muted); font-size: 13px; }
.odstupenie .oodz-qty-input {
  width: 62px;
  padding: var(--space-1) var(--space-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
}

/* ---- Submit -------------------------------------------------------------- */
/* Teal, not the plugin's red: this is the page's primary action, and the design
   system reserves --danger for destructive UI, not for a form's submit. */
.odstupenie .oodz-submit-btn {
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: 9px;
  background: var(--teal);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}
.odstupenie .oodz-submit-btn:hover { background: var(--teal-600); }
.odstupenie .oodz-submit-btn:disabled { background: var(--muted); }
.odstupenie .oodz-footer-note {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ---- Error / success ----------------------------------------------------- */
.odstupenie .oodz-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 14.5px;
  line-height: 1.55;
}
.odstupenie .oodz-success {
  padding: var(--space-8) var(--space-7);
  border: 1px solid var(--cmp-good-line);
  border-radius: var(--radius-lg);
  background: var(--cmp-good-bg);
  box-shadow: var(--shadow-card);
}
.odstupenie .oodz-success-check {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  background: var(--green);
  color: var(--bg);
}
.odstupenie .oodz-success h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.odstupenie .oodz-success p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 700px) {
  .odstupenie .oodz-form { padding: var(--space-5); }
  .odstupenie .oodz-wrapper { margin-top: var(--space-7); }
}