/* ==========================================================================
   CONTACT SECTION
   --------------------------------------------------------------------------
   1. Section & header
   2. Layout
   3. Cards (shared)
   4. Left column: info list & stats
   5. Form: base
   6. Form: floating fields & label
   7. Form: select & dropdown
   8. Form: submit button
   9. Form: validation errors
  10. Form: spinner & response message
  11. Responsive
   ========================================================================== */


/* ==========================================================================
   1. SECTION & HEADER
   ========================================================================== */
.contact-section {
  background: var(--bap-paper);
  color: var(--color-text);
}

.contact__head {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.contact__pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  font: 600 0.75rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lucky-text);
  background: var(--lucky-soft);
  border-radius: var(--radius-full);
}

.contact__title {
  margin: 1rem 0 0.75rem;
  color: var(--bap-navy);
}

.contact__desc {
  margin: 0;
  color: var(--bap-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
}


/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.contact__container {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.75rem;
  align-items: start;
}

.contact__info {
  display: grid;
  gap: 1.25rem;
}


/* ==========================================================================
   3. CARDS (shared by left info card and right form card)
   ========================================================================== */
.contact__card,
.contact__form-wrapper {
  background: #fff;
  border: 1px solid var(--bap-line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}

.contact__card-title,
.contact__form-title {
  margin: 0 0 1.25rem;
  font: 700 1.25rem/1.3 var(--font-display);
  color: var(--bap-navy);
}


/* ==========================================================================
   4. LEFT COLUMN: INFO LIST & STATS
   ========================================================================== */

/* ---- Info list ---- */
.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.contact__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: var(--bap-muted);
  line-height: 1.5;
}

.contact__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  background: var(--bap-soft);
  color: var(--bap);
  border-radius: var(--radius-md);
}

.contact__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Stats ---- */
.contact__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--bap) 0%, var(--bap-dark) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
}

.contact__stat strong {
  display: block;
  font: 800 1.5rem/1.1 var(--font-display);
}

.contact__stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--night-text);
}

.contact__stat + .contact__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   5. FORM: BASE
   ========================================================================== */
.contact__form-wrapper .wpcf7 form {
  margin: 0;
}

.contact__form-wrapper .wpcf7-form-control-wrap {
  display: block;
}

.contact__form-wrapper .contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

.contact__form-wrapper .contact__disclaimer {
  margin: 0.875rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--bap-muted);
}


/* ==========================================================================
   6. FORM: FLOATING FIELDS & LABEL
   ========================================================================== */
.contact__form-wrapper .float {
  position: relative;
  margin-bottom: 1.5rem;
}

/* ---- Input / select / textarea ---- */
.contact__form-wrapper .float .contact__input,
.contact__form-wrapper .float .contact__select,
.contact__form-wrapper .float .contact__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1.5rem 0 0.5rem;
  font: 400 1rem/1.4 var(--font-body);
  color: var(--bap-navy);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--bap-line);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s;
}

.contact__form-wrapper .float .contact__textarea {
  min-height: 90px;
  resize: vertical;
}

.contact__form-wrapper .float .contact__input:hover,
.contact__form-wrapper .float .contact__select:hover,
.contact__form-wrapper .float .contact__textarea:hover {
  border-bottom-color: #b7c8df;
}

/* placeholder "." is only a trigger for :placeholder-shown, keep it invisible */
.contact__form-wrapper .float .contact__input::placeholder,
.contact__form-wrapper .float .contact__textarea::placeholder {
  color: transparent;
}

/* ---- Label ---- */
.contact__form-wrapper .float .contact__label {
  position: absolute;
  left: 0;
  top: 1.45rem;
  margin: 0;
  font: 400 1rem/1.2 var(--font-body);
  color: var(--bap-muted);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

/* label floats up: focused / filled / select (always filled) */
.contact__form-wrapper .float:focus-within .contact__label,
.contact__form-wrapper .float:has(input:not(:placeholder-shown)) .contact__label,
.contact__form-wrapper .float:has(textarea:not(:placeholder-shown)) .contact__label,
.contact__form-wrapper .float--static .contact__label {
  transform: translateY(-1.2rem) scale(0.78);
  font-weight: 600;
}

.contact__form-wrapper .float:focus-within .contact__label {
  color: var(--bap);
}


/* ==========================================================================
   7. FORM: SELECT & DROPDOWN
   ========================================================================== */

/* ---- Fallback arrow (browsers without base-select) ---- */
.contact__form-wrapper .float .contact__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343597A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1rem;
}

/* ---- Custom dropdown (Chrome / Edge 135+) ---- */
@supports (appearance: base-select) {
  .contact__form-wrapper .float .contact__select,
  .contact__form-wrapper .float .contact__select::picker(select) {
    appearance: base-select;
  }

  /* closed box */
  .contact__form-wrapper .float .contact__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: none;
    padding-right: 0;
  }

  /* arrow */
  .contact__form-wrapper .float .contact__select::picker-icon {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    border-right: 2px solid var(--bap-muted);
    border-bottom: 2px solid var(--bap-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
  }

  .contact__form-wrapper .float .contact__select:open::picker-icon {
    transform: rotate(-135deg) translateY(-2px);
  }

  /* dropdown panel */
  .contact__form-wrapper .float .contact__select::picker(select) {
    min-width: anchor-size(width);
    max-width: anchor-size(width);
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--bap-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-board);
  }

  /* options */
  .contact__form-wrapper .float .contact__select option {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--bap-navy);
    background: transparent;
    cursor: pointer;
    transition: background 0.12s;
  }

  .contact__form-wrapper .float .contact__select option:hover,
  .contact__form-wrapper .float .contact__select option:focus-visible {
    background: var(--bap-soft);
    outline: none;
  }

  .contact__form-wrapper .float .contact__select option:checked {
    background: var(--bap-soft);
    font-weight: 600;
  }

  /* checkmark (Font Awesome) */
  .contact__form-wrapper .float .contact__select option::checkmark {
    content: "\f00c";                  /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;                  /* required for the Solid set */
    font-size: 0.8rem;
    color: var(--lucky-dark);
  }
}


/* ==========================================================================
   8. FORM: SUBMIT BUTTON
   ========================================================================== */
.contact__form-wrapper .wpcf7-form .contact__submit {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.95rem 1.5rem;
  font: 700 1rem var(--font-display);
  color: var(--color-border);
  background: var(--bap-navy);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}

.contact__form-wrapper .wpcf7-form .contact__submit:hover {
  background: var(--bap);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgb(55 61 53 / 70%);
}

.contact__form-wrapper .wpcf7-form .contact__submit:focus-visible {
  outline: 3px solid var(--bap);
  outline-offset: 2px;
}

/* dim and lock the button while sending */
.contact__form-wrapper form.submitting .contact__submit {
  opacity: 0.6;
  pointer-events: none;
}


/* ==========================================================================
   9. FORM: VALIDATION ERRORS
   ========================================================================== */
.contact__form-wrapper .float:has(.wpcf7-not-valid) .contact__label {
  color: #c03030;
}

.contact__form-wrapper .float .wpcf7-not-valid {
  border-bottom-color: #d64545;
}

.contact__form-wrapper .wpcf7-not-valid-tip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: #c03030;
}


/* ==========================================================================
   10. FORM: SPINNER & RESPONSE MESSAGE
   ========================================================================== */

/* ---- Spinner ---- */
.contact__form-wrapper .wpcf7-spinner {
  display: none;
  width: 22px;
  height: 22px;
  margin: 0.9rem auto 0;
  background: none;
  border: 3px solid var(--bap-soft);
  border-top-color: var(--bap);
  border-radius: 50%;
  opacity: 1;
  animation: bap-spin 0.7s linear infinite;
}

.contact__form-wrapper form.submitting .wpcf7-spinner {
  display: block;                /* chỉ hiện khi đang gửi */
  visibility: visible;
}

.contact__form-wrapper .wpcf7-spinner::before {
  display: none; /* remove default dot */
}

@keyframes bap-spin {
  to { transform: rotate(360deg); }
}

/* ---- Response message: base ---- */
.contact__form-wrapper .wpcf7-response-output {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.25rem 0 0 !important;
  padding: 0.9rem 1.1rem !important;
  font-size: 0.9375rem;
  line-height: 1.45;
  border: 1.5px solid var(--bap-line) !important;
  border-radius: var(--radius-md);
  background: var(--bap-paper);
  color: var(--bap-muted);
}

.contact__form-wrapper .wpcf7-response-output::before {
  flex: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Dấu * đỏ cho ô bắt buộc */
.contact__form-wrapper .contact__label.is-required::after {
  content: " *";
  color: #d64545;
}

/* ---- Response message: success ---- */
.contact__form-wrapper form.sent .wpcf7-response-output {
  border-color: var(--lucky) !important;
  background: var(--lucky-soft);
  color: var(--lucky-text);
}

.contact__form-wrapper form.sent .wpcf7-response-output::before {
  content: "\f058";                    /* circle-check */
  color: var(--lucky-dark);
}

/* ---- Response message: error (missing fields, failed, spam, unaccepted) ---- */
.contact__form-wrapper form.invalid .wpcf7-response-output,
.contact__form-wrapper form.failed .wpcf7-response-output,
.contact__form-wrapper form.spam .wpcf7-response-output,
.contact__form-wrapper form.unaccepted .wpcf7-response-output {
  border-color: #d64545 !important;
  background: #fff6f6;
  color: #c03030;
}

.contact__form-wrapper form.invalid .wpcf7-response-output::before,
.contact__form-wrapper form.failed .wpcf7-response-output::before,
.contact__form-wrapper form.spam .wpcf7-response-output::before,
.contact__form-wrapper form.unaccepted .wpcf7-response-output::before {
  content: "\f06a";                    /* circle-exclamation */
  color: #d64545;
}

/* Autofill: bỏ nền xanh của trình duyệt */
.contact__form-wrapper .float .contact__input:-webkit-autofill,
.contact__form-wrapper .float .contact__input:-webkit-autofill:hover,
.contact__form-wrapper .float .contact__input:-webkit-autofill:focus,
.contact__form-wrapper .float .contact__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;  /* phủ trắng, trùng nền card */
  -webkit-text-fill-color: var(--bap-navy) !important;     /* giữ màu chữ navy */
  caret-color: var(--bap-navy);
  transition: background-color 9999s ease-in-out 0s;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .contact__container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .contact__form-wrapper .contact__row {
    grid-template-columns: 1fr;
  }

  .contact__card,
  .contact__form-wrapper {
    padding: 1.5rem;
  }

  .contact__stats {
    grid-template-columns: 1fr;
  }

  .contact__stat + .contact__stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
  }
}