/* ==========================================================================
   ILZE Baltic — Contact page (Store info + Contact form)
   Uses the same navy/orange system as checkout (ilze-checkout.css defines
   the --ilze-* custom properties in :root; both files are loaded globally
   so they always stay in sync). Falls back to literal hex values in case
   ilze-checkout.css is ever removed independently of this file.
   ========================================================================== */

/* This page uses the left-column layout: #left-column (info block) and
   #content-wrapper > #content (form) sit side by side, and #content itself
   comes pre-styled by Bootstrap as a plain white .card. Left on their own,
   both areas stay flat white, so the cards below never show any shadow/
   border contrast against their surroundings — every colour tweak on them
   looked invisible. Give the whole page one grey backdrop and neutralise
   that inner .card box so our own cards are the only white you see. */
body#contact {
  background: var(--ilze-bg, #F4F6F9) !important;
}

.page-contact #content.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Explicit side gutter for BOTH columns, at every width, same value on
   both — not just inside one breakpoint's media query. Bootstrap's own
   .col-* left/right padding turned out unreliable specifically for
   #content-wrapper on this page (map/form kept rendering flush to an
   edge — first the right one on desktop, then both on mobile after an
   earlier fix only zeroed it out); making it unconditional here removes
   any dependency on that cascade, and on whichever breakpoint is
   "active", entirely. High-specificity id selector wins regardless of
   load order. NOTE: this must be padding on the PARENT, not margin on
   .ilze-contact-form itself — legacy theme.css has a plain
   ".contact-form{width:100%}" rule (that class is still on the form's
   <section>), and width:100% plus its own left+right margin doesn't
   subtract from that 100% the way width:auto would — it just adds on
   top, overflowing the viewport and causing the page to scroll
   sideways (hit this once already). Padding on the parent has none of
   that problem, since percentage widths are computed against the
   already-padded content box. */
body#contact #left-column,
body#contact #content-wrapper {
  /* !important is required: ilze-header.css has an unconditional, global
     "ПОЛНАЯ ШИРИНА" rule — #content-wrapper{padding-left/right:0!important}
     — meant for full-bleed homepage sections, loaded on every page. Found
     this by inspecting the live document.styleSheets in an actual
     browser (installed Playwright/Chromium on the server for this) —
     no amount of selector specificity was ever going to beat an
     !important rule; that's why every previous attempt silently failed
     while #left-column (never targeted by that rule) worked fine. */
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (min-width: 768px) {
  body#contact #left-column,
  body#contact #content-wrapper {
    padding-top: 24px;
    padding-bottom: 48px;
  }
}

.ilze-contact-info,
.ilze-contact-form {
  background: var(--ilze-white, #ffffff);
  border: 1px solid var(--ilze-border, #DDE3EC);
  border-radius: var(--ilze-radius, 10px);
  box-shadow: 0 2px 10px rgba(26, 51, 80, 0.06);
  padding: 24px 22px;
  margin-bottom: 20px;
}

/* -------------------- Store info block (ps_contactinfo-rich) -------------------- */

.ilze-contact-info h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ilze-navy, #1A3350);
  margin: 0 0 18px;
}

.ilze-contact-info .block {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
}

.ilze-contact-info .icon,
.ilze-contact-info.contact-rich .block .icon {
  float: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ilze-orange-lt, #FEF0E8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ilze-contact-info .icon .material-icons,
.ilze-contact-info.contact-rich .block .icon i {
  color: var(--ilze-orange, #E8703A);
  font-size: 20px;
}

.ilze-contact-info .data,
.ilze-contact-info.contact-rich .block .data {
  width: auto;
  overflow: visible;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ilze-text, #1C1C1C);
  flex: 1 1 auto;
  min-width: 0; /* flex items default to min-width:auto, which lets long
    unbroken content (IBAN, e-mail) force this row wider than its column
    on narrow screens instead of wrapping; this lets it actually shrink. */
  overflow-wrap: break-word;
}

.ilze-contact-info .data a {
  color: var(--ilze-navy, #1A3350);
  font-weight: 600;
  text-decoration: none;
}

.ilze-contact-info .data a:hover {
  color: var(--ilze-orange, #E8703A);
}

/* Legacy theme.css ships ".contact-rich .block a[href^=mailto]" rules
   (margin-top:1rem + clear:both, plus a separate font-size:.815rem) aimed
   at the stock unstyled block — 3 classes/attrs deep, which out-specifies
   plain ".ilze-contact-info .data a" and was the actual, dominant cause of
   the lopsided icon / large gap under "info@ilze.lt" (not just the
   ".email" class removed above — that was a second, smaller contributor).
   Matching depth here (contact-rich + ilze-contact-action--email + data +
   the a[href] attribute) guarantees this wins regardless of file order. */
.ilze-contact-info.contact-rich .ilze-contact-action--email .data a[href^="mailto:"] {
  margin-top: 0;
  clear: none;
  font-size: 14px;
}

.ilze-contact-info hr {
  border: none;
  border-top: 1px solid var(--ilze-border, #DDE3EC);
  margin: 6px 0;
}

/* Base (all widths) resets for the mobile-only action-button / collapsible
   requisites markup below — .ilze-contact-action--phone is an <a> now (it
   used to be a plain <div>) and the checkbox/chevron are new elements, so
   without these, desktop would inherit browser link/checkbox/icon defaults
   it never had before. The actual button borders, chevrons and collapse
   behaviour only switch on inside the @media (max-width: 767px) block
   further down — on desktop this leaves the row exactly as it was. */
.ilze-contact-action {
  text-decoration: none;
  color: inherit;
}

/* The phone number used to be the <a> itself, styled by the generic
   ".ilze-contact-info .data a" rule below; now the whole row is the <a>
   and the number is a plain <span> inside it, so it needs the same
   colour/weight/hover restated here to keep desktop unchanged. */
.ilze-contact-action-value {
  color: var(--ilze-navy, #1A3350);
  font-weight: 600;
}

.ilze-contact-action:hover .ilze-contact-action-value {
  color: var(--ilze-orange, #E8703A);
}

.ilze-contact-action-chevron,
.ilze-requisites-chevron {
  display: none;
}

.ilze-requisites-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ilze-requisites-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  color: var(--ilze-navy, #1A3350);
}

.ilze-requisites-body {
  margin-top: 6px;
}

/* Mobile-only inline map (duplicated under the address, see
   ps_contactinfo-rich.tpl) — hidden on desktop, where the larger map
   further down the page already covers this. */
.ilze-contact-map--inline {
  display: none;
}

/* -------------------- Store location map -------------------- */

.ilze-contact-map {
  border: 1px solid var(--ilze-border, #DDE3EC);
  border-radius: var(--ilze-radius, 10px);
  box-shadow: 0 2px 10px rgba(26, 51, 80, 0.06);
  overflow: hidden;
  margin-bottom: 20px;
}

.ilze-contact-map iframe {
  display: block;
  width: 100%;
}

/* -------------------- Contact form (contactform.tpl) -------------------- */

.ilze-contact-form .form-fields h3 {
  font-size: 18px;
  font-weight: 700;
  /* No margin-bottom here: the .form-group.row wrapping this heading
     already gets margin-bottom:18px like every other row, and — measured
     directly in a real browser — that does NOT collapse with a margin on
     h3 (the row is a Bootstrap flex container, and flex items establish
     their own formatting context, so a grandchild's margin can't escape
     through it). The two were stacking into a confirmed 38px gap instead
     of the intended ~18px (matching the info card's own heading gap). */
  margin: 0;
  color: var(--ilze-navy, #1A3350);
}

.ilze-contact-form .form-group {
  margin-bottom: 18px;
}

.ilze-contact-form .form-control-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ilze-text-mid, #5A6270);
  margin-bottom: 6px;
}

/* Bootstrap's own .form-control rule was still winning several
   properties (height/border-width) despite this selector being more
   specific -- pinning each property with !important rather than
   chasing the exact specificity fight. */
.ilze-contact-form .form-control {
  height: 44px !important;
  border: 1.5px solid var(--ilze-border, #DDE3EC) !important;
  border-radius: var(--ilze-radius-sm, 6px) !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  color: var(--ilze-text, #1C1C1C) !important;
  background: var(--ilze-white, #fff) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ilze-contact-form select.form-control {
  height: 44px !important;
}

.ilze-contact-form textarea.form-control {
  height: auto !important;
  min-height: 100px !important;
  padding: 12px 14px !important;
  resize: vertical;
}

.ilze-contact-form .form-control:focus {
  border-color: var(--ilze-navy, #1A3350) !important;
  box-shadow: 0 0 0 3px rgba(26, 51, 80, 0.08) !important;
  outline: none;
}

.ilze-contact-form .form-control-comment {
  font-size: 12px;
  color: var(--ilze-text-lt, #929AAA);
}

.ilze-contact-form .form-footer {
  margin-top: 8px;
}

.ilze-contact-form .btn-primary {
  background: var(--ilze-orange, #E8703A) !important;
  border-color: var(--ilze-orange, #E8703A) !important;
  color: #ffffff !important;
  border-radius: var(--ilze-radius-sm, 6px);
  min-height: 46px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(232, 112, 58, 0.25);
  transition: background .15s ease, box-shadow .15s ease;
}

.ilze-contact-form .btn-primary:hover {
  background: #D4611F !important;
  border-color: #D4611F !important;
  box-shadow: 0 6px 16px rgba(232, 112, 58, 0.32);
}

/* -------------------- Mobile -------------------- */
@media (max-width: 767px) {
  /* The desktop rule above only restores #left-column/#content-wrapper
     spacing at >=768px (it was tuned against the page's normal breadcrumb
     rhythm there); give mobile its own smaller breathing room instead of
     leaving it at zero — cards were sitting flush against the breadcrumb
     and against each other. */
  body#contact #left-column,
  body#contact #content-wrapper {
    padding-top: 14px;
    padding-bottom: 28px;
  }

  .ilze-contact-info,
  .ilze-contact-form {
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 16px;
    /* The subtle desktop border/shadow reads as almost no boundary at
       all against the page's off-white background at phone scale — give
       the card real definition here instead. */
    border-color: rgba(26, 51, 80, 0.14);
    box-shadow: 0 4px 18px rgba(26, 51, 80, 0.10);
  }

  .ilze-contact-form .form-fields h3 {
    padding-left: 12px;
    border-left: 3px solid var(--ilze-orange, #E8703A);
  }

  .ilze-contact-form .btn-primary {
    width: 100%;
  }

  .ilze-contact-form .bootstrap-filestyle,
  .ilze-contact-form .group-span-filestyle {
    display: flex;
    gap: 8px;
  }

  .ilze-contact-form .bootstrap-filestyle .form-control[disabled] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 1.5px solid var(--ilze-border, #DDE3EC);
    border-radius: var(--ilze-radius-sm, 6px);
    font-size: 13px;
  }

  .ilze-contact-form .bootstrap-filestyle .btn,
  .ilze-contact-form .group-span-filestyle .btn {
    flex: 0 0 auto;
    height: 44px;
  }

  .ilze-contact-info .icon,
  .ilze-contact-info.contact-rich .block .icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .ilze-contact-info .icon .material-icons,
  .ilze-contact-info.contact-rich .block .icon i {
    font-size: 18px;
  }

  .ilze-contact-form .form-group.row .col-md-9.col-md-offset-3 {
    padding-left: 0;
  }

  /* The standalone map (rendered later, inside #content-wrapper > #main)
     is only shown on desktop now; on mobile the inline copy right under
     the address takes its place instead — see ilze-contact-map--inline
     below. (Descendant selector, not child: the map sits inside an extra
     <section id="main"> wrapper, not directly inside #content-wrapper.) */
  #content-wrapper .ilze-contact-map:not(.ilze-contact-map--inline) {
    display: none;
  }

  .ilze-contact-map iframe {
    height: 160px;
  }

  .ilze-contact-map--inline {
    display: block;
    border: none;
    box-shadow: none;
    margin: 10px 0 0;
  }

  /* -------------------- Action rows: call / e-mail -------------------- */
  .ilze-contact-action {
    border: 1.5px solid var(--ilze-border, #DDE3EC);
    border-radius: var(--ilze-radius-sm, 6px);
    padding: 10px 12px;
    margin: 8px 0;
    text-decoration: none;
    color: inherit;
  }

  .ilze-contact-action--phone {
    border-color: var(--ilze-navy, #1A3350);
  }

  .ilze-contact-action--email {
    border-color: var(--ilze-orange, #E8703A);
  }

  .ilze-contact-action .data {
    font-size: 12px;
    color: var(--ilze-text-mid, #5A6270);
  }

  .ilze-contact-action-value,
  .ilze-contact-action .data a {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ilze-text, #1C1C1C);
    text-decoration: none;
  }

  .ilze-contact-action--phone .ilze-contact-action-value {
    color: var(--ilze-navy, #1A3350);
  }

  .ilze-contact-action--email .data a {
    color: var(--ilze-orange, #E8703A);
  }

  .ilze-contact-action-chevron {
    display: block;
    align-self: center;
    color: var(--ilze-text-lt, #929AAA);
    font-size: 20px;
  }

  /* Requisites are always expanded (mobile and desktop both) — the
     checkbox/chevron markup from the collapsible version is still in the
     template but stays inert: the checkbox is hidden everywhere (base
     rules above) and the chevron is never switched to display:block, so
     it never renders and the body is never hidden. */
}

/* -------------------- Registration / bank-transfer details -------------------- */

.ilze-contact-details {
  font-size: 13px;
  line-height: 1.75;
  white-space: normal;
  overflow-wrap: break-word;
}

.ilze-contact-details strong {
  color: var(--ilze-navy, #1A3350);
  font-weight: 700;
}

/* -------------------- File upload button (bootstrap-filestyle) --------------------
   JS-generated widget wraps the native <input type=file> in its own markup;
   it isn't themed by default and falls back to Bootstrap's blue .btn-default,
   clashing with the rest of the form. Recolour every variant of the button
   it can render (label/span/button) as an outlined secondary action next
   to the solid orange "Send" button. */
.ilze-contact-form .bootstrap-filestyle .btn,
.ilze-contact-form .group-span-filestyle .btn,
.ilze-contact-form label.btn-file,
.ilze-contact-form .btn-file {
  background: var(--ilze-white, #ffffff) !important;
  border: 1.5px solid var(--ilze-orange, #E8703A) !important;
  color: var(--ilze-orange, #E8703A) !important;
  box-shadow: none !important;
  border-radius: var(--ilze-radius-sm, 6px);
  font-weight: 600;
  font-size: 13px;
}

.ilze-contact-form .bootstrap-filestyle .btn:hover,
.ilze-contact-form .group-span-filestyle .btn:hover,
.ilze-contact-form label.btn-file:hover,
.ilze-contact-form .btn-file:hover {
  background: var(--ilze-orange-lt, #FEF0E8) !important;
}

.ilze-contact-form .bootstrap-filestyle .form-control[disabled] {
  background: var(--ilze-white, #ffffff);
  color: var(--ilze-text, #1C1C1C);
  opacity: 1;
}

/* -------------------- GDPR consent checkbox (psgdpr module) --------------------
   This file loads on every page (see head.tpl), not just contact — so this
   fixes the checkbox everywhere psgdpr's displayGDPRConsent hook renders it
   (contact form, review modal, stock-alert form), not only here.

   Bug: ilze-checkout.css has an unscoped, !important
   ".custom-checkbox input[type=checkbox]{width:0;height:0;...}" meant for the
   checkout gift-wrap box, whose markup is ".custom-checkbox > span" (direct
   child). psgdpr's own template wraps an extra <label> in between
   (".custom-checkbox > label > span"), so that rule's *box* half
   (".custom-checkbox > span") never matches here — the native input gets
   hidden, but no styled replacement box ever appears, so the browser's own
   default control (or nothing at all, depending on browser) shows through.
   Restyle this one specifically via its own stable wrapper class instead of
   touching the shared .custom-checkbox rule other pages already rely on. */
.gdpr_consent .psgdpr_consent_message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ilze-text-mid, #5A6270);
}

.gdpr_consent .psgdpr_consent_message input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.gdpr_consent .psgdpr_consent_message > span:has(.psgdpr_consent_icon) {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  /* Stock theme.css has ".custom-checkbox input[type=checkbox]+span{margin-right:.5rem}"
     (an adjacent-sibling rule meant for its own inline-block layout) — it
     still matches this span too and was stacking with our flex `gap`
     below, doubling the space between the box and the text. */
  margin: 1px 0 0;
  box-sizing: border-box;
  /* A bit darker/thicker than the site's usual --ilze-border: at 18px this
     checkbox is small enough that the standard pale border was nearly
     invisible against a white background. */
  border: 2px solid var(--ilze-text-lt, #929AAA);
  border-radius: 4px;
  background: var(--ilze-white, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}

.gdpr_consent .psgdpr_consent_message input:checked ~ span:has(.psgdpr_consent_icon) {
  background: var(--ilze-navy, #1A3350);
  border-color: var(--ilze-navy, #1A3350);
}

.gdpr_consent .psgdpr_consent_message .psgdpr_consent_icon {
  font-size: 13px;
  color: transparent;
  transform: scale(0);
  transition: transform .1s, color .1s;
}

.gdpr_consent .psgdpr_consent_message .psgdpr_consent_icon::before {
  content: "check";
  font-family: "Material Icons";
}

.gdpr_consent .psgdpr_consent_message input:checked ~ span .psgdpr_consent_icon {
  color: var(--ilze-white, #ffffff);
  transform: scale(1);
}

.gdpr_consent .psgdpr_consent_message p {
  margin: 0;
}

/* -------------------- Contact form: success state -------------------- */
/* After a successful submit, contactform.tpl replaces the whole form
   with just a bare Bootstrap .alert-success. .ilze-contact-form's own
   card styling (background/border/shadow/padding) was still wrapping
   around it, and Bootstrap's own alert padding/margin sat inside that --
   two nested boxes with a visible gap between them instead of one. When
   the alert is the only thing left, drop the outer card styling and let
   the alert itself be the single, self-contained box. */
.ilze-contact-form:has(form > .alert-success:only-child) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.ilze-contact-form .alert-success {
  background: #EAF7EE;
  border: 1.5px solid #BFE3C9;
  border-radius: var(--ilze-radius, 10px);
  padding: 18px 20px;
  margin: 0;
  color: var(--ilze-navy, #1A3350);
}

.ilze-contact-form .alert-success ul {
  margin: 0;
  padding-left: 18px;
}