/* ======================================================
   SVM Business and Club Registration - public form styling.
   Same token/derivation approach as SVM Registration System's own
   stylesheet: 6 master colors on .svmbcr-wrapper (overridden inline
   by svm_bcr_render_color_overrides() from Settings -> Barve), every
   other value on the page derived from them via color-mix() so any
   admin-chosen combination stays visually coherent automatically.
   ====================================================== */
.svmbcr-wrapper {
  /* ---- master colors (shipped defaults - Settings can override) ---- */
  --svmbcr-accent: #7c9a3c;
  --svmbcr-card-bg: #1c1e21;
  --svmbcr-card-text: #f3f4f5;
  --svmbcr-sidebar-bg: #f4f5f3;
  --svmbcr-sidebar-text: #15171a;
  --svmbcr-highlight: #e0785a;

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

  --svmbcr-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --svmbcr-radius-card: 18px;
  --svmbcr-radius-input: 11px;

  display: block;
  font-family: inherit;
}

/* ======================================================
   LANGUAGE SWITCHER
   (v1.3.0; Astra width fix in v1.3.1; SVG flags in v1.4.0)

   Two controls live in here and exactly one is visible at a time:
   a plain <select> (the no-JavaScript fallback, names only) and a
   custom button+listbox that carries the flags. JS unhides the
   custom one and hides the <select> on load - see
   svm_bcr_render_lang_switcher() in includes/frontend.php for why the
   flags cannot live inside a native <option>.

   On the <select>, width:auto is !important and paired with a bare
   "select" element selector (in addition to the class) so it beats a
   theme's own generic form-field styling - Astra and many others
   apply a fairly specific "make every select/input 100% wide" rule
   inside the content area, which is what stretched this dropdown to
   the full width of the page in v1.3.0. The same guard is applied to
   the custom button, which a theme's global button styling can
   stretch in exactly the same way.
   ====================================================== */
.svmbcr-lang-switcher {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

select.svmbcr-lang-select,
.svmbcr-lang-switcher select {
  display: inline-block !important;
  width: auto !important;
  max-width: 240px;
  background: var(--svmbcr-card-bg);
  color: var(--svmbcr-card-text);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
}
.svmbcr-lang-switcher select[hidden] { display: none !important; }

/* ---- flag artwork (shared by button and list) ----

   Real national flags do not share one aspect ratio: Slovenia,
   Croatia and Hungary are 2:1, the rest are 3:2. Forcing them all
   into one box would visibly squash three of the nine, so instead
   every flag is set to a common HEIGHT and allowed its natural
   width, and the whole thing sits in a fixed-width slot so the
   language names still line up in a neat column. */
.svmbcr-flag-slot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;   /* fits the widest (2:1) flag at 14px tall */
}
img.svmbcr-flag {
  display: block;
  height: 14px;
  width: auto;
  max-width: 28px;
  border-radius: 2px;
  /* A hairline ring so the white in a flag (Slovenia, Czechia,
     Hungary) still reads as a flag against a light background. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Same class of guard the <select> above needs: themes routinely set
   a blanket `img { width:100%; height:auto }` inside the content
   area, which at equal specificity would blow a 20px flag up to the
   full width of the dropdown. Astra does exactly this. */
.svmbcr-lang-switcher img.svmbcr-flag,
.svmbcr-lang-dd img.svmbcr-flag {
  height: 14px !important;
  width: auto !important;
  max-width: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: middle;
}

/* ---- custom dropdown ---- */
.svmbcr-lang-dd { position: relative; }
.svmbcr-lang-dd[hidden] { display: none !important; }

.svmbcr-lang-dd-btn,
.svmbcr-lang-switcher button.svmbcr-lang-dd-btn {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 8px;
  background: var(--svmbcr-card-bg);
  color: var(--svmbcr-card-text);
  border: 1px solid var(--svmbcr-input-border);
  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;
}
.svmbcr-lang-dd-btn:hover { border-color: var(--svmbcr-accent); }
.svmbcr-lang-dd-btn:focus-visible { outline: 2px solid var(--svmbcr-accent); outline-offset: 2px; }
.svmbcr-lang-dd-caret { flex: none; transition: transform .15s; }
.svmbcr-lang-dd.is-open .svmbcr-lang-dd-caret { transform: rotate(180deg); }

.svmbcr-lang-dd-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--svmbcr-card-bg);
  color: var(--svmbcr-card-text);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: 10px;
  box-shadow: var(--svmbcr-shadow);
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
}
.svmbcr-lang-dd-list[hidden] { display: none; }

.svmbcr-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;
}
.svmbcr-lang-dd-item:hover,
.svmbcr-lang-dd-item:focus {
  background: color-mix(in srgb, var(--svmbcr-card-text) 12%, var(--svmbcr-card-bg));
  outline: none;
}
.svmbcr-lang-dd-item.is-selected { font-weight: 700; }

.svmbcr-layout {
  display: flex;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* ---- sidebar (availability) ---- */
.svmbcr-sidebar {
  flex: 1 1 200px;
  min-width: 200px;
  background: var(--svmbcr-sidebar-bg);
  color: var(--svmbcr-sidebar-text);
  border-radius: var(--svmbcr-radius-card);
  padding: 22px;
  font-size: 13px;
  line-height: 1.6;
}
.svmbcr-sidebar h3 { color: var(--svmbcr-sidebar-text); margin: 0 0 10px; font-size: 14px; }
.svmbcr-avail {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  /* Derived from the sidebar's own two colors instead of a hardcoded
     #fff. With a dark sidebar background chosen in Settings -> Barve,
     a fixed white box left this panel a bright rectangle carrying
     text in --svmbcr-sidebar-muted, which is mixed from that DARK
     background - i.e. dark-on-white by accident, or near-invisible
     the other way round. Lifting the sidebar color slightly keeps the
     panel readable whichever direction the palette goes. */
  background: color-mix(in srgb, var(--svmbcr-sidebar-text) 6%, var(--svmbcr-sidebar-bg));
  border: 1px solid color-mix(in srgb, var(--svmbcr-sidebar-text) 12%, var(--svmbcr-sidebar-bg));
}
.svmbcr-avail .n {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--svmbcr-accent-dark);
}
.svmbcr-avail .lbl { font-size: 11.5px; color: var(--svmbcr-sidebar-muted); }
.svmbcr-table-size { margin: 10px 0 0; font-size: 12px; color: var(--svmbcr-sidebar-muted); }

/* ---- form card ---- */
.svmbcr-form-card {
  flex: 2 1 380px;
  min-width: 300px;
  background: var(--svmbcr-card-bg);
  color: var(--svmbcr-card-text);
  border-radius: var(--svmbcr-radius-card);
  box-shadow: var(--svmbcr-shadow);
  padding: 30px 28px;
}
.svmbcr-form-card h2 {
  /* Explicit color, not just inherited from .svmbcr-form-card: a
     directly-matching rule on the element itself always wins over an
     inherited value, and wp-admin's own base styles set a color
     directly on bare h1-h6 tags. Without this, the "Zivi predogled"
     preview in Settings -> Barve always shows this heading in
     wp-admin's near-black regardless of which card-text color is
     chosen - the public-facing page (no wp-admin CSS present) never
     had the problem, only this admin preview did. SVM Registration
     System avoids the same trap with its own .svm-form-heading class. */
  color: var(--svmbcr-card-text);
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 800;
}
.svmbcr-form-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 7px; color: var(--svmbcr-card-text); }
.svmbcr-form-card input[type="text"],
.svmbcr-form-card input[type="email"],
.svmbcr-form-card input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--svmbcr-input-bg);
  color: var(--svmbcr-card-text);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: var(--svmbcr-radius-input);
  padding: 11px 13px;
  font-size: 13.5px;
  font-family: inherit;
  margin-bottom: 4px;
}
.svmbcr-form-card input:focus { outline: none; border-color: var(--svmbcr-accent); }
.svmbcr-form-card ::placeholder { color: var(--svmbcr-text-muted); opacity: 1; }

.svmbcr-success-msg {
  background: var(--svmbcr-input-bg);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: var(--svmbcr-radius-input);
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- checkboxes ---- */
.svmbcr-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 13px;
  background: var(--svmbcr-input-bg);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: var(--svmbcr-radius-input);
}
.svmbcr-check-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--svmbcr-accent);
  cursor: pointer;
}
.svmbcr-check-row label { margin: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; flex: 1; }
.svmbcr-check-row-table { flex-direction: column; align-items: stretch; }
.svmbcr-check-row-top { display: flex; align-items: center; gap: 10px; }

.svmbcr-table-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--svmbcr-input-border);
}
.svmbcr-table-qty label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--svmbcr-text-muted); }
.svmbcr-table-qty input {
  width: 64px;
  background: var(--svmbcr-card-bg);
  color: var(--svmbcr-card-text);
  border: 1px solid var(--svmbcr-input-border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.svmbcr-table-qty input:focus { outline: none; border-color: var(--svmbcr-accent); }
.svmbcr-table-qty[hidden] { display: none; }

.svmbcr-note-inline {
  font-size: 12.5px;
  color: var(--svmbcr-text-muted);
  margin: 8px 0 0;
}

/* ---- live price line ---- */
.svmbcr-price-line {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--svmbcr-radius-input);
  background: color-mix(in srgb, var(--svmbcr-highlight) 14%, var(--svmbcr-card-bg));
  border: 1px solid color-mix(in srgb, var(--svmbcr-highlight) 30%, var(--svmbcr-card-bg));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.svmbcr-price-line[hidden] { display: none; }
.svmbcr-price-line .calc { font-size: 12.5px; color: var(--svmbcr-text-muted); font-variant-numeric: tabular-nums; }
.svmbcr-price-line .total { font-size: 19px; font-weight: 800; color: var(--svmbcr-highlight); font-variant-numeric: tabular-nums; }

/* ---- recaptcha + submit ---- */
.svmbcr-recaptcha-wrap { margin-top: 16px; }

.svmbcr-submit {
  margin-top: 20px;
  width: 100%;
  background: var(--svmbcr-accent);
  color: #fff;
  border: none;
  border-radius: var(--svmbcr-radius-input);
  padding: 13px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.svmbcr-submit:hover { background: var(--svmbcr-accent-dark); }
.svmbcr-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ---- submission preview panel ---- */
/* The panel is inserted after .svmbcr-layout (not after the form),
   so it is a plain block-level sibling of the layout rather than a
   flex item inside it. Inserted after the form it became a flex item
   of .svmbcr-layout and rendered squeezed in beside the sidebar, with
   its max-width and auto margins doing nothing useful. */
#svmbcr-preview-panel {
  display: none;
  max-width: 760px;
  margin: 0 auto;
  background: var(--svmbcr-card-bg, #1c1e21);
  color: var(--svmbcr-card-text, #f3f4f5);
  border-radius: var(--svmbcr-radius-card, 18px);
  padding: 30px 28px;
  box-shadow: var(--svmbcr-shadow, 0 8px 30px rgba(0, 0, 0, 0.35));
}
#svmbcr-preview-panel h3 { color: var(--svmbcr-card-text, #f3f4f5); margin: 0 0 16px; font-size: 19px; }
#svmbcr-preview-panel p { margin: 8px 0; font-size: 13.5px; line-height: 1.6; }
#svmbcr-preview-panel button {
  border: none;
  border-radius: var(--svmbcr-radius-input, 11px);
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
/* Both buttons follow Settings -> Barve like everything else on the
   form. The confirm button used to be hardcoded to #7c9a3c (the
   shipped default accent), so recoloring the form left the single
   most prominent button on the confirmation step stuck olive green;
   the back button's border was hardcoded to a white tint, which only
   worked on a dark card. */
#svmbcr-preview-panel #svmbcr-preview-back {
  background: transparent;
  color: inherit;
  border: 1px solid var(--svmbcr-input-border, rgba(255, 255, 255, .25));
}
#svmbcr-preview-panel #svmbcr-preview-confirm {
  background: var(--svmbcr-accent, #7c9a3c);
  color: #fff;
}
#svmbcr-preview-panel #svmbcr-preview-confirm:hover { background: var(--svmbcr-accent-dark, #637c30); }