/* GreenUp – offer form styling.
 *
 * 1. FIELDS  – every themed CF7 form (.theme__contact-form): popup, homepage inline, /kontaktai.
 *              All screen sizes. Pure CSS, no JS needed.
 * 2. POPUP   – the "Gauti pasiūlymą" popup shell (.gu-sheet, class added by gu-offer-sheet.js):
 *              centred modal on desktop, keyboard-proof full-screen sheet on phones.
 *
 * Sharp corners throughout, to match the site's square buttons.
 * !important is used where the theme's own form rules are more specific. */

/* =========================================================== 1. FIELDS */

.wpcf7 .theme__contact-form,
.wpcf7 .theme__contact-form .contact-form__row { gap: 18px !important; }
.wpcf7 .theme__contact-form p { margin: 0; }

.wpcf7 .theme__contact-form .contact-form__form-field > p > label {
  display: inline-block; margin-bottom: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #22281b;
}
.wpcf7 .theme__contact-form .contact-form__form-field > p > br { display: none; }

.wpcf7 .theme__contact-form input[type="text"],
.wpcf7 .theme__contact-form input[type="email"],
.wpcf7 .theme__contact-form input[type="tel"],
.wpcf7 .theme__contact-form textarea {
  width: 100%; min-height: 50px !important; height: auto !important;
  padding-top: 12px !important; padding-bottom: 12px !important; padding-right: 14px !important;
  font-size: 16px !important;               /* < 16px makes iOS zoom on focus */
  line-height: 1.4; color: #22281b;
  background: #f6f8f3 !important; border: 1.5px solid #cfd5c6 !important; border-radius: 0 !important; box-shadow: none !important;
}
.wpcf7 .theme__contact-form input[type="text"],
.wpcf7 .theme__contact-form input[type="email"],
.wpcf7 .theme__contact-form textarea { padding-left: 14px !important; }   /* tel keeps the flag offset set inline */
.wpcf7 .theme__contact-form textarea { height: 110px !important; min-height: 110px !important; }
.wpcf7 .theme__contact-form .iti { width: 100%; display: block; }
.wpcf7 .theme__contact-form .iti__country-container { left: 6px; }
.wpcf7 .theme__contact-form input:focus,
.wpcf7 .theme__contact-form textarea:focus { outline: none; border-color: #4d7f1a !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(77, 127, 26, .18) !important; }
.wpcf7 .theme__contact-form input.wpcf7-not-valid,
.wpcf7 .theme__contact-form textarea.wpcf7-not-valid { border-color: #b3261e !important; background: #fdf1f0 !important; }
.wpcf7 .theme__contact-form .wpcf7-checkbox.wpcf7-not-valid { background: none !important; }
.wpcf7 .theme__contact-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13.5px; color: #b3261e; }

/* "(neprivaloma)" hint on fields CF7 doesn't require */
.wpcf7 .theme__contact-form .gu-optional { font-weight: 400; color: #5b6453; white-space: nowrap; }

/* products → chips (the invisible input covers the whole chip, so it works with or without <label>) */
.wpcf7 .theme__contact-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .theme__contact-form .wpcf7-checkbox .wpcf7-list-item { position: relative; display: block; margin: 0; }
.wpcf7 .theme__contact-form .wpcf7-checkbox label { display: block; margin: 0; }
.wpcf7 .theme__contact-form .wpcf7-checkbox input[type="checkbox"] {
  position: absolute; inset: 0; z-index: 1;
  width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; cursor: pointer;
}
.wpcf7 .theme__contact-form .wpcf7-checkbox .wpcf7-list-item-label {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #22281b;
  background: #fff; border: 1.5px solid #cfd5c6; border-radius: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.wpcf7 .theme__contact-form .wpcf7-checkbox .wpcf7-list-item-label::before,
.wpcf7 .theme__contact-form .wpcf7-checkbox .wpcf7-list-item-label::after { content: none; }
.wpcf7 .theme__contact-form .wpcf7-checkbox .wpcf7-list-item:hover .wpcf7-list-item-label { border-color: #4d7f1a; }
.wpcf7 .theme__contact-form .wpcf7-checkbox input:checked + .wpcf7-list-item-label { background: #4d7f1a; border-color: #4d7f1a; color: #fff; }
.wpcf7 .theme__contact-form .wpcf7-checkbox input:checked + .wpcf7-list-item-label::before { content: "✓"; font-weight: 800; }
.wpcf7 .theme__contact-form .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 3px rgba(77, 127, 26, .3); }

/* consents: 22px box centred on the first 20px text line (theme renders a 27px custom checkbox) */
.wpcf7 .theme__contact-form .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .theme__contact-form .wpcf7-acceptance label {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; margin: 0; padding: 10px 0; cursor: pointer;
  font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-transform: none; color: #22281b;
}
.wpcf7 .theme__contact-form .wpcf7-acceptance input[type="checkbox"] {
  flex: none; display: block; box-sizing: border-box !important;
  width: 22px !important; height: 22px !important; min-height: 0 !important;
  margin: -1px 0 0 !important; padding: 0 !important;
  line-height: 19px !important; text-align: center;
  accent-color: #4d7f1a; border: 1.5px solid #8f9884 !important; border-radius: 0 !important;
}
.wpcf7 .theme__contact-form .wpcf7-acceptance input[type="checkbox"]::before {
  display: block !important; position: static !important; width: 100% !important; height: auto !important;
  font-size: 13px !important; line-height: 19px !important;
}
.wpcf7 .theme__contact-form .wpcf7-acceptance .wpcf7-list-item-label { flex: 1; min-width: 0; line-height: 20px; }

/* =========================================================== 2. POPUP SHELL */

.gu-sheet-head { display: none; }

.w-popup-wrap.gu-sheet {
  --gu-pad: 28px;
  position: fixed !important;
  left: 0; right: 0; top: 0 !important; height: 100% !important;
  padding: 24px !important;
  overflow: hidden !important;
  align-items: center !important; justify-content: center;
}
.gu-sheet .w-popup-box {
  display: flex; flex-direction: column;
  width: 580px !important; max-width: 100%;
  height: auto !important; min-height: 0 !important; max-height: 100%;
  margin: 0 !important;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.gu-sheet .w-popup-box-h {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; height: auto !important;
  overflow: hidden !important;
  background: #fff;
}
/* the only scroller – header and ✕ stay put */
.gu-sheet .w-popup-box-content {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px var(--gu-pad) 0 !important;
}
.gu-sheet .w-popup-box-content .l-section,
.gu-sheet .w-popup-box-content .l-section-h,
.gu-sheet .w-popup-box-content .vc_column-inner { padding: 0 !important; }
.gu-sheet .w-popup-box-content .g-cols { margin: 0 !important; }

/* header (injected by JS) + close button */
.gu-sheet .gu-sheet-head {
  display: block; flex: none; position: relative;
  padding: 20px 72px 16px var(--gu-pad);
  border-bottom: 1px solid #e6e9e0;
}
.gu-sheet .gu-sheet-head h2 { margin: 0; padding: 0; font-size: 21px; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: #22281b; }   /* uppercase like the site's headings */
.gu-sheet .gu-sheet-head p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: #5b6453; }
.gu-sheet .w-popup-closer {
  position: absolute !important; top: 14px; right: 16px; z-index: 5;
  width: 44px; height: 44px; line-height: 44px;
  border-radius: 0; background: #eff1ea; color: #22281b;
  text-align: center; cursor: pointer;
}
.gu-sheet .w-popup-closer:hover { background: #e0e4d8; }
.gu-sheet .w-popup-closer::before { font-size: 18px; line-height: 44px; }

/* sticky submit (JS moves the button into .gu-form-foot) */
.gu-sheet .gu-form-foot {
  position: sticky; bottom: 0; z-index: 3;
  margin: 0 calc(-1 * var(--gu-pad)); padding: 14px var(--gu-pad) calc(14px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #e6e9e0;
}
.gu-sheet .gu-form-foot .w-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 54px; margin: 0; border-radius: 0; font-size: 16px;
}
.gu-sheet .wpcf7-response-output { margin: 12px 0 16px !important; font-size: 14px; border-radius: 0; }

/* success screen (replaces header + form after wpcf7mailsent) */
.gu-success { display: none; }
.gu-sheet .gu-done .gu-sheet-head,
.gu-sheet .gu-done .w-popup-box-content { display: none !important; }
.gu-sheet .gu-done .gu-success {
  display: block; text-align: center;
  padding: 64px var(--gu-pad) calc(40px + env(safe-area-inset-bottom));
}
.gu-success-tick {
  width: 72px; height: 72px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: #eef4e6; color: #4d7f1a; font-size: 36px; font-weight: 800;
}
.gu-success h2 { margin: 0 0 8px; padding: 0; font-size: 21px; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: #22281b; outline: none; }
.gu-success p { margin: 0 0 28px; font-size: 15px; line-height: 1.55; color: #5b6453; }
.gu-success .w-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin: 0; font-size: 16px; }
.gu-sheet .gu-sheet-head h2 { outline: none; }
.gu-sheet form.gu-hide-response .wpcf7-response-output { display: none !important; }
html.gu-success-open #thankyou-popup { display: none !important; }   /* no flash before JS removes it */

/* keyboard focus must stay visible on the custom controls */
.gu-sheet .w-popup-closer:focus-visible,
.gu-success .w-btn:focus-visible,
.open-contact-popup:focus-visible { outline: 3px solid #4d7f1a; outline-offset: 2px; }

/* ----------------------------------------------------------- phones: full-screen sheet */
@media (max-width: 767px) {

  /* scroll lock + floating widgets while open (classes/top set by JS) */
  html.gu-sheet-open body { position: fixed; left: 0; width: 100%; }
  html.gu-sheet-open #CookiebotWidget { display: none !important; }

  /* fixed to the *visual* viewport, so the keyboard can't break it */
  .w-popup-wrap.gu-sheet {
    --gu-pad: 20px;
    top: var(--gu-vv-top, 0px) !important;
    height: var(--gu-vv-height, 100dvh) !important;
    padding: 0 !important;
    align-items: flex-end !important;
  }
  /* full screen on phones */
  .gu-sheet .w-popup-box {
    width: 100% !important; height: 100% !important; max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .gu-sheet .w-popup-box.active { animation: gu-sheet-in .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes gu-sheet-in { from { transform: translateY(60%); } to { transform: none; } }

  .gu-sheet .w-popup-box-content { padding-top: 16px !important; }
  .gu-sheet .gu-sheet-head { padding: calc(16px + env(safe-area-inset-top)) 64px 14px var(--gu-pad); }
  .gu-sheet .gu-sheet-head h2 { font-size: 19px; }
  .gu-sheet .w-popup-closer { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
  .gu-sheet .wpcf7 .theme__contact-form textarea { height: 96px !important; min-height: 96px !important; }
  .gu-sheet .gu-done .gu-success { flex: 1; display: flex; flex-direction: column; justify-content: center; }

}