/* === Tokens === */
:root{
  --pc-blue:   #07198C; /* brand primary */
  --pc-orange: #FF9F0D; /* brand accent (required-marker, active dot) */
  --pc-ink:    #000000; /* text / labels */
  --pc-body:   #707070; /* inactive toggle text */
  --pc-field:  #F5F5F5; /* input + pill track background */
  --pc-border: #E5E5E5; /* borders / dividers */
  --pc-muted:  #AAAAAA; /* placeholders, subtitles, inactive dot */
  --pc-white:  #fff;
  --pc-radius: 24px;    /* card radius */
  --pc-radius-pill: 999px;
}

/* === Cart (checkout) === */
.woocommerce-checkout .cart-subtotal { display: none; }

/* ============ Podcestami checkout — concept 1:1 ============ */
.pc-checkout #customer_details { max-width: 820px; }

/* === Mode switcher (pill toggle) === */
.pc-mode-switch{ display:inline-flex; background:var(--pc-field); border:1.5px solid var(--pc-border); border-radius:var(--pc-radius-pill); padding:6px; gap:6px; margin:0 0 22px; }
.pc-mode-btn{ appearance:none; -webkit-appearance:none; border:0; outline:0; box-shadow:none; text-transform:none;
  display:inline-flex; align-items:center; gap:10px; font-family:'Barlow',sans-serif; font-weight:700; font-size:16px;
  padding:13px 28px; border-radius:var(--pc-radius-pill); background:transparent; color:var(--pc-body); cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease; }
.pc-mode-btn::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--pc-muted); flex:none; transition:background .18s ease; }
.pc-mode-btn.is-active{ background:var(--pc-blue); color:var(--pc-white); box-shadow:0 6px 16px rgba(7,25,140,.22); }
.pc-mode-btn.is-active::before{ background:var(--pc-orange); }
.pc-mode-btn:focus-visible{ box-shadow:0 0 0 3px rgba(7,25,140,.20); }

/* === Billing card === */
.pc-checkout .woocommerce-billing-fields{ background:var(--pc-white); border:1px solid var(--pc-border); border-radius:var(--pc-radius);
  padding:30px 32px 34px; box-shadow:0 24px 50px -32px rgba(7,25,140,.22); }
.pc-checkout .woocommerce-billing-fields > h3{ display:none; }

/* Card header (per mode) */
.pc-card-head{ display:none; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-bottom:1px solid var(--pc-border); padding-bottom:16px; margin-bottom:22px; }
.pc-checkout.pc-mode-firma .pc-card-head--firma{ display:flex; }
.pc-checkout.pc-mode-osoba .pc-card-head--osoba{ display:flex; }
.pc-card-head h3{ font-family:'Domine',serif; font-weight:500; font-size:26px; color:var(--pc-ink); margin:0; line-height:1.2; }
.pc-card-head span{ font-family:'Barlow',sans-serif; font-size:13px; color:var(--pc-muted); }

/* === Form fields & grid ===
 * 12-column grid (finer than 6) so the short tax fields can be sized to their
 * content and packed adjacently without big dead gaps. Wide=12, half=6, third=4. */
.pc-checkout .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px 16px; }
/* min-width:0 is essential: grid items default to min-width:auto, so a wide child
 * (e.g. the select2 country container, which sets an inline px width, or a long
 * country/option label) can blow the column past its span and shove its row-mate
 * (PSČ) onto a new line once select2 initialises. Pinning min-width:0 keeps every
 * field inside its track no matter what select2 injects. */
.pc-checkout .form-row{ margin:0; padding:0; float:none; width:auto; min-width:0; }
.pc-checkout .form-row-wide { grid-column:span 12; }
.pc-checkout .form-row-first{ grid-column:span 6; }
.pc-checkout .form-row-last { grid-column:span 6; }
.pc-checkout .form-row-third{ grid-column:span 4; }

/* Force concept order regardless of WC/locale DOM order */
.pc-checkout #billing_company_field   { order:1; }
/* Tax row: IČO / DIČ / IČ DPH packed left, sized to their content (8/10/12 chars)
 * instead of stretched across thirds — IČO span 3, DIČ span 3, IČ DPH span 4 (it
 * carries the inline checkbox when "platca DPH" is on). Adjacent, no big gaps. */
.pc-checkout #billing_ico_field       { order:2; grid-column:span 3; }
.pc-checkout #billing_dic_field       { order:3; grid-column:span 3; }
.pc-checkout #billing_icdph_field      { order:4; grid-column:span 4; }
.pc-checkout #billing_is_vat_payer_field{ order:5; grid-column:span 4; }
.pc-checkout #billing_first_name_field{ order:6; }
.pc-checkout #billing_last_name_field { order:7; }
.pc-checkout #billing_dob_field       { order:8; }
.pc-checkout #billing_address_1_field { order:10; }
.pc-checkout #billing_city_field      { order:11; }
.pc-checkout #billing_postcode_field  { order:12; }
.pc-checkout #billing_country_field   { order:13; }
.pc-checkout #billing_phone_field     { order:14; }
.pc-checkout #billing_email_field     { order:15; }
.pc-checkout #billing_poznamka_field  { order:30; }

/* Pin the grid span by FIELD ID, not just by the form-row-first/last class.
 * WooCommerce's address-locale JS re-runs on country change (update_checkout /
 * country_to_state_changed) and rewrites each address field's class array from the
 * selected country's locale — which strips our form-row-first/last and made Mesto +
 * PSČ stack onto separate rows once a country was chosen. Binding the column span to
 * the stable field IDs makes the two-up layout survive that reclassing. */
.pc-checkout #billing_city_field     { grid-column:span 6; }
.pc-checkout #billing_postcode_field { grid-column:span 6; }
.pc-checkout #billing_country_field  { grid-column:span 6; }
.pc-checkout #billing_phone_field    { grid-column:span 6; }
.pc-checkout #billing_address_1_field,
.pc-checkout #billing_email_field,
.pc-checkout #billing_poznamka_field { grid-column:span 12; }

/* Mode visibility */
.pc-checkout.pc-mode-osoba .pc-po{ display:none !important; }
.pc-checkout.pc-mode-firma .pc-fo{ display:none !important; }

/* VAT-payer toggle: IČ DPH is hidden until "Sme platca DPH" is checked
 * (pc-vat-on set on the form by the JS). A non-payer has no IČ DPH at all. */
.pc-checkout:not(.pc-vat-on) .pc-icdph-field{ display:none !important; }

/* --- Full two-way swap animation between the labelled toggle and the IČ DPH input.
 * The JS sequences it: the visible element slides DOWN + fades OUT (.pc-vat-leaving),
 * then on animationend the state swaps and the incoming element slides IN FROM THE
 * TOP (.pc-icdph-field gets pc-icdph-in via pc-vat-on; the returning toggle gets
 * pc-vat-entering). Same soft ease-out feel as the rest of the page. Reduced-motion
 * users skip straight to the swapped state (no animation rules apply). */
@media (prefers-reduced-motion: no-preference){
  /* incoming: IČ DPH input appears from the top */
  .pc-checkout.pc-vat-on .pc-icdph-field{ animation:pc-vat-in .26s ease-out both; }
  /* incoming: labelled toggle reappears from the top */
  .pc-checkout #billing_is_vat_payer_field.pc-vat-entering{ animation:pc-vat-in .26s ease-out both; }
  /* outgoing (either element): slides down and fades out. !important so it beats
   * the more-specific incoming rule on .pc-icdph-field while pc-vat-on is still set
   * (the swap only removes pc-vat-on after this exit animation finishes). */
  .pc-checkout .pc-vat-leaving{ animation:pc-vat-out .2s ease-in both !important; }

  @keyframes pc-vat-in{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes pc-vat-out{
    from{ opacity:1; transform:translateY(0); }
    to{ opacity:0; transform:translateY(8px); }
  }
}
/* "Sme platca DPH" toggle. WooCommerce renders it as one
 * <label class="checkbox"><input> Text</label>. It has two placements:
 *
 *  OFF — the checkbox lives in its own field slot next to DIČ, as a boxed control
 *        WITH the "Sme platca DPH" label (the entry point).
 *  ON  — JS moves the field INTO the IČ DPH input wrapper, which becomes a flex
 *        row: the input takes ~65%, the checkbox sits beside it as just the box
 *        (label text hidden). Unchecking it collapses back to the labelled toggle. */

/* --- OFF state: boxed labelled toggle in its own slot --- */
.pc-checkout .pc-vat-toggle{ display:flex; align-items:flex-end; }
.pc-checkout .pc-vat-toggle label.checkbox{
  display:flex; align-items:center; gap:9px;
  margin:0 !important; font-weight:600; font-size:13px; color:var(--pc-body);
  cursor:pointer; line-height:1.3;
  background:var(--pc-field); border:1px solid var(--pc-border); border-radius:10px;
  padding:11px 14px; width:100%; box-sizing:border-box;
  transition:border-color .15s ease, color .15s ease;
}
.pc-checkout .pc-vat-toggle label.checkbox:hover{ border-color:var(--pc-blue); }
.pc-checkout .pc-vat-toggle label.checkbox::after{ content:none !important; } /* no required-star */
/* Same custom square checkmark as the consent checkboxes (blue fill + white tick),
 * not the native browser box. */
.pc-checkout .pc-vat-toggle input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin:0; flex:none; cursor:pointer; position:relative;
  border:2px solid var(--pc-border); border-radius:7px; background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.pc-checkout .pc-vat-toggle input[type="checkbox"]:hover{ border-color:var(--pc-blue); }
.pc-checkout .pc-vat-toggle input[type="checkbox"]:checked{ background:var(--pc-blue); border-color:var(--pc-blue); }
.pc-checkout .pc-vat-toggle input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg);
}

/* The tax inputs fill their (content-sized) cells — no artificial max-width, so
 * nothing gets clipped. The cells themselves are the right width via the grid spans
 * above, which is what keeps the row tidy. */

/* --- ON state: IČ DPH input + bare checkbox beside it (no text) --- */
/* The IČ DPH input wrapper becomes the flex row holding input + moved checkbox. */
.pc-checkout.pc-vat-on .pc-icdph-field .woocommerce-input-wrapper{
  display:flex; align-items:center; gap:10px;
}
.pc-checkout.pc-vat-on .pc-icdph-field .woocommerce-input-wrapper input.input-text{
  flex:1 1 auto;                          /* fills the slot left of the checkbox */
}
/* The moved checkbox field: bare box, no slot chrome, no label text. */
.pc-checkout.pc-vat-on .pc-icdph-field .pc-vat-toggle{
  margin:0; padding:0; flex:0 0 auto; width:auto;
}
.pc-checkout.pc-vat-on .pc-icdph-field .pc-vat-toggle label.checkbox{
  background:none; border:none; padding:0; width:auto; gap:0;
  font-size:0; line-height:0;            /* hide the "Sme platca DPH" text */
}
/* Locked "SK" prefix cue: IČ DPH always starts with SK (JS-enforced, undeletable). */
.pc-checkout .pc-icdph-field input.input-text{ letter-spacing:.02em; }

/* Dátum narodenia — a single text input typed naturally (DD.MM.RRRR); JS auto-
 * formats. Inherits the standard .input-text styling; slightly looser tracking so
 * the dotted date reads cleanly. */
.pc-checkout .pc-dob-input{ letter-spacing:.04em; }
/* Invalid/empty after a submit attempt (JS adds .pc-dob-error): red the input. */
.pc-checkout .pc-dob-error input.input-text{
  border-color:#D6452B !important; background:#FFF5F3 !important; box-shadow:0 0 0 3px rgba(214,69,43,.12) !important;
}
.pc-checkout .pc-dob-error label{ color:#D6452B !important; }

/* Labels + inputs */
.pc-checkout .form-row label{ font-family:'Barlow',sans-serif; font-weight:700; font-size:12.5px; color:var(--pc-ink);
  letter-spacing:.01em; margin-bottom:6px; display:block; }
.pc-checkout abbr.required{ color:var(--pc-orange); border:none; text-decoration:none; cursor:default; margin-left:2px; }
.pc-checkout .optional{ display:none; }  /* hide WC "(voliteľné)" to match concept */

.pc-checkout .form-row input.input-text,
.pc-checkout .form-row textarea,
.pc-checkout .form-row select{
  width:100%; box-sizing:border-box; background:var(--pc-field); border:1px solid var(--pc-border); border-radius:10px;
  padding:11px 14px; min-height:46px; font-family:'Barlow',sans-serif; font-size:14.5px; color:var(--pc-ink); line-height:1.4; }
.pc-checkout .form-row input.input-text::placeholder,
.pc-checkout .form-row textarea::placeholder{ color:var(--pc-muted); }
.pc-checkout .form-row textarea{ min-height:84px; resize:vertical; }
/* select2 single-select (the Štát country dropdown): match the other inputs.
 * IMPORTANT: the parent theme (gainlove2 woocommerce.css) styles select2 via
 * `.form-row .select2-container--default .select2-selection--single` with
 * border-radius:0 40px 0 40px, min-height:52px and rendered line-height:52px /
 * padding:0 24px. We must out-specify it, so every selector below includes
 * `.pc-checkout .form-row` and overrides each of those properties; otherwise the
 * box renders tall with a stray 40px corner and a low-floating placeholder. */
.pc-checkout .form-row .select2-container--default .select2-selection--single{
  display:block; box-sizing:border-box; width:100%;
  height:46px; min-height:46px;
  background:var(--pc-field); border:1px solid var(--pc-border);
  border-radius:10px;            /* override parent's 0 40px 0 40px */
  padding:0 14px; }
.pc-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:44px;              /* fill the 46px box (−2px border) → vertically centered */
  padding:0;                     /* override parent's padding:0 24px */
  color:var(--pc-ink); font-family:'Barlow',sans-serif; font-size:14.5px; }
.pc-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--pc-muted); }
/* Arrow: the PARENT theme (gainlove2/style.css) already renders the chevron as an
 * SVG and centres it with top:50% + transform:translateY(-50%). The bug was our
 * old top:0 fighting that transform (the arrow got pulled up 50% above the box).
 * So we DON'T re-fight it — we keep the parent's centring technique (top:50% +
 * translateY) and only ensure it's pinned to the right edge of our box. Leaving the
 * parent's SVG `b` untouched keeps a single, consistent chevron. */
.pc-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
  top:50% !important; right:14px !important; height:8px; width:16px;
  transform:translateY(-50%) !important; }
/* select2 sets the container width inline; keep it full-width. */
.pc-checkout .form-row .select2-container{ width:100% !important; }
.pc-checkout .form-row input.input-text:focus,
.pc-checkout .form-row textarea:focus,
.pc-checkout .form-row select:focus{ outline:none; border-color:var(--pc-blue); background:var(--pc-white); box-shadow:0 0 0 3px rgba(7,25,140,.10); }
/* select2 open/focused → same blue focus ring as the text inputs. */
.pc-checkout .form-row .select2-container--open .select2-selection--single,
.pc-checkout .form-row .select2-container--focus .select2-selection--single{
  border-color:var(--pc-blue) !important; background:var(--pc-white); box-shadow:0 0 0 3px rgba(7,25,140,.10); }
/* When open, flip to the up-caret and keep the bottom corners square so the box
 * meets the dropdown panel cleanly. */
.pc-checkout .form-row .select2-container--open.select2-container--below .select2-selection--single{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pc-checkout .form-row .select2-container--open.select2-container--above .select2-selection--single{ border-top-left-radius:0; border-top-right-radius:0; }

/* ============================ select2 DROPDOWN PANEL ============================
 * The dropdown (list + search box + options) is appended by select2 to <body>,
 * OUTSIDE .pc-checkout — so these rules are intentionally UNSCOPED, namespaced only
 * by the select2 classes. Without them the panel renders as raw select2 (the blue
 * #0073aa highlight + default search box you saw). We theme it to match our inputs:
 * brand border, brand-blue highlighted option, on-brand search box. */
.select2-dropdown{
  background:var(--pc-white, #fff); border:1px solid var(--pc-blue, #07198C);
  border-radius:10px; box-shadow:0 14px 34px rgba(7,25,140,.14);
  font-family:'Barlow', Arial, sans-serif; }
/* Drop the panel a few px BELOW the field (a small gap) instead of overlapping it.
 * select2 positions the panel at the field's bottom edge; a positive margin pushes
 * it clear so the field's rounded box and the panel read as two clean elements. */
.select2-container--open .select2-dropdown--below{ margin-top:6px; }
.select2-container--open .select2-dropdown--above{ margin-bottom:6px; }
.select2-search--dropdown{ padding:10px; }
.select2-container--default .select2-search--dropdown .select2-search__field{
  box-sizing:border-box; width:100%; border:1px solid var(--pc-border, #E5E5E5) !important;
  border-radius:8px; padding:9px 12px; font-family:'Barlow', Arial, sans-serif; font-size:14px;
  color:var(--pc-ink, #000); outline:none; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--pc-blue, #07198C) !important; box-shadow:0 0 0 3px rgba(7,25,140,.10); }
.select2-container--default .select2-results__option{
  padding:10px 14px; font-size:14.5px; color:var(--pc-ink, #000); }
/* The results list IS the scroll container — give it a clear max-height and force
 * overflow-y:auto (the panel itself must NOT be overflow:hidden, or the list gets
 * clipped instead of scrolling). !important beats select2 base + parent overrides. */
.select2-container--default .select2-results>.select2-results__options{
  max-height:280px !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
/* Highlighted (hover/keyboard) option → brand blue, not select2's #0073aa. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected]{
  background:var(--pc-blue, #07198C); color:#fff; }
/* Already-selected option → subtle brand tint. */
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true]{
  background:rgba(7,25,140,.06); color:var(--pc-ink, #000); }

/* Required-marker. These fields are WC-"optional" (required is enforced per mode),
 * so we add the star ourselves via ::after. The company field can ALSO get a native
 * <abbr class="required"> from WooCommerce — that would be a SECOND star — so we
 * hide the native abbr inside these fields and keep exactly one ::after star. */
.pc-checkout #billing_company_field label abbr.required,
.pc-checkout #billing_ico_field label abbr.required,
.pc-checkout #billing_first_name_field label abbr.required,
.pc-checkout #billing_last_name_field label abbr.required,
.pc-checkout #billing_dob_field label abbr.required{ display:none !important; }
.pc-checkout #billing_company_field label::after,
.pc-checkout #billing_ico_field label::after,
.pc-checkout #billing_first_name_field label::after,
.pc-checkout #billing_last_name_field label::after,
.pc-checkout #billing_dob_field label::after{ content:" *"; color:var(--pc-orange) !important; font-weight:700; }

/* Any remaining native required marker stays brand orange — never the theme's red.
 * Covers any field where WC renders its own <abbr> (and beats parent-theme color). */
.pc-checkout abbr.required,
.pc-checkout .required,
.pc-checkout .form-row label .required{ color:var(--pc-orange) !important; border:none !important; text-decoration:none !important; }

/* === Validation chrome === */
/* Neutralize WC live-validation chrome (no green/red bars, no auto messages) */
.pc-checkout .form-row.woocommerce-invalid input.input-text,
.pc-checkout .form-row.woocommerce-validated input.input-text,
.pc-checkout .form-row.woocommerce-invalid select,
.pc-checkout .form-row.woocommerce-validated select,
.pc-checkout .form-row.woocommerce-invalid .select2-container,
.pc-checkout .form-row.woocommerce-validated .select2-container{ box-shadow:none !important; border-color:var(--pc-border) !important; }
.pc-checkout .form-row.woocommerce-invalid label{ color:var(--pc-ink) !important; }
.pc-checkout .form-row .woocommerce-error,
.pc-checkout .form-row > .description,
.pc-checkout .woocommerce-additional-fields{ display:none !important; }

/* === Native inline field validation (JS-driven, in js/pc-selector.js) ===
 * Replaces the post-submit WooCommerce notice banner with per-field, real-time
 * feedback: a red ring on the offending input + a small message under it, shown
 * as soon as the value is wrong and cleared the moment it's corrected. Scoped to
 * .pc-has-error so untouched/valid fields stay neutral. */
.pc-checkout .form-row.pc-has-error input.input-text{
  border-color:#D6452B !important;
  background:#FFF5F3 !important;
  box-shadow:0 0 0 3px rgba(214,69,43,.12) !important;
}
.pc-checkout .form-row.pc-has-error label{ color:#D6452B !important; }
.pc-field-error{
  display:block;
  margin:6px 2px 0;
  font-family:'Barlow',sans-serif;
  font-size:12.5px;
  line-height:1.4;
  font-weight:600;
  color:#D6452B;
}
/* A correct field shows NO special border — it stays at the neutral default. Only
 * wrong fields get the red treatment above. (No green "valid" ring.) */

/* === Responsive === */
@media (max-width:768px){
  .pc-checkout .woocommerce-billing-fields{ padding:22px 18px; border-radius:20px; }
  .pc-checkout .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr; }
  .pc-checkout .form-row-wide,.pc-checkout .form-row-first,
  .pc-checkout .form-row-last,.pc-checkout .form-row-third,
  .pc-checkout #billing_ico_field,.pc-checkout #billing_dic_field,
  .pc-checkout #billing_icdph_field,.pc-checkout #billing_is_vat_payer_field,
  /* Match the ID-pinned spans above so they collapse to one column on mobile. */
  .pc-checkout #billing_city_field,.pc-checkout #billing_postcode_field,
  .pc-checkout #billing_country_field,.pc-checkout #billing_phone_field,
  .pc-checkout #billing_address_1_field,.pc-checkout #billing_email_field,
  .pc-checkout #billing_poznamka_field{ grid-column:1 / -1; }
  .pc-mode-switch{ width:100%; }
  .pc-mode-btn{ flex:1; justify-content:center; padding:12px 10px; font-size:14px; }
  .pc-card-head h3{ font-size:22px; }
}