/* KAF Profile 0.4 — front-end styles
 * Enqueue as a real stylesheet (replaces KAF_Profile_Forms::styles()).
 * Ships NO fonts: everything inherits Eduma / Thim Elementor Kit typography.
 * Colours used: #1C1B19 ink · #B38A4C bronze · #8A6A34 bronze-text
 *               #C62828 error · #2E7D32 success · #868686 border · #333333 text
 * Everything is scoped to .kaf-form so it cannot leak into the theme.
 */

.kaf-form {
  color: #333333;
  line-height: 1.55;
}
.kaf-form *,
.kaf-form *::before,
.kaf-form *::after { box-sizing: border-box; }

/* ---------- sections ---------- */

.kaf-form fieldset {
  border: 0;
  margin: 0 0 38px;
  padding: 0;
  min-width: 0;
}
.kaf-form > form > fieldset > legend,
.kaf-form legend.kaf-section-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 22px;
  border-bottom: 2px solid #1C1B19;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1C1B19;
}
.kaf-form .kaf-legend-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 10px;
}
.kaf-form .kaf-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 26px;
  height: 24px;
  background: #B38A4C;
  color: #1C1B19;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.kaf-form .kaf-flag {           /* "Obvezno" / "Neobvezno" badge */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #333333;
  background: #EFECE6;
  padding: 5px 9px;
  white-space: nowrap;
}

/* ---------- field grid ---------- */

.kaf-form .kaf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px 26px;
}
.kaf-form .kaf-field { margin: 0; min-width: 0; }
.kaf-form .kaf-field--wide { grid-column: 1 / -1; }

/* highlighted field (date of birth — the value the form reacts to) */
.kaf-form .kaf-field--pivot {
  grid-column: 1 / -1;
  border-left: 5px solid #B38A4C;
  background: #FAF8F4;
  padding: 16px 18px;
}

/* ---------- label, help, error ---------- */

.kaf-form label {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #333333;
}
.kaf-form .kaf-required { color: #C62828; }
.kaf-form .kaf-help {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #333333;
  opacity: .72;
}
.kaf-form .kaf-field--pivot .kaf-help { opacity: .85; max-width: 64ch; }
.kaf-form .kaf-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: #C62828;
}
.kaf-form .kaf-error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  background: #C62828;
}

/* ---------- controls ---------- */

.kaf-form input[type="text"],
.kaf-form input[type="email"],
.kaf-form input[type="tel"],
.kaf-form input[type="password"],
.kaf-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #868686;
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: #333333;
  outline: none;
}
.kaf-form input:focus,
.kaf-form select:focus {
  border-color: #1C1B19;
  box-shadow: inset 0 -3px 0 #B38A4C;
}
.kaf-form select { max-width: 36em; }
.kaf-form input#kaf_date_of_birth {
  max-width: 220px;
  font-size: 16px;          /* stops iOS zoom-on-focus */
  letter-spacing: .06em;
}

/* invalid */
.kaf-form .kaf-field.is-error input,
.kaf-form .kaf-field.is-error select {
  border-color: #C62828;
  background: #FDF6F6;
}
.kaf-form .kaf-field.is-error input:focus {
  box-shadow: inset 0 -3px 0 #C62828;
}

/* read-only */
.kaf-form input[readonly] {
  border-color: #DCD8D1;
  background: #F4F2EE;
}

/* locked (federation-awarded belt) */
.kaf-form .kaf-locked {
  display: flex;
  align-items: center;
  border: 1px solid #B38A4C;
  background: #FAF8F4;
}
.kaf-form .kaf-locked input[readonly] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: #1C1B19;
}
.kaf-form .kaf-locked-tag {
  margin: 6px;
  padding: 6px 10px;
  background: #B38A4C;
  color: #1C1B19;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- checkbox groups ---------- */

.kaf-form .kaf-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}
.kaf-form .kaf-checklist--branch {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.kaf-form .kaf-checklist label {   /* tile */
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #DCD8D1;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #333333;
  cursor: pointer;
}
.kaf-form .kaf-checklist--branch label {
  padding: 12px 14px;
  border-color: #868686;
  font-size: 14.5px;
  gap: 11px;
}
.kaf-form .kaf-checklist label:hover { border-color: #1C1B19; }
.kaf-form .kaf-checklist label:has(input:checked) {
  border-color: #1C1B19;
  background: #FAF8F4;
  color: #1C1B19;
  font-weight: 600;
}
.kaf-form .kaf-checklist input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #B38A4C;
}
.kaf-form .kaf-checklist--branch input[type="checkbox"] { width: 17px; height: 17px; }
.kaf-form .kaf-checklist label > span { min-width: 0; }  /* required: lets wrapped labels grow the tile */

/* branch heading inside Vadbe (only rendered when 2+ branches are ticked) */
.kaf-form .kaf-group-block + .kaf-group-block { margin-top: 20px; }
.kaf-form .kaf-group-heading {
  margin: 0 0 11px;
  padding-top: 12px;
  border-top: 1px solid #DCD8D1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A6A34;
}
/* subcategory heading inside Vadbe (Otroci / Odrasli / Dodatne vadbe) —
   only rendered for branches with subcategory metadata (Novo mesto,
   Ljubljana, Koper); Litija/Radovljica render a flat .kaf-checklist with
   none of this. Smaller and lighter than .kaf-group-heading above so the
   two never read as the same level of heading. */
.kaf-form .kaf-checklist + .kaf-group-subheading { margin-top: 16px; }
.kaf-form .kaf-group-subheading {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #333333;
  opacity: .72;
}
/* per-checkbox descriptor text (age range, who it's for) */
.kaf-form .kaf-checklist label .kaf-group-descriptor {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #868686;
}
/* empty state: no branch ticked yet */
.kaf-form .kaf-empty {
  border: 1px dashed #B0AAA0;
  background: #FAF8F4;
  padding: 18px 20px;
  font-size: 14px;
  color: #333333;
}

/* consent */
.kaf-form .kaf-consent {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #868686;
  background: #FAF8F4;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: #333333;
  cursor: pointer;
}
.kaf-form .kaf-consent input[type="checkbox"] {
  flex: none;
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: #B38A4C;
}

/* ---------- messages ---------- */

.kaf-form .kaf-errors,
.kaf-form .kaf-notice-success,
.kaf-form .kaf-notice-info {
  padding: 16px 18px;
  margin: 0 0 30px;
  border: 1px solid;
  border-left-width: 5px;
}
.kaf-form .kaf-errors {
  border-color: #C62828;
  background: #FDF6F6;
}
.kaf-form .kaf-errors > p {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #C62828;
}
.kaf-form .kaf-errors ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #333333;
}
.kaf-form .kaf-errors ul:only-child {
  font-weight: 600;
  color: #C62828;
}
.kaf-form .kaf-notice-success {
  border-color: #2E7D32;
  background: #F5FAF5;
  font-size: 15px;
  font-weight: 600;
  color: #2E7D32;
}
.kaf-form .kaf-notice-info {   /* e.g. "email not confirmed yet" */
  border-color: #DCD8D1;
  border-left-color: #B38A4C;
  background: #FFFDF7;
  font-size: 15px;
  color: #333333;
}

/* ---------- submit row ---------- */

.kaf-form .kaf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  border-top: 2px solid #1C1B19;
  padding-top: 24px;
}
.kaf-form button[type="submit"] {
  background: #B38A4C;
  color: #1C1B19;
  border: 0;
  border-radius: 0;
  padding: 17px 46px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.kaf-form button[type="submit"]:hover,
.kaf-form button[type="submit"]:focus {
  background: #1C1B19;
  color: #FFFFFF;
}
.kaf-form .kaf-actions-note {
  font-size: 13px;
  line-height: 1.5;
  color: #333333;
  opacity: .75;
  max-width: 46ch;
}

/* ---------- logged-in / logged-out short blocks ---------- */

.kaf-form .kaf-state {
  border: 1px solid #DCD8D1;
  border-left: 5px solid #B38A4C;
  padding: 18px 20px;
  max-width: 460px;
}
.kaf-form .kaf-state p { margin: 0; font-size: 16px; font-weight: 600; color: #1C1B19; }
.kaf-form .kaf-state-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  font-size: 14px;
}

/* login block width */
.kaf-form--login > form,
.kaf-form--login .kaf-grid { max-width: 460px; }
.kaf-form--login .kaf-grid { grid-template-columns: 1fr; gap: 20px; }
.kaf-form .kaf-alt {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #DCD8D1;
  font-size: 14px;
  line-height: 1.7;
}

/* honeypot */
.kaf-form .kaf-hp { position: absolute; left: -9999px; }

/* phone: the auto-fit grid already collapses to one column;
   this only relaxes the tile minimum so long Slovenian labels fit. */
@media (max-width: 480px) {
  .kaf-form .kaf-checklist,
  .kaf-form .kaf-checklist--branch { grid-template-columns: 1fr; }
  .kaf-form button[type="submit"] { width: 100%; }
}

/* ================================================================
   Added during implementation — not part of the design handoff.
   ================================================================ */

/* Checkbox groups are <fieldset class="kaf-field"> with their own <legend>.
   The handoff styles `label` but never `legend` at field level, so without
   this the Podružnica / Vadbe headings render as unstyled browser default.
   Mirrors .kaf-form label exactly. */
.kaf-form .kaf-field > legend {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #333333;
}

/* Hidden branch blocks and the empty state are toggled with the `hidden`
   attribute. Some themes set display on divs strongly enough to beat it. */
.kaf-form [hidden] { display: none !important; }

/* Login-address radio switch (kaf_login_source, inside [kaf_email_manage]).
   Reuses .kaf-checklist's tile look (border, hover, checked highlight)
   rather than inventing a new one. Three things the existing checklist
   rules do not already cover, so added here rather than duplicated:
   1) a single-column layout — this list reads top-to-bottom, not as a
      multi-column tile grid; 2) sizing/colour for input[type="radio"],
      since the existing rule only targets input[type="checkbox"];
      3) a disabled-tile look, which no checkbox group in this plugin ever
      needed, plus a little breathing room above the inline note under a
      disabled option. */
.kaf-form .kaf-checklist--radio { grid-template-columns: 1fr; gap: 10px; }
.kaf-form .kaf-checklist--radio input[type="radio"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #B38A4C;
}
.kaf-form .kaf-checklist--radio label:has(input:disabled) {
  cursor: not-allowed;
  color: #868686;
  background: #F4F2EE;
}
.kaf-form .kaf-radio-item .kaf-help { margin-top: 6px; padding-left: 2px; }

/* Tab strip ([kaf_profile]'s Moja vpisnica / Osnovni podatki / Kontakt in
   prijava / Članstvo). Real <a href="#id"> links to each
   <div class="kaf-tab-panel"> — a plain jump-link strip with JS off. With
   JS, initProfileTabs() adds .is-active to the current link; panel
   show/hide already runs through the `hidden` attribute and the [hidden]
   rule above, nothing new needed there.
   Odjava (.kaf-tab-link--logout) shares this exact look — same base rule,
   no colour of its own — but is an action, not a panel link: it carries no
   data-tab, is never given .is-active, and its own click handling
   (initLogoutConfirm() in kaf-profile-forms.js) opens a confirmation
   dialog instead of switching panels. See tabs_nav() in
   class-kaf-profile-editor.php. */
.kaf-form .kaf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 34px;
  border-bottom: 2px solid #1C1B19;
}
.kaf-form .kaf-tab-link {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid #868686;
  border-bottom: 0;
  background: #F4F2EE;
  color: #333333;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.kaf-form .kaf-tab-link:hover { color: #1C1B19; border-color: #1C1B19; }
.kaf-form .kaf-tab-link.is-active {
  background: #1C1B19;
  border-color: #1C1B19;
  color: #FFFFFF;
}
@media (max-width: 480px) {
  .kaf-form .kaf-tab-link { flex: 1 1 auto; text-align: center; padding: 13px 10px; }
}

/* Kontakt in prijava's mini-form stack. A handful of cells in this one
   tab hold more than one self-contained <form> back to back —
   render_target_block()'s optional "Pošlji potrditev" form followed by
   its "Spremeni naslov" form, and render_pending_block()'s notice
   followed by its resend and cancel forms. Each already drops the heavy
   page-footer rule via .kaf-actions--inline below, but that alone still
   leaves one form's button sitting right against the next form's label —
   this is the actual breathing room. Scoped to #kaf-tab-contact: the
   shared Osnovni podatki / Članstvo form and the login/registration forms
   never stack multiple <form>s inside one field cell and must not pick
   this up by accident. */
#kaf-tab-contact .kaf-field--wide > * + form {
  margin-top: 26px;
}

/* The parent-email and member-email blocks are two separate
   .kaf-field--wide cells in the same .kaf-grid ("Email naslovi"). The
   grid's own row gap (22px, set above under "field grid") is sized for a
   page of single-control fields, not for two of these multi-form stacks
   sitting back to back — without extra room the first block's last
   button sits almost on top of the second block's label. Adds to the
   grid gap rather than replacing it. */
#kaf-tab-contact .kaf-grid > .kaf-field--wide + .kaf-field--wide {
  margin-top: 20px;
}

/* The inline actions row: same markup as .kaf-actions, but for the small
   single-purpose mini-forms this tab stacks repeatedly (see
   KAF_Profile_Forms::actions()'s $variant docblock) rather than the one
   big page-footer Shrani button. No heavy top rule, far less top
   padding — the stack spacing above already does the work of separating
   blocks, this only has to stop the button crowding its own form. */
.kaf-form .kaf-actions--inline {
  border-top: 0;
  padding-top: 10px;
  gap: 12px 20px;
}
.kaf-form .kaf-actions--inline button[type="submit"] {
  padding: 11px 22px;
  font-size: 12px;
}

/* ================================================================
   Moja vpisnica — printable enrolment form. Pre-filled, read-only, one
   A4 page. Screen sizing here is generous (this tab is also just read on
   a phone/laptop); the @media print block below shrinks everything down
   to fit one sheet — see that block's own comment for the actual numbers.
   ================================================================ */

.kaf-form .kaf-vpisnica {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #DCD8D1;
  padding: 32px 36px 28px;
}

.kaf-vpisnica-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  max-width: 460px;
  transform: translate(-50%, -50%);
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}

.kaf-vpisnica-inner {
  position: relative;
  z-index: 1;
}

/* Print-only "NEVELJAVNA VPISNICA" stamp (2026-08 addition) — rendered by
   render_vpisnica_tab() only when KAF_Profile_Editor::vpisnica_missing_fields()
   found something still missing. A DIFFERENT class from
   .kaf-vpisnica-watermark above on purpose (that one is the panther image,
   always present, z-index 0, sits BEHIND .kaf-vpisnica-inner) — this one
   only exists on paper, sits ABOVE it (z-index 2 vs. .kaf-vpisnica-inner's
   1), and must never be confused with or fight it for stacking. Hidden on
   screen entirely; the @media print block below is the only place it is
   ever shown. */
.kaf-vpisnica-invalid-stamp { display: none; }

.kaf-vpisnica-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid #1C1B19;
}
.kaf-vpisnica-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1C1B19;
}

/* Each "Label: value" line lays its label and value out side by side
   across the FULL available width (flex), rather than the label sitting
   on its own line above a narrow value — the point of dropping the old
   two-column layout was to actually use the horizontal space the page
   has, not just to stack two narrow columns into one narrower one. */
.kaf-vpisnica-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
  row-gap: 2px;
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.6;
}
.kaf-vpisnica-row:last-child { margin-bottom: 0; }
.kaf-vpisnica-label {
  flex: 0 0 230px;
  font-weight: 700;
  color: #1C1B19;
}
.kaf-vpisnica-value { flex: 1 1 260px; min-width: 0; color: #333333; }
/* Was "spans both columns" under the old grid; now every row already runs
   full width, so --wide only has to add the extra breathing room this one
   row (Majica) needs above the Splošni pogoji block below it. */
.kaf-vpisnica-row--wide { margin: 4px 0 20px; }

@media (max-width: 480px) {
  /* Narrow screens: label above value reads better than a cramped
     two-thirds/one-third split. */
  .kaf-vpisnica-row { flex-direction: column; row-gap: 2px; }
  .kaf-vpisnica-label { flex-basis: auto; }
}

/* One full-width block — "OSNOVNI PODATKI ČLANA", then "OSNOVNI PODATKI
   STARŠA/SKRBNIKA" directly underneath (stacked, not side by side; see
   render_vpisnica_tab()'s docblock for why the owner changed this). */
.kaf-vpisnica-section { margin: 0 0 26px; }
.kaf-vpisnica-section:last-of-type { margin-bottom: 0; }

.kaf-vpisnica-col-heading {
  margin: 0 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid #DCD8D1;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A6A34;
}

.kaf-vpisnica-terms {
  margin: 22px 0 28px;
  padding-top: 16px;
  border-top: 1px solid #DCD8D1;
}
.kaf-vpisnica-terms p {
  margin: 0 0 9px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #333333;
  text-align: justify;
}
.kaf-vpisnica-terms p:last-child { margin-bottom: 0; }

.kaf-vpisnica-signatures {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
}
.kaf-vpisnica-sig { flex: 1 1 200px; text-align: center; }
/* margin-top is the actual blank space a person signs in — the rule is
   the FIRST thing in .kaf-vpisnica-sig, so without it there is nothing
   above the line to write on at all. See the @media print override
   below for why the print value (in mm-equivalent px) matters far more
   than this screen one. */
.kaf-vpisnica-sig-line {
  display: block;
  height: 0;
  margin: 40px 0 8px;
  border-top: 1px solid #1C1B19;
}
.kaf-vpisnica-sig-caption {
  display: block;
  font-size: 12px;
  color: #333333;
}
.kaf-vpisnica-sig-sub {
  font-size: 10.5px;
  font-style: italic;
  color: #333333;
  opacity: .75;
}

.kaf-vpisnica-print-btn {
  position: relative;
  z-index: 1;
  margin-bottom: 28px;
  text-align: right;
}
/* The button moved into its own small <form> (2026-08, see
   render_vpisnica_tab() in class-kaf-profile-editor.php) so the click can
   POST to the server instead of only calling window.print() directly. A
   <form> is block-level by default and would otherwise ignore
   .kaf-vpisnica-print-btn's text-align: right above; inline-block keeps the
   button positioned exactly as it was when it sat there with no wrapper. */
.kaf-vpisnica-print-form {
  display: inline-block;
  margin: 0;
}
.kaf-vpisnica-print {
  background: #B38A4C;
  color: #1C1B19;
  border: 0;
  border-radius: 0;
  padding: 13px 30px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.kaf-vpisnica-print:hover,
.kaf-vpisnica-print:focus {
  background: #1C1B19;
  color: #fff;
}

/* ----------------------------------------------------------------------
   "Vpisnica ni popolna" modal (2026-08 addition) — blocks the
   "Natisni vpisnico" button (initPrintButton(), kaf-profile-forms.js
   section 8) when KAF_Profile_Editor::vpisnica_missing_fields() found
   something still missing. Rendered server-side only when incomplete,
   hidden by default via the plain `hidden` attribute — the [hidden] rule
   further up ("Hidden branch blocks and the empty state…") already turns
   that into display:none!important, so everything below only styles what
   it looks like once JavaScript removes that attribute. No new colours:
   the backdrop is #1C1B19 (ink) at reduced alpha, the accent border reuses
   #C62828 (error) exactly as the styling table defines it — this modal IS
   reporting a validation-style problem — and everything else reuses
   tokens already active elsewhere in this file (#fff, #868686, #333333,
   #B38A4C).

   The Odjava confirmation dialog (.kaf-logout-modal*, 2026-08 addition)
   shares this exact shell — backdrop, inner box, close button, heading and
   paragraph rules — via the combined selectors below, rather than a second
   copy of the same declarations. It is NOT reporting a problem, so it
   deliberately does not inherit the red border-left or the bronze
   .kaf-vpisnica-modal-fix button below: those two stay their own,
   separate rules (further down) using only #1C1B19/#333333/#868686/
   #F4F2EE/#FFFFFF — the same tab-strip/modal tokens, none of them a
   "danger" colour.
   ---------------------------------------------------------------------- */
.kaf-form .kaf-vpisnica-modal,
.kaf-form .kaf-logout-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 27, 25, .6);
}
.kaf-form .kaf-vpisnica-modal-inner,
.kaf-form .kaf-logout-modal-inner {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #868686;
  padding: 30px 32px 26px;
}
/* Accent border kept OUTSIDE the shared rule above on purpose: the
   vpisnica modal's red border is reporting a validation-style problem
   (see the block comment above); the logout dialog isn't, so it gets the
   plain ink accent instead — same shape, no colour implying danger. */
.kaf-form .kaf-vpisnica-modal-inner { border-left: 5px solid #C62828; }
.kaf-form .kaf-logout-modal-inner { border-left: 5px solid #1C1B19; }
.kaf-form .kaf-vpisnica-modal-inner h3,
.kaf-form .kaf-logout-modal-inner h3 {
  margin: 0 0 12px;
  padding-right: 28px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #1C1B19;
}
.kaf-form .kaf-vpisnica-modal-inner p,
.kaf-form .kaf-logout-modal-inner p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #333333;
}
.kaf-form .kaf-vpisnica-modal-inner p:last-child,
.kaf-form .kaf-logout-modal-inner p:last-child { margin-bottom: 0; }
.kaf-form .kaf-vpisnica-modal-inner ul {
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #333333;
}
.kaf-form .kaf-vpisnica-modal-close,
.kaf-form .kaf-logout-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: #333333;
  cursor: pointer;
}
.kaf-form .kaf-vpisnica-modal-close:hover,
.kaf-form .kaf-vpisnica-modal-close:focus,
.kaf-form .kaf-logout-modal-close:hover,
.kaf-form .kaf-logout-modal-close:focus {
  color: #1C1B19;
}
.kaf-form .kaf-vpisnica-modal-fix {
  display: inline-block;
  background: #B38A4C;
  color: #1C1B19;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.kaf-form .kaf-vpisnica-modal-fix:hover,
.kaf-form .kaf-vpisnica-modal-fix:focus {
  background: #1C1B19;
  color: #fff;
}

/* Odjava dialog's own two-button row (.kaf-logout-modal-actions) — the
   vpisnica modal above has only one CTA (the bronze .kaf-vpisnica-modal-fix
   link), never two side by side, so there is no existing rule to extend
   here. "Da" (.kaf-logout-modal-confirm) reuses the ink/white pairing
   already used elsewhere in this file for an active/hovered state (e.g.
   .kaf-tab-link.is-active, button[type="submit"]:hover); "Ostani
   prijavljen" (.kaf-logout-modal-cancel) reuses the plain neutral
   tab-strip look (#F4F2EE/#868686/#333333). Neither is styled as a
   "danger" action — see this section's own top-of-block comment. */
.kaf-form .kaf-logout-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.kaf-form .kaf-logout-modal-confirm {
  display: inline-block;
  background: #1C1B19;
  color: #FFFFFF;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.kaf-form .kaf-logout-modal-confirm:hover,
.kaf-form .kaf-logout-modal-confirm:focus {
  background: #333333;
  color: #FFFFFF;
}
.kaf-form .kaf-logout-modal-cancel {
  display: inline-block;
  background: #F4F2EE;
  color: #333333;
  border: 1px solid #868686;
  padding: 12px 24px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.kaf-form .kaf-logout-modal-cancel:hover,
.kaf-form .kaf-logout-modal-cancel:focus {
  border-color: #1C1B19;
  color: #1C1B19;
}

/* A4, tight margins — the terms text is long, so print sizing is
   deliberately smaller than the on-screen sizing above. Tighter than the
   original 12mm: the owner explicitly wants more usable space. */
@page {
  size: A4;
  margin: 10mm;
}

/* ----------------------------------------------------------------------
   Print isolation — JS-driven, not the old `visibility: hidden` approach.
   ----------------------------------------------------------------------
   visibility:hidden hides an element but KEEPS its layout space. The
   panel renders inside a themed WordPress page (Eduma + Elementor), so
   with the old rule the site header, every Elementor section, the
   footer and the other three tab panels all still occupied their full
   height on the printed page — invisible but present — which produced a
   second, nearly blank page. display:none genuinely removes an element
   from flow, so kaf-profile-forms.js (markPrintIsolation(), bound to
   `beforeprint` — covers both the "Natisni vpisnico" button and a plain
   Ctrl+P) walks up from #kaf-tab-vpisnica to <body> and, at each level,
   marks every SIBLING of the node it came from with .kaf-print-hide and
   the node itself (an ancestor of the panel) with .kaf-print-ancestor.
   Depth-agnostic — it does not know or hardcode how many levels
   Elementor nests between <body> and the panel, so it survives a theme
   update that changes that nesting.

   Hiding siblings alone still leaves the form squeezed into a narrow
   strip: the surviving ancestors still carry the theme's max-width,
   centring margins, padding, floats and grid/flex sizing. So every
   .kaf-print-ancestor is also reset here to use the full page. This is
   the ONLY thing that makes the panel go full width in print — nothing
   about #kaf-tab-vpisnica's own size changes, its containers do.

   clearPrintIsolation() (bound to `afterprint`) removes both classes
   again so the on-screen page is byte-for-byte what it was before —
   afterprint fires whether the member printed or cancelled the dialog,
   but markPrintIsolation() also clears stale marks itself before
   re-marking, so a missed afterprint (or beforeprint firing twice) can
   never leave the page stuck half-hidden. */
@media print {
  .kaf-print-hide { display: none !important; }
  /* height/overflow added 2026-08-29 — members reported a blank printed
     page. Every property below fixed the ancestor's WIDTH; nothing reset
     its HEIGHT or OVERFLOW. Elementor sections routinely carry an
     explicit height (a "full height" section) or overflow: hidden (used
     constantly to clip shape dividers / parallax / hover effects) — the
     panel was already display:block and full width by this point, but a
     themed ancestor with either property still clipped it down to nothing
     visible, which reads as a blank page even though the content is
     genuinely there in the DOM and in the print flow. */
  .kaf-print-ancestor {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    float: none !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  /* #kaf-tab-vpisnica may still carry the `hidden` attribute if another
     tab was active when the member printed (button or Ctrl+P) — this
     must win regardless of which tab was open. .kaf-print-ancestor
     above already forces display:block on it once JS marks it, but the
     attribute selector is kept as a second, independent guarantee. */
  #kaf-tab-vpisnica[hidden] { display: block !important; }

  .kaf-form,
  .kaf-form .kaf-vpisnica {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* The panel's on-screen border/padding is dropped entirely in print —
     it only wastes width and adds nothing on paper. */
  .kaf-vpisnica { border: 0; padding: 0; overflow: visible; }

  /* Browsers drop opacity/backgrounds in print by default unless told
     otherwise — belt and braces alongside the plain <img> (which prints
     regardless, unlike a CSS background-image, but keep this too). */
  .kaf-vpisnica-watermark {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .kaf-vpisnica-print-btn { display: none !important; }

  /* Never printed — see vpisnica_notice()'s own docblock in
     class-kaf-profile-editor.php. This is a screen-only nudge ("go fill
     in …"), meaningless on paper. Deliberately a rule of its own rather
     than reusing the JS-driven .kaf-print-hide mechanism: that class gets
     stripped and reapplied by markPrintIsolation() / clearPrintIsolation()
     (kaf-profile-forms.js) and only ever marks SIBLINGS of the panel's
     ancestor chain — the notice lives INSIDE #kaf-tab-vpisnica, so it
     would never be (re)marked and would print after all. A plain,
     unconditional @media print rule has no such failure mode. */
  .kaf-vpisnica-notice { display: none !important; }

  /* The "vpisnica ni popolna" modal (2026-08 addition) — same reasoning
     as .kaf-vpisnica-notice immediately above: it lives INSIDE
     #kaf-tab-vpisnica, so the JS-driven isolation mechanism never touches
     it, and it must never appear on a printed sheet regardless. In
     practice initPrintButton() already refuses to call window.print() at
     all while this modal is the reason printing was blocked, so this rule
     is a belt-and-braces guarantee for the (should-be-unreachable) case
     where print is triggered by some other means while it happens to be
     open.

     The Odjava confirmation dialog (.kaf-logout-modal, 2026-08 addition)
     is added here too: it is NOT inside #kaf-tab-vpisnica — it sits near
     the TOP of .kaf-form, immediately after the tab strip and before any
     panel's markup begins, because it belongs to the nav rather than to
     any one panel (see KAF_Profile_Editor::shortcode(), which renders it
     right after tabs_nav()). The print-isolation walk
     (markPrintIsolation()) would therefore mark it as a sibling to hide on
     its own, so this rule is the same belt-and-braces guarantee as the
     vpisnica modal's: a dialog left visible on paper is a bug regardless
     of how printing was triggered. */
  .kaf-vpisnica-modal,
  .kaf-logout-modal { display: none !important; }

  /* THE actual guarantee an incomplete vpisnica cannot be printed as if
     valid: Ctrl+P and the browser's own print menu bypass the button (and
     therefore the modal above) entirely, so this print-only stamp is the
     one thing that still applies no matter how printing was triggered.
     Rendered by render_vpisnica_tab() only when
     KAF_Profile_Editor::vpisnica_missing_fields() found something still
     missing (class-kaf-profile-editor.php) — absent from the markup
     entirely otherwise, so a complete vpisnica prints with no stamp at
     all, not merely a hidden one.

     Positioned absolute within .kaf-vpisnica (which this same @media
     print block already forces to width:auto/max-width:none, i.e. the
     full page — see the ".kaf-form, .kaf-form .kaf-vpisnica" rule above),
     so this spans the full sheet width without reserving any box height
     of its own: it can never push the rest of the form down or force a
     second page, unlike a rule that inserted it into normal flow. color
     is rgba() of the EXACT error red (#C62828 = rgb(198, 40, 40)) at
     reduced alpha — legible over the printed text beneath it without
     fully obscuring it, and without shipping any colour beyond the one
     CLAUDE.md's styling table already allows for this purpose. z-index 2
     deliberately outranks .kaf-vpisnica-inner's 1, so it sits ABOVE the
     form content, not behind it. */
  .kaf-vpisnica-invalid-stamp {
    display: block;
    position: absolute;
    top: 38%;
    left: 0;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    transform: rotate(-8deg);
    font-size: 34pt;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(198, 40, 40, .55);
    pointer-events: none;
  }

  /* Sizes below are pt, not px — the one unit that maps to a real physical
     size on paper, so a number here means the same thing it means in Word
     or Excel. 2026-08 re-pass: the owner asked for body text at size 11,
     i.e. .kaf-vpisnica-row (the "Label: value" lines) at 11pt; everything
     else here is scaled off that so the heading/body/fine-print hierarchy
     still reads (title ~15pt, the three .kaf-vpisnica-col-heading instances
     ~11pt — bold, uppercase and letter-spaced, so they still read as
     headings at body size). .kaf-vpisnica-label's own flex-basis is no
     longer overridden here: 11pt (~14.7px) is close enough to the 14px the
     base .kaf-vpisnica-label rule (outside this block) already sizes for
     that the same 230px basis fits every label text on one line, so the
     narrower print-only value from the old 9px pass is simply dropped
     rather than recalculated.

     One deliberate exception: .kaf-vpisnica-terms p (the Splošni pogoji
     body) keeps its EXISTING physical size — explicitly requested, since
     that text can run long and isn't meant to grow with the rest. Old size
     was 7.5px; converted (not enlarged) that is 5.6pt, with the same 1.25
     line-height and margin it already had.

     The previous pass (signing room, still true here) found no usable
     space to actually sign above the three lines at the bottom and fixed
     it with .kaf-vpisnica-sig-line's own margin-top below — about 17mm
     (64px) of genuine blank space directly above each line, left
     untouched by this pass. .kaf-vpisnica-signatures' own margin-top stays
     at 0 for the same reason as before (that space is spent inside each
     sig box instead of before the whole row, so it isn't paid for twice).

     Unlike the previous pass, this one does NOT need to trim vertical
     rhythm to make room — going from a 6.75pt/9px body to 11pt body text
     is the whole point, and the arithmetic (title + 2 header rows + 2
     section headings + 8 section rows + the Majica row + the terms
     heading/margins + the signature block, all at these sizes, against a
     277mm/785pt usable A4 height at 10mm page margins) comes out to a bit
     over half the page even before a single line of Splošni pogoji text —
     comfortable room to spare, not a tight fit bought back line by line.
     So line-height on the rows goes back to a comfortable 1.4 (was
     tightened to 1.25 in the old pass) and margins below are ordinary
     spacing choices, not trimmed-to-the-limit numbers. This is a
     calculation, not something rendered and measured — print a real
     vpisnica after any future edit to the Splošni pogoji text (its length
     is admin-editable and not fully predictable here) to confirm it still
     fits one page. */
  .kaf-vpisnica-title { font-size: 15pt; line-height: 1.2; margin: 0 0 4pt; }
  .kaf-vpisnica-header { margin-bottom: 8pt; padding-bottom: 6pt; }
  .kaf-vpisnica-section { margin: 0 0 10pt; }
  .kaf-vpisnica-col-heading { font-size: 11pt; line-height: 1.2; margin-bottom: 5pt; padding-bottom: 3pt; }
  .kaf-vpisnica-row {
    font-size: 11pt;
    line-height: 1.4;
    column-gap: 14px;
    row-gap: 0;
    margin: 0 0 3pt;
  }
  .kaf-vpisnica-row--wide { margin: 0 0 12pt; }
  .kaf-vpisnica-terms { margin: 8pt 0 14pt; padding-top: 6pt; }
  .kaf-vpisnica-terms p { font-size: 5.6pt; line-height: 1.25; margin-bottom: 2.25pt; }
  /* margin-top: 0 — the gap before the signature row now comes entirely
     from .kaf-vpisnica-terms's own margin-bottom above (they are
     adjacent siblings with nothing between them that stops margin
     collapsing, so this keeps the gap a single predictable number
     instead of two margins fighting/collapsing into one). */
  .kaf-vpisnica-signatures { margin-top: 0; gap: 14px; }
  /* THE fix: ~17mm of real writing height above each rule. flex items
     (.kaf-vpisnica-sig, the parent here) always start a new formatting
     context for their own content, so this margin-top can never collapse
     away into anything outside the sig box — unlike a plain block
     sibling's margin, it reliably reserves this exact space every time.
     Left in px/mm-equivalent, not pt: this is a fixed physical writing
     space, not type, and 64px already is the ~17mm the owner needs. */
  .kaf-vpisnica-sig-line { margin: 64px 0 4px; }
  .kaf-vpisnica-sig-caption { font-size: 10pt; }
  .kaf-vpisnica-sig-sub { font-size: 8.5pt; }

  /* ----------------------------------------------------------------------
     iOS/WebKit print fix (2026-08-31) — the printed vpisnica exploded
     across 6 pages on a real iPhone (Safari/Chrome, both WebKit): PDF-object
     forensics on the actual printout (broken-print-evidence-2026-08-31-
     iphone-safari.pdf) found every field label repeated 3-4 times
     ("Lokacija treninga: Lokacija treninga: Lokacija treninga:") and a
     single ~4043pt (~56 inch) rectangle sliced into six pieces across all 6
     pages at the page boundaries. That is the signature of a well-
     documented WebKit bug: display:flex does not fragment across a print
     page break correctly — when a flex container lands on a page boundary,
     WebKit can duplicate its content and miscalculate its height instead of
     continuing it cleanly onto the next page, the way a normal block
     element does. Chrome and Firefox both fragment flex correctly in
     print; only WebKit has this bug. So the fix below is scoped to print
     only: .kaf-vpisnica-row/-label/-value OUTSIDE this @media print block
     (screen, including the @media (max-width: 480px) mobile stack further
     up this file) are UNTOUCHED on purpose — this is a print-only bug, not
     a display-width bug.

     Fix: drop flex for print, lay the row out with the plain, universally-
     fragmentable block/inline-block model instead. The label becomes an
     inline-block at the same 230px the screen flex-basis already used, so
     label and value still sit side by side on paper exactly as they always
     have (the owner explicitly rejected stacking label above value here);
     the value becomes a plain inline span, which wraps and continues onto
     the next page like ordinary text instead of trying to fragment as a
     flex item. break-inside/page-break-inside (the older WebKit alias) are
     extra insurance on top of that: even a block-level row is stopped from
     straddling a page boundary at all. */
  .kaf-vpisnica-row {
    display: block;
    break-inside: avoid;
    page-break-inside: avoid; /* older WebKit */
  }
  .kaf-vpisnica-label {
    display: inline-block;
    width: 230px;
    vertical-align: top;
  }
  .kaf-vpisnica-value { display: inline; }

  /* Same insurance for the three-signature-line block — not a display
     change, it can stay flex: it is rarely near a page boundary and a
     multi-line signature block does not carry the row-duplication risk the
     label/value rows above did. Just stopped from splitting mid-container
     if it does land on one. */
  .kaf-vpisnica-signatures {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}