/* ============================================================ WeGSM — الهوية البصرية (أخضر زمردي + Inter / Readex Pro) يُحمَّل بعد الأنماط الأصلية في index.php و panel.php ليطغى عليها. ============================================================ */ :root { /* أسماء قديمة مربوطة بتوكنز wegsm-tokens.css (بيتحمّل قبل الملف ده) */ --brand: var(--wg-emerald-600, #0B7A5E); --brand-2: var(--wg-emerald-500, #12A575); --brand-deep: var(--wg-emerald-700, #075C46); --brand-soft: var(--wg-emerald-100, #DBF0E7); --brand-soft-2: var(--wg-emerald-50, #EEF7F2); --ink: var(--wg-ink, #0F1D16); --muted: var(--wg-muted, #5A6C63); --line: var(--wg-line, #DBE4DF); --ground: var(--wg-ground, #F2F6F4); --card: #FFFFFF; --sunk: var(--wg-sunk, #E6EDE9); --gold: var(--wg-gold-500, #B8862A); --gold-soft: var(--wg-gold-100, #F6ECD6); --danger-c: #B42329; --shadow-soft: 0 12px 30px -20px rgba(8, 40, 30, .45); --display: "Inter", "Readex Pro", Tahoma, sans-serif; --body-font: "Inter", "Readex Pro", Tahoma, "Segoe UI", sans-serif; --mono: "Inter", "Readex Pro", Consolas, monospace; /* متغيرات الملفات الأصلية */ --primary: #0B7A5E; --secondary: #0B7A5E; --bg: #F2F6F4; --bg-body: #F2F6F4; --text: #0F1D16; --text-main: #0F1D16; --success: #12A575; --danger: #B42329; --warning: #D97706; } body { font-family: var(--body-font) !important; color: var(--ink); } h1, h2, h3, h4, h5, .app-title, .inner-title { font-family: var(--display); } input, select, textarea, button { font-family: inherit; } /* ---------- عناصر مشتركة جديدة ---------- */ .wg-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 12px; } .wg-sec-h h2, .wg-sec-h h4 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--ink); } /* خطوات "إزاي تطلب" */ .wg-steps { display: grid; gap: 12px; margin-top: 8px; } .wg-step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; } .wg-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; } .wg-step b { font-size: .92rem; display: block; } .wg-step p { font-size: .8rem; color: var(--muted); margin: 2px 0 0; } /* شريط تقدّم رحلة الطلب (4 خطوات) */ .journey { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin: 0 auto 16px; max-width: 600px; padding: 12px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .journey .js { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; text-align: center; } .journey .js::after { content: ""; position: absolute; top: 13px; inset-inline-start: calc(50% + 16px); width: calc(100% - 32px); height: 2px; background: var(--line); } .journey .js:last-child::after { display: none; } .journey .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--sunk); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--display); position: relative; z-index: 1; } .journey .lbl { font-size: .68rem; font-weight: 600; color: var(--muted); line-height: 1.25; } .journey .js.done .dot { background: var(--brand-soft); color: var(--brand); } .journey .js.done::after { background: var(--brand-2); } .journey .js.now .dot { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); } .journey .js.now .lbl { color: var(--brand); font-weight: 700; } /* طرق الدفع */ .wg-pays { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .wg-pay { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; } .wg-pay .pi { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--brand); flex-shrink: 0; } .wg-pay b { font-size: .82rem; display: block; line-height: 1.3; } .wg-pay span { font-size: .7rem; color: var(--muted); } /* دليل الاستخدام (أكورديون) */ .guide-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; } .guide-item summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; font-size: .95rem; } .guide-item summary::-webkit-details-marker { display: none; } .guide-item summary .gi { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .guide-item summary::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-inline-start: auto; color: var(--muted); transition: transform .2s; } .guide-item[open] summary::after { transform: rotate(180deg); } .guide-body { padding: 0 16px 16px; color: #33443b; font-size: .88rem; line-height: 1.8; } .guide-body ol, .guide-body ul { padding-inline-start: 20px; margin: 0; } .guide-body li { margin-bottom: 4px; } .guide-body .tip { background: var(--gold-soft); color: #7a5716; border-radius: 10px; padding: 8px 12px; margin-top: 10px; font-size: .82rem; } /* صندوق النسخ في الدفع */ .copy-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--brand-soft-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; text-align: start; } .copy-row .cr-lbl { font-size: .72rem; color: var(--muted); font-weight: 700; display: block; } .copy-row .cr-val { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-family: var(--mono); direction: ltr; word-break: break-all; display: block; } .copy-btn { flex-shrink: 0; background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: .85rem; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .copy-btn:active { transform: scale(.95); } .pay-howto { list-style: none; padding: 0; margin: 4px 0 14px; text-align: start; } .pay-howto li { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: #33443b; margin-bottom: 6px; } .pay-howto li b { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .72rem; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; } /* حالة الطلب المباشرة في الإيصال */ .live-track { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-top: 16px; background: var(--brand-soft-2); text-align: start; } .live-track .lt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .9rem; } .live-track .lt-st { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .lt-st.st-p { background: #FEF3C7; color: #B45309; } .lt-st.st-c { background: var(--brand-soft); color: var(--brand); } .lt-st.st-r { background: #FEE2E2; color: #B91C1C; } .live-track .lt-note { font-size: .75rem; color: var(--muted); margin-top: 6px; } /* ================= index.php (المتجر / الزائر) ================= */ .app-header { background: rgba(255,255,255,.94) !important; color: var(--ink) !important; box-shadow: none !important; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); height: 62px !important; padding: 10px 14px !important; gap: 8px; } .app-header .header-btn { background: var(--sunk) !important; color: var(--ink); } .app-header .app-title { font-size: 1.05rem; font-weight: 700; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr-brand { display: flex; align-items: center; gap: 8px; min-width: 0; } .hdr-brand img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: #fff; border: 1px solid var(--line); } .hdr-actions { display: flex; gap: 6px; flex-shrink: 0; } .hdr-actions .wg-btn { padding: 7px 11px; font-size: .78rem; border-radius: 10px; } .view { background: var(--ground) !important; } .nav-bar { border-top: 1px solid var(--line); box-shadow: 0 -8px 30px -18px rgba(8,40,30,.35) !important; } .nav-item { color: #7d8f86; } .nav-item i { background: transparent !important; } .nav-item.active { color: var(--brand); } .nav-item.active i { background: var(--brand-soft) !important; color: var(--brand) !important; } @media (max-width: 991px) { .nav-bar { height: 68px !important; } .nav-item { font-size: .66rem; } .nav-item i { width: 36px; height: 30px; font-size: 1.1rem; margin-bottom: 3px; border-radius: 10px; } .nav-item.active { transform: none; } } .search-inp { border: 1px solid var(--line) !important; } .app-card, .svc-card-style { border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 16px !important; } .app-card:hover, .svc-card-style:hover { border-color: var(--brand) !important; } .app-card-icon-box { background: var(--brand-soft) !important; color: var(--brand) !important; } .card-title { color: var(--ink) !important; } .card-price { color: var(--brand) !important; background: var(--brand-soft) !important; } .pay-btn { background: var(--brand) !important; box-shadow: 0 10px 22px -12px rgba(11,122,94,.8) !important; border-radius: 14px !important; } .pay-btn:hover { background: var(--brand-deep) !important; } .pay-btn:disabled { background: #94a3b8 !important; box-shadow: none !important; } .pay-btn.btn-danger-soft { background: #ef4444 !important; } .pay-btn.btn-plain { background: #fff !important; color: #475569 !important; border: 1px solid var(--line) !important; box-shadow: none !important; } .form-container, .payment-card, .receipt-card { border: 1px solid var(--line) !important; box-shadow: var(--shadow-soft) !important; } .price-badge-container { background: var(--brand-soft-2) !important; border-color: var(--line) !important; } .price-label { color: var(--brand-deep) !important; } .price-value { color: var(--brand) !important; } .pm-card.active { border-color: var(--brand) !important; background: var(--brand-soft-2) !important; } .rec-header { background: var(--brand) !important; } .rec-token-box { color: var(--brand) !important; } #featured-section { border: 1px solid var(--line) !important; box-shadow: none !important; } /* بطل الصفحة الرئيسية للزائر */ .guest-hero { background: radial-gradient(120% 100% at 100% 0, var(--brand-soft), transparent 62%), var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; margin: 4px 2px 14px; } .guest-hero h1 { font-size: 1.22rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--ink); } .guest-hero h1 .hl { color: var(--brand); } .guest-hero p.sub { color: var(--muted); margin: 8px 0 0; font-size: .9rem; line-height: 1.7; } .guest-cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .guest-trust { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; } .guest-trust div { display: flex; flex-direction: column; } .guest-trust b { font-family: var(--display); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--ink); } .guest-trust span { font-size: .72rem; color: var(--muted); } .guest-help { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .guest-help a, .guest-help button { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .85rem; cursor: pointer; text-align: start; } .guest-help i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1rem; flex-shrink: 0; } .guest-help small { display: block; color: var(--muted); font-weight: 500; font-size: .7rem; } @media (min-width: 992px) { .guest-hero { padding: 28px 30px; } .guest-hero h1 { font-size: 1.9rem; } .guest-home-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; } .nav-bar .nav-item.active { border-right: 4px solid var(--brand) !important; background: var(--brand-soft-2) !important; } .nav-bar .nav-item.active i { background: transparent !important; } .desktop-nav-header div { color: var(--brand) !important; } } /* زر تثبيت التطبيق: آخر عنصر في القائمة (ديسكتوب) / زر صغير يمين تحت (موبايل) */ .nav-install .ni-close { display: none; } @media (min-width: 992px) { .nav-bar .nav-install { margin-top: auto; margin-bottom: 18px; color: var(--brand) !important; border-top: 1px solid var(--line); padding-top: 18px !important; } } @media (max-width: 991px) { .nav-bar .nav-install { position: fixed; bottom: 80px; right: 12px; left: auto; flex: none; width: auto; flex-direction: row; gap: 6px; align-items: center; background: var(--brand); color: #fff !important; padding: 8px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; box-shadow: 0 10px 22px -10px rgba(8,40,30,.6); z-index: 60; } .nav-bar .nav-install i { background: transparent !important; color: #fff !important; width: auto; height: auto; margin: 0; font-size: .9rem; } .nav-bar .nav-install .ni-close { display: inline-block; margin-inline-start: 4px; font-size: 1rem; line-height: 1; opacity: .8; padding: 0 2px; } } /* ================= index.php — المتجر v2 (متقيّد بـ body.wg-store) ================= الشاشات اللي لسه كانت بالشكل القديم: الفورم، وسائل الدفع، شاشة الدفع والتحقق، متابعة الطلبات + الرمز السري، الإيصال، التوست، الشريط المميز، القائمة على الديسكتوب. */ .wg-store :focus-visible { outline: none; box-shadow: var(--wg-focus); } :where(.wg-store) :where(button.nav-item, a.nav-item, button.header-btn) { border: 0; background: none; font: inherit; text-decoration: none; padding: 0; } .wg-store button.header-btn { color: var(--ink); } .wg-store .nav-item { min-height: 44px; } .wg-store .nav-item.active { transform: none !important; } .wg-icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; display: inline-grid; place-items: center; color: var(--muted); cursor: pointer; font-size: 1rem; } .wg-icon-btn:hover { color: var(--ink); background: var(--ground); } /* الكروت */ .wg-store .app-card, .wg-store .svc-card-style { transition: border-color .15s, box-shadow .15s, transform .12s; } .wg-store .app-card:hover, .wg-store .svc-card-style:hover { box-shadow: var(--shadow-soft) !important; } .wg-store .card-title { font-weight: 700; } .wg-store .card-price { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 8px; padding: 2px 8px; direction: ltr; } /* الشريط المميز: من غير الحلقة الصفرا المتدرجة */ .wg-store #featured-section { border-radius: 18px; padding: 14px 12px; } .wg-store .featured-title-text { font-family: var(--display); font-weight: 600; } .wg-store .featured-title-text i { color: var(--gold); } .wg-store .featured-icon-wrapper { background: var(--card); border: 1px solid var(--line); box-shadow: none; padding: 0; border-radius: 16px; } .wg-store .featured-icon-inner { border: 0; border-radius: 15px; } .wg-store .featured-icon-inner i { color: var(--brand); } .wg-store .featured-item:hover .featured-icon-wrapper { border-color: var(--brand); } .wg-store .featured-title { color: var(--ink); font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; unicode-bidi: plaintext; text-align: center; padding: 0 4px; } @media (min-width: 992px) { .wg-store .featured-title { font-size: .74rem; } } /* السلايدر */ .wg-store .slide-item { border-radius: 16px; } .wg-store .slide-overlay { background: linear-gradient(to top, rgba(6,54,42,.78), transparent 70%); padding: 12px 14px; } .wg-store .slide-title { font-family: var(--display); font-weight: 600; text-shadow: none; } /* فورم الطلب */ .wg-store .form-container { border-radius: 20px; padding: 22px; } .wg-store .input-label { font-weight: 600; font-size: .88rem; color: var(--ink); margin-bottom: 8px; } .wg-store .app-input { border: 1px solid var(--line); background: var(--card); border-radius: 12px; min-height: 48px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; } .wg-store .app-input:focus { border-color: var(--brand); box-shadow: var(--wg-focus); background: var(--card); } .wg-store .app-input::placeholder { color: var(--wg-subtle, #8A9A92); } .wg-store #svc-desc-display { background: var(--gold-soft); color: #6B4E12; border: 1px solid #EBD9AE; border-radius: 12px; text-align: start; padding: 10px 12px; font-size: .85rem; } .wg-store #svc-time-display { background: var(--brand-soft-2); color: var(--brand-deep); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: .82rem; } .wg-store .price-badge-container { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .wg-store .price-value { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; } .wg-store .unit-price-tag { border-top-color: var(--line); } .wg-store .qty-wrapper { border: 1px solid var(--line); border-radius: 12px; } .wg-store .qty-btn { background: var(--ground); color: var(--brand); width: 48px; min-height: 48px; } .wg-store .qty-btn:hover { background: var(--brand-soft); } .wg-store .qty-input { font-family: var(--mono); font-weight: 600; } /* وسائل الدفع */ .wg-store .pm-card { border: 1px solid var(--line); border-radius: 14px; min-height: 92px; transition: border-color .15s, background .15s, box-shadow .15s; } .wg-store .pm-card:hover { background: var(--brand-soft-2); border-color: var(--wg-emerald-200, #B5E0CD); } .wg-store .pm-card.active { box-shadow: inset 0 0 0 1px var(--brand) !important; } .wg-store .pm-icon { color: var(--muted); font-size: 1.6rem; } .wg-store .pm-name { font-weight: 600; color: var(--ink); } .wg-store .pm-fee-badge { border-radius: 6px; font-weight: 700; font-family: var(--mono); } .wg-store .pm-fee-badge.free { background: var(--brand-soft); color: var(--brand-deep); } .wg-store .pm-fee-badge.fee { background: #FDE4E4; color: #9F1D24; } /* شاشة الدفع */ .wg-store .payment-card { border-radius: 20px; padding: 22px 18px; } .wg-store .pay-hero-amount { background: var(--brand-soft-2); border: 1px solid var(--line); border-radius: 16px; } .wg-store .pay-hero-amount small { font-weight: 600; color: var(--muted); } .wg-store .pay-hero-amount .amount-val { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .wg-store .pay-hero-amount .amount-curr { color: var(--muted); font-weight: 600; } .wg-store .pay-acc-box { background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .wg-store .pay-acc-box label { color: var(--muted); font-weight: 700; letter-spacing: 0; text-transform: none; } .wg-store .pay-acc-number { font-family: var(--mono); font-weight: 600; color: var(--ink); } .wg-store .copy-hint { background: var(--brand-soft); color: var(--brand-deep); box-shadow: none; } .wg-store .pay-notes-box { background: var(--gold-soft); border-color: #EBD9AE; } .wg-store .pay-notes-box p { color: #6B4E12; } .wg-store #generated-note-code { font-family: var(--mono) !important; font-weight: 600 !important; box-shadow: none !important; border: 1.5px dashed var(--line); } /* التحقق */ .wg-store .loader { border-color: var(--brand-soft); border-top-color: var(--brand); width: 64px; height: 64px; border-width: 4px; } .wg-store #verify-error { border: 1px solid #F2C4C4; box-shadow: none; border-radius: 18px; } .wg-store .error-icon { background: #FDE4E4; color: #B42329; font-size: 2.2rem; width: 72px; height: 72px; } .wg-store .error-title { font-family: var(--display); font-weight: 600; } /* متابعة الطلبات */ .wg-store .history-card { border: 1px solid var(--line); border-radius: 16px; box-shadow: none; } .wg-store .history-card.st-success, .wg-store .history-card.st-warn, .wg-store .history-card.st-danger { border-right: 1px solid var(--line); } .wg-store .h-header { min-height: 56px; border-bottom-color: var(--line); } .wg-store .h-header:hover { background: var(--ground); } .wg-store .h-svc { color: var(--ink); font-weight: 700; } .wg-store .h-stat { border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; } .wg-store .h-stat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .wg-store .st-success .h-stat { background: var(--brand-soft); color: var(--brand-deep); } .wg-store .st-warn .h-stat { background: #FEF3C7; color: #92400E; } .wg-store .st-danger .h-stat { background: #FDE4E4; color: #9F1D24; } .wg-store .h-meta-row { background: var(--ground); border-bottom-color: var(--line); color: var(--muted); } .wg-store .h-input-box { font-family: var(--mono); background: var(--brand-soft-2); border-color: var(--line); color: var(--ink); border-radius: 10px; } .wg-store .response-text { font-family: var(--mono); font-size: .88rem; font-weight: 500; color: var(--ink); } .wg-store .response-box-styled { border-color: var(--line); box-shadow: none; } .wg-store .copy-res-btn { background: var(--brand); border-radius: 12px; min-height: 44px; } .wg-store .badge-clean, .wg-store .badge-bad, .wg-store .badge-orange { border-radius: 6px; font-weight: 700; } .wg-store .badge-bad { color: #9F1D24; } .wg-store .badge-orange { background: #FEF3C7; color: #92400E; } /* الرمز السري */ .wg-store .pin-dot { width: 14px; height: 14px; background: var(--sunk); } .wg-store .pin-dot.filled { background: var(--brand); transform: none; box-shadow: 0 0 0 4px var(--brand-soft); } .wg-store .keypad { gap: 10px; max-width: 320px; margin-inline: auto; } .wg-store .key-btn { font-family: var(--mono); font-weight: 600; font-size: 1.35rem; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; min-height: 56px; color: var(--ink); background: var(--card); } .wg-store .key-btn:hover { background: var(--ground); } .wg-store .key-btn.key-clear { background: #FDE4E4; color: #9F1D24; border-color: #F2C4C4; } .wg-store .key-btn.key-ok { background: var(--brand); color: #fff; border-color: var(--brand); } /* النوافذ والإيصال والتوست */ .wg-store .custom-alert-overlay { background: rgba(15,29,22,.5); backdrop-filter: blur(3px); } .wg-store .custom-alert-box { border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--wg-e2); } .wg-store .custom-alert-box h3 { font-family: var(--display); font-weight: 600; color: var(--ink) !important; } .wg-store .receipt-card { border-radius: 20px; } .wg-store .rec-header { padding: 22px; } .wg-store .rec-icon { font-size: 2.6rem; } .wg-store .rec-row { border-bottom: 1px dashed var(--line); } .wg-store .rec-token-box { font-family: var(--mono); font-weight: 600; background: var(--brand-soft-2); border: 1.5px dashed var(--wg-emerald-200, #B5E0CD); border-radius: 12px; } .wg-store #app-toast { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--wg-e2); } .wg-store .t-msg { color: var(--ink); font-weight: 600; } .wg-store #pwa-install-banner { background: var(--ink); border-radius: 16px; } /* القائمة على الديسكتوب: من غير الخط الجانبي العريض */ @media (min-width: 992px) { .wg-store .nav-bar { padding: 20px 14px; } .wg-store .nav-bar .nav-item { border-radius: 12px; padding: 12px 16px; margin-bottom: 2px; width: 100%; justify-content: flex-start; } .wg-store .nav-bar .nav-item.active { border-right: 0 !important; background: var(--brand-soft) !important; color: var(--brand-deep) !important; font-weight: 700; } .wg-store .desktop-nav-header img { box-shadow: none; border: 1px solid var(--line); width: 64px; height: 64px; border-radius: 16px; } .wg-store .desktop-nav-header div { font-family: var(--display); font-weight: 600 !important; } } @media (prefers-reduced-motion: reduce) { .wg-store .anim-card { animation: none; opacity: 1; } .wg-store .view { transition: none; } } /* ================= panel.php (لوحة العميل) — WeGSM DS v1 ================= */ body { background: var(--ground); } .app-view { background: var(--ground) !important; } /* ---------- الشريط العلوي + كارت الرصيد ---------- */ .curved-header { background: transparent !important; color: var(--ink) !important; padding: 14px 20px 6px !important; border-radius: 0 !important; } .header-top { display: flex; justify-content: space-between; align-items: center; } .hdr-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .hdr-who small { display: block; font-size: .75rem; color: var(--muted); } .hdr-who b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; } .hdr-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-deep); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 19px; flex-shrink: 0; } .hdr-btns { display: flex; gap: 8px; } .user-avatar-btn { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--line) !important; color: var(--ink) !important; backdrop-filter: none !important; font-size: 1.05rem !important; } .notif-dot { top: 9px !important; right: auto !important; left: 10px; width: 9px !important; height: 9px !important; background: #B42329 !important; border: 2px solid #fff !important; box-shadow: none !important; } .floating-balance { margin: 8px 20px 16px !important; background: var(--brand-deep) !important; color: #fff; border: none !important; border-radius: 24px !important; padding: 20px !important; gap: 16px !important; box-shadow: 0 24px 48px -24px rgba(6, 54, 42, .8) !important; } .bal-row { align-items: flex-start !important; } .bal-label { color: #B5E0CD !important; font-size: .8rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } .bal-amount { letter-spacing: -.02em; color: #fff !important; font-family: var(--mono) !important; font-weight: 600 !important; font-size: 2.1rem !important; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; margin-top: 4px !important; line-height: 1.1 !important; } #ui-sym { font-size: 1.1rem !important; color: #B5E0CD; margin-inline-start: .3em; margin-inline-end: 0; } .bal-log { background: rgba(255,255,255,.12); color: #DBF0E7; border: none; border-radius: 999px; padding: 6px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; } .topup-pill { width: 100%; justify-content: center; min-height: 48px; border-radius: 12px !important; background: #fff !important; color: var(--brand-deep) !important; font-size: .95rem !important; font-weight: 700 !important; } .stats-row { border-top: 1px solid rgba(255,255,255,.14) !important; padding-top: 14px !important; gap: 0 !important; } .stat-item { background: none; border: none; color: #fff; cursor: pointer; padding: 2px 0; border-radius: 10px; } .stat-item:active { background: rgba(255,255,255,.08); } .stat-val { font-family: var(--mono); font-weight: 600 !important; font-size: 1.15rem !important; color: #fff !important; } .stat-lbl { color: #B5E0CD !important; font-size: .74rem !important; font-weight: 600 !important; display: inline-flex; align-items: center; gap: 5px; } .sd { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .sd-ok { background: #3DBB8C; } .sd-wait { background: #FBBF24; } .sd-bad { background: #F87171; } .wg-chip .dot.sd-ok { background: var(--wg-ok-dot); } .wg-chip .dot.sd-wait { background: var(--wg-wait-dot); } .wg-chip .dot.sd-bad { background: var(--wg-bad-dot); } .wg-chip.active .dot { background: #fff !important; } /* ---------- البحث والمفضلة والاختصارات ---------- */ .search-container { padding: 0 20px !important; margin-bottom: 16px !important; } .main-search-bar { min-height: 52px; border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: none !important; background: #fff !important; padding: 0 16px !important; gap: 10px; } .main-search-bar i { color: var(--muted) !important; margin: 0 !important; } .main-search-bar input { font-weight: 500 !important; color: var(--ink) !important; } .main-search-bar input::placeholder { color: var(--wg-subtle) !important; } .main-search-bar.is-sunk { background: var(--ground) !important; } /* زر مسح البحث (X) جوه الخانة */ .main-search-bar .search-x { flex-shrink: 0; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ground); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; order: 3; } .main-search-bar .search-x i { font-size: .85rem; margin: 0 !important; } .main-search-bar .search-x:active { background: var(--line); } /* أثناء البحث: النتائج تظهر تحت الخانة مباشرة (من غير بانرات وبلاطات في النص) */ body.searching #sec-banner, body.searching #news-banner, body.searching .dash-sections, body.searching .dash-sec-title, body.searching #quick-access-area { display: none !important; } .back-link.search-title { cursor: default; } /* عنوان عادي: الإغلاق من X جوه الخانة بس */ .view-pad-top { padding: 16px 20px 0; } .quick-access-container { padding: 0 20px !important; } .qa-title { font-family: var(--display); font-size: 1rem !important; font-weight: 600 !important; color: var(--ink) !important; margin-bottom: 10px !important; } .qa-title i { color: var(--gold); } .qa-scroll { gap: 10px !important; } .qa-card { min-width: 132px !important; max-width: 132px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 12px !important; align-items: flex-start !important; text-align: start !important; gap: 8px; } .qa-icon { background: var(--brand-soft-2) !important; color: var(--brand) !important; margin: 0 !important; width: 36px !important; height: 36px !important; } .qa-name { font-size: .78rem !important; height: auto !important; min-height: 30px; color: var(--ink) !important; unicode-bidi: plaintext; text-align: start; } .qa-price { font-family: var(--mono); font-size: .75rem !important; color: var(--brand-deep) !important; background: none !important; padding: 0 !important; direction: ltr; } .dash-sections { grid-template-columns: repeat(3, 1fr) !important; } .sb-badge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #B42329; color: #fff; font-size: .68rem; font-weight: 700; display: none; align-items: center; justify-content: center; } .sb-badge.show { display: inline-flex; } .dash-sec-title { font-size: 1rem !important; font-weight: 600 !important; } /* ---------- الأقسام والخدمات ---------- */ .home-content-wrapper { padding: 0 20px 120px !important; } .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .cat-card { flex-direction: row !important; justify-content: flex-start !important; gap: 12px; text-align: start !important; padding: 14px !important; min-height: 72px !important; border-radius: 16px !important; background: #fff !important; } .cat-card:hover { border-color: var(--brand) !important; } .cat-icon-wrap { width: 44px !important; height: 44px !important; border-radius: 12px !important; margin: 0 !important; flex-shrink: 0; font-size: 1.15rem !important; background: var(--brand-soft-2) !important; overflow: hidden; } .cat-fa { font-size: 1.2rem !important; } .cat-name { font-size: .88rem !important; font-weight: 700 !important; color: var(--ink) !important; } .svc-grid { gap: 10px !important; padding: 16px 20px 20px !important; } .svc-grid.svc-grid-flush { padding: 0 !important; } .svc-mini-card { border-radius: 16px !important; box-shadow: none !important; min-height: 128px !important; } .svc-mini-card:hover { border-color: var(--brand) !important; } .svc-name { color: var(--ink) !important; unicode-bidi: plaintext; } /* أسماء خدمات طويلة بدون مسافات (iP6S/6S+/SE/...): min-width:0 بيخلّي أعمدة 1fr تتقلّص بدل ما تتمدد برا الشاشة، وoverflow-wrap بيكسر الاسم جوه الكارت */ .svc-mini-card, .cat-card, .qa-card { min-width: 0; max-width: 100%; } .svc-name, .cat-name { overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; } .svc-price { font-family: var(--mono); font-weight: 600 !important; color: var(--brand-deep) !important; background: var(--brand-soft-2) !important; direction: ltr; } .svc-fa { color: var(--brand) !important; } .fav-star { color: #DBE4DF !important; } .fav-star.active, .fav-star-form.active { color: var(--gold) !important; text-shadow: none !important; } .back-link { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 6px 0 14px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); cursor: pointer; } .back-link i { color: var(--brand); } /* ---------- رأس الشاشات الداخلية ---------- */ .inner-header { min-height: 64px; padding: 10px 12px !important; gap: 8px !important; background: #fff !important; border-bottom: 1px solid var(--line); box-shadow: none !important; } .inner-header > i.fa-arrow-right { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; } .inner-title { font-family: var(--display); font-weight: 600 !important; font-size: 1.08rem !important; } .ih-back, .ih-btn { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; border: none; background: transparent; color: var(--ink); font-size: 1.05rem; cursor: pointer; } .ih-btn { border: 1px solid var(--line); background: #fff; } .ih-back:hover, .ih-btn:hover { background: var(--ground); } #form-inputs .form-check-label { white-space: nowrap; font-weight: 600; } .sidebar-logo { display: flex; align-items: center; gap: 10px; } .sidebar-logo .hdr-mark { width: 36px; height: 36px; font-size: 17px; } .fav-star-form { width: 44px; height: 44px; display: grid !important; place-items: center; margin: 0 !important; font-size: 1.25rem !important; color: #C3D1CA !important; } /* ---------- الحقول والأزرار ---------- */ .modern-inp { border: 1px solid var(--line) !important; border-radius: 12px !important; padding: 13px 14px !important; font-size: 1rem !important; color: var(--ink); min-height: 50px; } .modern-inp:focus { border-color: var(--brand) !important; box-shadow: var(--wg-focus); } .modern-inp::placeholder { color: var(--wg-subtle); } .fld-lbl, #form-inputs label { display: block; font-weight: 700 !important; font-size: .85rem !important; margin-bottom: 6px !important; color: var(--ink); } .main-btn { min-height: 54px; padding: 14px !important; border-radius: 14px !important; font-weight: 700 !important; font-size: 1.02rem !important; background: var(--brand); box-shadow: var(--wg-e-brand) !important; transition: background .15s, transform .12s; } .main-btn:hover { background: var(--brand-deep); } .main-btn:active { transform: scale(.98); } .main-btn:disabled { box-shadow: none !important; cursor: not-allowed; } .main-btn.is-soft { background: var(--brand-soft) !important; color: var(--brand-deep) !important; box-shadow: none !important; } .load-more-btn { min-height: 46px; border: 1px solid var(--line) !important; border-radius: 12px !important; color: var(--ink) !important; font-weight: 700 !important; } .qty-wrapper { border: 1px solid var(--line) !important; border-radius: 12px !important; } .qty-btn { background: var(--ground) !important; color: var(--brand) !important; width: 52px !important; } .qty-input { font-family: var(--mono); } /* ---------- شاشة الطلب ---------- */ .form-wrap { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; } .form-svc-card { display: flex; flex-direction: column; gap: 12px; } .form-svc-head { display: flex; align-items: center; gap: 12px; } #form-svc-logo-container { margin: 0 !important; flex-shrink: 0; } #form-svc-logo-container img, #form-svc-logo-container i { width: 56px !important; height: 56px !important; border-radius: 14px !important; box-shadow: none !important; } #form-svc-logo-container i { font-size: 1.6rem !important; background: var(--brand-soft-2) !important; color: var(--brand) !important; } .form-svc-name { flex: 1 1 0; min-width: 0; max-width: 100%; } .form-svc-name small { display: block; font-size: .75rem; color: var(--muted); } #form-svc-title { margin: 2px 0 0; font-family: var(--body-font); font-weight: 700; font-size: 1.05rem; color: var(--ink) !important; unicode-bidi: plaintext; text-align: start; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; } /* اسم خدمة طويل بدون مسافات (iP6S/6S+/SE/...) يتكسر جوه الكارت */ #svc-meta-info { display: flex; flex-direction: column; gap: 8px; } #svc-time-display { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--ground); border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 700; color: var(--ink); } #svc-time-display i { color: var(--brand); } #svc-desc-display { background: var(--gold-soft); color: #6B4E10; border-radius: 12px; padding: 10px 12px; font-size: .85rem; line-height: 1.75; } .sdd-h { font-weight: 700; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; } .fld-group { margin-bottom: 4px; } .fld-group .modern-inp { margin-bottom: 6px !important; } input.ord-inp[data-imei="1"] { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; text-align: left; } input.ord-inp.is-valid-imei { border-color: var(--brand-2) !important; background: var(--brand-soft-2) !important; } input.ord-inp.is-partial-imei { border-color: #D97706 !important; } .imei-meta { font-size: .78rem; color: var(--muted); margin: 0 2px 12px; font-weight: 600; } .imei-meta.is-ok { color: var(--wg-ok-fg); } .imei-meta.is-wait { color: var(--wg-wait-fg); } .form-sticky { position: sticky; bottom: 84px; z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--wg-e2); } .fs-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; } .fs-lbl { display: block; font-size: .75rem; color: var(--muted); font-weight: 600; } .fs-total { font-size: 1.5rem; } .fs-unit { font-size: .72rem; color: var(--muted); text-align: left; } .fs-unit b { color: var(--ink); font-size: .85rem; } .form-sticky .main-btn { margin: 0 !important; } /* ---------- الإيصال ---------- */ .receipt-wrap { padding: 20px; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .rc-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; } .rc-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 0 0 8px var(--brand-soft-2); margin-bottom: 8px; } .rc-hero h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; } .rc-hero p { margin: 0; color: var(--muted); font-size: .9rem; } .rc-journey { margin: 0 !important; max-width: none !important; } #receipt-content { display: flex; flex-direction: column; gap: 12px; } .form-wrap > .journey { width: 100%; max-width: none; margin: 0; box-sizing: border-box; } .rc-card { padding: 6px 16px 12px !important; } .rc-details { background: var(--ground); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: .8rem; color: var(--wg-ink-2); direction: ltr; text-align: left; word-break: break-word; } .rc-copy { color: var(--brand); cursor: pointer; margin-inline-start: 4px; } .rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rc-actions .main-btn { margin: 0 !important; font-size: .95rem !important; } /* صندوق النتيجة/الكود */ .response-box-styled { background: var(--brand-soft-2) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: 12px !important; margin-top: 12px !important; } .response-box-header { border-bottom: 1px solid var(--line) !important; } .response-label { color: var(--muted) !important; font-size: .75rem !important; text-transform: none !important; } .response-copy-btn { background: #fff !important; border: 1px solid var(--line) !important; color: var(--brand) !important; border-radius: 10px !important; min-height: 34px; padding: 4px 12px !important; } .response-text { font-family: var(--mono) !important; color: var(--ink) !important; font-weight: 600 !important; font-size: .9rem !important; } /* ---------- الشحن ---------- */ .topup-amount-inp { font-family: var(--mono); font-size: 1.6rem !important; font-weight: 600; text-align: center; direction: ltr; margin-bottom: 10px !important; } .amt-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; } .amt-chips button { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-family: var(--mono); font-weight: 600; font-size: .95rem; color: var(--ink); cursor: pointer; } .amt-chips button::before { content: "$"; color: var(--muted); font-size: .8em; } .amt-chips button:active { background: var(--brand-soft-2); border-color: var(--brand); } .pm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 16px !important; } .pm-item { border: 1px solid var(--line) !important; border-radius: 14px !important; min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 10px 8px !important; font-size: .88rem !important; color: var(--ink) !important; font-weight: 700 !important; } .pm-item.active { border: 2px solid var(--brand) !important; background: var(--brand-soft-2) !important; color: var(--brand-deep) !important; padding: 9px 7px !important; } #topup-summary { background: var(--brand-soft-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin-bottom: 16px; } #topup-summary .wg-kv.is-fee { color: var(--wg-bad-fg); } #topup-summary .wg-kv.is-total { border-top: 1px dashed var(--wg-emerald-200); } #rounding-note { display: block; font-size: .7rem; color: var(--muted); font-weight: 500; margin-top: 2px; } .ts-local { color: var(--brand-deep); font-size: 1.15rem; } .pay-card { display: flex; flex-direction: column; gap: 12px; } .pay-card .wg-copy .val { font-size: 1.1rem; } .pay-inst { background: #FFF9EA; border: 1px solid #F0DFB5; border-radius: 14px; padding: 12px 14px; color: #5B4410; } .pi-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; margin-bottom: 8px; color: #7A5200; } .pi-list { display: flex; flex-direction: column; gap: 8px; } .pi-row { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.7; font-weight: 500; } .pi-t { flex: 1; min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; } .pi-n { width: 24px; height: 24px; border-radius: 50%; background: #0B7A5E; color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; font-family: "Inter", sans-serif; } .pi-e { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #F0DFB5; display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; margin-top: 1px; } .pi-d { width: 7px; height: 7px; border-radius: 50%; background: #C28A12; flex-shrink: 0; margin: 11px 8.5px 0; } .pi-sub { font-weight: 700; font-size: .86rem; color: #7A5200; margin-top: 4px; padding-top: 8px; border-top: 1px dashed #E5CF98; } .pay-note { background: var(--wg-wait-bg); color: var(--wg-wait-fg); border-radius: 12px; padding: 10px 12px; font-size: .85rem; font-weight: 600; } .pay-smart { background: var(--brand-soft-2); border: 1px solid var(--wg-emerald-200); border-radius: 14px; padding: 14px; text-align: center; } .pay-smart .ps-h { color: var(--brand-deep); font-weight: 700; font-size: .85rem; margin-bottom: 4px; } .pay-smart .ps-v { font-family: var(--mono); font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; direction: ltr; } .pay-code { background: #FFFBEB; border: 1.5px dashed #F59E0B; border-radius: 14px; padding: 16px; text-align: center; } .pay-code .pc-h { color: var(--wg-wait-fg); font-weight: 700; font-size: .85rem; margin-bottom: 10px; } #generated-note-code { font-family: var(--mono); font-size: 2.2rem; font-weight: 600; letter-spacing: 6px; color: var(--ink); background: #fff; border-radius: 12px; padding: 10px; cursor: pointer; user-select: all; } .pay-code .pc-f { font-size: .75rem; color: var(--muted); margin-top: 8px; } #manual-pay-widget .modern-inp { font-family: var(--mono); font-weight: 600; } .timer-path { stroke: var(--brand) !important; } .timer-circle { stroke: var(--sunk) !important; } .timer-text { color: var(--brand) !important; font-family: var(--mono); font-weight: 600 !important; } .verify-h { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin: 10px 0 6px; } .verify-p { color: var(--muted); margin-bottom: 24px; } /* ---------- طلباتي ---------- */ .hist-tools { padding: 12px 20px 4px; display: flex; flex-direction: column; gap: 12px; background: #fff; border-bottom: 1px solid var(--line); } .status-filters-container { flex-wrap: nowrap !important; justify-content: flex-start !important; padding: 0 0 10px !important; margin: 0 !important; } #history-container { padding: 14px 20px 20px; max-width: 760px; margin: 0 auto; } .order-card { border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 14px !important; margin-bottom: 10px !important; } .order-card::before { display: none !important; } .order-card:hover { border-color: var(--wg-emerald-200) !important; } .order-card:active { transform: none !important; } .order-card.st-danger { border-color: #F2C4C4 !important; } .oc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .oc-main { min-width: 0; flex: 1; } .oc-name { font-weight: 700; font-size: .93rem; line-height: 1.45; word-break: break-word; text-align: right; unicode-bidi: plaintext; } .oc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: .75rem; color: var(--muted); } .oc-id { font-size: .75rem; color: var(--wg-ink-2); background: var(--ground); padding: 1px 7px; border-radius: 6px; } .oc-id i { color: var(--brand); cursor: pointer; margin-inline-start: 3px; } .oc-date { font-family: var(--mono); font-size: .72rem; } .oc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .oc-price { font-size: .95rem; } .oc-price .curr-sym-span { font-size: .78em; color: var(--muted); } .oc-progress { height: 5px; border-radius: 3px; background: #F3EBD9; overflow: hidden; margin-top: 12px; } .oc-progress i { display: block; height: 100%; width: 35%; border-radius: 3px; background: var(--wg-wait-dot); animation: oc-run 1.6s ease-in-out infinite; } @keyframes oc-run { 0% { transform: translateX(120%); } 100% { transform: translateX(-300%); } } .order-body { border-top: 1px solid var(--wg-line-soft) !important; margin-top: 12px !important; padding-top: 6px !important; } .order-body .wg-kv i { color: var(--brand); cursor: pointer; margin-inline-start: 4px; } .oc-details { background: var(--ground); border-radius: 10px; padding: 8px 12px; margin-top: 8px; font-size: .78rem; color: var(--wg-ink-2); } .oc-details > span { display: block; font-weight: 700; color: var(--muted); margin-bottom: 2px; } .oc-details .wg-ltr { text-align: left; word-break: break-all; } .oc-refund { margin-top: 10px; background: var(--wg-ok-bg); color: var(--wg-ok-fg); border-radius: 10px; padding: 8px 12px; font-size: .8rem; font-weight: 700; display: flex; gap: 8px; align-items: center; } .oc-more { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 0 2px; background: none; border: 0; border-top: 1px solid transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .oc-more:hover, .oc-more:focus-visible { color: var(--brand); } .oc-actions { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; } .oc-actions .oc-more { flex: 1; width: auto; margin-top: 0; } .oc-share { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px 2px; background: none; border: 0; color: var(--brand); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .oc-share:disabled { opacity: .6; cursor: wait; } /* الكارت نفسه مبقاش بيتقفل/يتفتح بالضغط: النص جواه يتحدد ويتنسخ عادي */ .order-card { cursor: default !important; } .order-card, .order-card .order-body, .order-card .order-body * { -webkit-user-select: text; user-select: text; } /* ---------- قوائم الإشعارات والأخبار والسجل المالي ---------- */ .feed-wrap { padding: 15px 16px 110px; max-width: 760px; margin: 0 auto; } .feed-group-t { font-size: .78rem; font-weight: 700; color: var(--muted); margin: 14px 4px 8px; } .feed-item { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; } .feed-item.clickable { cursor: pointer; } .feed-item.clickable:hover { border-color: var(--brand); } .feed-item .fi-i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; } .fi-ok { background: var(--wg-ok-bg); color: var(--wg-ok-fg); } .fi-bad { background: var(--wg-bad-bg); color: var(--wg-bad-fg); } .fi-wait { background: var(--wg-wait-bg); color: var(--wg-wait-fg); } .fi-info { background: var(--wg-info-bg); color: var(--wg-info-fg); } .fi-money { background: var(--gold-soft); color: var(--wg-gold-700); } .feed-item .fi-b { flex: 1; min-width: 0; } .feed-item .fi-t { font-weight: 700; font-size: .88rem; color: var(--ink); } .feed-item .fi-m { font-size: .8rem; color: var(--wg-ink-2); margin-top: 2px; line-height: 1.6; word-break: break-word; } .feed-item .fi-d { font-size: .72rem; color: var(--muted); margin-top: 4px; } .feed-empty { text-align: center; color: var(--muted); padding: 40px 10px; } .feed-empty i { font-size: 2rem; margin-bottom: 10px; display: block; } .fin-item { align-items: center; } .fin-amt { text-align: left; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .fin-amt b { font-size: .95rem; } .fin-amt b.is-in { color: var(--wg-ok-fg); } .fin-amt b.is-out { color: var(--wg-bad-fg); } .fin-amt small { font-size: .7rem; color: var(--muted); } .news-svc { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; } .news-svc:hover { border-color: var(--brand); } .news-svc .ns-n { unicode-bidi: plaintext; text-align: right; flex: 1; font-weight: 600; font-size: .83rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-svc .ns-tag { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-size: .65rem; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 6px; flex-shrink: 0; } .notif-item { border-bottom-color: var(--wg-line-soft) !important; } .n-info { background: var(--wg-info-bg) !important; color: var(--wg-info-fg) !important; } .n-success { background: var(--wg-ok-bg) !important; color: var(--wg-ok-fg) !important; } .n-warn { background: var(--wg-wait-bg) !important; color: var(--wg-wait-fg) !important; } .n-danger { background: var(--wg-bad-bg) !important; color: var(--wg-bad-fg) !important; } /* ---------- الأقسام في الداشبورد + الإعلان ---------- */ .dash-sections { display: grid; gap: 8px; padding: 0 20px; margin-bottom: 18px; } .dash-tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; transition: border-color .15s, transform .12s; } .dash-tile:hover { border-color: var(--brand); } .dash-tile:active { transform: scale(.96); } .dash-tile .dt-i { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-size: 1.05rem; } .dash-tile .dt-t { font-size: .72rem; font-weight: 700; color: var(--ink); line-height: 1.25; } .dash-tile .dt-badge { position: absolute; top: 6px; inset-inline-end: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #B42329; color: #fff; font-size: .62rem; font-weight: 700; display: none; align-items: center; justify-content: center; } .dash-tile .dt-badge.show { display: inline-flex; } .dash-tile.t-gold .dt-i { background: var(--gold-soft); color: var(--wg-gold-700); } .dash-sec-title { padding: 0 22px; margin: 4px 0 10px; color: var(--ink); font-family: var(--display); } .news-banner { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 20px 14px; padding: 14px 14px 12px; border-radius: 16px; background: var(--gold-soft); border: 1px solid #ecd9ae; } .news-banner[data-type="success"] { background: var(--brand-soft-2); border-color: var(--wg-emerald-200); } .news-banner .nb-i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--wg-gold-700); flex-shrink: 0; font-size: 1rem; } .news-banner[data-type="success"] .nb-i { color: var(--brand); } .news-banner .nb-b { flex: 1; min-width: 0; padding-inline-end: 18px; } .news-banner .nb-t { font-weight: 700; font-size: .9rem; color: var(--ink); } .news-banner .nb-m { font-size: .8rem; color: var(--wg-ink-2); margin-top: 3px; line-height: 1.6; max-height: 4.8em; overflow: hidden; word-break: break-word; } .news-banner .nb-more { margin-top: 8px; background: none; border: none; padding: 0; color: var(--brand); font-weight: 700; font-size: .8rem; cursor: pointer; } .news-banner .nb-x { position: absolute; top: 6px; inset-inline-end: 8px; background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; } /* ---------- الدعم والمحادثة ---------- */ .ticket-card { border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: none !important; } .ticket-card.is-unread { background: #FFF6F6 !important; border-color: #F2C4C4 !important; border-right: 1px solid #F2C4C4 !important; } .unread-badge { background: #B42329 !important; } .fab-add { border: none; bottom: 96px !important; width: 56px !important; height: 56px !important; border-radius: 18px !important; background: var(--brand) !important; box-shadow: var(--wg-e-brand) !important; } #view-chat, .chat-messages-area { background: #EEF2F0 !important; } .chat-header-fixed { border-bottom: 1px solid var(--line); box-shadow: none !important; } .msg-me { background: var(--brand) !important; } .msg-admin { border: 1px solid var(--line); box-shadow: none !important; } .chat-input { border-color: var(--line) !important; background: var(--ground) !important; } .chat-send-btn { background: var(--brand) !important; } /* ---------- التنقّل السفلي ---------- */ .btm-nav { border-radius: 0 !important; border-top: 1px solid var(--line); box-shadow: 0 -8px 30px -18px rgba(8,40,30,.35) !important; padding: 8px 6px !important; padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; } .btm-nav .nav-link { color: var(--muted) !important; font-size: .7rem !important; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: none !important; } .btm-nav .nav-link i { font-size: 1.1rem !important; margin: 0 !important; width: 48px; height: 30px; border-radius: 10px; display: grid !important; place-items: center; } .btm-nav .nav-link.active { color: var(--brand-deep) !important; font-weight: 700; } .btm-nav .nav-link.active i { background: var(--brand-soft); } /* ---------- المودال: شيت من تحت على الموبايل ---------- */ .modal-content { border-radius: 20px !important; } .wg-sheet .modal-content { border: none; } .wg-sheet .modal-body { padding: 12px 20px 22px; display: flex; flex-direction: column; gap: 12px; } .sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; } .sheet-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; } .sheet-box { background: var(--ground); border-radius: 14px; padding: 2px 14px; } .sheet-box .wg-kv b { max-width: 62%; overflow-wrap: anywhere; } .sheet-cancel { min-height: 44px; border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: .92rem; cursor: pointer; } @media (max-width: 575px) { .wg-sheet .modal-dialog { margin: 0; position: fixed; bottom: 0; left: 0; right: 0; max-width: none; min-height: 0; align-items: flex-end; transform: translateY(100%); transition: transform .25s ease-out; } .wg-sheet.show .modal-dialog { transform: none; } .wg-sheet .modal-content { border-radius: 24px 24px 0 0 !important; padding-bottom: env(safe-area-inset-bottom); } } /* التوست واللودر */ #toast { background: var(--ink) !important; border-radius: 14px !important; font-weight: 600 !important; box-shadow: var(--wg-e2) !important; } #toast.error, .toast.error { background: #B42329 !important; } #loader-overlay { background: rgba(242,246,244,.8) !important; } .spinner { border-color: var(--sunk) !important; border-top-color: var(--brand) !important; } /* شارات الشرائح (Tier) بدون تدرّجات */ .tier-badge { text-transform: none !important; letter-spacing: 0 !important; border-radius: 999px !important; } .badge-new-member, .badge-default { background: var(--sunk) !important; color: var(--wg-ink-2) !important; border: none !important; box-shadow: none !important; } .badge-reseller { background: var(--wg-info-bg) !important; color: var(--wg-info-fg) !important; border: none !important; box-shadow: none !important; } .badge-gold { background: var(--gold-soft) !important; color: var(--wg-gold-700) !important; border: none !important; box-shadow: none !important; } .badge-platinum { background: #E6EDE9 !important; color: #33443B !important; border: none !important; box-shadow: none !important; } .badge-diamond { background: var(--brand-soft) !important; color: var(--brand-deep) !important; border: none !important; box-shadow: none !important; } /* نتائج الفحص */ .clean-list-box { background: var(--ground) !important; border-color: var(--line) !important; } .list-item .value { font-family: var(--mono) !important; font-weight: 600 !important; } /* رحلة الخطوات: نسخة الشحن والإيصال */ .journey .js.done .dot i, .journey .js .dot i { font-size: .7rem; } @media (max-width: 360px) { .dash-sections { gap: 6px; padding: 0 12px; } .dash-tile .dt-t { font-size: .64rem; } .bal-amount { font-size: 1.8rem !important; } } /* ---------- ديسكتوب ---------- */ @media (min-width: 992px) { body { background: var(--ground) !important; } .app-view { background: var(--ground) !important; padding: 28px 40px !important; padding-right: 320px !important; } .app-view .floating-balance { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0 0 20px !important; } .app-view .floating-balance .bal-row { flex: 1; min-width: 240px; } .app-view .floating-balance .topup-pill { width: auto; padding: 0 22px; } .app-view .floating-balance .stats-row { flex-basis: 100%; } .dash-sections { grid-template-columns: repeat(8, 1fr) !important; padding: 0; } .dash-sec-title { padding: 0 2px; } .quick-access-container, .news-banner { padding: 0 !important; margin-left: 0; margin-right: 0; } .news-banner { padding: 14px 14px 12px !important; } .home-content-wrapper { padding: 0 0 40px !important; } .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } .svc-grid { grid-template-columns: repeat(5, 1fr) !important; } .cat-card:hover, .svc-mini-card:hover { transform: none !important; box-shadow: none !important; } .inner-header { margin: -28px -40px 20px !important; padding: 12px 40px !important; } .hist-tools { margin: -20px -40px 0; padding: 12px 40px 4px; } .order-card { border-left: 1px solid var(--line) !important; } .form-sticky { bottom: 16px; } .sidebar { width: 280px; border-left: 1px solid var(--line) !important; box-shadow: none !important; } .sidebar-header { border-bottom-color: var(--wg-line-soft) !important; text-align: start !important; } .sidebar-logo { font-family: var(--display); color: var(--ink) !important; font-size: 1.2rem !important; } .sidebar-nav { padding: 12px !important; } .sidebar-nav-item { min-height: 44px; padding: 0 12px !important; border-radius: 12px; border-right: none !important; font-weight: 600; color: var(--wg-ink-2) !important; margin-bottom: 2px; } .sidebar-nav-item i { color: var(--muted); } .sidebar-nav-item:hover { background: var(--ground) !important; color: var(--ink) !important; } .sidebar-nav-item.active { background: var(--brand-soft) !important; color: var(--brand-deep) !important; font-weight: 700; } .sidebar-nav-item.active i { color: var(--brand); } .top-navbar { height: 70px; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; background: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px); } .top-navbar-search input { border-radius: 12px !important; min-height: 44px; background: #fff !important; } .balance-display { background: var(--brand-soft) !important; color: var(--brand-deep) !important; border-radius: 12px !important; font-family: var(--mono); font-weight: 600 !important; direction: ltr; } .notif-btn, .profile-btn { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid var(--line) !important; } .fab-add { bottom: 32px !important; } } /* ---------- لوحة العميل: عناصر التنقل بقت