/* ===== PROTI Customer Portal — هوية أخضر/أصفر، RTL، Mobile-first ===== */
@font-face{font-family:'Rubik';src:url('/fonts/Rubik.ttf') format('truetype');font-weight:300 800;font-display:swap;}

:root{
  --green:#003221; --green-2:#064b33; --green-soft:#7dba9b;
  --yellow:#e0be1c; --yellow-2:#ffdb3d;
  --bg:#f8faf9; --surface:#ffffff; --surface-2:#f2f4f3; --surface-3:#eceeed;
  --ink:#191c1c; --muted:#404943; --line:#e1e3e2;
  --error:#ba1a1a; --ok:#168b55;
  --r-lg:24px; --r-md:16px; --r-sm:12px; --pill:999px;
  --glow:0 8px 24px rgba(6,75,51,.06);
  --tap:48px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:'Rubik',system-ui,'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--ink);
  direction:rtl;min-height:100vh;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom,0));}
body.no-nav{padding-bottom:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ===== Layout ===== */
.wrap{max-width:760px;margin:0 auto;padding:0 16px;}
.topbar{position:sticky;top:0;z-index:40;background:var(--surface);box-shadow:var(--glow);}
.topbar .row{max-width:760px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.topbar .logo{height:30px;}
.topbar .icon-btn{width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;color:var(--green-2);background:none;border:0;cursor:pointer;border-radius:var(--pill);}
main{padding:16px 0 8px;}

/* ===== Cards ===== */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--glow);padding:20px;margin-bottom:16px;}
.card.tight{padding:16px;}
.card h2{margin:0 0 12px;font-size:18px;font-weight:600;}
.card h3{margin:0 0 8px;font-size:15px;font-weight:600;}
.section-title{font-size:20px;font-weight:600;color:var(--green);margin:4px 2px 12px;}
.hero-greet{font-size:24px;font-weight:600;margin:6px 2px 2px;}
.hero-sub{color:var(--muted);margin:0 2px 12px;}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);padding:5px 12px;font-size:12px;font-weight:600;}
.pill.green{background:rgba(6,75,51,.10);color:var(--green-2);}
.pill.yellow{background:rgba(224,190,28,.16);color:#6b5a00;}
.pill.gray{background:var(--surface-3);color:var(--muted);}
.pill.red{background:rgba(186,26,26,.10);color:var(--error);}
.pill.ok{background:rgba(22,139,85,.12);color:var(--ok);}

.idchip{background:rgba(6,75,51,.08);color:var(--green-2);border-radius:var(--pill);padding:4px 12px;font-size:13px;font-weight:600;display:inline-block;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:12px 20px;border-radius:var(--r-md);font-family:inherit;font-size:15px;font-weight:600;
  border:0;cursor:pointer;transition:transform .12s,opacity .12s;width:100%;}
.btn:active{transform:scale(.97);}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--green-2);color:#fff;}
.btn-yellow{background:var(--yellow);color:var(--green);}
.btn-ghost{background:transparent;color:var(--green-2);box-shadow:inset 0 0 0 1px var(--green-soft);}
.btn-danger{background:transparent;color:var(--error);box-shadow:inset 0 0 0 1px rgba(186,26,26,.4);}
.btn-sm{min-height:40px;padding:8px 14px;font-size:14px;width:auto;}
/* الأيقونات المضمّنة داخل الأزرار والعناوين — مقاس صريح (Bottom-Nav/Quick-Actions محكومة بقواعدها الخاصة) */
.btn svg{width:20px;height:20px;}
h3 svg{width:18px;height:18px;vertical-align:-3px;}

/* ===== Grids / rows ===== */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.deflist .d{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.deflist .d:last-child{border-bottom:0;}
.deflist .k{color:var(--muted);font-size:14px;}
.deflist .v{font-weight:600;font-size:14px;text-align:left;}
.progress{height:8px;background:var(--surface-3);border-radius:var(--pill);overflow:hidden;}
.progress>span{display:block;height:100%;background:var(--green-2);}

/* ===== Meal card ===== */
.meal{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:var(--r-md);padding:12px;box-shadow:var(--glow);margin-bottom:10px;}
.meal .thumb{width:76px;height:76px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 auto;background:linear-gradient(135deg,#e9f4ee,#dcede0);}
.meal .thumb.ph{display:flex;align-items:center;justify-content:center;background:rgba(6,75,51,.06);}
.meal .thumb.ph img{width:40px;height:40px;opacity:.5;}
.meal .body{flex:1;min-width:0;}
.meal .name{font-weight:600;font-size:15px;margin:0 0 4px;}
.meal .macros{display:flex;gap:6px;flex-wrap:wrap;}
.macro{background:var(--surface-2);border-radius:8px;padding:3px 8px;font-size:11px;color:var(--muted);}
.macro b{color:var(--green-2);}

.meal-hero-img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-md);margin-bottom:12px;background:rgba(6,75,51,.06);}
.meal-hero-img.ph{display:flex;align-items:center;justify-content:center;}

/* ===== Quick actions ===== */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.action{background:var(--surface-2);border:0;border-radius:var(--r-md);padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;min-height:var(--tap);color:var(--ink);font-family:inherit;transition:transform .12s;}
.action:active{transform:scale(.96);}
.action svg{width:26px;height:26px;color:var(--green-2);}
.action span{font-size:12px;font-weight:600;}

/* ===== Banner ===== */
.banner{border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;box-shadow:var(--glow);background:var(--green);color:#fff;}
.banner img{width:100%;height:auto;display:block;}
.banner .b-body{padding:16px;}
.banner .b-title{font-weight:700;font-size:18px;}
.banner .b-sub{opacity:.85;font-size:14px;margin-top:4px;}

/* ===== Banner carousel ===== */
.carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--glow);margin:6px 0 18px;background:var(--surface-3);}
.c-track{display:flex;direction:ltr;transition:transform .35s ease;will-change:transform;}
.c-cell{flex:0 0 100%;min-width:100%;display:block;}
.c-slide{position:relative;width:100%;aspect-ratio:16/9;background:rgba(6,75,51,.06);}
.c-slide img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;}
.c-body{position:absolute;inset-inline:0;bottom:0;direction:rtl;padding:14px 16px;color:#fff;
  background:linear-gradient(to top,rgba(0,25,15,.72),rgba(0,25,15,0));}
.c-title{font-weight:700;font-size:17px;}
.c-sub{font-size:13px;opacity:.9;margin-top:2px;}
.c-cta{display:inline-block;margin-top:8px;background:var(--yellow);color:var(--green);font-weight:700;font-size:13px;border-radius:var(--pill);padding:6px 14px;}
.c-dots{position:absolute;inset-inline:0;bottom:8px;display:flex;gap:6px;justify-content:center;}
.c-dot{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;}
.c-dot.on{background:#fff;width:18px;border-radius:5px;}

/* ===== Menu quick action (yellow) + link rows ===== */
.actions-5{grid-template-columns:repeat(5,1fr);}
@media(max-width:520px){.actions-5{grid-template-columns:repeat(3,1fr);}}
.action-menu{background:var(--yellow);color:var(--green);}
.action-menu svg{color:var(--green);}
.link-list{display:flex;flex-direction:column;}
.link-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);color:var(--ink);min-height:var(--tap);}
.link-row:last-child{border-bottom:0;}
.link-row .li{width:38px;height:38px;border-radius:var(--pill);background:rgba(6,75,51,.08);display:flex;align-items:center;justify-content:center;color:var(--green-2);}
.link-row .li svg{width:20px;height:20px;}
.link-row .li.wa{background:rgba(37,211,102,.14);color:#128c4b;}
.link-row>span:nth-child(2){flex:1;font-weight:600;}
.link-row .chev{color:var(--muted);font-size:22px;}

/* ===== Bottom nav (5) ===== */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--surface);
  box-shadow:0 -8px 24px rgba(6,75,51,.06);border-top-left-radius:18px;border-top-right-radius:18px;
  padding-bottom:env(safe-area-inset-bottom,0);}
.bnav .inner{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);}
.bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:76px;color:var(--muted);opacity:.7;position:relative;}
.bnav a svg{width:24px;height:24px;}
.bnav a span{font-size:11px;font-weight:600;}
.bnav a.active{color:var(--green-2);opacity:1;}
.bnav a.active::before{content:"";position:absolute;top:8px;width:5px;height:5px;border-radius:50%;background:var(--green-2);}

/* ===== Skeleton ===== */
.sk{position:relative;overflow:hidden;background:var(--surface-3);border-radius:10px;}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 1.2s infinite;}
[dir=rtl] .sk::after{animation:shine-rtl 1.2s infinite;}
@keyframes shine{100%{transform:translateX(100%);}}
@keyframes shine-rtl{100%{transform:translateX(100%);}}
.sk-line{height:14px;margin:8px 0;}
.sk-block{height:120px;}
.sk-thumb{width:76px;height:76px;flex:0 0 auto;}

/* ===== Empty / error ===== */
.state{text-align:center;padding:34px 18px;color:var(--muted);}
.state svg{width:56px;height:56px;color:var(--green-soft);margin-bottom:10px;}
.state h3{margin:0 0 6px;color:var(--ink);font-size:16px;}
.state p{margin:0 0 14px;font-size:14px;}

/* ===== Modal ===== */
.modal-layer{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(10,20,15,.45);}
.modal-layer.open{display:flex;}
.modal{background:var(--surface);width:100%;max-width:520px;border-top-left-radius:22px;border-top-right-radius:22px;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom,0));max-height:88vh;overflow:auto;animation:sheet .22s ease;}
@keyframes sheet{from{transform:translateY(20px);opacity:.6;}to{transform:translateY(0);opacity:1;}}
.modal .m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.modal .m-head h3{margin:0;font-size:18px;font-weight:600;}
.field{margin:12px 0;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.control{width:100%;min-height:var(--tap);border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md);
  padding:12px;font-family:inherit;font-size:15px;color:var(--ink);}
.quote-box{background:var(--surface-2);border-radius:var(--r-md);padding:14px;margin:12px 0;font-size:14px;}
.quote-box .fee{font-size:20px;font-weight:700;color:var(--green-2);}
.note{font-size:12px;color:var(--muted);margin-top:8px;}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:90;background:var(--green);color:#fff;
  padding:12px 18px;border-radius:var(--pill);font-size:14px;box-shadow:var(--glow);opacity:0;transition:opacity .2s,transform .2s;max-width:90%;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.toast.err{background:var(--error);}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.login-card{width:100%;max-width:400px;text-align:center;}
.login-card .logo{height:44px;margin:0 auto 20px;}
.login-card h1{font-size:24px;font-weight:600;margin:0 0 6px;}
.login-card p{color:var(--muted);margin:0 0 22px;}
.err-msg{color:var(--error);font-size:13px;margin-top:8px;min-height:18px;}

/* ===== Desktop / tablet ===== */
@media(min-width:768px){
  body{padding-bottom:8px;}
  .bnav{position:sticky;top:60px;bottom:auto;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);background:var(--surface);}
  .bnav .inner{grid-template-columns:repeat(5,max-content);gap:8px;justify-content:center;}
  .bnav a{height:56px;flex-direction:row;gap:8px;padding:0 16px;}
  .bnav a.active::before{display:none;}
  .grid2{grid-template-columns:1fr 1fr;}
  main{padding-top:20px;}
}

/* ================= v2: تجديد/طلبات جديدة/تقييم ================= */
.actions-3{grid-template-columns:repeat(3,1fr);}
.renew-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:rgba(224,190,28,.12);box-shadow:inset 0 0 0 1px rgba(224,190,28,.5);}
.renew-alert .ra-txt b{color:var(--green);}
.renew-alert .btn-sm{width:auto;}

/* منتقي الكمية في طلب الوجبة */
.qty-row{display:flex;align-items:center;gap:12px;margin-top:8px;}
.qty-row .qn{min-width:24px;text-align:center;font-weight:700;color:var(--green-2);}
.order-list{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:4px;}
.meal-wrap{margin-bottom:10px;}

/* شريط التقييم أسفل الوجبة */
.fb-bar{display:flex;align-items:center;gap:10px;justify-content:flex-start;margin:-4px 2px 12px;}
.fb-bar.rated{color:var(--ok);}
.fb-bar .ok-txt{font-size:13px;font-weight:600;color:var(--ok);}
.fb-stars{display:inline-flex;gap:2px;}
.fb-stars .star{width:16px;height:16px;color:var(--surface-3);}
.fb-stars .star.on{color:var(--yellow);}
.fb-stars .star svg{width:16px;height:16px;}

/* نجوم اختيار التقييم داخل المودال */
.stars{display:flex;gap:8px;}
.stars .star{width:40px;height:40px;background:none;border:0;cursor:pointer;color:var(--surface-3);padding:2px;}
.stars .star.on{color:var(--yellow);}
.stars .star svg{width:100%;height:100%;}

/* مبدّل نعم/لا */
.seg{display:flex;gap:6px;background:var(--surface-2);border-radius:var(--pill);padding:4px;}
.seg-b{flex:1;min-height:40px;border:0;background:transparent;border-radius:var(--pill);cursor:pointer;font-family:inherit;font-weight:600;color:var(--muted);}
.seg-b.on{background:var(--green-2);color:#fff;}
.fb-meal{margin-bottom:6px;font-weight:600;color:var(--ink);}

/* البيع المباشر داخل «طلباتي» + منتقي أيام «على ذوقك» */
.ds-item{padding:6px 0;border-bottom:1px solid var(--line);}
.ds-item:last-child{border-bottom:0;}
.ds-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.cday{background:var(--surface-2);box-shadow:none;margin-bottom:10px;}
.cday .cmeals .qty-row{margin-top:6px;}
.cday .cmeal{flex:1;}

/* ================= تقويم اختيار أيام «على ذوقك» ================= */
.cal{background:var(--surface-2);border-radius:var(--r-md);padding:10px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.cal-head b{font-size:14px;color:var(--green);}
.cal-head .btn-sm{width:auto;min-height:34px;padding:4px 12px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-week{margin-bottom:4px;}
.cal-week span{text-align:center;font-size:10px;color:var(--muted);padding:2px 0;}
.cal-cell{aspect-ratio:1/1;min-height:36px;border:0;border-radius:10px;background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:transform .1s;}
.cal-cell:active{transform:scale(.92);}
.cal-cell.empty{background:transparent;cursor:default;}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--green-soft);}
.cal-cell.on{background:var(--green-2);color:#fff;}
.cal-cell.off{background:transparent;color:var(--surface-3);cursor:not-allowed;text-decoration:line-through;}
@media(max-width:380px){.cal-cell{min-height:32px;font-size:12px;}}