@import url('palette.css');
/* ============================================================
   Micro Turners — Contact Us  ·  contact_us.css
   Re-skinned to MATCH the homepage / CSR / Our-Plants theme:
     · full-width container, 40px side padding
     · sharp 4–6px corners, 1px borders, soft navy shadow
     · crimson uppercase eyebrow, navy headings, steel body
     · white cards w/ gradient top-rail, solid (non-pill) button
   Same class names the HTML & JS rely on — no markup changes.
   
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,Segoe UI,Roboto,sans-serif;color:var(--text-primary);
  background:var(--bg-surface);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:none;margin:0 auto;padding:0 40px}
/* header & footer keep their own centered 1400px container — unchanged */
.site-header .container{max-width:1400px;padding:0 40px}
::selection{background:rgba(var(--color-primary-rgb),.18)}

/* ---------- shared bits (mirror homepage) ---------- */
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:3px;
  text-transform:uppercase;color:var(--color-secondary);margin-bottom:12px}
.section-title{font-size:clamp(28px,3.6vw,44px);font-weight:800;color:var(--text-heading);
  line-height:1.15;letter-spacing:-.5px}
.section-title.center{text-align:center}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.auth-section{padding:5px 0 20px;background:var(--bg-surface)}

/* intro header */
.contact-head{text-align:center;max-width:760px;margin:0 auto 44px}
.contact-sub{margin-top:16px;color:var(--text-secondary);font-size:16.5px}

/* two-column grid */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch}

/* ---------- form card ---------- */
.auth-container{position:relative;width:100%;background:#fff;padding:17px;overflow:hidden;
  border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:0 18px 50px rgba(8,15,45,.08)}
.auth-container::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-secondary))}
.form-title{font-size:24px;font-weight:800;color:var(--text-heading);padding-bottom:4px;position:relative}
.form-title::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-secondary))}
/* form status line (shown after submit) */
.form-msg{margin-top:14px;padding:12px 16px;border-radius:var(--radius-md);font-size:14.5px;font-weight:600;border:1px solid transparent}
.form-msg.success{background:#e3f6ec;color:#1c8a4d;border-color:#bce6cd}
.form-msg.error{background:#fde8e5;color:#b3261e;border-color:#f3c5be}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;margin-top:18px}
.auth-container label{display:block;margin-bottom:8px;font-weight:600;font-size:14.5px;color:var(--text-heading)}
.auth-container input,.auth-container textarea,.auth-container select{width:100%;border:1px solid var(--border-light);border-radius:var(--radius-md);
  padding:0 18px;font-size:15px;font-family:inherit;color:var(--text-primary);background:#fff;transition:.25s}
.auth-container input,.auth-container select{height:54px}
.auth-container textarea{padding:16px 18px;resize:vertical;min-height:130px}
.auth-container input:focus,.auth-container textarea:focus,.auth-container select:focus{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(var(--color-primary-rgb),.12)}

/* dropdown: hide native arrow, add a themed chevron */
.auth-container select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.auth-container select:invalid{color:var(--text-secondary)}
/* intl-tel-input: make the widget fill the field width */
.auth-container .iti{width:100%}
.auth-container .iti__selected-dial-code{font-weight:600}
.auth-container button{width:100%;height:54px;margin-top:26px;border:none;border-radius:var(--radius-md);
  background:var(--color-primary);color:#fff;font-size:15px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  cursor:pointer;transition:.25s}
.auth-container button:hover{background:var(--color-primary-dark);transform:translateY(-2px)}

/* ---------- right column ---------- */
.contact-side{display:flex;flex-direction:column;gap:30px}

/* map */
.map-container{flex:1;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-light);
  box-shadow:0 18px 50px rgba(8,15,45,.08);min-height:300px}
.map-container iframe{width:100%;height:100%;min-height:300px;border:0;display:block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .auth-container{padding:30px}
  .map-container{min-height:360px}
}
@media (max-width:600px){
  .container{padding:0 20px}
  .auth-section{padding:36px 0 44px}
}