/* EL OUATINE — light, eye-friendly theme: white / light grey, navy + teal + lime accents. Mobile-first. */
:root{
  --bg:#f4f7fb; --bg2:#ffffff; --card:#ffffff; --card2:#fbfdff;
  --line:#e3eaf4; --teal:#00bfa5; --teal-d:#009e86;
  --lime:#84cc16; --lime-soft:#ecfccb;
  --navy:#10233f; --text:#16294a; --muted:#5d6f8c; --muted2:#8fa0b8;
  --danger:#dc2626; --warn:#d97706; --info:#2563eb; --ok:#16a34a;
  --radius:14px; --shadow:0 4px 18px rgba(16,35,63,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",Tahoma,Arial,sans-serif;
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
}
html[dir="rtl"] body{font-family:"Segoe UI","Noto Sans Arabic",Tahoma,Arial,system-ui,sans-serif}
a{color:var(--teal-d); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{width:100%; max-width:1100px; margin:0 auto; padding:0 16px}

/* ---------- Header ---------- */
.site-header{background:#ffffff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; box-shadow:0 2px 10px rgba(16,35,63,.05)}
.header-inner{display:flex; align-items:center; gap:12px; padding:10px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800}
.brand:hover{text-decoration:none}
.brand-logo{width:46px; height:46px; border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.brand-logo img{width:100%; height:100%; object-fit:contain}
.brand-text-badge{font-size:11px; font-weight:900; letter-spacing:.5px; color:#0b4f4a; text-align:center; line-height:1.15; padding:0 6px}
.brand-name{font-size:18px; letter-spacing:1px}
.brand-sub{font-size:11px; color:var(--muted); font-weight:500; letter-spacing:.5px}
.main-nav{display:flex; gap:4px; flex-wrap:wrap; margin-inline-start:auto; align-items:center}
.main-nav a{color:var(--muted); padding:8px 12px; border-radius:10px; font-size:14px; font-weight:600}
.main-nav a:hover{background:#eef3f9; color:var(--text); text-decoration:none}
.main-nav a.active{background:#e7f6f4; color:var(--teal-d)}
.lang-switch{display:flex; gap:4px; background:#eef3f9; border:1px solid var(--line); border-radius:999px; padding:3px}
.lang-switch button{border:0; background:transparent; color:var(--muted); font-weight:700; font-size:12px; padding:5px 10px; border-radius:999px; cursor:pointer}
.lang-switch button.active{background:var(--teal); color:#fff}
.lang-select{border:0; background:transparent; color:var(--navy); font-weight:700; font-size:13px; padding:6px 8px; border-radius:999px; cursor:pointer; max-width:150px}
.lang-select:focus{outline:2px solid var(--teal)}
/* language globe menu */
#lang-switch{position:relative}
.lang-btn{border:0; background:transparent; font-size:21px; line-height:1; cursor:pointer; padding:5px 9px; border-radius:50%}
.lang-btn:hover{background:#eef3f9}
.lang-menu{position:absolute; top:calc(100% + 8px); inset-inline-end:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 34px rgba(16,35,63,.18); min-width:200px; max-height:330px; overflow:auto; z-index:300; padding:6px}
.lang-opt{display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--navy); text-align:start}
.lang-opt:hover{background:#eef3f9}
.lang-opt.active{background:#e2f3f1; font-weight:700}
.lang-opt .flag{font-size:19px}
.hidden{display:none!important}
/* international phone picker */
.phone-wrap{display:flex; gap:8px}
.cc-select{max-width:132px; flex:none; border:1px solid var(--line); border-radius:10px; padding:10px 6px; font-size:14px; background:#fff; color:var(--navy)}
.phone-wrap input[type=tel]{flex:1; min-width:0}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:56px 0 48px; background:
  radial-gradient(700px 340px at 85% 10%, rgba(0,191,165,.14), transparent 60%),
  radial-gradient(600px 300px at 10% 90%, rgba(132,204,22,.14), transparent 60%), var(--bg2)}
.hero::before{content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 L90 2 L120 52 L90 102 L30 102 L0 52 Z' fill='none' stroke='%2300968a' stroke-width='2'/%3E%3C/svg%3E");
  background-size:120px 104px}
.hero-inner{position:relative}
.hero h1{font-size:clamp(26px,5.5vw,44px); margin:0 0 10px; line-height:1.25; color:var(--navy)}
.hero h1 .accent{color:var(--teal-d)}
.hero p.lead{color:var(--muted); font-size:clamp(15px,3.5vw,18px); max-width:640px; margin:0 0 24px}
.hero-ctas{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px;
  padding:12px 20px; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; transition:.15s}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:none}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{background:var(--teal); color:#fff}
.btn-primary:hover{background:var(--teal-d)}
.btn-lime{background:var(--lime); color:#fff}
.btn-lime:hover{background:#6b9e12}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-d)}
.btn-danger{background:#fdf0ef; color:var(--danger); border:1px solid #f3c1bd}
.btn-small{padding:8px 14px; font-size:13px; border-radius:10px}
.btn-block{width:100%}

/* ---------- Cards / layout ---------- */
main{flex:1; padding:24px 0 48px}
.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h2,.card h3{margin:0 0 12px; color:var(--navy)}
.section-title{margin:6px 0 16px; font-size:22px; display:flex; align-items:center; gap:10px; color:var(--navy)}
.section-title::before{content:""; width:10px; height:26px; background:linear-gradient(180deg,var(--teal),var(--lime)); border-radius:3px; flex:0 0 auto}
.muted{color:var(--muted)} .small{font-size:13px}
.center{text-align:center}
.mt{margin-top:16px}

/* ---------- Forms ---------- */
form .field{margin-bottom:14px}
label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); border-color:var(--teal)}
textarea{min-height:110px; resize:vertical}
.hint{font-size:12.5px; color:var(--muted2); margin-top:4px}
.error-box{background:#fdf0ef; border:1px solid #f3c1bd; color:#9a2f29; padding:10px 14px; border-radius:10px; margin-bottom:14px; font-size:14px}
.success-box{background:#ecfdf3; border:1px solid #a9e5bd; color:#166534; padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:14px}
.form-row{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}

/* ---------- Brand badge selector ---------- */
.brand-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
.brand-badge{border:1px solid var(--line); background:#fff; color:var(--text); border-radius:12px;
  padding:10px 6px; text-align:center; font-weight:700; font-size:13px; cursor:pointer; transition:.12s}
.brand-badge:hover{border-color:var(--teal)}
.brand-badge.selected{background:#e7f6f4; border-color:var(--teal); color:var(--teal-d); box-shadow:0 0 0 1px var(--teal)}
.cat-chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:600; cursor:pointer}
.chip.selected{background:var(--teal); border-color:var(--teal); color:#fff}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
th,td{padding:10px 12px; text-align:start; border-bottom:1px solid var(--line)}
th{background:#eef3f9; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f6fafd}

/* ---------- Status badges ---------- */
.badge{display:inline-block; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap}
.b-received{background:#e3ecfb; color:#1d4ed8}
.b-diagnosing{background:#fef3d8; color:#a16207}
.b-in_repair{background:#e8e4fb; color:#6d28d9}
.b-ready{background:var(--lime-soft); color:#5b8a10}
.b-delivered{background:#dcf9ea; color:#15803d}
.b-cancelled,.b-rejected{background:#fde8e7; color:#b3261e}
.b-awaiting_payment,.b-pending{background:#fef3d8; color:#a16207}
.b-paid,.b-approved{background:#dcf9ea; color:#15803d}
.b-completed{background:#dcf5f2; color:#00776e}
.b-topup{background:#e3ecfb; color:#1d4ed8}
.b-purchase{background:var(--lime-soft); color:#5b8a10}
.b-adjustment{background:#edf1f6; color:#4b5a74}

/* ---------- Price / catalog ---------- */
.price{font-size:20px; font-weight:800; color:var(--teal-d)}
.price .cur{font-size:13px; color:var(--muted); font-weight:600}
.price-guest-tag{font-size:12px; color:var(--muted)}
.onrequest{font-weight:700; color:var(--warn)}
.catalog-cat{margin:26px 0 10px}
.catalog-cat h3{margin:0; display:flex; align-items:center; gap:8px; color:var(--navy)}
.svc-card{display:flex; flex-direction:column; gap:8px}
.svc-card .svc-name{font-weight:700; font-size:15px}
.svc-actions{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---------- Timeline ---------- */
.timeline{list-style:none; margin:14px 0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; top:8px; bottom:8px; inset-inline-start:7px; width:2px; background:var(--line)}
.timeline li{position:relative; padding:6px 0 6px 28px; font-size:14px}
html[dir="rtl"] .timeline li{padding:6px 28px 6px 0}
.timeline li::before{content:""; position:absolute; inset-inline-start:0; top:11px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--muted2)}
.timeline li.done::before{background:var(--teal); border-color:var(--teal)}
.timeline li.current::before{background:var(--lime); border-color:var(--lime); box-shadow:0 0 0 4px rgba(124,181,24,.18)}
.timeline .tl-time{color:var(--muted2); font-size:12px; margin-inline-start:8px}

/* ---------- Messages ---------- */
.msg-thread{display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; padding:4px 2px}
.msg{max-width:85%; padding:10px 14px; border-radius:14px; font-size:14px}
.msg .msg-meta{font-size:11px; color:var(--muted2); margin-top:4px}
.msg.customer{align-self:flex-start; background:#eef3f9; border:1px solid var(--line)}
html[dir="rtl"] .msg.customer{align-self:flex-end}
.msg.owner{align-self:flex-end; background:#e7f6f4; border:1px solid #bfe6e1}
html[dir="rtl"] .msg.owner{align-self:flex-start}
.msg-form{display:flex; gap:8px; margin-top:12px}
.msg-form input{flex:1}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:12px}
.tabs button{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px; cursor:pointer}
.tabs button.active{background:var(--teal); border-color:var(--teal); color:#fff}
.tabs button .count{background:rgba(0,0,0,.12); border-radius:999px; padding:1px 8px; font-size:12px; margin-inline-start:6px}

/* ---------- KPI cards ---------- */
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.kpi .kpi-label{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600}
.kpi .kpi-value{font-size:24px; font-weight:800; color:var(--teal-d); margin-top:4px}
.kpi .kpi-value.teal{color:var(--teal)} .kpi .kpi-value.warn{color:var(--warn)}

/* ---------- Copy rows / payment details ---------- */
.kv{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:15px}
.kv:last-child{border-bottom:0}
.kv .kv-key{color:var(--muted); font-size:13.5px}
.kv .kv-val{font-weight:700; font-family:ui-monospace,Consolas,monospace; letter-spacing:.5px; direction:ltr}
.copy-btn{border:1px solid var(--line); background:#eef3f9; color:var(--teal-d); border-radius:8px; padding:5px 12px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap}
.copy-btn:hover{border-color:var(--teal)}
.coming-soon{display:inline-block; background:#fef9ec; border:1px dashed var(--warn); color:var(--warn); padding:8px 16px; border-radius:10px; font-weight:700; font-size:14px}

/* ---------- Modal ---------- */
.modal-back{position:fixed; inset:0; background:rgba(16,35,63,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px}
.modal{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; width:100%; max-width:480px; box-shadow:0 16px 48px rgba(16,35,63,.2)}
.modal h3{margin-top:0; color:var(--navy)}
.modal-actions{display:flex; gap:10px; margin-top:16px; justify-content:flex-end}

/* ---------- Toast ---------- */
#toast{position:fixed; bottom:20px; inset-inline:0; margin-inline:auto; width:max-content; max-width:90vw; background:var(--navy); border:1px solid var(--teal); color:#fff; padding:12px 20px; border-radius:12px; font-weight:600; z-index:200; opacity:0; pointer-events:none; transition:opacity .25s; box-shadow:var(--shadow)}
#toast.show{opacity:1}

/* ---------- Workshop gate ---------- */
.gate-wrap{max-width:440px; margin:8vh auto 0}
.hex-icon{width:84px; height:84px; margin:0 auto 18px; background:linear-gradient(135deg,var(--teal),var(--lime));
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
  display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; font-weight:900}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); background:#fff; padding:26px 0; margin-top:auto}
.footer-grid{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between}
.footer-grid .f-block{font-size:13.5px; color:var(--muted)}
.footer-grid .f-block strong{color:var(--text)}
.footer-bottom{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted2); text-align:center}

/* ---------- Misc ---------- */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.toolbar input[type=text],.toolbar select{width:auto; min-width:180px}
.search-bar{position:relative; margin-bottom:14px}
.search-bar input{padding-inline-start:40px}
.search-bar .s-ico{position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted2)}
.detail-grid{display:grid; grid-template-columns:1fr; gap:6px; font-size:14.5px}
@media(min-width:640px){.detail-grid{grid-template-columns:1fr 1fr}}
.detail-grid dt{color:var(--muted); font-size:12.5px}
.detail-grid dd{margin:0 0 8px; font-weight:600}
.photo-thumb{max-width:100%; max-height:260px; border-radius:10px; border:1px solid var(--line)}
.empty{padding:30px 10px; text-align:center; color:var(--muted2)}
.wallet-balance{font-size:34px; font-weight:800; color:var(--teal-d)}
.print-area{color:#111}
@media print{
  .site-header,.site-footer,#toast,.no-print{display:none !important}
  body{background:#fff; color:#111}
  main{padding:0}
}