/* Maqasati — design tokens */
:root {
  --cotton: #F5F6F3;      /* خلفية: قماش الثوب */
  --paper: #FFFFFF;
  --ink: #0D1B2A;         /* كحلي ليلي */
  --ink-2: #33415C;
  --night: #0B1622;       /* خلفية الهيرو */
  --night-2: #13243A;
  --chalk: #7F8A9C;       /* طباشير الخياط */
  --line: #DDE2E9;
  --tape: #E3B653;        /* نحاسي — شريط القياس */
  --tape-2: #D29E36;
  --tape-ink: #2B2006;
  --thread: #1F5FAD;      /* خيط أزرق — روابط */
  --ok: #2F8F5B;
  --warn: #B5671B;
  --bad: #B23A3A;
  --r-sm: 6px;
  --r-md: 10px;
  --font: "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cotton);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
}
a { color: var(--thread); }
img { max-width: 100%; }
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.45; margin: 0 0 .45em; }
h3 { line-height: 1.35; margin: 0 0 .5em; font-weight: 600; font-size: 1.12rem; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
p { margin: 0 0 1em; }
.muted { color: var(--chalk); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

:focus-visible { outline: 3px solid var(--thread); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: .55em 1.2em;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
  background: var(--ink); color: #fff;
}
.btn:hover { background: var(--ink-2); }
.btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--ink); }
.btn.tape { background: var(--tape); color: var(--tape-ink); }
.btn.mtape:hover { filter: brightness(.96); }
.btn.ghost { background: transparent; color: var(--thread); padding-inline: .4em; min-height: 36px; }
.btn.danger { background: transparent; color: var(--bad); border-color: #EBCACA; }
.btn.sm { min-height: 36px; padding: .3em .8em; font-size: .9rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Forms */
label { display: block; font-size: .92rem; color: var(--ink-2); margin-bottom: .3em; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: .5em .75em;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--thread); outline: none; box-shadow: 0 0 0 3px rgba(46,94,170,.15); }
.field { margin-bottom: 1rem; }
.row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hint { font-size: .85rem; color: var(--chalk); margin-top: .25em; }
.error { color: var(--bad); font-size: .92rem; min-height: 1.4em; }

/* Measuring tape — the signature element */
.tape-strip {
  height: 46px;
  background-color: var(--tape);
  background-image:
    repeating-linear-gradient(to left, var(--tape-ink) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to left, var(--tape-ink) 0 2px, transparent 2px 50px);
  background-size: 100% 12px, 100% 22px;
  background-repeat: repeat-x;
  background-position: top, top;
  position: relative;
  overflow: hidden;
}
.tape-strip .nums {
  position: absolute; inset: auto 0 6px 0;
  display: flex; direction: ltr; font-size: .7rem; color: var(--tape-ink); font-weight: 500;
}
.tape-strip .nums span { flex: 0 0 50px; padding-left: 3px; }

/* Header */
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .45em; }
.logo-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--tape); display: grid; place-items: center; color: var(--tape-ink); font-size: 1.15rem; line-height: 1; padding-bottom: 4px; box-shadow: inset 0 0 0 2px rgba(43,32,6,.18); }
.nav { display: flex; gap: .5rem; align-items: center; }
.nav .short { display: none; }

/* Landing */
/* ---------- Hero (dark, premium) ---------- */
.site-head.on-dark { background: var(--night); border-bottom-color: rgba(255,255,255,.07); }
.site-head.on-dark .logo { color: #F4F1E8; }
.site-head.on-dark .btn.ghost { color: #C8D2E2; }
.site-head.on-dark .btn.secondary { background: transparent; color: #F4F1E8; border-color: rgba(255,255,255,.22); }
.site-head.on-dark .btn.secondary:hover { border-color: #F4F1E8; }
.site-head.on-dark .btn:not(.secondary):not(.ghost) { background: var(--tape); color: var(--tape-ink); }

.hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(227,182,83,.10), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: #F4F1E8;
  padding: 72px 0 0;
  position: relative;
}
.hero-grid { display: grid; gap: 56px; grid-template-columns: 1.15fr .85fr; align-items: center; }
.hero h1 { color: #FBF8F0; max-width: 11em; }
.hero p.lead { font-size: 1.18rem; color: #C3CCDA; max-width: 33em; }
.hero .hint { color: #8C98AC; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.hero .btn.secondary { background: transparent; color: #F4F1E8; border-color: rgba(255,255,255,.25); }
.hero .btn.secondary:hover { border-color: #F4F1E8; }

/* the measurement card — a paper tag with stitching */
.ledger {
  background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: 26px 26px 20px; font-size: .95rem;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  outline: 1.5px dashed #CDD3DC; outline-offset: -10px;
  transform: rotate(-1.2deg);
}
.ledger::before { /* punched hole */
  content: ""; position: absolute; top: 14px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--night-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 12px; border-bottom: 1.5px solid var(--ink); margin-bottom: 4px; }
.ledger-head b { font-family: var(--font-display); font-size: 1.3rem; }
.ledger-row { display: grid; grid-template-columns: 1fr auto; padding: .42em 0; border-bottom: 1px dashed var(--line); transition: background-color .3s; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger-row.measuring { background: linear-gradient(90deg, transparent, rgba(227,182,83,.22), transparent); }
.ledger-row .unit { color: var(--chalk); font-size: .8rem; font-weight: 400; margin-inline-start: .25em; }

/* ---------- Live tape ---------- */
.mtape {
  position: relative; height: 64px; overflow: hidden; direction: ltr;
  background: linear-gradient(180deg, var(--tape) 0%, var(--tape) 70%, var(--tape-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.18), 0 -10px 30px -12px rgba(0,0,0,.4);
  cursor: crosshair; touch-action: pan-y; user-select: none;
}
.mtape-track {
  position: absolute; top: 0; bottom: 0; left: 0;
  background-image:
    repeating-linear-gradient(to right, var(--tape-ink) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to right, var(--tape-ink) 0 1.5px, transparent 1.5px 50px),
    repeating-linear-gradient(to right, var(--tape-ink) 0 2px, transparent 2px 100px);
  background-size: 100% 12px, 100% 20px, 100% 26px;
  background-repeat: repeat-x; background-position: 0 0;
  will-change: transform;
}
.mtape-track span {
  position: absolute; top: 28px; transform: translateX(-50%);
  font: 600 .72rem/1 var(--font); color: var(--tape-ink); font-variant-numeric: tabular-nums;
}
.mtape-track span.major { font-size: .8rem; top: 30px; }
.mtape.unroll .mtape-track { animation: unroll 1.4s cubic-bezier(.2,.7,.1,1) both; }
@keyframes unroll { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.mtape-marker {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #B3262E;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.mtape-marker::after {
  content: attr(data-cm); position: absolute; bottom: 8px; left: 8px;
  background: var(--night); color: #FBF8F0; font: 600 .78rem/1 var(--font);
  padding: .45em .6em; border-radius: 4px; white-space: nowrap; direction: rtl;
}
.mtape-marker.flip::after { left: auto; right: 8px; }
.mtape:hover .mtape-marker, .mtape.touching .mtape-marker { opacity: 1; }
.hero .mtape { margin-top: 64px; }

.section { padding: 72px 0; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.before-after > div { padding: 28px; }
.before-after .before { background: #EEF0F2; }
.before-after ul { margin: 0; padding-inline-start: 1.1em; }
.before-after li { margin-bottom: .5em; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; margin-top: 32px; }
.features h3 { margin-bottom: .3em; }
.features p { color: var(--ink-2); }

.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.price-box { background: var(--night); color: #fff; border-radius: var(--r-md); padding: 32px; }
.price-box .amount { font-family: var(--font-display); font-size: 4rem; font-weight: 700; line-height: 1; color: var(--tape); }
.price-box ul { padding-inline-start: 1.1em; color: #D6DBE6; }
.site-foot { border-top: 1px solid var(--line); padding: 28px 0; color: var(--chalk); font-size: .9rem; }

/* Auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.auth-card { width: min(460px, 100%); margin: 40px auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; padding: .7em; font: inherit; color: var(--chalk); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--tape); font-weight: 600; }
.slug-input { display: flex; direction: ltr; }
.slug-input span { display: flex; align-items: center; padding: 0 .6em; background: #EEF0F2; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--chalk); font-size: .85rem; white-space: nowrap; }
.slug-input input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* App shell */
.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side { background: var(--night); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; }
.side .logo { color: #fff; margin: 0 6px 20px; }
.side a { color: #C9D0DE; text-decoration: none; padding: .6em .8em; border-radius: var(--r-sm); }
.side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a[aria-current="page"] { background: rgba(242,193,78,.14); color: var(--tape); }
.side .spacer { flex: 1; }
.side .shop-link { font-size: .82rem; color: #9AA4BA; word-break: break-all; padding: 0 .8em; }
.main { padding: 28px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 2rem; margin: 0; line-height: 1.3; }

.banner { border-radius: var(--r-sm); padding: .8em 1em; margin-bottom: 20px; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner.trial { background: #FDF3D6; color: var(--tape-ink); }
.banner.bad { background: #F8E3E3; color: #6E1F1F; }
.banner.ok { background: #E2F2E9; color: #1D5A39; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); margin-bottom: 24px; }
.stat { padding: 18px 20px; border-inline-start: 1px solid var(--line); }
.stat:first-child { border-inline-start: 0; }
.stat .n { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
.stat .l { color: var(--chalk); font-size: .9rem; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; margin-bottom: 20px; }
.toolbar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input, .toolbar select { max-width: 280px; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: start; font-weight: 500; color: var(--chalk); font-size: .85rem; padding: .6em .5em; border-bottom: 1px solid var(--line); }
td { padding: .7em .5em; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #F8F9FB; }
.num { direction: ltr; unicode-bidi: plaintext; }
.table-wrap { overflow-x: auto; }

.chip { display: inline-block; font-size: .8rem; padding: .15em .6em; border-radius: 999px; background: #EEF0F2; color: var(--ink-2); margin-inline-end: .25em; }
.status { font-size: .82rem; padding: .2em .65em; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.status.new { background: #E6ECF7; color: #24467F; }
.status.cutting, .status.sewing { background: #FDF3D6; color: var(--tape-ink); }
.status.ready { background: #E2F2E9; color: #1D5A39; }
.status.delivered { background: #EEF0F2; color: var(--ink-2); }
.status.canceled { background: #F8E3E3; color: #6E1F1F; }

.empty { text-align: center; padding: 40px 20px; color: var(--ink-2); }
.empty p { max-width: 30em; margin: 0 auto 1rem; }

/* Drawer / modal */
dialog { border: 0; border-radius: var(--r-md); padding: 0; width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 40px); color: var(--ink); }
dialog::backdrop { background: rgba(20,33,61,.45); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.dlg-head h2 { margin: 0; font-size: 1.45rem; line-height: 1.3; }
.dlg-body { padding: 20px; }
.dlg-foot { display: flex; gap: .6rem; justify-content: flex-start; padding: 14px 20px; border-top: 1px solid var(--line); background: #FAFBFC; position: sticky; bottom: 0; }

/* Measurement card */
.measure-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
.measure-card .tape-strip { height: 14px; background-size: 100% 6px, 100% 10px; }
.measure-card .mc-body { padding: 14px 16px; }
.measure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 16px; }
.measure-grid div { border-bottom: 1px dashed var(--line); padding: .25em 0; display: flex; justify-content: space-between; gap: .5em; }
.measure-grid span { color: var(--chalk); font-size: .88rem; }
.measure-grid b { font-weight: 600; direction: ltr; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 4px; margin: 0 0 16px; }
legend { padding: 0 .4em; font-weight: 500; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .7em 1.2em; border-radius: var(--r-sm); z-index: 100; font-size: .95rem; }

.wa-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55em 0; border-bottom: 1px solid var(--line); }
.wa-list { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow: auto; }
.wa-list li.sent { color: var(--chalk); }

/* Public shop page */
.shop-hero { background: linear-gradient(180deg, var(--night), var(--night-2)); color: #fff; padding: 48px 0 0; }
.shop-hero p { color: #C9D0DE; }
.shop-hero .mtape, .shop-hero .tape-strip { margin-top: 36px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0; }

@media (max-width: 900px) {
  .hero-grid, .pricing, .shop-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; position: sticky; top: 0; z-index: 5; }
  .side .logo { margin: 0 4px 0 auto; order: -1; width: 100%; margin-bottom: 6px; }
  .side .spacer, .side .shop-link { display: none; }
  .side a { padding: .4em .7em; font-size: .92rem; }
  .main { padding: 18px 16px; }
}
@media (max-width: 600px) {
  .ledger { transform: none; }
  .mtape { height: 56px; }
  .hero .mtape { margin-top: 44px; }
  .before-after, .features { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .section { padding: 48px 0; }
  .nav .btn.ghost, .nav .long { display: none; }
  .nav .btn.secondary { padding-inline: .7em; }
  .nav .short { display: inline; }
  .nav .btn { white-space: nowrap; padding-inline: .9em; font-size: .92rem; }
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  min-height: 36px; padding: .3em .8em; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: 500 .88rem/1 var(--font); cursor: pointer;
}
.lang-toggle:hover { border-color: var(--ink); }
.lang-toggle .lt-short { display: none; }
@media (max-width: 600px) { .site-head .lang-toggle .lt-long { display: none; } .site-head .lang-toggle .lt-short { display: inline; } .site-head .lang-toggle { padding-inline: .7em; } .site-head .logo { font-size: 1.35rem; } .site-head .wrap { gap: .5rem; } }
.on-dark .lang-toggle, .side .lang-toggle, .shop-hero .lang-toggle { color: #E8ECF3; border-color: rgba(255,255,255,.25); }
.on-dark .lang-toggle:hover, .side .lang-toggle:hover { border-color: #fff; }
.side .lang-toggle { align-self: flex-start; margin: 6px .8em; }

/* English: Readex for body, Amiri's Latin serif for display */
:root[lang="en"] h1 { letter-spacing: -0.01em; line-height: 1.15; }
:root[lang="en"] h2 { line-height: 1.2; }

/* features */
.features > div { border-top: 1px solid var(--line); padding-top: 16px; }
.features > .feature-lead { border-top: 3px solid var(--tape); padding-top: 14px; }

/* templates */
.tpl-list { display: grid; gap: 12px; }
.tpl-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.tpl-item .grow { flex: 1; min-width: 180px; }
.tpl-item .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1.1fr 1.1fr 1.1fr auto; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.field-row .opts { grid-column: 1 / -1; }
.field-row .ctrls { display: flex; gap: 2px; }
.field-row label { font-size: .8rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .ctrls { grid-column: 1 / -1; } }

.side .logo { font-size: 1.3rem; line-height: 1.3; }