#contact-layout-centered {
  display: flex;
  justify-content: center;  /* centers children horizontally */
  align-items: center;      /* centers children vertically if needed */
  text-align: center;       /* fallback for text nodes inside flex items */
  margin: 30px auto 20px auto; /* same top margin as heading-common's old 30px */
}

#contact-layout-centered .center-row {
  display: flex;
  justify-content: center;  /* centers children horizontally */
  align-items: center;      /* centers children vertically if needed */
  text-align: center;       /* fallback for text nodes inside flex items */
}

#contact-layout-centered #dynamicH1 {
  text-align: center;       /* visible part only */
}

#contact {
  max-width: 500px;  /* pick a width that looks nice */
  margin: 30px auto 60px auto; /* top 30px, bottom 40px */
  margin-top: 20px; /* additional breathing room below navbar */
  padding-left: 20px;
  padding-right: 20px;
}

.card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important; /* optional */
}

.card-body {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0; /* optional, if you don’t want extra spacing */
}

#formFejlec {
  box-sizing: border-box;
  color: rgb(82, 80, 82);
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
  line-height: 22.85px;
  margin: 0 0 10px 0; /* shorthand for top=0, right=0, bottom=10px, left=0 */
  text-align: center;
}

#contactForm {
  border-radius: 0.75rem;
    
  background: #f9f9f9;
  box-shadow:
		-0.85rem -0.85rem 1.75rem rgba(255, 255, 255, 0.98),
		0.85rem 0.85rem 2.00rem rgba(0, 0, 0, 0.22);

  color: #212529;
  overflow: hidden;
  
  font-size: 14px;
  line-height: 20px;

  /* spacing */
  padding: 19px;
  margin-bottom: 20px;
  min-height: 20px;

  /* box model */
  box-sizing: border-box;
}

#contact #contactForm .form-label {
  display: block;        /* ensure label is a block so width applies */
  width: 100%;           /* fill the available width so text-left is obvious */
  text-align: left;      /* left-align the label text */
  margin-bottom: .5rem;  /* keep default spacing */
  align-self: flex-start;/* if parent is a flex container, force label to the left */
  font-weight: 700;
}

#contactForm textarea.form-control {
  height: 214px;     /* smaller collapsed state */
  max-height: 214px; /* prevent infinite stretching */
  resize: none;  
}

.form-control:focus,
.form-select:focus {
  border-color: #66AFE9;  /* matches computed rgb(102,175,233) */
  border-width: 1px;       /* keep thickness same */
  box-shadow: 
    rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset, 
    rgba(102, 175, 233, 0.578) 0px 0px 7.7px 0px; /* exact glow */
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* smooth focus transition */
}

.card #elkuldGomb {
  flex: none !important;
  width: auto !important;
  display: inline-block !important;
  align-self: flex-end; /* float: right alternative in flex */
}

#contactForm .invalid-feedback {
  font-weight: 700;   /* bold text */
  color: #dc3545;     /* strong red */
  font-size: 0.9rem;  /* slightly bigger for emphasis */
}

#contactForm textarea.form-control + .invalid-feedback {
  margin-left: calc(42px + 1px); /* adjust 1.5rem to icon width + 1px for border */
}

#contactForm .contact-optin-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}

#contactForm .contact-optin-wrap #personalDataOptIn.form-check-input {
  grid-column: 1;
  grid-row: 1;
  width: 1.25em;
  height: 1.25em;
  margin: 0 0 0 12px;
  z-index: 1;
}

#contactForm .contact-optin-wrap .contact-optin-label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;

  font-size: 15px;
  line-height: 20px;

  background: #ededed;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.65rem;

  /* left padding reserves space for the overlaid checkbox */
  padding: 10px 12px 10px 44px;
  z-index: 0;
}

#contactForm .contact-optin-wrap .personal-data-block {
  grid-column: 1 / -1;

  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.15s ease-in-out;
}


#contactForm .contact-optin-wrap #personalDataOptIn:checked ~ .personal-data-block {
  pointer-events: auto;
  opacity: 1;
}

/* Center the SSR messages relative to the full form width */
#contactForm #success {
  text-align: center;
}

/* SSR fallback alert styling (success + warning) */
#contactForm #success .alert {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;

  width: auto;
  max-width: 100%;
  text-align: center;

  border-radius: 0.65rem;
  padding: 0.4rem 1rem;
  margin-top: 0.6rem !important;

  box-shadow: none;
  color: #000;
}

/* Never show Bootstrap validation icons on optional name/email (enabled or disabled) */
#contactForm #name,
#contactForm #email,
#contactForm.was-validated #name,
#contactForm.was-validated #email {
  background-image: none !important;
  padding-right: 0.75rem; /* normalize spacing if Bootstrap added room for icons */
}

#contactForm #success .alert-success {
  background-color: #d9f3df;
  border-color: #bde9c7;
  color: #000;
}

#contactForm #success .alert-danger {
  background-color: #f6d6d6;
  border-color: #efb9b9;
  color: #000;
}

/* SYNC: contact.css step-08-gon */