/* =========================================================
   SULVEO — 8. Contact Section & Form Card
   ========================================================= */

.section.contact,
.contact {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: 4.5rem 2.5rem;
  scroll-margin-top: var(--header-h, 60px);
}

@media (min-width: 1024px) {
  .section.contact,
  .contact {
    height: calc(100vh - var(--header-h, 60px));
    height: calc(100dvh - var(--header-h, 60px));
    min-height: calc(100vh - var(--header-h, 60px));
    max-height: calc(100vh - var(--header-h, 60px));
    padding-block: clamp(.5rem, 1.5vh, 1.25rem);
    scroll-margin-top: var(--header-h, 60px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .contact__layout {
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(1.5rem, 2.5vw, 3rem);
    align-items: center;
    width: 100%;
  }
  .contact .h2 {
    font-size: clamp(1.85rem, 2.5vw, 2.5rem);
    line-height: 1.25;
    margin-top: 1rem;
  }
}

.glow--contact {
  top: -6rem;
  right: 20%;
  width: 28rem;
  height: 28rem;
  background: rgb(var(--bronze-rgb) / .18);
  filter: blur(140px);
}
.contact__layout { position: relative; display: grid; gap: 2rem; width: 100%; }
.contact__desc {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: clamp(.88rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: var(--sand);
}

/* Bottom Golden Hairline */
.contact .hairline--bottom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  top: auto;
  height: 1px;
  background: linear-gradient(to left, transparent, rgb(var(--bronze-rgb) / .7), transparent);
  pointer-events: none;
  z-index: 5;
}

/* WhatsApp Direct Card */
.wa-card {
  position: relative;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid rgb(var(--wa-rgb) / .4);
  border-radius: 1.25rem;
  background: rgb(var(--wa-rgb) / .1);
  padding: 1rem 1.25rem;
  transition: .3s;
}
.wa-card:hover {
  background: rgb(var(--wa-rgb) / .2);
  border-color: rgb(var(--wa-rgb) / .7);
}
.wa-card__icon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--wa);
  color: var(--ink);
}
.wa-card__icon svg { position: relative; width: 1.6rem; height: 1.6rem; }
.wa-card strong { display: block; font-size: 1.125rem; color: var(--wa); }
.wa-card small { display: block; margin-top: .25rem; font-size: .875rem; color: var(--sand); }
.wa-card__arrow {
  margin-inline-start: auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wa);
  transition: transform .3s;
}
.wa-card:hover .wa-card__arrow { translate: -6px 0; }
[dir="ltr"] .wa-card:hover .wa-card__arrow { translate: 6px 0; }

/* Contact Details Rows */
.info { margin-top: 1.75rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .info { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.info-row {
  display: flex;
  align-items: center;
  gap: .95rem;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgb(var(--card-rgb) / .6);
  padding: .85rem 1.15rem;
  transition: border-color .3s, background-color .3s;
}
.info-row:hover {
  border-color: rgb(var(--bronze-rgb) / .5);
  background: rgb(var(--card-rgb) / .85);
}
.info-row__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .75rem;
  border: 1px solid rgb(var(--bronze-rgb) / .25);
  background: rgb(var(--bronze-rgb) / .1);
  color: var(--bronze-lt);
}
.info-row__icon svg { width: 1.25rem; height: 1.25rem; }
.info-row > div { min-width: 0; }
.info-row small { display: block; font-size: .76rem; color: var(--sand); }
.info-row p {
  margin-top: .2rem;
  font-weight: 600;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contact Form Card with Curved Golden Border */
.form-card {
  position: relative;
  border-width: 2.5px 1.5px 1.5px 1.5px;
  border-style: solid;
  border-color: transparent;
  border-radius: 1.5rem;
  background:
    linear-gradient(var(--coal), var(--coal)) padding-box,
    linear-gradient(to bottom, transparent 0%, transparent 32px, var(--line) 54px, var(--line) 100%) border-box,
    linear-gradient(to left, var(--bronze-lt), var(--bronze), var(--bronze-dk)) border-box;
  padding: clamp(2.2rem, 3.8vh, 3.1rem) clamp(1.25rem, 2vw, 2rem);
  box-shadow: 0 16px 40px -10px rgb(0 0 0 / .45);
  overflow: hidden;
}

/* Form Fields & Controls */
.form { display: grid; gap: clamp(.55rem, 1.1vh, .85rem); }
.form__row { display: grid; gap: clamp(.55rem, 1vw, .85rem); }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, 1fr); } }
.form label { display: block; margin-bottom: .3rem; font-size: .76rem; font-weight: 600; color: var(--sand); }
.field {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: rgb(var(--ink-rgb) / .6);
  padding: clamp(.55rem, 1vh, .72rem) .95rem;
  font-size: .84rem;
  color: var(--cream);
  outline: 0;
  transition: .3s;
}
.field::placeholder { color: rgb(var(--sand-rgb) / .5); }
.field:focus { border-color: rgb(var(--bronze-rgb) / .7); background: var(--ink); }
.field[dir="ltr"] { text-align: left; }
select.field option { background: var(--ink); color: var(--cream); }
textarea.field { resize: none; min-height: 80px; height: clamp(80px, 9.5vh, 105px); }
.form__error {
  border: 1px solid rgb(239 68 68 / .4);
  border-radius: .5rem;
  background: rgb(239 68 68 / .1);
  padding: .4rem .75rem;
  font-size: .78rem;
  color: #fca5a5;
}
.form__success {
  border: 1px solid rgb(var(--wa-rgb) / .4);
  border-radius: .5rem;
  background: rgb(var(--wa-rgb) / .12);
  padding: .4rem .75rem;
  font-size: .78rem;
  color: var(--wa);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form__privacy {
  text-align: center;
  font-size: .72rem;
  color: rgb(var(--sand-rgb) / .7);
  margin-top: .5rem;
}
.form .btn { margin-top: .4rem; padding-block: clamp(.68rem, 1.2vh, .9rem); font-size: .92rem; font-weight: 700; }
.btn__label, .btn__sending { display: inline-flex; align-items: center; gap: .5rem; }
.btn__send-icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
.form:not(.is-sending) .btn__sending, .form.is-sending .btn__label { display: none; }

/* Toast Notification System */
.toast-container {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
  width: min(calc(100% - 2rem), 480px);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.15rem;
  border-radius: 1rem;
  background: rgb(var(--coal-rgb) / .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: 0 16px 36px -8px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast--hiding {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}
.toast--success {
  border-color: rgb(var(--wa-rgb) / .5);
  box-shadow: 0 16px 36px -8px rgb(0 0 0 / .6), 0 0 24px rgb(var(--wa-rgb) / .18);
}
.toast--error {
  border-color: rgb(239 68 68 / .5);
  box-shadow: 0 16px 36px -8px rgb(0 0 0 / .6), 0 0 24px rgb(239 68 68 / .18);
}
.toast__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
}
.toast--success .toast__icon {
  background: rgb(var(--wa-rgb) / .16);
  color: var(--wa);
  border: 1px solid rgb(var(--wa-rgb) / .35);
}
.toast--error .toast__icon {
  background: rgb(239 68 68 / .16);
  color: #f87171;
  border: 1px solid rgb(239 68 68 / .35);
}
.toast__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.toast__message {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  word-break: break-word;
}
.toast__close {
  flex: none;
  background: transparent;
  border: 0;
  color: var(--sand);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: color .2s, background .2s;
}
.toast__close:hover {
  color: var(--cream);
  background: rgb(255 255 255 / .08);
}
.toast__close svg {
  width: 1rem;
  height: 1rem;
}

/* Success State */
.form-success {
  display: none;
  min-height: 18rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 1.5rem;
}
.form-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgb(var(--wa-rgb) / .4);
  background: rgb(var(--wa-rgb) / .15);
  color: var(--wa);
}
.form-success__icon svg { width: 1.85rem; height: 1.85rem; stroke-width: 2.4; }
.form-success h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.form-success p { margin: .5rem 0 1.25rem; max-width: 22rem; color: var(--sand); font-size: .85rem; }
.form-card.is-success .form { display: none; }
.form-card.is-success .form-success { display: flex; }

/* Compact screens (height < 700px) */
@media (min-width: 1024px) and (max-height: 700px) {
  .contact .h2 { font-size: 1.65rem; margin-top: .65rem; }
  .contact__desc { margin-top: .65rem; font-size: .84rem; display: block; }
  .info { margin-top: 1rem; gap: .65rem; }
  .info-row { padding: .6rem .85rem; border-radius: .85rem; }
  .info-row__icon { width: 2.2rem; height: 2.2rem; }
  .form-card { padding: 1.35rem 1.15rem; }
  .form { gap: .4rem; }
  .form__row { gap: .4rem; }
  .form label { margin-bottom: .2rem; font-size: .72rem; }
  .field { padding: .45rem .75rem; font-size: .8rem; }
  textarea.field { min-height: 60px; height: 60px; }
  .form .btn { margin-top: .25rem; padding-block: .52rem; font-size: .88rem; }
  .form__privacy { margin-top: .3rem; }
}