/* ROSHEN DENTAL LAB — page-specific rules for Contact and Submit a Case.
   Authors the form language for this world: inputs on paper, hairline
   borders, graphite ink, generous targets. Lime stays reserved for the
   submit pill and the system's own focus ring, nothing else in here.
   Loaded after styles.css on both pages. */

/* .page-band (the compact dark opener) is canonical in styles.css. */

/* ---------- Shared micro-label type (matches footer .col-t) ---------- */
.nap dt,
.form legend {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
}

/* ---------- Contact page: info column + form column ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.2rem, 6vw, 5rem);
  align-items: start;
}
.contact-info h3,
.contact-form-wrap h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 1.2rem;
}
.nap { display: grid; gap: 0; margin: 0 0 1.8rem; padding: 0; }
.nap > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.nap > div:first-child { padding-top: 0; }
.nap dd { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.nap dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.nap dd a:hover { border-color: var(--ink); }
.nap .dir-link { display: inline-block; margin-top: .3rem; font-size: .92rem; font-weight: 600; }
.deliver-note { color: var(--gray); font-size: .98rem; max-width: 40ch; }
.social-links { display: flex; gap: 1.5rem; margin-top: 1.6rem; }
.social-links a { color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: .15em; }
.social-links a:hover { border-color: var(--ink); }

/* ---------- Form language: inputs on paper ---------- */
.form { display: grid; gap: 1.4rem; max-width: 30rem; }
.form.form--wide { max-width: 52rem; }
.field { display: grid; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .94rem; font-weight: 600; color: var(--ink); }
.field .hint { margin: -.1rem 0 0; font-size: .86rem; color: var(--gray); font-weight: 400; }

.form input[type="text"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9em 1.05em;
  line-height: 1.4;
  transition: border-color .15s ease;
}
.form input:hover, .form select:hover, .form textarea:hover { border-color: #cfd3cd; }
.form input::placeholder, .form textarea::placeholder { color: var(--gray); opacity: 1; }
.form textarea { resize: vertical; min-height: 8rem; }

.form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%235c6862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.05em center;
  padding-right: 2.6em;
}

.form input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .7em .8em;
}
.form input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .6em 1.15em;
  margin-right: 1em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.form input[type="file"]::file-selector-button:hover { background: var(--paper-2); border-color: #cfd3cd; }

.form fieldset { border: 0; padding: 0; margin: 0 0 2.2rem; }
.form fieldset:last-of-type { margin-bottom: 0; }
.form legend {
  display: block;
  width: 100%;
  padding: 0 0 .8rem;
  margin: 0 0 1.3rem;
  border-bottom: 1px solid var(--line);
}
.fieldset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; margin-top: .3rem; }
.offer-flag { color: var(--gray); font-size: .98rem; }
.offer-flag b { color: var(--ink); font-weight: 600; }

/* ---------- Validation + submission states ---------- */
.form input:user-invalid,
.form select:user-invalid,
.form textarea:user-invalid { border-color: var(--alert); }
.form button[disabled] { opacity: .65; cursor: default; }
.form-status { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.form-status a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.form-status--ok {
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.form-status--ok b { font-weight: 600; }
.form-status--err { color: var(--alert); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .fieldset-grid { grid-template-columns: 1fr; }
  .nap > div { grid-template-columns: 1fr; gap: .3rem; }
}