/*========== Start Of Custom Sizes ==========*/
/* ====================== ثيم برلين (berllin) ====================== */
    #berlin-sizes{
      --red:#dc2626; --dark:#b91c1c;
      --bg:#ffffff; --text:#0f172a; --muted:#64748b; --bor:#e2e8f0;
      --r:12px; --sh:0 3px 10px rgba(0,0,0,.06);
      font-family:system-ui,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);
      background:var(--bg);
    }
    /* تمركز وسط الشاشة على الدسكتوب */
    @media (min-width: 992px){
      #berlin-sizes{
        min-height:100vh; display:grid; place-items:center; padding:24px;
      }
    }
    /* جوال/تابلت: هوامش مريحة */
    @media (max-width: 991.98px){
      #berlin-sizes{ padding:16px 10px; }
    }

    #berlin-sizes .wrap{ width:min(920px,92vw, 100%); margin:0 auto; }
    #berlin-sizes h1{margin:0 0 10px;font-size:18px;color:var(--red);text-align:center;font-weight:900}
    .card,.guide{background:#fff;border:1px solid var(--bor);border-radius:var(--r);box-shadow:var(--sh);padding:10px}

    /* مبدّل الوحدات */
    .unit-switch{display:flex;max-width:320px;margin:0 auto 10px;border:1px solid var(--bor);border-radius:10px;overflow:hidden;background:#fff}
    .unit-switch input{display:none}
    .unit-switch label{flex:1;text-align:center;padding:8px 6px;cursor:pointer;font-weight:800;font-size:13px}
    .unit-switch input:checked+label{background:var(--red);color:#fff}

    /* زر غرفة القياسات */
    .fit-wrap{display:flex;justify-content:center;margin:8px 0 12px}
    .fit-btn,.btn-primary,.x{
      background:var(--red);color:#fff;border:1px solid var(--dark);
      border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;
      box-shadow:0 6px 14px rgba(220,38,38,.22)
    }
    .fit-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding-inline:14px;transition:filter .15s ease}
    .fit-btn svg{width:20px;height:20px;fill:#fff}
    .fit-btn .badge{background:#fff;color:var(--red);border:1px solid var(--dark);border-radius:999px;font-size:10px;font-weight:900;padding:2px 6px}
    .fit-btn::after{content:"";position:absolute;inset:-4px;border-radius:12px;box-shadow:0 0 0 0 rgba(220,38,38,.35);pointer-events:none;animation:btn-ring 2.2s ease-out infinite}
    .fit-btn:hover{filter:brightness(1.05)}
    .fit-btn:focus-visible{outline:3px solid #fde2e2;outline-offset:2px}
    @keyframes btn-ring{0%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}70%{box-shadow:0 0 0 12px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}

    /* ====================== الجدول: يميني 100% ====================== */
    .table-wrap{overflow:auto;border:1px solid var(--bor);border-radius:10px;background:#fff;direction:rtl}
    table{
      width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;
      direction:rtl; unicode-bidi:bidi-override; /* يفرض ترتيب الأعمدة من اليمين */
    }
    thead,tbody,tr{direction:rtl}
    th,td{padding:10px 12px;text-align:right;border-bottom:1px solid #f1f5f9;white-space:nowrap}
    th{
      background:#fff7f7;color:#991b1b;border-bottom:1px solid var(--bor);
      position:sticky;top:0;z-index:1
    }
    tbody tr:nth-child(even){background:#fffafa}
    .note{margin:8px 0 0;color:var(--muted);font-size:11px;text-align:center}

    /* ====================== الشرح + رسم مبسّط ====================== */
    .guide h2{font-size:16px;color:#0f172a;margin:0 0 6px;text-align:center}
    .guide p{font-size:14px;line-height:1.8;margin:6px 0}
    .figure{display:flex;justify-content:center;margin-top:8px}
    .figure svg{max-width:300px;width:100%;height:auto}

    /* ====================== المودال ====================== */
    .modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:8px}
    .modal.show{display:flex}
    .sheet{width:min(92vw,720px);background:#fff;border:1px solid var(--bor);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.18);padding:12px;max-height:92vh;display:flex;flex-direction:column}
    .sheet header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bor);padding-bottom:8px}
    .sheet h3{margin:0;font-size:16px;color:#0f172a}
    .content{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;overflow:auto}
    @media (max-width:720px){.content{grid-template-columns:1fr}}
    .measure-form{display:grid;gap:10px}
    .row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
    .row input,.row select{width:100%;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}
    .row input:focus,.row select:focus{border-color:var(--red);box-shadow:0 0 0 3px #fee2e2}
    .unit-mini{display:inline-flex;border:1px solid var(--bor);border-radius:999px;overflow:hidden;background:#fff}
    .unit-mini input{display:none}
    .unit-mini label{padding:6px 10px;font-size:12px;cursor:pointer}
    .unit-mini input:checked+label{background:var(--red);color:#fff}
    .action-bar{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
    .btn-secondary{background:#fff;border:1px solid var(--bor);border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer}
    .result{border:1px solid var(--bor);border-radius:14px;padding:10px;background:linear-gradient(180deg,#fff,#fff6f6);display:grid;gap:8px}
    .result h4{margin:0;color:#0f172a;font-size:15px;text-align:center}
    .pill{display:inline-block;background:#fff;border:1px solid var(--bor);border-radius:999px;padding:6px 10px;font-size:12px}
    .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
    @media (max-width:420px){.kpi{grid-template-columns:1fr}}
    .rec-size{font-size:30px;font-weight:900;color:var(--red);text-align:center;line-height:1}
    .muted{color:var(--muted);font-size:12px;text-align:center}

    /* تقليل الحركة لمن يفضّل ذلك */
    @media (prefers-reduced-motion:reduce){
      .fit-btn::after{animation:none}
    }

    /* ضبط أحجام النصوص والحشوات على الشاشات الصغيرة */
    @media (max-width:480px){
      .row input,.row select{padding:9px 10px;font-size:15px}
      .unit-mini label{padding:5px 8px;font-size:11px}
      .btn-primary,.btn-secondary,.x{padding:8px 10px;font-size:13px}
      .rec-size{font-size:24px}
      .pill{padding:5px 8px;font-size:11px}
      th,td{padding:8px 10px}
    }
    @media (max-width:380px){
      table{font-size:11px}
    }
/*========== End Of Custom Sizes ==========*/