/* --------------------------------------------------------------------
   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}

/* Keep the page exactly as wide as the screen. If any one element sticks out,
   the phone treats the whole layout as wider than the display and lets you
   pinch out to something tiny. */
html{scroll-behavior:smooth;overflow-x:hidden}
img,svg,video,table{max-width:100%}
input,select,textarea{max-width:100%}
body{
  margin:0;
  overflow-x:hidden;
  max-width:100%;
  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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border: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;border-radius:0;-webkit-appearance:none;appearance:none}
.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(min(240px,100%),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;
  scroll-margin-top:14px}
.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);
  border-radius:0;                       /* iOS rounds these off by default */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none}

/* A dropdown loses its arrow once appearance is turned off, so draw one.
   Padding on the right keeps the text clear of it. */
select{
  padding-right:34px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231c1c1c' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px 8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.phone-row{display:flex;gap:8px}
.phone-row select{width:auto;flex:0 0 auto;max-width:48%}
.phone-row input{flex:1;min-width:0}
[dir="rtl"] .phone-row{direction:ltr}      /* the number reads left-to-right */
.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(min(220px,100%),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)}

/* ---- app store badges ---- */
.storebadges{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.storebadges a{display:inline-block;line-height:0;text-decoration:none}
.storebadges a:hover{opacity:.85}
.storebadge{display:block;width:170px;height:auto}
/* The badges stay left-to-right and untranslated inside the Arabic page. */
[dir="rtl"] .storebadges{justify-content:flex-end}
@media (max-width:400px){ .storebadge{width:150px} }

/* ---- 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}
}