/* ── Fonts (already loaded in style.scss) ───────────────────────── */
/* Barlow Semi Condensed → headings, labels, buttons                 */
/* Manrope               → body, inputs, placeholders, error text    */

/* ── Container ─────────────────────────────────────────────────── */
#giftModal .modal-content {
  border: none;
  border-radius: 0.75rem; /* matches sub-menu border-radius */
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.24); /* matches card shadow in scss */
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────── */
#giftModal .modal-header {
  background-color: #112c4d; /* --Prussian-Blue */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.33rem 1.5rem; /* matches .header-menu-part padding rhythm */
}

#giftModal .modal-header h5 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.5rem; /* matches h6 inside header red bar */
  font-weight: 600;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #ffffff;
  margin: 0;
}

#giftModal .modal-header .btn-close {
  filter: brightness(0) invert(1); /* makes Bootstrap's × icon white */
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}

#giftModal .modal-header .btn-close:hover {
  opacity: 1;
}
#giftModal .modal-header .btn-close:focus {
  box-shadow: none;
}

/* ── Body ────────────────────────────────────────────────────────── */
#giftModal .modal-body {
  padding: 2rem 1.5rem;
  background-color: #ffffff;
}

/* ── Input ───────────────────────────────────────────────────────── */
#giftModal .form-control {
  width: 100%;
  height: 3.5rem; /* matches footer input[type="email"] height */
  padding: 0.91rem 1.25rem; /* matches footer input padding rhythm */
  border: 1px solid var(--Outer-Space, #474944); /* matches footer input border */
  border-radius: 0; /* matches .blue-btn border-radius */
  background-color: #ffffff;
  outline: none;
  box-shadow: none;

  font-family: "Manrope", sans-serif; /* global body font */
  font-size: 1.25rem; /* matches p / placeholder size */
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.025rem;
  color: #000000;

  transition: all 0.3s ease-in-out; /* matches global transition pattern */
}

#giftModal .form-control::placeholder {
  color: #000000; /* matches footer input placeholder color */
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.025rem;
}

#giftModal .form-control:focus {
  border-color: #0070ba; /* --Azul */
  box-shadow: 0; /* tinted Azul glow */
  outline: none;
}

#giftModal .form-control.is-invalid,
#giftModal .form-control.wpcf7-not-valid {
  border-color: #de0000; /* --Red, matches .wpcf7-not-valid */
}

/* ── Error message ───────────────────────────────────────────────── */
#gift_error {
  margin-top: 0.5rem;
  font-family: "Manrope", sans-serif; /* global body font */
  font-size: 1rem; /* slightly smaller than p (1.25rem) */
  font-weight: 600;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.025rem;
  color: #de0000; /* --Red */
  display: block;
}

/* ── Footer ──────────────────────────────────────────────────────── */
#giftModal .modal-footer {
  border-top: 1px solid #ededed; /* subtle separator, matches site dividers */
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  justify-content: center;
}

/* ── Button ──────────────────────────────────────────────────────── */
#giftModal .btn-primary {
  /* Matches .blue-btn exactly */
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.025rem;

  color: #ffffff;
  background-color: #0070ba; /* --Azul */
  border: none;
  border-radius: 0.25rem; /* matches .blue-btn */
  padding: 0.75rem 2rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease-in-out; /* matches global transition */
}

#giftModal .btn-primary:hover {
  background-color: #005c99; /* --Lapis-Lazuli, used on cart badge bg */
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12); /* matches sub-menu hover shadow */
}

#giftModal .btn-primary:active {
  background-color: #005c99;
  transform: translateY(0);
  box-shadow: none;
}

#giftModal .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 112, 186, 0.2);
}

@media screen and (max-width: 767px) {
  #giftModal .btn-primary {
    font-size: 1.2rem;
    padding: 0.55rem 0.425rem;
  }
}