/* ============================================================
   CFMOTO CONTACT — scoped .cf-contact. Own layout (header → 2-col info/form → map).
   Form feeds the same rcf_submit_form pipeline (Call Requests + email).
   GL font via the header plugin; tokens mirror the other coded pages.
   ============================================================ */
.cf-contact{
  --display:"GL Tatishvili Metal","Noto Sans Georgian",system-ui,sans-serif;
  --ink:#0e1012;--muted:#7b848c;--mist:#f3f3f3;--dark:#0e1117;--accent:#12BAD5;
  --gut:clamp(16px,3vw,48px);--ease:cubic-bezier(.22,1,.36,1);
  font-family:"Noto Sans Georgian",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
.cf-contact *{box-sizing:border-box}
.cf-contact a{text-decoration:none;color:inherit}
.cf-contact h1,.cf-contact h2,.cf-contact h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0}
.cf-contact .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cf-contact .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cf-contact .reveal{opacity:1;transform:none}}

/* HEADER (dark, keeps the overlapping header legible) */
.cf-contact .cfc-head{background:var(--dark);color:#fff;padding:clamp(104px,13vw,168px) var(--gut) clamp(40px,5vw,64px)}
.cf-contact .cfc-head h1{font-size:clamp(34px,6vw,72px);line-height:1.04}

/* TWO-COLUMN: contact info + form */
.cf-contact .cfc-main{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start;padding:clamp(40px,5vw,80px) var(--gut)}
@media (max-width:900px){.cf-contact .cfc-main{grid-template-columns:1fr;gap:36px}}

/* contact info */
.cf-contact .cfc-loc{padding:22px 0;border-bottom:1px solid rgba(14,16,18,.12)}
.cf-contact .cfc-loc:first-child{padding-top:0}
.cf-contact .cfc-city{font-family:var(--display);font-size:clamp(18px,2vw,24px);margin-bottom:8px}
.cf-contact .cfc-loc a,.cf-contact .cfc-email a{display:block;font-size:15px;line-height:1.7;color:#3b4248;transition:color .2s}
.cf-contact .cfc-loc a:hover,.cf-contact .cfc-email a:hover{color:var(--accent)}
.cf-contact .cfc-email{padding-top:22px}
.cf-contact .cfc-email .l{display:block;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cf-contact .cfc-email a{font-size:17px;color:var(--ink)}

/* FORM card */
.cf-contact .cfc-form-card{background:#fff;border:1px solid rgba(14,16,18,.1);border-radius:16px;padding:clamp(24px,3vw,40px)}
.cf-contact .cfc-form-card h2{font-size:clamp(24px,3vw,38px);margin-bottom:22px}
.cf-contact .cfc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-contact .cfc-full{grid-column:1/-1}
.cf-contact .cfc-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.cf-contact input,.cf-contact textarea{width:100%;height:52px;border:1px solid rgba(14,16,18,.18);border-radius:10px;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .2s}
.cf-contact textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.cf-contact input:focus,.cf-contact textarea:focus{outline:none;border-color:var(--accent)}
.cf-contact input::placeholder,.cf-contact textarea::placeholder{color:var(--muted)}
.cf-contact .cfc-err input,.cf-contact .cfc-err textarea,.cf-contact .cfc-err .cfc-phone{border-color:#e24b4a}

/* phone with country picker */
.cf-contact .cfc-phone{display:flex;align-items:stretch;border:1px solid rgba(14,16,18,.18);border-radius:10px;position:relative;background:#fff}
.cf-contact .cfc-phone:focus-within{border-color:var(--accent)}
.cf-contact .cfc-cc{display:flex;align-items:center;gap:8px;height:50px;padding:0 12px;background:var(--mist);border:0;border-right:1px solid rgba(14,16,18,.14);border-radius:10px 0 0 10px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);white-space:nowrap}
.cf-contact .cfc-cc img{width:20px;height:20px;border-radius:50%;display:block}
.cf-contact .cfc-cc .cfc-caret{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px}
.cf-contact .cfc-phone input{border:0;border-radius:0 10px 10px 0;flex:1;min-width:0}
.cf-contact .cfc-cc-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:300px;max-width:88vw;background:#fff;border:1px solid rgba(14,16,18,.14);border-radius:12px;box-shadow:0 24px 60px -18px rgba(14,16,18,.35);overflow:hidden;display:none}
.cf-contact .cfc-cc-pop.open{display:block}
.cf-contact .cfc-cc-search{height:46px;border:0;border-bottom:1px solid rgba(14,16,18,.1);border-radius:0}
.cf-contact .cfc-cc-search:focus{border-color:rgba(14,16,18,.1)}
.cf-contact .cfc-cc-list{max-height:240px;overflow:auto}
.cf-contact .cfc-cc-opt{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;font-size:14px}
.cf-contact .cfc-cc-opt:hover,.cf-contact .cfc-cc-opt.on{background:var(--mist)}
.cf-contact .cfc-cc-opt img{width:20px;height:20px;border-radius:50%}
.cf-contact .cfc-cc-opt .d{color:var(--muted);margin-left:auto}

/* submit + status */
.cf-contact .cfc-submit{height:56px;width:100%;border:0;border-radius:50px;background:var(--accent);color:#06222a;font:inherit;font-size:16px;font-weight:600;cursor:pointer;margin-top:4px;transition:transform .2s var(--ease),box-shadow .25s var(--ease),opacity .2s}
.cf-contact .cfc-submit:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(18,186,213,.5)}
.cf-contact .cfc-submit[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.cf-contact .cfc-status{margin-top:14px;font-size:14px;line-height:1.5;min-height:20px}
.cf-contact .cfc-status.ok{color:#0f6e56}
.cf-contact .cfc-status.err{color:#a32d2d}

/* MAP */
.cf-contact .cfc-map{padding-top:clamp(16px,2vw,28px)}
.cf-contact .cfc-map-tabs{display:flex;gap:8px;padding:0 var(--gut) 16px}
.cf-contact .cfc-map-tab{height:44px;padding:0 24px;border-radius:50px;border:1px solid rgba(14,16,18,.18);background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.cf-contact .cfc-map-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf-contact .cfc-map-pane{display:none}
.cf-contact .cfc-map-pane.active{display:block}
.cf-contact .cfc-map-pane iframe{width:100%;height:clamp(360px,46vw,560px);border:0;display:block}
@media (max-width:560px){.cf-contact .cfc-grid{grid-template-columns:1fr}}