/* =========================================================================
   LAYOUT
   Core grid, container, and section patterns
   ========================================================================= */

/* Container Pattern */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Section Wrapper */
.section {
  padding-block: clamp(var(--space-48), 8vw, var(--space-120));
}

.section--alt {
  background-color: var(--color-surface-secondary);
}

/* Common Grid Layouts */
.grid-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.grid-3-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

.grid-4-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

/* Responsive Grid Upgrades */
@media (min-width: 48em) {
  /* 768px */
  .grid-2-col,
  .grid-3-col,
  .grid-4-col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
}

@media (min-width: 64em) {
  /* 1024px */
  .grid-3-col {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-40);
  }

  .grid-4-col {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-40);
  }
}

/* Common Flex Layouts */
.flex-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #2b2b2b inset !important;

  -webkit-text-fill-color: #fff !important;

  transition: background-color 5000s ease-in-out 0s;
  color: #fff !important;
}
/* ========================
ERROR TEXT
======================== */

.error-text {
  color: #ff0000;
  font-size: 13px;
  margin-top: 5px;
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

/* ========================
INPUT ERROR
======================== */

.input-error {
  border: 1px solid #ff0000 !important;
}

/* PHONE INPUT FIX */

.form-group .iti {
  width: 100%;
  display: flex;
  align-items: center;
}

.form-group .iti input {
  height: 56px; /* match your other inputs */

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  line-height: 56px; /* vertical center trick */

  display: flex;
  align-items: center;
}

/* dial code alignment */

.iti--separate-dial-code .iti__selected-flag {
  height: 56px;

  display: flex;
  align-items: center;
}

/* ========================
PLACEHOLDER STYLE
======================== */

.iti input::placeholder {
  color: #888;
  font-size: 14px;
}
.iti__search-input {
  color: #000 !important;
}

/* ========================
SUBMIT
======================== */

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}