/* =====================================================================
   Shared styles for mopgrp.com sub-pages (contact.html, legal.html)
   Light "paper" theme — easy to read, on-brand (black/ash/white + water blue).
   ===================================================================== */
:root {
  --ink:#0D0D0D; --paper:#F2F5F8; --card:#ffffff;
  --mop-blue:#1E9FE0; --mop-blue-2:#57C6F7; --mop-blue-dark:#0C6FAE;
  --mop-ink:#101418; --panel-line:#E5EAF0; --text-soft:#5C6672;
  --shadow:0 14px 34px rgba(13,13,13,.10);
  --font-body:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
}
html[lang="ar"], html[lang="ckb"] { --font-body:"Noto Sans Arabic",system-ui,sans-serif; --font-display:"Noto Sans Arabic",system-ui,sans-serif; }

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); color:var(--mop-ink); background:var(--paper);
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
}
a { color:var(--mop-blue-dark); }

/* ---------- Header ---------- */
.pg-header {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px clamp(18px,5vw,48px);
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--panel-line);
}
.pg-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--mop-ink); font-weight:800; font-family:var(--font-display); font-size:19px; letter-spacing:.2px; }
.pg-brand .dot { color:var(--mop-blue); }
.pg-brand svg { width:20px; height:20px; }
.pg-back { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13.5px; text-decoration:none; }
.pg-back svg { width:16px; height:16px; }
[dir="rtl"] .pg-back svg { transform:scaleX(-1); }
.pg-spacer { flex:1; }

/* segmented language selector (simple: active button filled) */
.lang { display:inline-flex; direction:ltr; padding:3px; border:1px solid var(--panel-line); border-radius:999px; background:#fff; }
.lang-btn { border:none; background:none; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--text-soft); padding:6px 12px; border-radius:999px; transition:color .15s, background .15s; }
.lang-btn[aria-current="true"] { color:#fff; background:linear-gradient(150deg,#2CB6F2,#0C6FAE); }

/* ---------- Layout ---------- */
main { flex:1; width:100%; max-width:820px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(18px,5vw,40px) 72px; }
.eyebrow { font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--mop-blue-dark); }
h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5vw,46px); line-height:1.1; letter-spacing:-.5px; color:var(--ink); margin:12px 0 14px; }
.lead { font-size:clamp(15px,1.6vw,18px); color:var(--text-soft); max-width:60ch; }
h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(19px,2.4vw,24px); color:var(--ink); margin:38px 0 12px; }
h3 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin:20px 0 4px; }
p { margin:8px 0; }
main a { font-weight:600; }
.muted { color:var(--text-soft); font-size:13.5px; }

/* ---------- Contact cards ---------- */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:24px 0 8px; }
.contact-card {
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--mop-ink);
  background:var(--card); border:1px solid var(--panel-line); border-radius:16px; padding:16px 18px;
  box-shadow:0 2px 8px rgba(16,40,59,.04); transition:transform .16s, box-shadow .16s, border-color .16s;
}
.contact-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#D3DEEA; }
.contact-card .cc-ic { width:44px; height:44px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; color:#fff; }
.contact-card .cc-ic svg { width:22px; height:22px; }
.cc-wa .cc-ic { background:#25D366; }
.cc-call .cc-ic { background:linear-gradient(150deg,#2CB6F2,#0C6FAE); }
.cc-mail .cc-ic { background:linear-gradient(150deg,#2CB6F2,#0C6FAE); }
.cc-ig .cc-ic { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.contact-card b { display:block; font-family:var(--font-display); font-size:15px; }
.contact-card span { display:block; font-size:13px; color:var(--text-soft); }

/* ---------- Form ---------- */
.form-card { background:var(--card); border:1px solid var(--panel-line); border-radius:20px; padding:clamp(20px,3vw,30px); box-shadow:0 2px 10px rgba(16,40,59,.05); margin-top:16px; }
.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--font-display); font-weight:600; font-size:13.5px; margin-bottom:6px; }
.field input, .field textarea {
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--mop-ink);
  background:var(--paper); border:1px solid var(--panel-line); border-radius:12px; padding:12px 14px;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--mop-blue); box-shadow:0 0 0 3px rgba(30,159,224,.18); }
/* Email/phone are LTR data even on RTL pages — keep them left-to-right so the
   number and "+" don't get bidi-reordered; align to the RTL edge for layout fit. */
input[type="email"], input[type="tel"] { direction:ltr; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"] { text-align:right; }
.field textarea { resize:vertical; min-height:130px; }
.btn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(150deg,#2CB6F2,#0C6FAE); border:none; border-radius:999px; padding:13px 26px;
  box-shadow:0 10px 24px -8px rgba(12,111,174,.6); transition:transform .16s, box-shadow .16s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(12,111,174,.66); }
.form-note { margin-top:12px; font-size:12.5px; color:var(--text-soft); }
.form-status { margin-top:12px; font-size:13.5px; font-weight:600; color:var(--mop-blue-dark); display:none; }
.form-status.show { display:block; }

/* ---------- Legal blocks ---------- */
.info-block { background:var(--card); border:1px solid var(--panel-line); border-radius:16px; padding:20px 22px; margin:14px 0; }
.info-block p { margin:3px 0; }
.review-flag { background:#FFF6E5; border:1px solid #F5D9A0; color:#7A5B12; border-radius:12px; padding:12px 16px; font-size:13.5px; margin:16px 0; }

/* ---------- Footer ---------- */
.pg-foot { border-top:1px solid var(--panel-line); padding:22px clamp(18px,5vw,40px); text-align:center; font-size:12.5px; color:var(--text-soft); }
.pg-foot a { font-weight:600; text-decoration:none; }
.pg-foot .sep { margin:0 8px; opacity:.5; }