/*
 * CWS Raskid ugovora — storefront trigger button + popup modal.
 * Ported from the design handoff (design_handoff_raskid_ugovora). All values are
 * CSS custom properties so the store can theme it. The trigger + primary CTAs
 * can inherit the site's Elementor button styling (see .cws-wd-trigger.is-inherit
 * and the elementor-button class added in the markup); the modal chrome uses the
 * design tokens below driven by --cws-wd-accent (an Elementor control).
 */

.cws-wd-root{
  --cws-wd-font-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cws-wd-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --cws-wd-panel:#ffffff;
  --cws-wd-panel-2:#f7f8fa;
  --cws-wd-panel-3:#fafbfc;
  --cws-wd-line:#e3e7ec;
  --cws-wd-line-strong:#d2d8df;
  --cws-wd-ink:#1b1f24;
  --cws-wd-ink-2:#565f6a;
  --cws-wd-ink-3:#868f99;

  --cws-wd-accent:oklch(0.58 0.13 256);
  --cws-wd-accent-hover:oklch(0.52 0.14 256);
  --cws-wd-accent-soft:oklch(0.95 0.03 256);
  --cws-wd-accent-ink:oklch(0.42 0.14 256);

  --cws-wd-danger:oklch(0.55 0.18 25);
  --cws-wd-danger-soft:oklch(0.95 0.04 25);
  --cws-wd-danger-line:oklch(0.83 0.09 25);
  --cws-wd-warn-soft:oklch(0.95 0.05 85);
  --cws-wd-warn-line:oklch(0.82 0.09 80);
  --cws-wd-warn-ink:oklch(0.45 0.13 70);
  --cws-wd-success:oklch(0.55 0.14 148);
  --cws-wd-success-soft:oklch(0.95 0.045 148);
  --cws-wd-success-line:oklch(0.82 0.09 148);

  --cws-wd-radius:10px;
  --cws-wd-radius-lg:16px;
  --cws-wd-btn-radius:6px;
  --cws-wd-shadow-lg:0 24px 64px rgba(20,24,30,.30);
}

.cws-wd-root, .cws-wd-modal, .cws-wd-modal *, .cws-wd-root *{ box-sizing:border-box; }

/* ============================ Trigger button ============================ */
/* Layout only — always applied, harmless for the inherited-theme variant. */
.cws-wd-trigger{
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
}
/* display:inline-flex above overrides the UA [hidden]{display:none}; restore it
   so the embedded (headless) instance — rendered with `hidden` by
   render_form_markup() when $embedded — really stays invisible. Without this the
   trigger leaks onto the host page as a stray "Raskid ugovora" button (e.g. at
   the bottom of My Account), sized and coloured by the Elementor kit because
   .is-inherit adds .elementor-button. */
.cws-wd-trigger[hidden]{ display:none; }
.cws-wd-trigger svg{ width:18px; height:18px; flex:none; }
/* Design look — applied ONLY when NOT inheriting the theme's Elementor button.
   With .is-inherit these rules don't match, so the kit's .elementor-button
   styles (padding/colors/hover/typography) are the only ones that apply. */
.cws-wd-trigger:not(.is-inherit){
  font-family:var(--cws-wd-font-ui);
  font-weight:600; font-size:15px; line-height:1;
  padding:14px 28px;
  border-radius:var(--cws-wd-btn-radius);
  border:1px solid transparent;
  background:var(--cws-wd-accent); color:#fff;
  transition:background .14s ease, box-shadow .14s ease, transform .05s ease;
}
.cws-wd-trigger:not(.is-inherit):hover{ background:var(--cws-wd-accent-hover); }
.cws-wd-trigger:not(.is-inherit):active{ transform:translateY(1px); }
.cws-wd-trigger:not(.is-inherit):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--cws-wd-panel), 0 0 0 4.5px var(--cws-wd-accent);
}

/* ============================ Modal shell ============================ */
.cws-wd-modal{
  position:fixed; inset:0; z-index:999999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(10,12,15,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
  font-family:var(--cws-wd-font-ui);
}
.cws-wd-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.cws-wd-card{
  position:relative; width:560px; max-width:100%; max-height:88vh;
  background:var(--cws-wd-panel); color:var(--cws-wd-ink);
  border-radius:var(--cws-wd-radius-lg);
  box-shadow:var(--cws-wd-shadow-lg);
  display:flex; flex-direction:column;
  transform:translateY(8px); transition:transform .2s ease;
}
.cws-wd-modal.is-open .cws-wd-card{ transform:translateY(0); }

.cws-wd-head{ display:flex; align-items:center; gap:12px; padding:20px 24px 16px; flex:none; }
.cws-wd-head h3{ font-size:18px; font-weight:600; margin:0; flex:1; letter-spacing:-0.01em; color:var(--cws-wd-ink); }
.cws-wd-close{
  width:32px; height:32px; border-radius:8px; border:none;
  background:var(--cws-wd-panel-2); color:var(--cws-wd-ink-2);
  display:grid; place-items:center; cursor:pointer; flex:none;
}
.cws-wd-close:hover{ background:var(--cws-wd-line); color:var(--cws-wd-ink); }
.cws-wd-close svg{ width:16px; height:16px; }

/* Progress */
.cws-wd-steps{ display:flex; align-items:center; gap:8px; padding:0 24px 20px; flex:none; }
.cws-wd-step{ display:flex; align-items:center; gap:8px; }
.cws-wd-step .dot{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; flex:none;
  border:2px solid var(--cws-wd-line-strong); color:var(--cws-wd-ink-3); background:var(--cws-wd-panel);
}
.cws-wd-step.is-active .dot{ border-color:var(--cws-wd-accent); color:var(--cws-wd-accent); background:var(--cws-wd-accent-soft); }
.cws-wd-step.is-done .dot{ border-color:var(--cws-wd-accent); background:var(--cws-wd-accent); color:#fff; }
.cws-wd-step .lab{ font-size:12.5px; font-weight:600; color:var(--cws-wd-ink-3); }
.cws-wd-step.is-active .lab, .cws-wd-step.is-done .lab{ color:var(--cws-wd-ink); }
.cws-wd-stepline{ flex:1; height:2px; background:var(--cws-wd-line-strong); border-radius:2px; }
.cws-wd-stepline.is-done{ background:var(--cws-wd-accent); }

.cws-wd-body{ padding:4px 24px 24px; overflow-y:auto; }
.cws-wd-foot{ padding:16px 24px 22px; border-top:1px solid var(--cws-wd-line); display:flex; gap:12px; flex:none; }
/* display:flex above overrides the UA [hidden]{display:none}; restore it so the
   footer (with the submit button) actually hides on step 1 and the success step. */
.cws-wd-foot[hidden]{ display:none; }

.cws-wd-panel-step{ display:none; }
.cws-wd-panel-step.is-active{ display:block; }

/* Fields */
.cws-wd-field{ margin-bottom:16px; }
.cws-wd-field > label, .cws-wd-glabel{
  display:block; font-size:12.5px; font-weight:600; color:var(--cws-wd-ink-2); margin-bottom:7px;
}
.cws-wd-input{
  width:100%; font:inherit; font-family:var(--cws-wd-font-ui); font-size:14.5px; color:var(--cws-wd-ink);
  padding:11px 13px; border:1px solid var(--cws-wd-line-strong); border-radius:8px;
  background:var(--cws-wd-panel); outline:none;
}
.cws-wd-input:focus{ border-color:var(--cws-wd-accent); box-shadow:0 0 0 3px var(--cws-wd-accent-soft); }
.cws-wd-input[readonly]{ background:var(--cws-wd-panel-2); color:var(--cws-wd-ink-2); }
.cws-wd-input:disabled{ background:var(--cws-wd-panel-2); color:var(--cws-wd-ink-3); }
textarea.cws-wd-input{ resize:vertical; min-height:72px; }
.cws-wd-helper{ font-size:12px; color:var(--cws-wd-ink-3); margin-top:6px; display:flex; align-items:center; gap:6px; }
.cws-wd-helper svg{ width:13px; height:13px; flex:none; }
.cws-wd-field.is-invalid .cws-wd-input{ border-color:var(--cws-wd-danger); background:var(--cws-wd-danger-soft); }
.cws-wd-field-err{ font-size:12px; color:var(--cws-wd-danger); margin-top:6px; font-weight:500; }

/* Items */
.cws-wd-fgroup{ margin-bottom:20px; }
.cws-wd-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border:1px solid var(--cws-wd-line); border-radius:9px; margin-bottom:8px;
  background:var(--cws-wd-panel-3); cursor:pointer;
}
.cws-wd-item input[type=checkbox]{ width:18px; height:18px; accent-color:var(--cws-wd-accent); flex:none; }
.cws-wd-item .nm{ font-size:13.5px; flex:1; color:var(--cws-wd-ink); }
.cws-wd-item .qty{ font-size:12.5px; color:var(--cws-wd-ink-3); font-family:var(--cws-wd-font-mono); }

/* Request type segmented */
.cws-wd-typeseg{ display:flex; gap:8px; flex-wrap:wrap; }
.cws-wd-typeopt{ flex:1; min-width:120px; position:relative; margin:0; }
.cws-wd-typeopt input{ position:absolute; opacity:0; pointer-events:none; }
.cws-wd-typeopt span{
  display:block; text-align:center; font-size:13px; font-weight:500; padding:10px 8px;
  border:1px solid var(--cws-wd-line-strong); border-radius:8px; cursor:pointer; color:var(--cws-wd-ink-2);
}
.cws-wd-typeopt input:checked + span{ border-color:var(--cws-wd-accent); background:var(--cws-wd-accent-soft); color:var(--cws-wd-accent-ink); font-weight:600; }
.cws-wd-typeopt input:focus-visible + span{ box-shadow:0 0 0 3px var(--cws-wd-accent-soft); }

/* Consent */
.cws-wd-consent{
  display:flex; gap:11px; align-items:flex-start; padding:13px; border-radius:9px;
  background:var(--cws-wd-panel-3); border:1px solid var(--cws-wd-line); cursor:pointer; margin:0;
}
.cws-wd-consent input{ width:18px; height:18px; accent-color:var(--cws-wd-accent); margin-top:1px; flex:none; }
.cws-wd-consent p{ margin:0; font-size:13px; line-height:1.55; color:var(--cws-wd-ink-2); }
.cws-wd-consent a{ color:var(--cws-wd-accent-ink); font-weight:500; }
.cws-wd-consent.is-invalid{ border-color:var(--cws-wd-danger-line); background:var(--cws-wd-danger-soft); }

/* Alerts */
.cws-wd-alert{ display:flex; gap:10px; padding:12px 14px; border-radius:9px; font-size:13px; line-height:1.5; margin-bottom:18px; border:1px solid; }
.cws-wd-alert svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.cws-wd-alert.is-error{ background:var(--cws-wd-danger-soft); border-color:var(--cws-wd-danger-line); color:var(--cws-wd-danger); }
.cws-wd-alert.is-warn{ background:var(--cws-wd-warn-soft); border-color:var(--cws-wd-warn-line); color:var(--cws-wd-warn-ink); }
.cws-wd-alert[hidden]{ display:none; }

/* Buttons (modal) */
.cws-wd-cta{
  flex:1; font:inherit; font-family:var(--cws-wd-font-ui); font-weight:600; font-size:15px;
  padding:13px 20px; border-radius:var(--cws-wd-btn-radius); border:none;
  background:var(--cws-wd-accent); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.cws-wd-cta:hover{ background:var(--cws-wd-accent-hover); }
.cws-wd-cta:disabled{ background:var(--cws-wd-line-strong); color:var(--cws-wd-ink-3); cursor:not-allowed; }
.cws-wd-cta.is-block{ width:100%; flex:none; }
.cws-wd-secondary{
  flex:none; font:inherit; font-family:var(--cws-wd-font-ui); font-weight:500; font-size:15px;
  padding:13px 20px; border-radius:var(--cws-wd-btn-radius); border:1px solid var(--cws-wd-line-strong);
  background:var(--cws-wd-panel); color:var(--cws-wd-ink-2); cursor:pointer;
}
.cws-wd-secondary:hover{ background:var(--cws-wd-panel-2); }
.cws-wd-secondary:disabled{ opacity:.6; cursor:not-allowed; }

.cws-wd-spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:cws-wd-spin .7s linear infinite; flex:none; display:none; }
.cws-wd-cta.is-busy .cws-wd-spin, .cws-wd-trigger.is-busy .cws-wd-spin{ display:inline-block; }
.cws-wd-cta:disabled .cws-wd-spin{ border-color:rgba(86,95,106,.35); border-top-color:var(--cws-wd-ink-3); }
@keyframes cws-wd-spin{ to{ transform:rotate(360deg); } }

/* Honeypot */
.cws-wd-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Success */
.cws-wd-success{ padding:8px 28px 28px; text-align:center; }
.cws-wd-success-ic{
  width:56px; height:56px; border-radius:50%;
  background:var(--cws-wd-success-soft); border:1px solid var(--cws-wd-success-line); color:var(--cws-wd-success);
  display:grid; place-items:center; margin:8px auto 18px;
}
.cws-wd-success-ic svg{ width:28px; height:28px; }
.cws-wd-success h4{ font-size:20px; margin:0 0 8px; letter-spacing:-0.01em; color:var(--cws-wd-ink); }
.cws-wd-success .sub{ font-size:13.5px; color:var(--cws-wd-ink-2); margin:0 0 22px; line-height:1.55; }
.cws-wd-head--success h3{ font-size:15px; font-weight:600; color:var(--cws-wd-ink-3); letter-spacing:.01em; }

.cws-wd-receipt{ background:var(--cws-wd-panel-3); border:1.5px dashed var(--cws-wd-line-strong); border-radius:12px; padding:20px; text-align:left; margin-bottom:18px; }
.cws-wd-receipt .rrow{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:9px 0; }
.cws-wd-receipt .rrow + .rrow{ border-top:1px solid var(--cws-wd-line); }
.cws-wd-receipt .rk{ font-size:12px; color:var(--cws-wd-ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.cws-wd-receipt .rv{ font-family:var(--cws-wd-font-mono); font-size:15px; font-weight:600; color:var(--cws-wd-ink); text-align:right; }
.cws-wd-receipt .rv.big{ font-size:17px; }
.cws-wd-copy{ display:inline-flex; align-items:center; gap:5px; border:none; background:transparent; color:var(--cws-wd-accent-ink); font:inherit; font-family:var(--cws-wd-font-ui); font-size:12px; font-weight:600; cursor:pointer; padding:2px; margin-top:2px; }
.cws-wd-copy svg{ width:13px; height:13px; }
.cws-wd-copy.is-copied{ color:var(--cws-wd-success); }

.cws-wd-emailnote{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--cws-wd-ink-2); text-align:left; background:var(--cws-wd-accent-soft); border:1px solid oklch(0.88 0.04 256); border-radius:9px; padding:11px 13px; margin-bottom:22px; line-height:1.5; }
.cws-wd-emailnote svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--cws-wd-accent-ink); }
.cws-wd-emailnote b{ color:var(--cws-wd-ink); }

/* Mobile — bottom sheet */
@media (max-width:600px){
  .cws-wd-modal{ padding:0; align-items:flex-end; }
  .cws-wd-card{ width:100%; max-height:92vh; border-radius:20px 20px 0 0; }
}

/* ============================================================
 * Specificity armour — Elementor kit button and link styling
 * ============================================================
 *
 * The kit's global rules — `.elementor-kit-N button { background-color: …;
 * color: … }` and `.elementor-kit-N a { color: … }` — are one class plus one
 * element, specificity (0,1,1), and beat every single-class rule above (0,1,0).
 * Everything inside the modal is a real <button>: Next, Submit, Close, the
 * secondary action and the copy control.
 *
 * The TRIGGER is deliberately absent from this block. `.cws-wd-trigger:not(.is-inherit)`
 * is already (0,2,0) — the `:not()` argument counts — and the `.is-inherit`
 * mode exists precisely so the trigger CAN take the kit's button styling when
 * the user asks for it. Do not "fix" the trigger here; you would break that
 * opt-in.
 *
 * The fix is specificity, not `!important`: re-asserting under the
 * `.cws-wd-root` root gives (0,2,0), which wins cleanly and leaves the widget's
 * own Elementor controls free to override at (0,3,0). Values come from the same
 * custom properties the rules above use.
 */

.cws-wd-root .cws-wd-cta {
    background: var(--cws-wd-accent);
    color: #fff;
}

.cws-wd-root .cws-wd-cta:hover {
    background: var(--cws-wd-accent-hover);
}

.cws-wd-root .cws-wd-cta:disabled {
    background: var(--cws-wd-line-strong);
    color: var(--cws-wd-ink-3);
}

.cws-wd-root .cws-wd-secondary {
    background: var(--cws-wd-panel);
    color: var(--cws-wd-ink-2);
}

.cws-wd-root .cws-wd-secondary:hover {
    background: var(--cws-wd-panel-2);
}

.cws-wd-root .cws-wd-close {
    background: var(--cws-wd-panel-2);
    color: var(--cws-wd-ink-2);
}

.cws-wd-root .cws-wd-close:hover {
    background: var(--cws-wd-line);
    color: var(--cws-wd-ink);
}

.cws-wd-root .cws-wd-copy {
    background: transparent;
    color: var(--cws-wd-accent-ink);
}

.cws-wd-root .cws-wd-copy.is-copied {
    color: var(--cws-wd-success);
}

/* The consent paragraph's link — the kit's <a> rule, same (0,1,1) trap. */
.cws-wd-root .cws-wd-consent a {
    color: var(--cws-wd-accent-ink);
}

/* ============================================================
 * Specificity armour — the theme's bare-element button reset
 * ============================================================
 *
 * A second, independent adversary. Themes commonly ship a reset that restyles
 * every button on the site:
 *
 *     [type=button], [type=submit], button {
 *         background-color:transparent; border:1px solid #c36; border-radius:3px;
 *         color:#c36; display:inline-block; font-size:1rem; font-weight:400;
 *         padding:.5rem 1rem; text-align:center; white-space:nowrap; …
 *     }
 *
 * `button` alone is only (0,0,1), but `[type=button]` / `[type=submit]` are
 * (0,1,0) — and every button in this widget carries one of those two types.
 * That is an exact TIE with the single-class rules above (.cws-wd-cta,
 * .cws-wd-close, .cws-wd-secondary, .cws-wd-copy), so the winner is decided by
 * stylesheet order — which nothing here controls.
 *
 * `.cws-wd-close` loses outright rather than tying: it never declares
 * `padding`, so the reset's .5rem/1rem applies unopposed. Inside a 32x32
 * border-box button that leaves zero content width and the X collapses. That
 * is the reported bug; the rest of this block closes the ties around it.
 *
 * Unlike the kit (which sets `background` and `color` only) this reset also
 * sets the box and typography properties, so those are what get re-asserted
 * here — at (0,2,0), same rule as the block above: specificity, not
 * `!important`, and the widget's Style controls stay one step higher.
 *
 * The trigger keeps only its `display` (shared layout for both variants). Its
 * padding/border/typography stay out on purpose: `.cws-wd-trigger:not(.is-inherit)`
 * is already (0,2,0) and beats the reset, and the `.is-inherit` variant is
 * meant to take the site's button look — this reset included.
 */

.cws-wd-root .cws-wd-trigger {
    display: inline-flex;
}

.cws-wd-root .cws-wd-cta {
    display: flex;
    padding: 13px 20px;
    border: none;
    border-radius: var(--cws-wd-btn-radius);
    font-size: 15px;
    font-weight: 600;
    white-space: normal;
}

.cws-wd-root .cws-wd-secondary {
    padding: 13px 20px;
    border: 1px solid var(--cws-wd-line-strong);
    border-radius: var(--cws-wd-btn-radius);
    font-size: 15px;
    font-weight: 500;
    white-space: normal;
}

.cws-wd-root .cws-wd-close {
    display: grid;
    padding: 0;
    border: none;
    border-radius: 8px;
}

.cws-wd-root .cws-wd-copy {
    display: inline-flex;
    padding: 2px;
    border: none;
    font-size: 12px;
    font-weight: 600;
}

/* Any author `display` beats the UA stylesheet's `[hidden]{display:none}`, and
   the headless trigger and the step-2 footer are hidden with the plain
   attribute. `.cws-wd-trigger[hidden]` and `.cws-wd-foot[hidden]` above handle
   that at (0,2,0) — but the armour's own `display` declarations are (0,2,0) too
   and sit later in the file, so they would win the tie and un-hide both. One
   blanket guard, last in the file, settles it for every `[hidden]` in the
   widget; keep it last if you add rules below. */
.cws-wd-root [hidden] {
    display: none;
}