/* =========================================================
   CONTACT MODAL
   public/css/contact.css
========================================================= */


/* =========================================================
   BODY LOCK
========================================================= */

body.contact-modal-open {
  overflow: hidden;
}


/* =========================================================
   MODAL WRAPPER
========================================================= */

.contact-modal {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}

.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* =========================================================
   BACKDROP
========================================================= */

.contact-modal-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;

  background:
    rgba(3, 5, 10, .76);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  cursor: default;
}


/* =========================================================
   DIALOG
========================================================= */

.contact-modal-dialog {
  position: relative;
  z-index: 1;

  width:
    min(
      760px,
      100%
    );

  max-height:
    min(
      880px,
      calc(100vh - 48px)
    );

  overflow-y: auto;
  overscroll-behavior: contain;

  border:
    1px solid
    var(--line);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(139, 92, 246, .09),
      transparent 24rem
    ),
    var(--panel);

  box-shadow:
    0 32px 80px
    rgba(0, 0, 0, .38);

  transform:
    translateY(14px)
    scale(.985);

  transition:
    transform .22s ease;
}

.contact-modal.is-open
.contact-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   SCROLLBAR
========================================================= */

.contact-modal-dialog {
  scrollbar-width: thin;
  scrollbar-color:
    color-mix(
      in srgb,
      var(--accent) 34%,
      var(--line)
    )
    transparent;
}

.contact-modal-dialog::-webkit-scrollbar {
  width: 8px;
}

.contact-modal-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.contact-modal-dialog::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--accent) 32%,
      var(--line)
    );
}


/* =========================================================
   HEADER
========================================================= */

.contact-modal-header {
  position: sticky;
  top: 0;

  z-index: 3;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  padding:
    22px
    22px
    18px;

  border-bottom:
    1px solid
    var(--line);

  background:
    color-mix(
      in srgb,
      var(--panel) 95%,
      transparent
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.contact-modal-header-copy {
  min-width: 0;
}

.contact-modal-eyebrow {
  display: block;

  margin-bottom: 6px;

  color: var(--accent);

  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .16em;

  text-transform: uppercase;
}

.contact-modal-header h2 {
  margin: 0;

  color: var(--text);

  font-size:
    clamp(
      1.1rem,
      2vw,
      1.45rem
    );

  font-weight: 780;
  line-height: 1.2;
}

.contact-modal-header p {
  max-width: 560px;

  margin:
    8px
    0
    0;

  color: var(--text-faint);

  font-size: .63rem;
  line-height: 1.55;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.contact-modal-close {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: var(--bg-soft);

  color: var(--text-faint);

  font-size: .72rem;

  cursor: pointer;

  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.contact-modal-close:hover {
  color: var(--accent);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 38%,
      var(--line)
    );

  background: var(--accent-soft);

  transform:
    rotate(3deg);
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    15px
    16px;

  padding:
    20px
    22px
    22px;
}


/* =========================================================
   GLOBAL MESSAGE
========================================================= */

.contact-form-message {
  grid-column:
    1 / -1;

  min-height: 0;

  display: none;

  padding:
    10px
    12px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: var(--bg-soft);

  color: var(--text-soft);

  font-size: .56rem;
  line-height: 1.45;
}

.contact-form-message:not(:empty) {
  display: block;
}

.contact-form-message.is-error {
  border-color:
    color-mix(
      in srgb,
      #ef4444 38%,
      var(--line)
    );

  background:
    color-mix(
      in srgb,
      #ef4444 8%,
      var(--bg-soft)
    );

  color: #f87171;
}

.contact-form-message.is-success {
  border-color:
    color-mix(
      in srgb,
      #10b981 38%,
      var(--line)
    );

  background:
    color-mix(
      in srgb,
      #10b981 8%,
      var(--bg-soft)
    );

  color: #34d399;
}

.contact-form-message.is-info {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 35%,
      var(--line)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-soft) 48%,
      var(--bg-soft)
    );

  color: var(--accent);
}


/* =========================================================
   FIELD
========================================================= */

.contact-field {
  min-width: 0;

  display: grid;

  align-content: start;

  gap: 6px;
}

.contact-field-wide {
  grid-column:
    1 / -1;
}

.contact-field.is-hidden {
  display: none;
}

.contact-field-label {
  display: flex;
  align-items: center;

  gap: 4px;

  color: var(--text-soft);

  font-size: .53rem;
  font-weight: 700;
}

.contact-field-label strong {
  color: var(--accent);

  font-weight: 850;
}


/* =========================================================
   INPUTS
========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  outline: none;

  background: var(--bg-soft);

  color: var(--text);

  font: inherit;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.contact-field input,
.contact-field select {
  height: 39px;

  padding:
    0
    11px;
}

.contact-field select {
  padding-right: 34px;

  cursor: pointer;
}

.contact-field textarea {
  min-height: 135px;

  resize: vertical;

  padding:
    11px
    12px;

  line-height: 1.55;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  font-size: .61rem;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color:
    color-mix(
      in srgb,
      var(--text-faint) 72%,
      transparent
    );
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-color:
    color-mix(
      in srgb,
      var(--text-faint) 35%,
      var(--line)
    );
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 55%,
      var(--line)
    );

  background:
    color-mix(
      in srgb,
      var(--accent-soft) 18%,
      var(--bg-soft)
    );

  box-shadow:
    0
    0
    0
    3px
    color-mix(
      in srgb,
      var(--accent-soft) 72%,
      transparent
    );
}


/* =========================================================
   FIELD ERROR
========================================================= */

.contact-field.is-error
input,

.contact-field.is-error
select,

.contact-field.is-error
textarea {
  border-color:
    color-mix(
      in srgb,
      #ef4444 62%,
      var(--line)
    );

  box-shadow:
    0
    0
    0
    3px
    rgba(239, 68, 68, .07);
}


/* =========================================================
   FIELD HELP
========================================================= */

.contact-field-help {
  color: var(--text-faint);

  font-size: .47rem;
  line-height: 1.45;
}


/* =========================================================
   MESSAGE META
========================================================= */

.contact-message-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.contact-character-count {
  flex: 0 0 auto;

  color: var(--text-faint);

  font-size: .45rem;
  font-weight: 650;

  white-space: nowrap;
}

.contact-character-count.is-limit {
  color: #f59e0b;
}


/* =========================================================
   PRIVACY
========================================================= */

.contact-privacy {
  grid-column:
    1 / -1;

  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding:
    11px
    12px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background:
    color-mix(
      in srgb,
      var(--bg-soft) 82%,
      transparent
    );

  cursor: pointer;
}

.contact-privacy > input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.contact-privacy-box {
  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  display: grid;
  place-items: center;

  margin-top: 1px;

  border:
    1px solid
    var(--line);

  border-radius: 5px;

  background: var(--panel);

  color: transparent;

  font-size: .47rem;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.contact-privacy:hover
.contact-privacy-box {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 42%,
      var(--line)
    );
}

.contact-privacy
> input:focus-visible
+ .contact-privacy-box {
  box-shadow:
    0
    0
    0
    3px
    var(--accent-soft);
}

.contact-privacy
> input:checked
+ .contact-privacy-box {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 55%,
      var(--line)
    );

  background: var(--accent);

  color: #fff;
}

.contact-privacy-text {
  color: var(--text-faint);

  font-size: .5rem;
  line-height: 1.5;
}

.contact-privacy-text a {
  color: var(--accent);

  font-weight: 650;

  text-decoration: none;
}

.contact-privacy-text a:hover {
  text-decoration: underline;
}


/* =========================================================
   FORM INFO
========================================================= */

.contact-form-info {
  grid-column:
    1 / -1;

  display: flex;
  align-items: flex-start;

  gap: 9px;

  padding:
    10px
    11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent) 22%,
      var(--line)
    );

  border-radius: 9px;

  background:
    color-mix(
      in srgb,
      var(--accent-soft) 26%,
      var(--bg-soft)
    );
}

.contact-form-info > i {
  flex: 0 0 auto;

  margin-top: 2px;

  color: var(--accent);

  font-size: .62rem;
}

.contact-form-info p {
  margin: 0;

  color: var(--text-faint);

  font-size: .49rem;
  line-height: 1.5;
}


/* =========================================================
   HONEYPOT
========================================================= */

.contact-honeypot {
  position: absolute !important;

  left: -99999px !important;
  top: auto !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.contact-form-footer {
  grid-column:
    1 / -1;

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

  gap: 9px;

  padding-top: 4px;
}

.contact-form-footer
.button {
  min-height: 38px;
}


/* =========================================================
   LOADING
========================================================= */

.contact-form
button.is-loading {
  opacity: .72;

  cursor: wait;
}

.contact-form
button.is-loading i {
  animation:
    contactButtonPulse
    .8s
    ease-in-out
    infinite
    alternate;
}

@keyframes contactButtonPulse {
  from {
    opacity: .35;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   SUCCESS
========================================================= */

.contact-success {
  padding:
    44px
    24px;

  text-align: center;
}

.contact-success[hidden] {
  display: none;
}

.contact-success-icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin:
    0
    auto
    14px;

  border:
    1px solid
    color-mix(
      in srgb,
      #10b981 38%,
      var(--line)
    );

  border-radius: 14px;

  background:
    color-mix(
      in srgb,
      #10b981 12%,
      var(--bg-soft)
    );

  color: #34d399;

  font-size: 1rem;
}

.contact-success h2 {
  margin:
    0
    0
    8px;

  color: var(--text);

  font-size: 1.15rem;
  font-weight: 760;
}

.contact-success > p {
  max-width: 480px;

  margin:
    0
    auto;

  color: var(--text-faint);

  font-size: .59rem;
  line-height: 1.6;
}

.contact-success-ticket {
  width:
    min(
      260px,
      100%
    );

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin:
    20px
    auto;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--line);

  border-radius: 9px;

  background: var(--bg-soft);
}

.contact-success-ticket span {
  color: var(--text-faint);

  font-size: .51rem;
}

.contact-success-ticket strong {
  color: var(--accent);

  font-size: .68rem;
  font-weight: 800;
}


/* =========================================================
   FOOTER CONTACT BUTTON
========================================================= */

.footer-nav
.footer-link-button {
  appearance: none;

  padding: 0;

  border: 0;

  background: none;

  color: inherit;

  font: inherit;

  cursor: pointer;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

  .contact-modal {
    padding: 16px;
  }

  .contact-modal-dialog {
    max-height:
      calc(
        100vh - 32px
      );

    border-radius: 15px;
  }

  .contact-modal-header {
    padding:
      18px
      18px
      15px;
  }

  .contact-form {
    gap:
      13px;

    padding:
      17px
      18px
      19px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 580px) {

  .contact-modal {
    align-items: end;

    padding: 0;
  }

  .contact-modal-dialog {
    width: 100%;

    max-height:
      calc(
        100dvh - 10px
      );

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    border-radius:
      16px
      16px
      0
      0;
  }

  .contact-modal-header {
    gap: 15px;

    padding:
      17px
      15px
      14px;
  }

  .contact-modal-header p {
    font-size: .57rem;
  }

  .contact-form {
    grid-template-columns:
      1fr;

    gap: 13px;

    padding:
      16px
      15px
      20px;
  }

  .contact-field-wide,
  .contact-privacy,
  .contact-form-info,
  .contact-form-footer,
  .contact-form-message {
    grid-column:
      auto;
  }

  .contact-field textarea {
    min-height: 125px;
  }

  .contact-message-meta {
    flex-direction: column;

    gap: 5px;
  }

  .contact-form-footer {
    display: grid;

    grid-template-columns:
      1fr;
  }

  .contact-form-footer
  .button {
    width: 100%;
  }

  .contact-form-footer
  .button-primary {
    order: -1;
  }

  .contact-success {
    padding:
      36px
      18px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .contact-modal,
  .contact-modal-dialog,
  .contact-modal-close,
  .contact-field input,
  .contact-field select,
  .contact-field textarea,
  .contact-privacy-box {
    transition: none;
  }

  .contact-form
  button.is-loading i {
    animation: none;
  }

}