/*
 * Contact page styles — reuses design tokens (colors, radii, spacing) from
 * the :root variables defined/rendered via css/styles.css. Loaded as an
 * extra stylesheet on the contact page (see Router/index.php).
 */

/* HERO */
.contact-hero{padding-bottom:0}
.contact-hero .head{margin-bottom:0}

/* CONTACT INFO CARDS */
.contact-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;max-width:var(--maxw);margin:0 auto}
.contact-card{background:var(--card);padding:26px 24px;display:flex;align-items:center;gap:16px;transition:background .25s}
.contact-card:hover{background:var(--card2)}
.contact-card .ic{width:30px;height:30px;flex-shrink:0;color:var(--cyan)}
.contact-card.whatsapp .ic{color:#25D366}
.contact-card h3{font-size:.95rem;font-weight:600;margin-bottom:4px}
.contact-card span{font-size:.86rem;color:var(--muted)}

/* FORM ALERTS (success / error) */
.form-alert{max-width:760px;margin:0 auto 20px;padding:14px 20px;border-radius:var(--r-btn);font-size:.92rem;text-align:center}
.form-alert.success{background:rgba(0,229,255,.08);border:1px solid var(--cyan);color:var(--cyan)}
.form-alert.error{background:rgba(255,107,53,.08);border:1px solid var(--orange);color:var(--orange)}

/* HONEYPOT: hidden from real users, left for bots to fill in.
   Uses a 1px clipped box rather than a huge negative offset — a large
   left:-9999px inside a `position:relative` ancestor blows out that
   ancestor's scrollWidth on RTL pages and breaks centering. */
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* CALCULATOR */
.calc-form{max-width:1000px;margin:0 auto}
.calc-group{margin-bottom:24px}
.calc-group:last-child{margin-bottom:0}
.calc-label{display:block;font-size:.95rem;font-weight:600;margin-bottom:12px}

/* two-column layout: calculator in its own box, contact/submit form in another.
   minmax(0,..) + min-width:0 on the panels stops long select labels / inputs
   from forcing the grid tracks (and the submit panel) wider than the container. */
.calc-form-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}
.calc-panel,.submit-panel{min-width:0;position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:32px;overflow:hidden}
.calc-panel::before,.submit-panel::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--purple))}
.submit-panel::before{background:linear-gradient(90deg,var(--purple),var(--orange))}
.panel-title{font-size:1.05rem;font-weight:700;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--border)}

/* dropdowns (project type / calculations / export type) */
.calc-select{font-family:inherit;width:100%;min-width:0;cursor:pointer;background:var(--card2);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:var(--r-btn);font-size:.92rem;transition:border-color .2s,box-shadow .2s}
.calc-select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.12)}
.calc-select option{background:var(--card2);color:var(--text)}

/* native multi selects (calculations needed / export type) */
.calc-select[multiple]{padding:6px}
.calc-select[multiple] option{padding:10px 12px;border-radius:6px;margin-bottom:3px;transition:background .15s,color .15s}
.calc-select[multiple] option:checked{background:rgba(0,229,255,.15);color:var(--cyan)}
.calc-hint{margin-top:8px;font-size:.78rem;color:var(--muted)}

/* numeric inputs revealed per selected calculation type, + contact fields */
.calc-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.input-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.input-field.full{grid-column:1 / -1}
.input-field label{font-size:.82rem;color:var(--muted)}
.input-field input,.input-field textarea{font-family:inherit;width:100%;min-width:0;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);padding:12px 14px;font-size:.92rem;resize:vertical;transition:border-color .2s,box-shadow .2s}
.input-field input:focus,.input-field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.12)}
.input-field input::placeholder,.input-field textarea::placeholder{color:var(--muted)}

/* live estimate */
.calc-result{margin-top:28px;text-align:center;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;position:relative;overflow:hidden}
.calc-result::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(0,229,255,.10),transparent 70%);pointer-events:none}
.calc-result-label{font-size:.78rem;color:var(--muted);letter-spacing:1.5px}
.calc-result-value{position:relative;font-size:1.6rem;font-weight:700;margin:12px 0;direction:ltr;color:var(--cyan)}
.calc-result-value.placeholder{font-size:.92rem;font-weight:400;color:var(--muted);direction:rtl}
.calc-result-note{position:relative;font-size:.8rem;color:var(--muted);font-weight:300}

/* submit actions */
.form-actions{display:flex;flex-direction:row;gap:12px;margin-top:28px}
.form-actions .btn{font-family:inherit;border:1px solid transparent;text-align:center;flex:1}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}

/* TABLET */
@media(max-width:860px){
  .contact-info-grid{grid-template-columns:1fr}
  .calc-form-grid{grid-template-columns:1fr}
  .calc-inputs{grid-template-columns:1fr 1fr}
}
/* MOBILE */
@media(max-width:600px){
  .calc-panel,.submit-panel{padding:22px}
  .calc-inputs{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column}
}