/* =====================================================================
   foodordo.css — التصميم المشترك بين كل صفحات التطبيق
   يُستدعى من كل صفحة بسطر واحد في <head>:
       <link rel="stylesheet" href="foodordo.css" />
   ما فيه: ألوان التطبيق (الليلي والنهاري)، الشريط العلوي الموحّد،
   رسائل التوست، وزرّ Google.
   ملاحظة: أيّ صفحة تحتاج قيمة مختلفة تكتبها في <style> الخاصّ بها،
   فهو يأتي بعد هذا الملف ويعلو عليه.
   ===================================================================== */

/* ===== ألوان المظهر الليلي (الأساس) ===== */
  :root{--bg:#0F1116;--bg2:#141822;--card:#191C24;--line:#2A2F3A;--text:#F3F5F8;--muted:#AEB6C3;
        --orange1:#FBA255;--orange2:#F0762E;--green1:#4ECB99;--green2:#2FB07F;--purple1:#9887FF;--purple2:#7A6BF5;--blue1:#5C9BFF;--blue2:#3D74E6;--amber:#F3C969;--red:#FF6B6B;}

/* ===== ألوان المظهر النهاري ===== */
  body.light{
    --bg:#FFFFFF; --bg2:#F5F7FB; --card:#FFFFFF; --line:#E2E7F0;
    --text:#151A22; --muted:#5C6879;
    /* أحمر · أخضر · أزرق — بنفس أدوار التصميم الأصلي */
    --orange1:#F0566B; --orange2:#DB2438;   /* مكان البرتقالي: أحمر */
    --green1:#0B8A5B;  --green2:#067A50;    /* أخضر حقيقي */
    --purple1:#3B6FEA; --purple2:#2450D8;   /* مكان البنفسجي: أزرق */
    --blue1:#2563EB;   --blue2:#1B4FD1;
    --amber:#C2410C;   --red:#DB2438;

    --ink:#151A22; --label:#1B2430; --hair:#EDF1F7;
    --dim:#7A8598; --dim2:#8A94A6; --dim3:#94A0B2;
    --glow:#EFF4FD; --line2:#DDE4EF; --inset:#F8FAFD;
    --redbg:#FDECEE; --redline:#F6C9CF; --redtx:#C42033; --warntx:#A81B2C;
    --grnbg:#EAF2FE; --grnline:#C6DAFA;
    --ambbg:#FFF0EA; --ambline:#FBD2C2;
    --prpbg:#EDF1FE; --prpline:#CCD8FA;
    --neubg:#EEF1F6; --neutx:#41506A;
    --outbg:#FDECEE; --outline:#F6C9CF; --outtx:#C42033;
    --tot1:#F4F8FF; --tot2:#EDF3FC; --cat1:#FFFFFF; --cat2:#FAFCFF;
    --caton1:#FDECEE; --caton2:#FFF6F7; --catic:#F1F5FB;
    --pw1:#EAF2FE; --pw2:#F3F8FF; --mut1:#9AA5B5; --mut2:#7A8598;
  }

  /* ===== الشريط العلوي الموحّد: كل الرموز بنفس الشكل والقياس وعلى مستوى واحد ===== */
  .topgrp{display:flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);
          border-radius:16px;padding:5px;flex:0 0 auto}
  .iconbtn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--muted);
           cursor:pointer;display:grid;place-items:center;padding:0;flex:0 0 auto;transition:background .15s,color .15s}
  .iconbtn:hover{background:var(--bg2);color:var(--ink)}
  .iconbtn svg{width:21px;height:21px;fill:currentColor}
  .iconbtn.out{color:#FF6B6B}

  /* ===== زرّ اللغة: نفس الشكل ونفس القياس ونفس الموضع في كل الصفحات =====
     يوضع دائماً أوّل زرّ في .topgrp — حرفان بدل رمز، وبنفس مربّع 40×40
     كي يبقى الشريط مستوياً مهما اختلفت الصفحة. */
  .langbtn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;
           color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;
           flex:0 0 auto;font-family:inherit;font-weight:900;font-size:13px;letter-spacing:.4px;
           transition:background .15s,color .15s}
  .langbtn:hover{background:var(--bg2);color:var(--ink,var(--text))}

  /* شريط مثبّت أعلى الصفحة لمن ليس لها شريط علوي بجانب الشعار */
  .topgrp.fixed{position:fixed;top:14px;z-index:60}
  html[dir="rtl"] .topgrp.fixed{left:14px}
  html[dir="ltr"] .topgrp.fixed{right:14px}

  /* ===== القائمة المنسدلة: اللغات الثلاث، كلٌّ باسمها هي ===== */
  #langMenu{position:fixed;z-index:9998;display:none;flex-direction:column;gap:2px;
            min-width:158px;padding:6px;border-radius:14px;
            background:var(--card);border:1px solid var(--line);
            box-shadow:0 14px 34px rgba(0,0,0,.45)}
  #langMenu.open{display:flex}
  .langitem{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;
            border:0;border-radius:10px;background:transparent;color:var(--ink,var(--text));
            font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;text-align:start}
  .langitem:hover{background:var(--bg2)}
  .langitem .tick{flex:0 0 14px;width:14px;font-size:13px;color:var(--green1);visibility:hidden}
  .langitem.on{color:var(--green1)}
  .langitem.on .tick{visibility:visible}

/* ===== ستار الإقلاع =====
   العائد من Google — أو من كانت جلسته محفوظة — كان يرى صفحة التسجيل
   تومض ثمّ تختفي، لأنّ المتصفّح يرسمها قبل أن نعرف من هو. فنغطّيها
   برمز تحميل حتى يتقرّر مصيره، ثمّ يُرفع الستار على الشاشة الصحيحة. */
  #bootcover{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:var(--bg)}
  html[data-boot="1"] #bootcover{display:grid}
  .foload{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);
          border-top-color:var(--green1);animation:fospin .8s linear infinite}
  @keyframes fospin{to{transform:rotate(360deg)}}

/* ===== توست: يتبع المستخدم، أسفل الشاشة، يختفي بعد 4 ثوانٍ ===== */
  #toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);z-index:9999;
    max-width:min(92vw,460px);padding:12px 16px;border-radius:14px;font-size:14px;font-weight:800;line-height:1.6;
    display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
    box-shadow:0 12px 32px rgba(0,0,0,.45);border:1px solid var(--line);background:var(--card);color:var(--ink,#fff)}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  #toast.err{background:#12141A;border-color:#3A2126;color:#FF8A8A}
  #toast.ok{background:#12141A;border-color:#1E4A32;color:var(--green1)}
  #toast .ic{font-size:17px;flex:0 0 auto}

/* ===== زرّ الدخول بحساب Google ===== */
  .gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
        padding:14px;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:800;
        font-size:15.5px;background:#fff;color:#1F1F1F;border:1px solid #DADCE0}
  .gbtn:active{transform:translateY(1px)}
  .gbtn svg{width:19px;height:19px;flex:0 0 19px}