/* ================================
   PANMEDICA – Kontakt: formularz
   Desktop: 2. wiersz = RODO + CAPTCHA
   Mobile: bez zmian (pionowo)
   ================================ */

:root{
  --pm-accent: #1e73be;
  --pm-border: rgba(0,0,0,.12);
  --pm-soft: rgba(0,0,0,.06);
}

/* ----------------
   KARTA FORMULARZA
   ---------------- */

.contact-form{
  display: flex;
  justify-content: center;
}

body .contact form#contact-form,
body .contact .contact-form form,
body .contact form{
  width: 100% !important;
  max-width: 860px;                 /* desktop: szerszy */
  margin: 0 auto !important;

  background: rgba(255,255,255,.95);
  border: 1px solid var(--pm-soft);
  border-top: 0 !important;         /* bez paska */
  border-radius: 0 !important;      /* bez zaokrągleń */
  padding: 22px;

  background-image: none !important;
  box-shadow: 0 0 18px rgba(0,0,0,.06) !important;
}

/* większy desktop */
@media (min-width: 1200px){
  body .contact form#contact-form,
  body .contact .contact-form form,
  body .contact form{
    max-width: 980px;
  }
}

/* ----------------
   TYPOGRAFIA / ETYKIETY
   ---------------- */

body .contact label{
  display:block;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: .2px;
  text-align: left;
}

#contact-form legend{
  text-align: left;
}

/* ----------------
   POLA FORMULARZA
   ---------------- */

body .contact input[type="text"],
body .contact input[type="email"],
body .contact input[type="tel"],
body .contact textarea,
body .contact select{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;

  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.25;

  transition: border-color .15s ease, box-shadow .15s ease;
}

body .contact textarea{
  min-height: 160px;
  resize: vertical;
}

body .contact input[type="text"]:focus,
body .contact input[type="email"]:focus,
body .contact input[type="tel"]:focus,
body .contact textarea:focus,
body .contact select:focus{
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 4px rgba(30,115,190,.12);
  outline: none;
}

/* odstępy między polami */
#contact-form .control-group,
#contact-form .form-group{
  margin-bottom: 16px !important;
}

/* ----------------
   PRZYCISK
   ---------------- */

body .contact .btn,
body .contact button[type="submit"],
body .contact input[type="submit"]{
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
}

/* ----------------
   NOTKI / UKRYWANIE
   ---------------- */

.pm-required-note{
  margin: 0 0 12px;
  font-size: 14px;
  opacity: .75;
  text-align: left;
}

/* ukryj systemowy "spacer" "* Pole wymagane" */
#contact-form .control-group.field-spacer,
#contact-form #jform_spacer-lbl{
  display: none !important;
}

/* usuń "(opcjonalnie)" */
#contact-form .optional{
  display: none !important;
}

/* usuń ikonę/adres */
.contact-address,
.contact-address dt,
.contact-address .jicons-icons,
.contact-address img[src*="con_address.png"]{
  display: none !important;
}

/* ukryj "Napisz do Nas", ale zostaw odstęp */
.contact h3,
.contact .page-header h3,
.contact .page-header h2{
  visibility: hidden !important;
}

/* ----------------
   BOOTSTRAP / FORM-HORIZONTAL – RESET
   (żeby nie robił pustej lewej kolumny)
   ---------------- */

#contact-form.form-horizontal .control-label{
  float: none !important;
  width: 100% !important;
  text-align: left !important;
}

#contact-form.form-horizontal .controls{
  margin-left: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

/* ----------------
   RODO – wygląd checkboxa
   ---------------- */

#contact-form .pm-rodo-consent .controls{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#contact-form .pm-rodo-consent label.checkbox{
  padding-left: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important; /* odstęp checkbox–tekst */
}

#contact-form .pm-rodo-consent label.checkbox input[type="checkbox"]{
  margin: 3px 0 0 0 !important;
  position: static !important;
  float: none !important;
}

#contact-form .pm-rodo-text{
  font-weight: 400;
  opacity: .9;
}

#contact-form .pm-rodo-text a{
  text-decoration: underline;
}

/* ----------------
   CAPTCHA – bez wcięć i bez “pustej kolumny”
   ---------------- */

#contact-form .control-group:has(#jform_captcha) .control-label,
#contact-form .control-group:has(#jform_captcha) .controls{
  float: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
}

#contact-form .control-group:has(#jform_captcha) .control-label label{
  margin: 0 0 6px 0 !important;
}

#contact-form #jform_captcha.g-recaptcha{
  margin: 6px 0 0 !important;
}

/* ----------------
   DESKTOP: 2. WIERSZ = RODO (lewo) + CAPTCHA (prawo)
   - bez ruszania mobile
   ---------------- */

@media (min-width: 992px){

  /* Zbij marginesy fieldsetów, żeby wszystko było w jednej ramce */
  #contact-form > fieldset{
    border: 0;
    margin: 0;
    padding: 0;
  }

  /* Zrób miejsce na “wiersz 2” */
  #contact-form > fieldset:first-of-type{
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Wiersz 2: dwa bloki obok siebie (z zawijaniem) */
  #contact-form .pm-rodo-consent{
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top;
    margin: 0 !important;
  }

  #contact-form .control-group:has(#jform_captcha){
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top;
    margin: 0 0 0 24px !important;
  }

  /* jeśli okno węższe – niech się zawiną (dalej desktop) */
  @media (max-width: 1100px){
    #contact-form .pm-rodo-consent,
    #contact-form .control-group:has(#jform_captcha){
      width: 100%;
      margin-left: 0 !important;
    }
  }

  /* przycisk: pełna szerokość i zawsze pod spodem */
  #contact-form > .control-group{
    clear: both;
    width: 100% !important;
    margin-top: 16px !important;
  }
}

/* ----------------
   MOBILE – nic nie zmieniamy w kolejności/układzie
   (reguły desktop są w min-width:992px)
   ---------------- */

@media (max-width: 991px){
  body .contact form#contact-form,
  body .contact .contact-form form,
  body .contact form{
    padding: 16px;
  }
}

/* ===== DESKTOP: RODO + CAPTCHA zawsze w jednej linii (flex) ===== */
@media (min-width: 992px){

  /* Zbuduj wspólny "wiersz 2" na bazie rodzica (formularza) */
  #contact-form{
    position: relative;
  }

  /* Ustaw oba bloki jako flex-układ w jednym wierszu */
  #contact-form .pm-rodo-consent,
  #contact-form .control-group:has(#jform_captcha){
    display: block; /* reset inline-block */
    width: auto;
    margin: 0 !important;
  }

  /* Robimy flex z dwóch elementów używając “mostka”: drugi fieldset nie przeszkadza,
     bo flex robimy na wspólnym kontenerze wizualnym (formularzu) poprzez wrapper:
     najprościej: ustawiamy RODO i Captcha jako elementy flex w tej samej “linii”
     poprzez float:none i wspólny wiersz z flex-wrap:nowrap.
  */
  #contact-form .pm-rodo-consent{
    float: left !important;
    width: calc(100% - 328px) !important; /* 304 captcha + 24 odstępu */
    padding-right: 24px;
  }

  #contact-form .control-group:has(#jform_captcha){
    float: right !important;
    width: 304px !important;  /* realna szerokość reCAPTCHA */
  }

  /* Wyrównanie do góry i czyste “dno” */
  #contact-form .pm-rodo-consent,
  #contact-form .control-group:has(#jform_captcha){
    vertical-align: top;
  }

  /* Żeby kolejny element (przycisk) nie wskakiwał obok */
  #contact-form > .control-group{
    clear: both !important;
  }

  /* Jeśli ekran za wąski – zawijamy (wciąż tylko desktop) */
  @media (max-width: 1100px){
    #contact-form .pm-rodo-consent,
    #contact-form .control-group:has(#jform_captcha){
      float: none !important;
      width: 100% !important;
      padding-right: 0 !important;
    }
  }
}

/* ODSTĘP: pod CAPTCHA (najpewniejsze) */
#contact-form .control-group:has(#jform_captcha){
  padding-bottom: 18px !important;  /* odstęp przed przyciskiem */
}

/* ODSTĘP: dodatkowo na przycisku (gdybyś miał/ustawił klasę) */
#contact-form .pm-submit-row,
#contact-form .control-group.pm-submit-row{
  margin-top: 18px !important;
}
/* Większy odstęp pod napisem "Formularz kontaktowy" (legend) */
#contact-form fieldset > legend{
  margin-bottom: 18px !important;  /* zwiększ/zmniejsz wg uznania */
  padding-bottom: 0 !important;
}
/* Przycisk = kolor logo PANMEDICA */
:root{
  --pm-logo: #0DA4DE;
}

#contact-form .btn.btn-primary{
  background: var(--pm-logo) !important;
  border-color: var(--pm-logo) !important;
  color: #fff !important;
}

#contact-form .btn.btn-primary:hover,
#contact-form .btn.btn-primary:focus{
  filter: brightness(0.92);
}
/* Komunikat błędu na dole formularza */
#pm-form-errors.pm-form-errors{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,165,0,.55);
  background: rgba(255,165,0,.12);
  color: #333;
  font-weight: 600;
}

/* Ukryj górny systemowy komunikat (pusta pomarańczowa ramka) na stronie Kontakt */
body.itemid111 #system-message-container{
  display: none !important;
}

/* Ukryj PUSTY alert (bez treści) na górze */
.alert.alert-error.alert-danger:has(.alert-heading:empty){
  display: none !important;
}

/* Dodatkowo: jeśli bywa pusty bez <h4>, ukryj gdy w środku nie ma tekstu */
.alert.alert-error.alert-danger:empty{
  display: none !important;
}
/* Ten sam box na dole: warianty ERROR / SUCCESS */
#pm-form-errors.pm-form-errors.pm-form-success{
  border: 1px solid rgba(40,167,69,.45);
  background: rgba(40,167,69,.12);
}

#pm-form-errors.pm-form-errors.pm-form-error{
  border: 1px solid rgba(255,165,0,.55);
  background: rgba(255,165,0,.12);
}
#jform_contact_email-lbl::after{
  content: " *";
  color: #c00;
  font-weight: 700;
}
/* Czarna gwiazdka przy etykiecie E-mail */
#jform_contact_email-lbl::after{
  content: " *";
  color: #000;
  font-weight: 700;
}