/* =============================================================
   ARAFA CNC — CONTACT PAGE
   01 Shared page rules / 02 Heading / 03 Inquiry form
   04 Linked product request / 05 Contact info / 06 Responsive
   Same visual family as the approved homepage inquiry form.
============================================================= */
.contact-page { --contact-orange:#ff5a12; --contact-navy:#061725; --contact-muted:#66788a; background:#f5f7f9; font-family:'Cairo',sans-serif; color:var(--contact-navy); min-width:0; }
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing:border-box; }
.contact-page .container { width:min(100%,1340px); margin-inline:auto; padding-inline:22px; }
.contact-page [hidden] { display:none!important; }
.contact-page input, .contact-page textarea, .contact-page button { font:inherit; }

/* =================== SECTION 01 — PAGE INTRO =================== */
.contact-hero { padding:52px 0 30px; background:#f5f7f9; }
.contact-hero__inner { text-align:center; }
.contact-kicker { display:inline-block; color:var(--contact-orange); font-weight:800; font-size:12px; letter-spacing:.05em; }
.contact-hero h1 { margin:8px 0 10px; font-size:clamp(28px,4vw,42px); font-weight:800; color:var(--contact-navy); line-height:1.45; }
.contact-hero p { margin:0 auto; max-width:700px; color:var(--contact-muted); font-size:14px; line-height:1.9; }

/* =================== SECTION 02 — FORM CONTAINER =================== */
.contact-content { padding:0 0 78px; background:#f5f7f9; }
.contact-content__inner {
  max-width:1320px;
  display:grid;
  grid-template-columns:minmax(285px,315px) minmax(0,1fr);
  gap:24px;
  align-items:stretch;
}
.contact-info { grid-column:1; grid-row:1; }
.contact-form { grid-column:2; grid-row:1; }
.contact-form { background:#fff; border:1px solid #e1e7ee; box-shadow:0 15px 48px rgba(3,24,43,.055); border-radius:15px; padding:34px 38px 32px; width:100%; min-width:0; }
.contact-form__heading { margin-bottom:22px; }
.contact-form__heading h2 { margin:0 0 5px; color:var(--contact-navy); font-size:clamp(20px,2.4vw,26px); font-weight:800; }
.contact-form__heading p { margin:0; color:var(--contact-muted); font-size:13px; line-height:1.85; }
.contact-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; row-gap:17px; }
.contact-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.contact-field--full { grid-column:1/-1; }
.contact-field label { color:#263f55; font-size:13px; font-weight:700; text-align:start; }
.contact-form .form-control { display:block; width:100%; min-width:0; border:1px solid #dce4eb; border-radius:7px; background:#fafbfc; color:var(--contact-navy); padding:11px 14px; font-size:13px; outline:none; transition:border-color .2s,box-shadow .2s; }
.contact-form input.form-control { height:46px; }
.contact-form textarea.form-control { min-height:100px; resize:vertical; }
.contact-form .form-control:focus { border-color:var(--contact-orange); box-shadow:0 0 0 3px rgba(255,90,18,.10); background:#fff; }
.contact-form .form-control::placeholder { color:#84919e; }
.contact-form__bottom { margin-top:22px; display:flex; align-items:center; flex-wrap:wrap; gap:15px; }
.contact-submit { min-height:46px; border:1px solid var(--contact-orange); background:var(--contact-orange); color:#fff; font-weight:800; font-size:13px; padding:11px 32px; border-radius:7px; cursor:pointer; }
.contact-submit:hover { background:#e34d0e; border-color:#e34d0e; }
.contact-form__status { margin:0; color:#6d5560; font-size:12px; line-height:1.8; max-width:680px; }

/* =================== SECTION 03 — SELECTED PRODUCT =================== */
.contact-request-summary { display:flex; align-items:center; gap:13px; min-width:0; margin:0 0 24px; padding:13px 17px; border:1px solid #ffd8c6; border-inline-start:4px solid var(--contact-orange); background:#fff8f4; border-radius:7px; }
.contact-request-summary > i { color:var(--contact-orange); font-size:19px; }
.contact-request-summary > div { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; min-width:0; }
.contact-request-summary strong { font-size:13px; color:#38485b; }
.contact-request-summary span { font-weight:800; font-size:14px; color:var(--contact-navy); overflow-wrap:anywhere; }
.contact-field input[name="product"]:not(:placeholder-shown) { border-color:#ffc0a2; background:#fffdfb; }

/* =================== SECTION 04 — CONTACT DETAILS + MAP =================== */
.contact-info {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:linear-gradient(145deg,#0b2b3e 0%,#061725 85%);
  color:#fff;
  border-radius:15px;
  border:1px solid #163a4d;
  box-shadow:0 15px 48px rgba(3,24,43,.09);
  padding:28px 22px 22px;
  overflow:hidden;
}
.contact-info__header { border-bottom:1px solid rgba(255,255,255,.17); padding-bottom:20px; margin-bottom:20px; }
.contact-info__eyebrow { color:var(--contact-orange); font-size:11px; font-weight:800; letter-spacing:.07em; }
.contact-info__header h2 { font-size:24px; line-height:1.5; margin:7px 0 7px; font-weight:800; color:#fff; }
.contact-info__header p { color:#c7d3db; line-height:1.8; font-size:12px; margin:0; }
.contact-info__items { display:flex; flex-direction:column; gap:22px; }
.contact-info__item { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.contact-info__icon { flex:0 0 37px; width:37px; height:37px; border-radius:10px; display:grid; place-items:center; color:var(--contact-orange); background:rgba(255,90,18,.13); font-size:17px; }
.contact-info__item > div { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; }
.contact-info__label { color:#b9cbd7; font-size:11px; font-weight:700; }
.contact-info__item a { text-decoration:none; color:#fff; font-size:13px; font-weight:700; line-height:1.85; overflow-wrap:anywhere; max-width:100%; text-align:start; }
.contact-info__item a:hover, .contact-info__map-link:hover { color:#ffae8d; }
.contact-info__item a[dir="ltr"] { unicode-bidi:isolate; }
.contact-info__map { margin-top:auto; padding-top:28px; }
.contact-info__map h3 { margin:0 0 12px; font-weight:800; font-size:16px; }
.contact-info__map-frame { height:188px; border-radius:10px; overflow:hidden; background:#e5eaee; border:1px solid rgba(255,255,255,.2); }
.contact-info__map-frame iframe { border:0; display:block; width:100%; height:100%; }
.contact-info__map-link { display:inline-flex; gap:9px; align-items:center; color:#fff; text-decoration:none; font-size:12px; font-weight:700; padding-top:12px; }
.contact-info__map-link i { color:var(--contact-orange); }

/* =================== SECTION 04 — RESPONSIVE =================== */
@media(max-width:740px) {
  .contact-page .container { padding-inline:16px; }
  .contact-hero { padding:30px 0 22px; }
  .contact-form { padding:24px 18px; border-radius:11px; }
  .contact-form__grid { grid-template-columns:1fr; gap:14px; }
  .contact-field--full { grid-column:auto; }
  .contact-content { padding-bottom:46px; }
  .contact-submit { width:100%; }
  .contact-form__bottom { display:block; }
  .contact-form__status { margin-top:13px; }
}

/* =================== SECTION 05 — RESPONSIVE SIDEBAR =================== */
@media(max-width:1050px) {
  .contact-content__inner { grid-template-columns:minmax(240px,280px) minmax(0,1fr); gap:16px; }
  .contact-form { padding:28px 24px; }
  .contact-form__grid { column-gap:14px; }
  .contact-info { padding:25px 19px 20px; }
}
@media(max-width:800px) {
  .contact-content__inner { display:flex; flex-direction:column; gap:18px; }
  .contact-form { order:1; }
  .contact-info { order:2; }
  .contact-info__items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  .contact-info__map { margin-top:0; padding-top:26px; }
}
@media(max-width:500px) {
  .contact-info { padding:24px 18px; }
  .contact-info__items { grid-template-columns:1fr; gap:18px; }
  .contact-info__map-frame { height:200px; }
  .contact-info__header h2 { font-size:21px; }
}

.contact-info__icon svg { width:19px; height:19px; display:block; }
.contact-info__map-link svg { width:14px; height:14px; color:var(--contact-orange); }