/* Popup Form Section — isolated styles for this section only */

/* Fonts (use provided assets only) */
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_italic_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_700_italic_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

.popupform {
  --pf-bg: #F8F2E9;
  --pf-ink: #170B01;
  --pf-accent: #1C1BAE;
  --pf-soft1: #ECBDFB;
  --pf-soft2: #FDF18B;

  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--pf-ink);
}

/* Overlay */
.popupform__overlay {
  position: fixed;
  inset: 0;
  background: #170B01;
  opacity: 0.6;
  z-index: 992;
}

/* Dialog */
.popupform__dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  background: #BDCFFB;

  border-radius: 3px;
  z-index: 993;
  padding: 25px 25px 25px;
}

/* Close */
.popupform__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0px solid var(--pf-ink);
  font-size: 20px;
  border-radius: 3px;
  text-align: center;
  font-weight: 400;
  color: var(--pf-ink);
  cursor: pointer;
}


/* Header */
.popupform__header { margin-bottom: 8px; }
.popupform__title {
  margin: 0 34px 5px 0;
  font-family: "Arizona Flare", serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  color: var(--pf-ink);
}
.popupform__desc {
  margin: 0 0 20px 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 300;
  color: var(--pf-ink);
}

/* Form */
.popupform__form { display: grid; gap: 10px; }
.popupform__field { display: grid; gap: 0px; }
.popupform__field--checkbox { align-items: start; }

.popupform__label {
  font-family: "Helveesti";
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--pf-ink);
}

.popupform__input,
.popupform__textarea {
  appearance: none;
  width: 100%;
  border: transparent;
  border-bottom: 1px solid var(--pf-ink);
  background: transparent;
  color: #170B01;
  padding: 10px 12px;
  font-size: 14px;
}


.popupform__checkbox {
  display: inline-flex;
  gap: 3px;
  align-items: flex-start;
  font-size: 13px;
}
.popupform__checkbox a {
  color: var(--pf-accent);
  text-decoration: underline;
}

/* Errors & Status */
.popupform__error {
  min-height: 14px;
  font-size: 12px;
  color: var(--pf-accent);
}
.popupform__status {
  margin-top: 4px;
  font-size: 14px;
  color: #170B01;
}

/* Actions */
.popupform__actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.popupform__submit {
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  appearance: none;
  border: 2px solid white;
  background: #170B01;
  color: white;
  font-weight: 400;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.popupform__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Toast */
.popupform__toast[hidden] { display: none; }

.popupform__toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 900; /* above dialog(800) & overlay(700) */
  background: #BDCFFB;      /* #FDF18B */
  color: #170B01;             /* #170B01 */
  border: 1px solid white;  /* #170B01 */
  border-radius: 999px;
  padding: 10px 16px;
  font-family: "Helveesti";
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  max-width: min(92vw, 520px);
}

@media (max-width: 450px) {
    .popupform__title {
        font-size: 18px;
    }
    .popupform__desc {
        font-size: 14px;
    }
}

@media (max-width: 325px) {
  
}