/* --------------------------------------------------------------------
   Genz - plain, printed-page style. One accent colour, solid borders,
   square corners, no gradients, no shadows.
   -------------------------------------------------------------------- */

:root{
  --ink:#1c1c1c;
  --ink-soft:#5a5a5a;
  --paper:#faf7f2;
  --panel:#ffffff;
  --line:#d6cfc4;
  --line-dark:#1c1c1c;
  --accent:#8c2b1e;      /* deep brick red */
  --accent-ink:#ffffff;
  --ok:#256b3f;
  --err:#a11d1d;
  --wa:#1f7a45;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 Arial, Helvetica, sans-serif;
  padding-bottom:64px;              /* room for the fixed contact bar */
}
/* Arabic: a face with real Arabic glyphs, and a little more line height
   because Arabic letterforms sit taller than Latin ones. */
body.rtl{
  font-family:"Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", Arial, sans-serif;
  line-height:1.8;
}
body.rtl h1,body.rtl h2,body.rtl h3{
  font-family:"Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", Georgia, serif;
  line-height:1.5;
}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:normal;line-height:1.25;margin:0 0 12px}
h1{font-size:32px}
h2{font-size:26px}
h3{font-size:20px}
a{color:var(--accent)}
s{color:var(--ink-soft);font-size:.8em;margin-inline-start:6px}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
.muted{color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---- top bar ---- */
.topbar{background:var(--panel);border-bottom:2px solid var(--line-dark)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{font-family:Georgia,serif;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:.5px}
.topbar nav{display:flex;gap:14px;flex-wrap:wrap}
.topbar nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:4px 0;border-bottom:1px solid transparent}
.topbar nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.topbar nav .nav-cta{color:var(--accent);font-weight:bold}

/* ---- language + currency switches ---- */
.switches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.curswitch{display:flex;margin:0;border:1px solid var(--line-dark)}
.curswitch a{padding:5px 11px;font-size:13px;color:var(--ink);text-decoration:none;background:var(--panel)}
.curswitch a + a{border-left:1px solid var(--line-dark)}
.curswitch a:hover{background:#f0ece5}
.curswitch a.on{background:var(--ink);color:#fff}
/* The language switch is the same control; Arabic needs no letter-spacing. */
.langswitch a[lang="ar"]{letter-spacing:0}

/* ---- hero ---- */
.hero{background:var(--panel);border-bottom:1px solid var(--line);padding:40px 0 32px;text-align:center}
.lead{font-size:17px;color:var(--ink-soft);max-width:560px;margin:0 auto 20px}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 12px}
.hours{font-size:14px;color:var(--ink-soft);margin:0}

/* ---- buttons ---- */
.btn{display:inline-block;padding:11px 20px;font-size:15px;text-decoration:none;
  border:1px solid var(--line-dark);background:var(--panel);color:var(--ink);cursor:pointer;font-family:inherit}
.btn:hover{background:#f0ece5}
.btn-main{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-main:hover{background:#712218}
.btn-wide{width:100%;padding:14px;font-size:17px}

/* ---- sections ---- */
.section{padding:36px 0}
.section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-note{color:var(--ink-soft);margin:0 0 20px;font-size:15px}

/* ---- plan cards ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:32px}
.plan{position:relative;display:block;cursor:pointer}
.plan input{position:absolute;opacity:0;width:0;height:0}
.plan-body{display:block;background:var(--panel);border:1px solid var(--line);padding:16px;height:100%}
.plan:hover .plan-body{border-color:var(--ink-soft)}
.plan input:checked + .plan-body{border:2px solid var(--accent);padding:15px;background:#fff8f6}
.plan input:focus-visible + .plan-body{outline:2px solid var(--ink)}
.badge{display:inline-block;background:var(--accent);color:#fff;font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;padding:2px 7px;margin-bottom:8px}
.plan-trial .badge{background:var(--ok)}
.plan-name{display:block;font-family:Georgia,serif;font-size:19px;margin-bottom:2px}
.plan-meta{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.plan-price{display:block;font-size:24px;font-family:Georgia,serif;margin-bottom:6px}
.plan-desc{display:block;font-size:13px;color:var(--ink-soft)}

/* ---- order form ---- */
.orderbox{background:var(--panel);border:1px solid var(--line-dark);padding:22px;max-width:520px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;margin-bottom:5px}
.opt{color:var(--ink-soft)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],
input[type=password],select,textarea{
  width:100%;padding:10px;border:1px solid var(--line-dark);background:#fff;
  font:15px/1.4 Arial,Helvetica,sans-serif;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.code-row{display:flex;gap:8px}
.code-row input{flex:1}
.codemsg{font-size:13px;margin:6px 0 0;min-height:18px}
.codemsg.ok{color:var(--ok)}
.codemsg.bad{color:var(--err)}
.errors{background:#fdf0f0;border:1px solid var(--err);color:var(--err);
  padding:10px;padding-inline-start:28px;margin:0 0 16px;font-size:14px}
.summary{border-top:1px solid var(--line);margin:20px 0;padding-top:12px;font-size:15px}
.summary div{display:flex;justify-content:space-between;padding:4px 0}
.summary .total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-size:18px}
.fineprint{font-size:12px;color:var(--ink-soft);margin:10px 0 0}

/* ---- confirmation ---- */
.done{background:#f2f8f3;border:2px solid var(--ok);padding:22px;margin:28px 0}
.done h2{color:var(--ok);margin-top:0}
.order-no{font-size:17px}

/* ---- how it works / faq ---- */
.steps{list-style:none;padding:0;margin:0 0 22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.steps li{border-inline-start:3px solid var(--accent);padding:4px 0;padding-inline-start:14px}
.steps span{display:block;font-family:Georgia,serif;font-size:22px;color:var(--accent)}
.about{color:var(--ink-soft);max-width:640px;margin:0}
.faq dt{font-weight:bold;margin-top:16px}
.faq dd{margin:4px 0 0;color:var(--ink-soft)}

/* ---- footer ---- */
.footer{border-top:2px solid var(--line-dark);background:var(--panel);
  padding:22px 0;margin-top:36px;font-size:14px;text-align:center}
.footer p{margin:4px 0}

/* ---- fixed contact bar ---- */
.contactbar{position:fixed;left:0;right:0;bottom:0;display:flex;
  border-top:2px solid var(--line-dark);z-index:50}
.cb{flex:1;text-align:center;padding:16px 8px;text-decoration:none;
  color:#fff;font-size:16px;font-weight:bold}
.cb-wa{background:var(--wa)}
.cb-call{background:var(--ink);border-inline-start:1px solid #fff}
.cb:hover{opacity:.9}

/* ---- right-to-left ---- */
[dir="rtl"] .badge{letter-spacing:0}          /* Arabic must not be letter-spaced */
[dir="rtl"] .brand{letter-spacing:0}
[dir="rtl"] .topbar nav a{letter-spacing:0}
/* Phone numbers, emails and codes stay left-to-right inside Arabic text. */
[dir="rtl"] input[type=tel],
[dir="rtl"] input[type=email],
[dir="rtl"] #discount_code{direction:ltr;text-align:right}
[dir="rtl"] .order-no strong,
[dir="rtl"] .plan-price{unicode-bidi:plaintext}

@media (max-width:520px){
  .topbar-in{gap:8px}
  .switches{gap:8px}
  h1{font-size:26px}
  .hero{padding:28px 0 24px}
  .orderbox{padding:16px}
}