/* --------------------------------------------------- */
/* ---- Formulář zpětné vazby a reklamací – DESKTOP --- */
/* --------------------------------------------------- */
/*
 * Samostatný stylesheet modulu – enqueuje se jen na šabloně
 * template-pages/page-complaint.php (viz mgcf_enqueue_assets()).
 * Mobilní varianta je v complaint-form-mobile.less; oba soubory jsou
 * záměrně nezávislé, stejně jako less/desktop a less/mobile v motivu.
 *
 * PŘENOSITELNOST: brand se ladí přes proměnné níže (+ CSS proměnné --mgcf-*
 * na wrapperu). Při portu na jiný web se mění jen blok PER-PROJECT BRAND.
 *
 * Pozor: motiv má rem základ 10 px (1.6rem = 16px), globálně ruší outline
 * a dává všem inputům margin-bottom (global-basic.less, forms.less) –
 * formulář si proto :focus-visible i odsazení řeší sám.
 */
.section--complaint {
  padding-top: 16rem;
}
/* --------------------------------------------------- */
/* ----- Podnadpis stránky (page-complaint.php) ------- */
/* --------------------------------------------------- */
.section-subheading {
  display: block;
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-20);
  line-height: 1.4em;
  text-align: center;
  color: rgba(101, 57, 41, 0.75);
}
.section-subheading--margin-bottom {
  margin-bottom: 4rem;
}
/* --------------------------------------------------- */
/* ------------------- Formulář ---------------------- */
/* --------------------------------------------------- */
.mgcf-form {
  max-width: 100rem;
  margin: 0 auto;
  --mgcf-primary: #ca0832;
  --mgcf-main: #653929;
  --mgcf-error: #c03c0e;
  /* ---------------------- Dlaždice ---------------------- */
  /* ----------------------- Panely ----------------------- */
  /* ------------------------ Pole ------------------------ */
  /* --------------------- Smajlíky ----------------------- */
  /* ----------------------- Soubor ----------------------- */
  /* --------------------- Zaškrtávátko ------------------- */
  /* ---------------------- Odeslání ---------------------- */
  /* ----------------------- Výsledek --------------------- */
  /* --- Past na roboty – pro člověka neviditelná, ale ne display:none --- */
}
.mgcf-form input,
.mgcf-form select,
.mgcf-form textarea,
.mgcf-form button {
  font-family: 'Intro', sans-serif;
  font-weight: 400;
}
.mgcf-form :focus-visible {
  outline: 2px solid var(--mgcf-primary);
  outline-offset: 3px;
}
.mgcf-form__intro {
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-18);
  line-height: 1.6em;
  color: #653929;
  text-align: center;
  margin-bottom: 4rem;
}
.mgcf-form__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media screen and (max-width: 900px) {
  .mgcf-form__choices {
    grid-template-columns: 1fr;
  }
}
.mgcf-form__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  padding: 3.2rem 2.4rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 0.1rem 0.2rem rgba(56, 67, 76, 0.05), 0 0.4rem 1rem rgba(56, 67, 76, 0.2);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.mgcf-form__choice:hover {
  border-color: var(--mgcf-primary);
  transform: translateY(-0.3rem);
  box-shadow: 0 0.2rem 0.5rem rgba(56, 67, 76, 0.12), 0 0.6rem 1.6rem rgba(56, 67, 76, 0.28);
}
.mgcf-form__choice.is-active {
  border-color: var(--mgcf-primary);
  box-shadow: 0 0.1rem 0.3rem rgba(202, 8, 50, 0.2), 0 0.4rem 1rem rgba(202, 8, 50, 0.3);
}
.mgcf-form__choice-icon {
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  color: var(--mgcf-primary);
}
.mgcf-form__choice-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mgcf-form__choice-title {
  display: block;
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-20);
  line-height: 1.25em;
  color: #653929;
}
.mgcf-form__choice-text {
  display: block;
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.5em;
  color: rgba(101, 57, 41, 0.7);
}
.mgcf-form__panels {
  margin-top: 3rem;
}
.mgcf-form__panel {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: clamp(2.4rem, 4vw, 4.8rem);
  background: #fff3d6;
  border-radius: 0.5rem;
  box-shadow: 0 0.1rem 0.2rem rgba(56, 67, 76, 0.05), 0 0.4rem 1rem rgba(56, 67, 76, 0.2);
}
.mgcf-form__panel[hidden] {
  display: none;
}
.mgcf-form__title {
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-30);
  line-height: 1.1em;
  color: var(--mgcf-primary);
}
.mgcf-form__lead {
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-16);
  line-height: 1.6em;
  color: #653929;
  margin-top: -1.6rem;
}
.mgcf-form__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.4rem;
}
.mgcf-form__grid > .mgcf-form__field {
  grid-column: span 6;
}
.mgcf-form__grid > .mgcf-form__field--span-3 {
  grid-column: span 3;
}
.mgcf-form__grid > .mgcf-form__field--span-12 {
  grid-column: 1 / -1;
}
@media screen and (max-width: 900px) {
  .mgcf-form__grid > .mgcf-form__field--span-3 {
    grid-column: span 6;
  }
}
@media screen and (max-width: 660px) {
  .mgcf-form__grid > .mgcf-form__field,
  .mgcf-form__grid > .mgcf-form__field--span-3 {
    grid-column: 1 / -1;
  }
}
.mgcf-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.mgcf-form__label {
  display: block;
  padding: 0;
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-14);
  line-height: 1.4em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #653929;
}
.mgcf-form__required {
  color: var(--mgcf-primary);
}
.mgcf-form__optional {
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(101, 57, 41, 0.6);
}
.mgcf-form__hint {
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-14);
  line-height: 1.5em;
  color: rgba(101, 57, 41, 0.65);
}
.mgcf-form__error {
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-14);
  line-height: 1.4em;
  color: var(--mgcf-error);
}
.mgcf-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.mgcf-form select,
.mgcf-form textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.1rem 1.6rem;
  font-size: var(--font-size-16);
  line-height: 1.4em;
  color: #653929;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  transition: all 0.15s ease-in-out;
}
.mgcf-form input::placeholder,
.mgcf-form textarea::placeholder {
  color: rgba(101, 57, 41, 0.45);
  opacity: 1;
}
.mgcf-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
.mgcf-form select:focus,
.mgcf-form textarea:focus {
  border-color: var(--mgcf-main);
}
.mgcf-form textarea {
  min-height: 12rem;
  resize: vertical;
}
.mgcf-form__field.has-error input,
.mgcf-form__field.has-error select,
.mgcf-form__field.has-error textarea {
  border-color: var(--mgcf-error);
}
.mgcf-form__rating {
  border: 0;
  padding: 0;
  margin: 0;
}
.mgcf-form__rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 1.2rem;
}
.mgcf-form__rating-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.mgcf-form__rating-option {
  flex: 1 1 0;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 2rem 1.2rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  color: #653929;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.mgcf-form__rating-option svg {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  opacity: 0.55;
  transition: all 0.15s ease-in-out;
}
.mgcf-form__rating-option span {
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-15);
  line-height: 1.2em;
  text-align: center;
}
.mgcf-form__rating-option:hover {
  border-color: var(--mgcf-primary);
}
.mgcf-form__rating-input:checked + .mgcf-form__rating-option {
  border-color: var(--mgcf-primary);
  color: var(--mgcf-primary);
  box-shadow: 0 0.1rem 0.3rem rgba(202, 8, 50, 0.2), 0 0.4rem 1rem rgba(202, 8, 50, 0.3);
}
.mgcf-form__rating-input:checked + .mgcf-form__rating-option svg {
  opacity: 1;
  transform: scale(1.08);
}
.mgcf-form__rating-input:focus-visible + .mgcf-form__rating-option {
  outline: 2px solid var(--mgcf-primary);
  outline-offset: 3px;
}
.mgcf-form__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
}
.mgcf-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mgcf-form__file-button {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-16);
  line-height: 1.2em;
  color: var(--mgcf-primary);
  background-color: #fff;
  border: 1px solid var(--mgcf-primary);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.mgcf-form__file-button:hover {
  color: #fff;
  background-color: var(--mgcf-primary);
}
.mgcf-form__file-input:focus-visible + .mgcf-form__file-button {
  outline: 2px solid var(--mgcf-primary);
  outline-offset: 3px;
}
.mgcf-form__file-name {
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.4em;
  color: rgba(101, 57, 41, 0.65);
  word-break: break-word;
}
.mgcf-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 1.5em;
  color: #653929;
  cursor: pointer;
}
.mgcf-form__checkbox input[type="checkbox"] {
  display: inline-block;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.1rem 0 0;
  padding: 0;
  accent-color: #ca0832;
  cursor: pointer;
}
.mgcf-form__field--consent.has-error .mgcf-form__checkbox {
  color: var(--mgcf-error);
}
.mgcf-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin-top: 0.8rem;
}
.mgcf-form__submit {
  display: inline-block;
  padding: 1.2rem 4rem;
  font-family: 'Intro', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-18);
  line-height: 1.2em;
  color: #fff;
  background-color: var(--mgcf-primary);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.1rem 0.3rem rgba(202, 8, 50, 0.2), 0 0.4rem 1rem rgba(202, 8, 50, 0.3);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.mgcf-form__submit:hover {
  color: #653929;
  background-color: #f0c13a;
  box-shadow: none;
}
.mgcf-form__submit[disabled],
.mgcf-form__submit.is-sending {
  opacity: 0.5;
  cursor: not-allowed;
}
.mgcf-form__submit[disabled]:hover,
.mgcf-form__submit.is-sending:hover {
  color: #fff;
  background-color: var(--mgcf-primary);
}
.mgcf-form__consent-note {
  max-width: 48rem;
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-12);
  line-height: 1.5em;
  text-align: center;
  color: rgba(101, 57, 41, 0.6);
}
.mgcf-form__result {
  margin-top: 4rem;
  padding: 2rem 2.4rem;
  font-family: 'Haboro Slab', serif;
  font-weight: 500;
  font-size: var(--font-size-18);
  line-height: 1.6em;
  text-align: center;
  color: #653929;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}
.mgcf-form__result.is-success {
  background-color: rgba(32, 124, 14, 0.08);
  border-color: #207c0e;
}
.mgcf-form__result.is-error {
  background-color: rgba(192, 60, 14, 0.08);
  border-color: var(--mgcf-error);
}
.mgcf-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}