/* SVM Registration System - frontend layout + visual design.
   Extracted from what used to be an inline <style> block printed
   by the shortcode PHP on every page load - now loaded once as a
   proper enqueued stylesheet, only on pages using the shortcode.

   DESIGN NOTE (v2.13.0/v2.13.1 redesign): this is the plugin's own,
   self contained "olive-green" brand identity for the public
   registration form - deliberately kept separate from the admin
   area's blue/light design system (see svm_render_redesign_styles()
   in helpers.php).

   Colors below are taken directly from the approved
   frontend-form-mockup.html, specifically its [data-theme="dark"]
   preset (dark form card + preview panel, olive accent, coral
   countdown/warning highlight, LIGHT sidebar) - confirmed as the
   variant to ship. The mockup's card used a translucent background
   (rgba white + backdrop-filter) sitting on a dark demo page, since
   it was built to be previewed against a swappable page background.
   The real plugin has no way to detect the actual page background it
   will be placed on, so those translucent values are reproduced here
   as solid/opaque equivalents instead - same look, but robust
   regardless of what's behind it. The accent, coral, and sidebar
   colors are otherwise used verbatim. */

.svm-wrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.svm-form-container {
  flex: 2;
  min-width: 0;
}

@media (max-width: 768px) {
  .svm-wrapper {
    flex-direction: column;
  }
}

/* ======================================================
   BRAND TOKENS - taken from the mockup's :root and
   [data-theme="dark"] variable sets.

   The first 6 below are the "master" colors - admin-editable via
   Settings -> Barve obrazca (see svm_frontend_color_defaults() in
   includes/helpers.php; frontend.php prints an inline <style>
   override with the admin-chosen values, later in the document than
   this stylesheet, so it wins the cascade at equal specificity).

   Everything after them is DERIVED from those 6 via color-mix(), so
   any combination an admin picks stays visually coherent without
   needing its own picker for every individual token.
   ====================================================== */
.svm-wrapper {
  /* ---- master colors ---- */
  --svm-accent: #7c9a3c;
  --svm-card-bg: #1c1e21;
  --svm-text: #f3f4f5;
  --svm-sidebar-bg: #f4f5f3;
  --svm-sidebar-text: #15171a;
  --svm-coral: #e0785a;

  /* ---- derived tokens ---- */
  --svm-accent-dark: color-mix(in srgb, var(--svm-accent) 82%, black);
  --svm-card-border: color-mix(in srgb, var(--svm-text) 12%, var(--svm-card-bg));
  --svm-text-muted: color-mix(in srgb, var(--svm-text) 55%, var(--svm-card-bg));
  --svm-input-bg: color-mix(in srgb, var(--svm-text) 5%, var(--svm-card-bg));
  --svm-input-border: color-mix(in srgb, var(--svm-text) 15%, var(--svm-card-bg));
  --svm-sidebar-muted: color-mix(in srgb, var(--svm-sidebar-text) 55%, var(--svm-sidebar-bg));
  --svm-divider: color-mix(in srgb, var(--svm-sidebar-text) 8%, var(--svm-sidebar-bg));
  --svm-warning-bg: color-mix(in srgb, var(--svm-coral) 12%, var(--svm-sidebar-bg));

  --svm-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --svm-radius-card: 18px;
  --svm-radius-input: 11px;
  --svm-radius-btn: 12px;
}

/* ======================================================
   LANGUAGE SWITCHER
   ====================================================== */
.svm-lang-switcher {
  text-align: right;
  margin-bottom: 10px;
}

.svm-lang-select {
  background: var(--svm-card-bg);
  color: var(--svm-text);
  border: 1px solid var(--svm-card-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}
.svm-lang-switcher select[hidden],
.svm-categories-lang-switcher select[hidden] { display: none !important; }

/* ---- flag artwork (both switchers) ----

   National flags do not share one aspect ratio: Slovenia, Croatia
   and Hungary are 2:1, the United Kingdom is 5:3, the rest are 3:2.
   Forcing them into a single box would visibly squash four of the
   nine, so each keeps its own width at a common height and sits in a
   fixed-width slot, which keeps the language names in a tidy column. */
.svm-flag-slot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;   /* fits the widest (2:1) flag at 14px tall */
}
img.svm-flag {
  display: block;
  height: 14px;
  width: auto;
  max-width: 28px;
  border-radius: 2px;
  /* Hairline ring so the white in a flag (Slovenia, Czechia,
     Hungary) still reads as a flag on a light background. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Themes routinely set a blanket `img { width:100%; height:auto }`
   inside the content area - Astra does - which at equal specificity
   would blow a 20px flag up to the full width of the dropdown. */
.svm-lang-switcher img.svm-flag,
.svm-categories-lang-switcher img.svm-flag {
  height: 14px !important;
  width: auto !important;
  max-width: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: middle;
}

/* ---- custom flag dropdown (both switchers) ---- */
.svm-lang-dd { position: relative; display: inline-block; text-align: left; }
.svm-lang-dd[hidden] { display: none !important; }

.svm-lang-dd-btn {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.svm-lang-dd-caret { flex: none; transition: transform .15s; }
.svm-lang-dd.is-open .svm-lang-dd-caret { transform: rotate(180deg); }

.svm-lang-dd-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 10px;
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
  background: #fff;
  color: #15171a;
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.svm-lang-dd-list[hidden] { display: none; }

.svm-lang-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.svm-lang-dd-item:hover,
.svm-lang-dd-item:focus { background: rgba(0, 0, 0, .07); outline: none; }
.svm-lang-dd-item.is-selected { font-weight: 700; }

/* On the form, the switcher sits above the dark card and matches it,
   exactly as the plain .svm-lang-select above already does. The
   categories list deliberately keeps the light default so it reads as
   ordinary page content, like the rest of that page. */
.svm-lang-switcher .svm-lang-dd-btn {
  background: var(--svm-card-bg);
  color: var(--svm-text);
  border-color: var(--svm-card-border);
}
.svm-lang-switcher .svm-lang-dd-btn:hover { border-color: var(--svm-accent, currentColor); }
.svm-lang-switcher .svm-lang-dd-list {
  background: var(--svm-card-bg);
  color: var(--svm-text);
  border-color: var(--svm-card-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.svm-lang-switcher .svm-lang-dd-item:hover,
.svm-lang-switcher .svm-lang-dd-item:focus { background: rgba(255, 255, 255, .12); }

/* ======================================================
   STATUS CARD (registrations not yet open / closed)
   ====================================================== */
.svm-status-wrapper {
  width: 100%;
  justify-content: center;
}

.svm-status-card {
  background: var(--svm-card-bg, #1c1e21);
  border: 1px solid var(--svm-card-border, #2c2f33);
  border-radius: var(--svm-radius-card, 18px);
  box-shadow: var(--svm-shadow, 0 8px 30px rgba(0, 0, 0, 0.35));
  color: var(--svm-text, #f3f4f5);
  padding: 40px 30px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.svm-status-message {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
}

.svm-countdown-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--svm-coral, #e0785a);
  margin-bottom: 10px;
}

.svm-countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.svm-countdown .unit {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.svm-countdown .num,
.svm-countdown .suffix {
  font-size: 26px;
  font-weight: 800;
  color: var(--svm-coral, #e0785a);
  line-height: 1;
}

/* ======================================================
   FORM CARD - the <form> element itself IS the card, so that
   the preview panel JS inserts via insertAdjacentElement('afterend',
   ...) naturally lands as a sibling card right below it with no JS
   changes required.
   ====================================================== */
.svm-form-card,
#svm-preview-panel {
  display: block;
  background: var(--svm-card-bg);
  border: 1px solid var(--svm-card-border);
  border-radius: var(--svm-radius-card);
  box-shadow: var(--svm-shadow);
  color: var(--svm-text);
  padding: 28px 30px;
}

#svm-preview-panel {
  margin-top: 24px;
}

.svm-form-heading {
  color: var(--svm-text);
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 20px;
}

#svm-preview-panel h3 {
  color: var(--svm-text);
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 16px;
}

#svm-preview-panel p {
  color: var(--svm-text);
  font-size: 13.5px;
  margin: 0 0 8px;
}

#svm-preview-panel h4 {
  color: var(--svm-accent);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
}

.svm-form-card label {
  display: block;
  color: var(--svm-text);
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 7px;
}

.svm-form-card input[type="text"],
.svm-form-card input[type="email"],
.svm-form-card input[type="number"],
.svm-form-card select,
.svm-form-card textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--svm-input-bg);
  color: var(--svm-text);
  border: 1px solid var(--svm-input-border);
  border-radius: var(--svm-radius-input);
  padding: 11px 13px;
  font-size: 13.5px;
  font-family: inherit;
  margin-bottom: 12px;
}

.svm-form-card input:focus,
.svm-form-card select:focus,
.svm-form-card textarea:focus {
  outline: none;
  border-color: var(--svm-accent);
}

.svm-form-card textarea {
  min-height: 76px;
  resize: vertical;
}

.svm-form-card ::placeholder {
  color: var(--svm-text-muted);
  opacity: 1;
}

/* ======================================================
   TYPE-AHEAD COMBOBOX (country + manufacturer fields)
   Built by svmCreateCombobox() in svm-registration-frontend.js - a
   text input (already styled like every other input via the
   input[type="text"] rule above) plus a dropdown of filtered matches
   positioned under it. Only .svm-combobox and the dropdown itself
   need their own rules here.
   ====================================================== */
.svm-combobox {
  position: relative;
}

.svm-combobox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  background: var(--svm-input-bg);
  border: 1px solid var(--svm-input-border);
  border-radius: var(--svm-radius-input);
  margin-top: -8px;
  box-shadow: var(--svm-shadow);
}

.svm-combobox-option {
  padding: 9px 13px;
  font-size: 13.5px;
  color: var(--svm-text);
  cursor: pointer;
}

.svm-combobox-option:hover,
.svm-combobox-option.is-highlighted {
  background: var(--svm-accent);
  color: #fff;
}

/* Per-model blocks, built as bare <div>s by the JS (no wrapper
   class on them) - separated visually with a divider, and their
   "Model N" heading (JS output, translated fallback "Model")
   restyled as a small accent-colored section label, matching the
   mockup's .svm-section-label.spaced treatment for "Maketa 01". */
#models_container > div {
  border-top: 1px solid var(--svm-card-border);
  padding-top: 18px;
  margin-top: 18px;
}

#models_container > div:first-child {
  border-top: none;
  padding-top: 0;
}

#models_container h3 {
  color: var(--svm-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}

.svm-recaptcha-wrap {
  margin: 20px 0;
}

.svm-submit-btn {
  width: 100%;
  background: var(--svm-accent);
  color: #fff;
  border: none;
  border-radius: var(--svm-radius-btn);
  padding: 14px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s;
}

.svm-submit-btn:hover:not(:disabled) {
  background: var(--svm-accent-dark);
}

.svm-submit-btn:disabled {
  background: var(--svm-input-border);
  color: var(--svm-text-muted);
  cursor: not-allowed;
}

#svm-preview-panel button {
  border-radius: var(--svm-radius-btn);
  padding: 12px 20px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

#svm-preview-panel #svm-preview-back {
  background: transparent;
  color: var(--svm-text);
  border: 1px solid var(--svm-input-border);
}

#svm-preview-panel #svm-preview-confirm {
  background: var(--svm-accent);
  color: #fff;
  border: none;
}

#svm-preview-panel #svm-preview-confirm:hover {
  background: var(--svm-accent-dark);
}

/* ======================================================
   SUCCESS CARD
   ====================================================== */
.svm-success-card {
  background: var(--svm-card-bg);
  border: 1px solid var(--svm-card-border);
  border-radius: var(--svm-radius-card);
  box-shadow: var(--svm-shadow);
  padding: 60px 30px;
  text-align: center;
}

.svm-success-message {
  color: var(--svm-text);
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 700;
}

/* ======================================================
   SIDEBAR - deliberately the opposite tone from the form card
   (light bg / dark text), matching both the mockup's pairing and
   the sidebar's existing look on the live site today.
   ====================================================== */
.svm-sidebar {
  flex: 1;
  min-width: 0;
  background: var(--svm-sidebar-bg, #f4f5f3);
  color: var(--svm-sidebar-text, #15171a);
  border-radius: var(--svm-radius-card, 18px);
  box-shadow: var(--svm-shadow, 0 8px 30px rgba(0, 0, 0, 0.35));
  padding: 26px;
}

.svm-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.svm-sidebar-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--svm-accent, #7c9a3c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.svm-sidebar-icon svg {
  width: 16px;
  height: 16px;
}

.svm-sidebar-heading {
  color: var(--svm-sidebar-text, #15171a);
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.svm-sidebar-countdown {
  text-align: left;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--svm-divider, rgba(0, 0, 0, 0.08));
}

.svm-instructions-list {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--svm-sidebar-text, #15171a);
}

.svm-instructions-list li {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.svm-warning-note {
  background: var(--svm-warning-bg, rgba(224, 120, 90, 0.12));
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--svm-sidebar-text, #15171a);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

.svm-warning-note strong {
  color: var(--svm-coral, #e0785a);
}

/* [svm_categories_list] - plain grouped list of categories/tags.
   Deliberately minimal (no colors/dark theme like the form above)
   so it reads as regular page content and inherits the site's own
   theme typography/colors. */

.svm-categories-lang-switcher {
  text-align: right;
  margin-bottom: 14px;
}

.svm-categories-lang-switcher select {
  font: inherit;
  padding: 6px 10px;
}

.svm-categories-list {
  margin: 20px 0;
}

.svm-categories-level-age {
  font-weight: normal;
  opacity: 0.7;
}

.svm-categories-level {
  margin-bottom: 28px;
}

.svm-categories-level h3 {
  margin: 0 0 12px;
}

.svm-categories-level > ul {
  margin: 0;
  padding-left: 20px;
}

.svm-categories-tag-group {
  margin: 0 0 16px 0;
  padding-left: 12px;
  border-left: 3px solid currentColor;
  opacity: 0.95;
}

.svm-categories-tag-group h4 {
  margin: 0 0 8px;
}

.svm-categories-tag-group ul {
  margin: 0;
  padding-left: 20px;
}

.svm-categories-list li {
  margin-bottom: 4px;
}

/* Shown inline under a model's category picker when a Senior
   registrant tries to advance to the preview step without having
   picked a tag first (see setupPreview() in the JS) - deliberately a
   plain, unambiguous red rather than a themed color, since it must
   stay legible regardless of whatever "Barve obrazca" palette is
   active. */
.svm-tag-required-error {
  color: #c0392b;
  font-size: 13px;
  font-weight: 600;
  margin: -6px 0 10px;
}