/* Contact page — src/pages/contact-us.astro */

.contact-layout{
  display:grid; grid-template-columns:1fr 1.6fr; gap:48px; align-items:start;
}

/* CONTACT DETAILS PANEL */
.contact-panel{ display:flex; flex-direction:column; gap:24px; }
.contact-info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.contact-info-card .card-head{
  background:linear-gradient(135deg, #0A1F46, #0E2A5E);
  padding:20px 24px;
}
.contact-info-card .card-head h3{ color:#fff; font-size:18px; font-weight:600; }
.contact-info-card .card-head p{ color:rgba(255,255,255,.7); font-size:13px; margin-top:2px; }
.contact-info-card .card-body{ padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.contact-row{
  display:flex; gap:12px; align-items:flex-start;
}
.contact-row .ci-icon{
  width:38px; height:38px; background:var(--red-50); color:var(--red);
  border-radius:8px; display:grid; place-items:center; flex-shrink:0;
}
.contact-row .ci-label{ font-family:var(--font-body); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.contact-row .ci-val{ font-size:14px; font-weight:600; color:var(--ink); }
.contact-row .ci-val a{ color:var(--navy); }
.contact-row .ci-val a:hover{ color:var(--red); }
.contact-row .ci-sub{ font-size:13px; color:var(--muted); margin-top:1px; }

.hours-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px;
}
.hours-card h4{ font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.hours-card h4 svg{ color:var(--red); }
.hours-row{ display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:7px 0; border-bottom:1px solid var(--line); }
.hours-row:last-child{ border-bottom:none; }
.hours-row .day{ color:var(--muted); }
.hours-row .time{ font-weight:600; color:var(--ink); }
.hours-row .closed{ color:var(--red); font-weight:600; }

.partners-quick{
  background:var(--navy); border-radius:var(--radius-lg); padding:22px 24px; color:#fff;
}
.partners-quick h4{ font-size:15px; font-weight:600; color:#fff; margin-bottom:12px; }
.partners-quick .pq-list{ display:flex; flex-wrap:wrap; gap:8px; }
.pq-pill{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:4px 12px; font-family:var(--font-body); font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.9); }

/* QUOTE FORM */
.quote-form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.qfc-head{ background:linear-gradient(135deg, #0A1F46, #0E2A5E); padding:28px 32px; }
.qfc-head h2{ color:#fff; font-size:24px; font-weight:700; }
.qfc-head p{ color:rgba(255,255,255,.75); font-size:14px; margin-top:4px; }
.qfc-body{ padding:32px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-full{ grid-column:1/-1; }
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group label{ font-size:13px; font-weight:600; color:var(--ink); }
.form-group label .req{ color:var(--red); margin-left:2px; }
.form-group input, .form-group select, .form-group textarea{
  padding:11px 14px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:#fff; outline:none; transition:border-color .2s;
  width:100%; box-sizing:border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-50);
}
.form-group textarea{ resize:vertical; min-height:100px; }
.form-group select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6478' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.form-hint{ font-size:12px; color:var(--muted); margin-top:2px; }
.form-submit{ margin-top:24px; }
.form-submit .btn-primary{ width:100%; justify-content:center; padding:15px; font-size:15px; }
.form-note{ font-size:12px; color:var(--muted); text-align:center; margin-top:12px; }

/* SUCCESS STATE */
.form-success{
  display:none; text-align:center; padding:40px 20px;
}
.form-success .check{
  width:64px; height:64px; background:var(--red-50); color:var(--red);
  border-radius:50%; display:grid; place-items:center; margin:0 auto 16px;
}

/* QUICK CONTACT CARDS */
.qcontact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.qc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:transform .2s, box-shadow .2s;
}
.qc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.qc-card .qc-icon{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:#fff; margin-bottom:4px;
}
.qc-card .qc-icon.phone{ background:var(--navy); }
.qc-card .qc-icon.email{ background:var(--red); }
.qc-card .qc-icon.wa{ background:#25D366; }
.qc-card h4{ font-size:16px; font-weight:600; }
.qc-card p{ font-size:13px; color:var(--muted); }
.qc-card a.qc-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:var(--radius);
  font-family:var(--font-display); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  border:1.5px solid var(--line); color:var(--navy);
  transition:background .2s, color .2s, border-color .2s;
}
.qc-card a.qc-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* MAPS */
.maps-section{ background:var(--bg-2); border-top:1px solid var(--line); }
.maps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.map-card h3{ font-size:18px; font-weight:600; margin-bottom:16px; color:var(--ink); }
.map-embed{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; aspect-ratio:4/3;
}
.map-embed iframe{ display:block; width:100%; height:100%; border:0; }

@media(max-width:1024px){ .contact-layout{ grid-template-columns:1fr; } .maps-grid{ grid-template-columns:1fr; } }
@media(max-width:900px){ .form-grid{ grid-template-columns:1fr; } .qcontact-grid{ grid-template-columns:1fr; } }