/* ============================================ SMM Legends — Panel Theme (TailAdmin-inspired) Shared between client + admin/super_admin pages ============================================ */ :root{ --bg: #f3f5f9; --card: #ffffff; --card-alt: #f6f7fb; --border: #e5e9f2; --text: #1a2130; --muted: #6b7385; --primary: #4f46e5; --primary-dark: #4338ca; --primary-soft: #eef0ff; --success: #12b76a; --success-soft: #e6f9f0; --danger: #f04438; --danger-soft: #feeceb; --warning: #f79009; --warning-soft: #fef3e2; --radius: 12px; --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); } /* الوضع الليلي (اختياري) — يتفعّل بإضافة data-theme="dark" على */ [data-theme="dark"]{ --bg: #10131a; --card: #171b26; --card-alt: #1d2230; --border: #262c3b; --text: #e7ebf5; --muted: #8b94a8; --primary: #6a63f0; --primary-dark: #7d77f3; --primary-soft: #232048; --success: #2dd087; --success-soft: #113228; --danger: #f36b61; --danger-soft: #351a1c; --warning: #f7a83e; --warning-soft: #362610; } *{box-sizing:border-box;} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Cairo', sans-serif; min-height:100vh; } button, input, select, textarea{font-family:inherit; font-size:inherit;} .mono{font-family:'Cairo', sans-serif;} a{color:inherit;} .icon-svg{width:20px; height:20px; flex-shrink:0;} /* ---------- Theme toggle ---------- */ .theme-toggle{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; white-space:nowrap; background:var(--card-alt); border:1px solid var(--border); color:var(--text); padding:5px 10px; border-radius:20px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; } .theme-toggle:hover{border-color:var(--primary); color:var(--primary);} .theme-toggle .icon-svg{width:14px; height:14px;} .theme-toggle .theme-icon-dark{display:none;} [data-theme="dark"] .theme-toggle .theme-icon-light{display:none;} [data-theme="dark"] .theme-toggle .theme-icon-dark{display:inline-flex;} select.currency-select{ appearance:none; -webkit-appearance:none; padding-inline-end:22px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 8px center; background-size:12px; } html[dir="rtl"] select.currency-select{background-position:left 8px center;} html[dir="ltr"] select.currency-select{background-position:right 8px center; padding-inline-end:10px; padding-inline-start:22px;} select.currency-select{flex:0 0 auto; width:auto; max-width:100px;} /* ---------- Top bar ---------- */ .topbar{ background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:14px 28px; color:var(--text); } .topbar .brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:var(--text); text-decoration:none; } .topbar .brand .brand-mark{ width:34px; height:34px; border-radius:9px; background:var(--primary); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .topbar .brand .brand-mark .icon-svg{width:19px; height:19px;} .brand-logo{height:34px; width:auto; display:block; max-width:100%;} .topbar .account-controls{display:flex; align-items:center; flex-wrap:wrap; gap:8px; row-gap:8px; font-size:13px;} .topbar .account-controls a, .topbar .account-controls button{ color:var(--muted); text-decoration:none; background:none; border:none; font-family:inherit; cursor:pointer; white-space:nowrap; } .topbar .account-controls > a:not(.theme-toggle), .topbar .account-controls > form > button{font-size:13px;} .topbar .account-controls > form{flex-shrink:0;} .topbar .account-controls a:hover, .topbar .account-controls button:hover{color:var(--primary);} .topbar .account-controls .sep{color:var(--border);} .topbar-left{display:flex; align-items:center; gap:10px;} .menu-toggle{ display:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:var(--card-alt); border:1px solid var(--border); color:var(--text); cursor:pointer; flex-shrink:0; } .menu-toggle:hover{border-color:var(--primary); color:var(--primary);} .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(16,20,30,.5); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s ease; } .sidebar-backdrop.show{opacity:1; pointer-events:auto;} .sidebar-close{ display:none; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:var(--card-alt); border:1px solid var(--border); color:var(--muted); cursor:pointer; } .balance-chip{ background:var(--primary-soft); border:1px solid var(--primary-soft); color:var(--primary-dark); padding:8px 14px; border-radius:8px; font-weight:700; font-size:13.5px; } /* ---------- Shell: sidebar + content ---------- */ .shell{display:flex; min-height:calc(100vh - 65px);} .sidebar{ width:240px; background:var(--card); border-inline-end:1px solid var(--border); flex-shrink:0; padding:18px 14px; display:flex; flex-direction:column; gap:3px; } .sidebar-label{ color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:14px 12px 6px; } .sidebar-head{display:none; align-items:center; justify-content:space-between; margin-bottom:10px; padding:0 4px;} .sidebar-head strong{font-size:14px;} .sidebar-foot{display:none; flex-direction:column; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border);} .sidebar-foot-balance{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px; font-size:13px; font-weight:600; color:var(--text);} .sidebar a, .sidebar form button{ display:flex; align-items:center; gap:11px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; padding:11px 13px; border-radius:9px; background:none; border:none; width:100%; font-family:inherit; cursor:pointer; text-align:start; } .sidebar a:hover{background:var(--card-alt); color:var(--text);} .sidebar a.active{background:var(--primary-soft); color:var(--primary);} .sidebar a.active .icon-svg{color:var(--primary);} .sidebar a.primary{background:var(--primary); color:#fff;} .sidebar a.primary:hover{background:var(--primary-dark); color:#fff;} .sidebar .icon-svg{opacity:.9;} main.content{flex:1; padding:26px 30px; min-width:0;} @media (max-width:960px){ body{overflow-x:hidden;} .shell{flex-direction:column;} .menu-toggle{display:inline-flex;} .sidebar-head{display:flex;} .sidebar-close{display:inline-flex;} .sidebar-backdrop{display:block;} .sidebar{ position:fixed; top:0; bottom:0; right:0; width:270px; max-width:80vw; border-inline-end:none; border-inline-start:1px solid var(--border); z-index:50; overflow-y:auto; transform:translateX(100%); transition:transform .25s ease; box-shadow:-8px 0 24px rgba(16,20,30,.15); } html[dir="ltr"] .sidebar{right:auto; left:0; border-inline-start:none; border-inline-end:1px solid var(--border); transform:translateX(-100%);} .sidebar.open, html[dir="ltr"] .sidebar.open{transform:translateX(0);} .sidebar-label{display:block;} main.content{padding:16px; min-width:0;} .topbar{ flex-wrap:nowrap; gap:8px; padding:12px 14px; box-shadow:0 1px 3px rgba(16,24,40,.05); position:sticky; top:0; z-index:40; } .topbar-left{gap:8px; flex-shrink:1; min-width:0; overflow:hidden;} .topbar .brand{font-size:16px; min-width:0; overflow:hidden;} .topbar .brand .brand-mark{width:28px; height:28px;} .topbar .brand .brand-mark .icon-svg{width:16px; height:16px;} .topbar .brand .brand-logo{height:30px; flex-shrink:1; min-width:0;} .sidebar-head .brand-logo{height:26px;} .menu-toggle{width:38px; height:38px; flex-shrink:0; border-radius:10px;} .menu-toggle .icon-svg{width:19px; height:19px;} .topbar .account-controls{flex-wrap:nowrap; gap:6px; font-size:12px; flex:0 0 auto; width:auto;} select.currency-select{max-width:96px;} .topbar .account-controls .sep{display:none;} .topbar .account-controls .topbar-only{display:none;} .topbar .theme-toggle{padding:7px 11px; font-size:12px; min-height:38px;} select.currency-select{padding-inline-end:18px; font-size:12px;} html[dir="ltr"] select.currency-select{padding-inline-end:8px; padding-inline-start:18px;} .sidebar-foot{display:flex;} .card, .panel{overflow-x:auto; padding:16px;} .stat-box{min-width:0;} .grid-2{gap:14px;} table{min-width:480px;} } /* ---------- Alerts ---------- */ .alert{padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px;} .alert.ok{background:var(--success-soft); color:var(--success); border:1px solid var(--success-soft);} .alert.err{background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger-soft);} /* ---------- Stat / info boxes (top of new-order page) ---------- */ .stat-row{display:flex; gap:16px; margin-bottom:22px; flex-wrap:wrap;} .stat-box{ flex:1; min-width:220px; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); } .stat-box .value{font-size:22px; font-weight:800;} .stat-box .label{font-size:13px; color:var(--muted);} .stat-box .icon-svg{width:22px; height:22px; color:var(--primary);} /* ---------- Notice banner ---------- */ .notice{text-align:center; margin-bottom:18px; font-size:14px;} .whatsapp-float{ position:fixed; bottom:22px; left:22px; z-index:200; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#25D366; box-shadow:0 4px 14px rgba(37,211,102,.45); transition:transform .15s, box-shadow .15s; } .whatsapp-float svg{width:30px; height:30px; flex-shrink:0;} .whatsapp-float:hover{transform:scale(1.08); box-shadow:0 6px 20px rgba(37,211,102,.55);} @media (max-width:640px){ .whatsapp-float{width:50px; height:50px; bottom:16px; left:16px;} .whatsapp-float svg{width:26px; height:26px;} } .whatsapp-channel-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; background:#25D366; color:#fff; text-decoration:none; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; margin:0 auto 18px; text-align:center; box-shadow:0 2px 8px rgba(37,211,102,.35); transition:transform .15s, box-shadow .15s; } .whatsapp-channel-btn svg{width:16px; height:16px; flex-shrink:0;} .whatsapp-channel-btn:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,211,102,.45); color:#fff;} .notice .warn-text{color:var(--danger); font-weight:700;} .read-before{ background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:18px; overflow:hidden; } .read-before summary{ padding:14px 18px; cursor:pointer; font-weight:800; font-size:14px; color:var(--text); display:flex; align-items:center; gap:8px; list-style:none; user-select:none; } .read-before summary::-webkit-details-marker{display:none;} .read-before summary::before{content:'▸'; color:var(--primary); transition:transform .15s;} .read-before[open] summary::before{transform:rotate(90deg);} .read-before-body{padding:0 18px 18px;} .read-before-body h4{font-size:13.5px; font-weight:800; color:var(--text); margin:16px 0 8px;} .read-before-body h4:first-child{margin-top:0;} .read-before-body ul{margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:6px;} .read-before-body li{font-size:13px; color:var(--muted); line-height:1.7;} .notice a{color:var(--primary); font-weight:700; text-decoration:underline;} .notice .join-btn{ display:inline-block; margin-top:10px; background:var(--success); color:#fff; font-weight:700; padding:9px 22px; border-radius:8px; text-decoration:none; font-size:13.5px; } /* ---------- Card / panel ---------- */ .panel, .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; margin-bottom:20px; box-shadow:var(--shadow); } .panel h2, .card h2{font-size:15.5px; font-weight:800; margin:0 0 16px; color:var(--text); display:flex; align-items:center; justify-content:space-between;} .card h2 .refresh{font-size:12px; color:var(--primary); cursor:pointer; font-weight:600; background:none; border:none; font-family:inherit;} /* ---------- Order cards (client orders list) ---------- */ .order-list{display:flex; flex-direction:column; gap:14px;} .order-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:16px; } .order-card:last-child{margin-bottom:0;} .order-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); } .order-card-title{font-size:14.5px; font-weight:700; line-height:1.5; color:var(--text);} .order-card-id{color:var(--muted); font-size:12px; margin-top:4px;} .order-card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:16px 20px;} .order-card-field label{display:block; font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:4px;} .order-card-field .val{font-size:13.5px; font-weight:700; color:var(--text);} .order-card-field .val a{color:var(--primary); text-decoration:none;} .order-card-foot{ display:flex; align-items:center; justify-content:flex-end; padding-top:14px; margin-top:14px; border-top:1px solid var(--border); } @media (max-width:700px){ .order-card{padding:16px;} .order-card-grid{grid-template-columns:repeat(2, 1fr); gap:14px;} .order-card-head{flex-direction:column; gap:8px;} } /* ---------- Platform / category pill tabs ---------- */ .tabs{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px;} @media (max-width:700px){ .tabs{grid-template-columns:repeat(2, 1fr);} } .tabs button{ background:var(--card); border:1px solid var(--border); color:var(--text); font-weight:700; font-size:13.5px; padding:10px 14px; border-radius:10px; cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:flex-start; gap:10px; } .tabs button.active{background:var(--primary); border-color:var(--primary); color:#fff;} .tabs button:hover:not(.active){border-color:var(--primary); color:var(--primary);} .tabs button .tab-icon{width:22px; height:22px; object-fit:contain; flex-shrink:0; border-radius:5px;} .tabs button .icon-svg{width:20px; height:20px; flex-shrink:0;} .category-icon{width:22px; height:22px; object-fit:contain; flex-shrink:0; border-radius:5px; vertical-align:middle;} /* ---------- Status filter tabs (orders page) ---------- */ .status-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; justify-content:flex-end;} .status-tabs a{ font-size:13px; font-weight:700; color:var(--text); text-decoration:none; padding:8px 16px; border-radius:8px; background:var(--card); border:1px solid var(--border); } .status-tabs a.active{background:var(--primary); border-color:var(--primary); color:#fff;} /* ---------- Forms ---------- */ .field{margin-bottom:16px;} .field label, form > label{display:block; font-size:13px; color:var(--muted); font-weight:700; margin-bottom:6px;} .field input, .field select, .field textarea, input, select, textarea{ width:100%; background:var(--card-alt); border:1px solid var(--border); color:var(--text); padding:11px 13px; border-radius:9px; font-size:14px; font-family:inherit; } .field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); } .search-box{display:flex; gap:10px; margin-bottom:18px;} .custom-select{position:relative;} .custom-select-trigger{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:var(--card-alt); border:1px solid var(--border); color:var(--text); padding:11px 13px; border-radius:9px; font-size:14px; font-family:inherit; cursor:pointer; } .custom-select-trigger:focus, .custom-select.open .custom-select-trigger{outline:none; border-color:var(--primary);} .custom-select-trigger .selected-content{display:flex; align-items:center; gap:8px; overflow:hidden;} .custom-select-trigger .selected-content img{width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0;} .custom-select-trigger .selected-content span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .custom-select-trigger .chevron{flex-shrink:0; width:16px; height:16px; color:var(--muted); transition:transform .15s;} .custom-select.open .chevron{transform:rotate(180deg);} .custom-select-panel{ display:none; position:absolute; z-index:20; top:calc(100% + 6px); inset-inline:0; max-height:280px; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow); padding:6px; } .custom-select.open .custom-select-panel{display:block;} .custom-select-option{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:7px; cursor:pointer; font-size:13.5px; color:var(--text); } .custom-select-option:hover{background:var(--card-alt);} .custom-select-option.active{background:var(--primary-soft); color:var(--primary); font-weight:700;} .custom-select-option img{width:18px; height:18px; border-radius:50%; object-fit:cover; flex-shrink:0;} .custom-select-option span{white-space:normal; word-break:break-word; flex:1; min-width:0;} .search-box input{flex:1;} .search-box button{ background:var(--primary); color:#fff; border:none; padding:0 20px; border-radius:9px; cursor:pointer; font-weight:700; } button.btn-primary, button.primary{ background:var(--primary); color:#fff; border:none; font-weight:700; padding:12px 22px; border-radius:9px; cursor:pointer; font-size:14.5px; } button.btn-primary:hover, button.primary:hover{background:var(--primary-dark);} button.primary:disabled{opacity:.5; cursor:not-allowed;} button.btn-blue{ background:var(--primary-soft); color:var(--primary-dark); border:none; font-weight:700; padding:8px 18px; border-radius:8px; cursor:pointer; font-size:13px; } button.btn-blue:hover{background:var(--primary); color:#fff;} .cost-preview{font-size:13px; color:var(--muted); margin-top:6px;} .cost-preview b{color:var(--success); font-size:14.5px;} /* ---------- Tables ---------- */ table{width:100%; border-collapse:collapse; font-size:13.5px;} thead tr{background:var(--card-alt);} th{padding:11px 10px; font-weight:700; font-size:12px; text-align:center; color:var(--muted); border-bottom:1px solid var(--border);} td{padding:11px 10px; border-bottom:1px solid var(--border); text-align:center;} tbody tr:hover{background:var(--card-alt);} tr:last-child td{border-bottom:none;} .text-right{text-align:start;} .status-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;} .status-pill .blip{width:7px; height:7px; border-radius:50%; background:var(--muted);} .status-pill.ok{background:var(--success-soft); color:var(--success);} .status-pill.ok .blip{background:var(--success);} .status-pill.warn{background:var(--warning-soft); color:var(--warning);} .status-pill.warn .blip{background:var(--warning);} .status-pill.bad{background:var(--danger-soft); color:var(--danger);} .status-pill.bad .blip{background:var(--danger);} .status-pill.pending{background:var(--card-alt); color:var(--muted);} .service-id-badge{ display:inline-flex; align-items:center; justify-content:center; background:#e7f3ff; color:#1c7ed6; font-family:'Cairo', sans-serif; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; margin-inline-end:8px; vertical-align:middle; white-space:nowrap; } [data-theme="dark"] .service-id-badge{background:#173654; color:#6cb6f5;} /* ---------- API flow (client-facing docs, /dashboard/api) ---------- */ .api-flow{display:flex; flex-direction:column; gap:16px;} .api-step{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; scroll-margin-top:16px; } .api-step-head{padding:16px 20px 14px;} .api-step-head h3{margin:0 0 4px; font-size:15.5px; font-weight:800;} .api-step-head p{margin:0; color:var(--muted); font-size:13px; line-height:1.7;} .api-params{width:100%; border-collapse:collapse; font-size:13px;} .api-params thead th{ background:var(--primary-soft); color:var(--primary-dark); text-align:right; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:8px 20px; } .api-params td{padding:9px 20px; border-bottom:1px solid var(--border); vertical-align:top;} .api-params tbody tr:last-child td{border-bottom:none;} .api-params td.pname{font-weight:700; white-space:nowrap; direction:ltr; text-align:right; font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:12.5px; width:1%;} .api-params td.pdesc{color:var(--muted); line-height:1.7;} .api-req-tag, .api-opt-tag{font-size:10px; font-weight:700; margin-inline-start:6px;} .api-req-tag{color:var(--danger);} .api-opt-tag{color:var(--muted);} .api-resp-label{ padding:12px 20px 0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .api-code{ margin:8px 20px 18px; background:var(--card-alt); border:1px solid var(--border); border-radius:9px; padding:12px 14px; overflow-x:auto; direction:ltr; text-align:left; font-family:ui-monospace, "Cascadia Code", Consolas, monospace; font-size:12px; line-height:1.7; color:var(--text); } .api-code .k{color:var(--primary);} .api-code .s{color:var(--success);} .api-code .n{color:var(--warning);} .api-note{ display:flex; gap:9px; margin:0 20px 18px; padding:10px 12px; border-radius:9px; background:var(--warning-soft); font-size:12.5px; line-height:1.7; color:var(--text); } @media (max-width:640px){ .api-step-head{padding:14px 14px 12px;} .api-params thead th, .api-params td{padding:8px 14px;} .api-code{margin-inline:14px;} .api-note{margin-inline:14px;} } .api-badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px; margin-inline-start:6px; vertical-align:middle; background:var(--warning-soft); color:var(--warning); white-space:nowrap; } .empty-row{text-align:center; color:var(--muted); padding:30px 0;} /* ---------- Services table (clean banded style) ---------- */ #services-table thead th{ text-transform:uppercase; letter-spacing:.04em; font-size:11px; padding-bottom:13px; border-bottom:2px solid var(--border); } #services-table tbody tr.row-alt{background:var(--card-alt);} #services-table tbody tr.row-alt:hover, #services-table tbody tr:hover{background:var(--primary-soft);} #services-table tbody tr td{font-size:13px;} #services-table tbody tr td.text-right{font-weight:700; color:var(--text);} #services-table tr.category-row td{ padding:12px 10px; border-inline-start:3px solid var(--primary); } #services-table tr.category-row:hover{background:var(--card-alt) !important;} .services-cards{display:none;} .order-cards{display:none;} @media (max-width:640px){ #services-table{display:none;} .services-cards{display:block;} #orders-table{display:none;} .order-cards{display:block;} .scm-category{ display:flex; align-items:center; gap:8px; padding:16px 2px 8px; font-weight:800; color:var(--text); font-size:14px; } .scm-category img, .scm-category svg{width:18px; height:18px; flex-shrink:0;} .service-card-mobile{ display:block; padding:12px 2px; border-bottom:1px solid var(--border); color:inherit; text-decoration:none; } .service-card-mobile:active{background:var(--card-alt);} .scm-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px;} .scm-price{font-weight:800; color:var(--success); font-size:14px; white-space:nowrap;} .scm-price small{font-weight:600; color:var(--muted); font-size:11px;} .scm-id{font-size:12px; color:var(--muted); font-weight:700; white-space:nowrap;} .scm-name{font-size:13px; font-weight:700; color:var(--text); line-height:1.5; margin-bottom:10px;} .scm-stats{display:flex; justify-content:space-between; gap:6px; text-align:center;} .scm-stat{display:flex; flex-direction:column; align-items:center; flex:1; gap:2px; min-width:0;} .scm-label{font-size:10.5px; color:var(--muted); font-weight:700; white-space:nowrap;} .scm-value{font-size:12.5px; font-weight:800; color:var(--text);} .services-cards .empty-row{padding:30px 4px;} } /* ---------- Support tickets ---------- */ .ticket-thread{display:flex; flex-direction:column; gap:14px;} .ticket-message{ max-width:80%; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card-alt); } .ticket-message.mine{align-self:flex-end; background:var(--primary-soft); border-color:transparent;} .ticket-message.admin{align-self:flex-start; background:var(--card-alt);} .ticket-message-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:11.5px; font-weight:800; color:var(--muted);} .ticket-message-body{font-size:14px; color:var(--text); line-height:1.7; white-space:pre-line;} @media (max-width:640px){ .ticket-message{max-width:100%;} } .pagination{margin-top:16px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;} .pagination a, .pagination span{ padding:6px 12px; border-radius:8px; font-size:12.5px; text-decoration:none; color:var(--muted); border:1px solid var(--border); } .pagination a:hover{color:var(--primary); border-color:var(--primary);} /* ============================================ Admin-specific (shared via layouts/admin.blade.php) ============================================ */ .back-link{display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; color:var(--primary); text-decoration:none; font-size:13.5px; font-weight:700;} .role-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--card-alt);} .role-pill.super{color:var(--warning); background:var(--warning-soft);} .role-pill.admin{color:var(--primary); background:var(--primary-soft);} .role-pill.client{color:var(--muted);} .actions{display:flex; gap:6px; flex-wrap:wrap;} .actions button, .adjust-form button, .btn-approve, .btn-reject, .btn-promote, .btn-super, .btn-demote{ border:none; padding:7px 14px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; } .btn-approve{background:var(--success-soft); color:var(--success);} .btn-approve:hover{background:var(--success); color:#fff;} .btn-reject{background:var(--danger-soft); color:var(--danger);} .btn-reject:hover{background:var(--danger); color:#fff;} .btn-promote{background:var(--primary-soft); color:var(--primary-dark);} .btn-promote:hover{background:var(--primary); color:#fff;} .btn-super{background:var(--warning-soft); color:var(--warning);} .btn-super:hover{background:var(--warning); color:#fff;} .btn-demote{background:var(--danger-soft); color:var(--danger);} .btn-demote:hover{background:var(--danger); color:#fff;} .adjust-form{display:flex; gap:6px;} .adjust-form input{width:110px;} .balance-figure{font-size:34px; font-weight:800; letter-spacing:.3px;} .balance-figure span{font-size:15px; color:var(--muted); font-weight:600; margin-inline-start:6px;} .balance-sub{color:var(--muted); font-size:13px; margin-top:6px;} .profit-figure{font-size:32px; font-weight:800; color:var(--success);} .hint{color:var(--muted); font-size:12.5px; margin-top:8px;} .example-box{background:var(--card-alt); border-radius:10px; padding:14px 16px; margin-top:14px; font-size:13px; color:var(--muted);} .example-box b{color:var(--text);} .payment-group-label{font-size:12.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 8px;} .payment-group-label:first-child{margin-top:0;} .payment-method-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px;} .payment-method-card{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border:1.5px solid var(--border); border-radius:12px; cursor:pointer; text-align:center; background:var(--card); transition:border-color .15s, background .15s;} .payment-method-card input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer;} .payment-method-card .icon-svg{width:22px; height:22px; color:var(--muted);} .payment-method-card .payment-method-logo{width:28px; height:28px; object-fit:contain;} .payment-method-card span{font-size:12.5px; font-weight:700; color:var(--text);} .payment-method-card:hover{border-color:var(--primary);} .payment-method-card.selected{border-color:var(--primary); background:var(--primary-soft);} .payment-method-card.selected .icon-svg, .payment-method-card.selected span{color:var(--primary);} .payment-method-details{background:var(--card-alt); border-radius:10px; padding:12px 14px; margin-top:14px; font-size:13px; color:var(--text); white-space:pre-line; display:none;} .payment-method-details.show{display:block;} .crypto-row{margin-bottom:16px;} .crypto-row:last-child{margin-bottom:0;} .crypto-row-label{font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;} .crypto-value-box{display:flex; align-items:center; gap:10px; border:1.5px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--card);} .crypto-badge{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px;} .crypto-value{flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .crypto-copy-btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:var(--card-alt); color:var(--text); font-size:12.5px; font-weight:700; cursor:pointer;} .crypto-copy-btn:hover{border-color:var(--primary); color:var(--primary);} .crypto-copy-btn .icon-svg{width:14px; height:14px;} .crypto-row-sub{margin-top:6px; font-size:12px; color:var(--muted);} .crypto-qr-toggle{margin-top:8px; background:none; border:none; padding:0; color:var(--primary); font-size:12.5px; font-weight:700; cursor:pointer;} .crypto-qr-box{display:none; margin-top:10px;} .crypto-qr-box.show{display:block;} .crypto-qr-box img{width:140px; height:140px; object-fit:contain; border:1px solid var(--border); border-radius:10px; padding:6px; background:#fff;} .wallet-cards-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; align-items:stretch;} .wallet-pay-card{display:flex; flex-direction:column;} .wallet-pay-form{display:flex; flex-direction:column; flex:1;} @media (max-width:960px){ .wallet-cards-grid{grid-template-columns:1fr;} } .msg{font-size:13px; margin-top:10px; padding:10px 12px; border-radius:10px; display:none;} .msg.show{display:block;} .msg.ok{background:var(--success-soft); color:var(--success);} .msg.err{background:var(--danger-soft); color:var(--danger);} .loading{color:var(--muted); font-size:13px;} .rate{font-family:'Cairo', sans-serif; color:var(--success);} .grid-2{display:grid; grid-template-columns:1.1fr 1fr; gap:20px;} @media (max-width:1000px){ .grid-2{grid-template-columns:1fr;} } .topline{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:14px;} .topline h1{font-size:23px; font-weight:800; margin:0;} .topline p{color:var(--muted); font-size:14px; margin:4px 0 0;} ::-webkit-scrollbar{width:8px; height:8px;} ::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px;} /* ============================================ Auth pages (login / register) — split screen ============================================ */ .auth-shell{display:flex; min-height:100vh; background:var(--bg);} .auth-graphic{ flex:1; position:relative; overflow:hidden; min-height:100vh; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display:flex; align-items:center; justify-content:center; padding:60px; } .auth-graphic-content{position:relative; z-index:2; max-width:400px; text-align:center;} .auth-graphic-logo{ display:inline-flex; background:#fff; padding:14px 22px; border-radius:16px; margin-bottom:36px; box-shadow:0 12px 30px rgba(0,0,0,.15); } .auth-graphic-logo img{height:34px; width:auto; display:block;} .auth-graphic-content h1{color:#fff; font-size:28px; font-weight:800; margin:0 0 12px; line-height:1.4;} .auth-graphic-content p{color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.7; margin:0;} .auth-bubbles{position:absolute; inset:0; z-index:1;} .auth-bubble{ position:absolute; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:26px; display:flex; align-items:center; justify-content:center; color:#fff; backdrop-filter:blur(2px); animation:auth-float 6s ease-in-out infinite; } .auth-bubble .icon-svg{width:44%; height:44%;} .auth-bubble.b1{width:74px; height:74px; top:10%; inset-inline-start:12%; animation-delay:0s;} .auth-bubble.b2{width:56px; height:56px; top:22%; inset-inline-end:14%; animation-delay:.6s;} .auth-bubble.b3{width:84px; height:84px; top:46%; inset-inline-start:6%; animation-delay:1.2s;} .auth-bubble.b4{width:62px; height:62px; top:56%; inset-inline-end:8%; animation-delay:1.8s;} .auth-bubble.b5{width:52px; height:52px; top:78%; inset-inline-start:22%; animation-delay:2.4s;} .auth-bubble.b6{width:60px; height:60px; top:80%; inset-inline-end:24%; animation-delay:3s;} @keyframes auth-float{ 0%, 100%{transform:translateY(0);} 50%{transform:translateY(-16px);} } .auth-form-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; } .auth-top-controls{position:absolute; top:20px; inset-inline-end:24px; inset-inline-start:24px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;} .auth-form-inner{width:100%; max-width:380px;} .auth-form-inner .brand-mobile{display:none; margin-bottom:24px;} .auth-form-inner .brand-mobile img{height:32px; width:auto;} .auth-form-inner h2{font-size:26px; font-weight:800; margin:0 0 8px; color:var(--text);} .auth-form-inner .sub{color:var(--muted); font-size:13.5px; margin-bottom:28px;} .auth-field{position:relative; margin-bottom:16px;} .auth-field .icon-badge{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-start:6px; width:36px; height:36px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; pointer-events:none; } .auth-field .icon-badge .icon-svg{width:17px; height:17px;} .auth-field input{ width:100%; background:var(--card); border:1px solid var(--border); color:var(--text); padding:13px 18px; padding-inline-start:54px; border-radius:999px; font-size:14px; font-family:inherit; } .auth-field input:focus{outline:none; border-color:var(--primary);} .auth-remember{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:18px;} .auth-remember input{width:auto;} button.auth-submit{ width:100%; background:var(--text); color:#fff; border:none; font-weight:700; padding:14px; border-radius:999px; cursor:pointer; font-size:14.5px; font-family:inherit; } button.auth-submit:hover{background:var(--primary);} .auth-foot{text-align:center; margin-top:22px; font-size:13.5px; color:var(--muted);} .auth-foot a{color:var(--primary); text-decoration:none; font-weight:700;} .auth-divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12.5px;} .auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--border);} .btn-google{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--card); border:1px solid var(--border); color:var(--text); padding:12px; border-radius:999px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; font-family:inherit; } .btn-google:hover{border-color:var(--primary); background:var(--card-alt);} @media (max-width:860px){ .auth-graphic{display:none;} .auth-form-inner .brand-mobile{display:block; text-align:center;} .auth-top-controls{position:static; justify-content:center; margin-bottom:20px;} .auth-form-panel{flex-direction:column; padding:24px 20px;} } /* ============================================ Error pages (404 / 419 / 403 / 500 / 503) ============================================ */ .error-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; } .error-card{ width:100%; max-width:420px; text-align:center; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:44px 32px; box-shadow:var(--shadow); } .error-card .brand-logo{height:30px; width:auto; margin-bottom:28px;} .error-icon{ width:72px; height:72px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; } .error-icon .icon-svg{width:34px; height:34px;} .error-code{color:var(--muted); font-size:13px; font-weight:700; letter-spacing:1px; margin-bottom:8px;} .error-card h1{font-size:21px; font-weight:800; color:var(--text); margin:0 0 10px;} .error-card p{color:var(--muted); font-size:14px; line-height:1.7; margin:0 0 26px;} .error-card .btn-primary{display:inline-block; text-decoration:none;} /* ============================================ Landing Page ============================================ */ .landing-nav{ position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--border); } .landing-nav-inner{ display:flex; align-items:center; flex-wrap:wrap; row-gap:10px; column-gap:16px; max-width:1600px; margin:0 auto; padding:14px 5%; } .landing-nav .brand{display:flex; align-items:center; gap:10px; text-decoration:none;} .landing-nav .brand img{height:32px; width:auto; display:block;} .landing-nav .brand span{font-weight:800; font-size:17px; color:var(--text);} .landing-nav-links{display:flex; align-items:center; gap:22px;} .landing-nav-links a{color:var(--text); text-decoration:none; font-weight:700; font-size:14px;} .landing-nav-links a:hover{color:var(--primary);} .landing-nav-utils{display:flex; align-items:center; gap:8px; margin-inline-start:auto;} .landing-nav-auth{display:flex; align-items:center; gap:10px;} .landing-nav-utils + .landing-nav-auth{margin-inline-start:0;} .landing-nav-auth a.btn-outline{ display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; border-radius:999px; border:1.5px solid var(--border); color:var(--text); text-decoration:none; font-weight:700; font-size:13.5px; } .landing-nav-auth a.btn-outline:hover{border-color:var(--primary); color:var(--primary);} .landing-nav-auth a.btn-fill{ display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:999px; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; font-size:13.5px; } .landing-nav-auth a.btn-fill:hover{background:var(--primary-dark);} .landing-hero{ position:relative; overflow:hidden; padding:60px 5%; background:linear-gradient(180deg, var(--primary-soft) 0%, var(--bg) 100%); } .landing-hero-grid{ display:grid; grid-template-columns:1.1fr 400px; gap:50px; align-items:center; max-width:1600px; margin:0 auto; } .landing-hero-text{text-align:start;} .landing-hero h1{font-size:clamp(28px, 4vw, 42px); font-weight:800; line-height:1.35; margin:0 0 18px; color:var(--text);} .landing-hero p{font-size:16px; color:var(--muted); margin:0 0 28px; line-height:1.8;} .landing-hero-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:32px;} .landing-hero-actions a.btn-hero-primary{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; background:var(--primary); color:#fff; text-decoration:none; font-weight:800; font-size:15px; box-shadow:0 10px 24px -8px var(--primary); } .landing-hero-actions a.btn-hero-primary:hover{background:var(--primary-dark);} .landing-badges{display:flex; align-items:center; gap:16px; flex-wrap:wrap;} .landing-badges img{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--card); border:1px solid var(--border); padding:8px; box-shadow:var(--shadow); transition:transform .15s; } .landing-badges img:hover{transform:translateY(-3px);} .landing-login-card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px 28px; box-shadow:var(--shadow); } .landing-login-card h2{font-size:22px; font-weight:800; margin:0 0 6px; color:var(--text);} .landing-login-card .sub{color:var(--muted); font-size:13px; margin-bottom:22px;} .landing-login-card .alert{margin-bottom:16px;} .landing-stats{ display:grid; grid-template-columns:repeat(3, minmax(180px, 320px)); justify-content:center; gap:20px; max-width:1600px; margin:-40px auto 0; padding:0 5%; position:relative; z-index:2; } .landing-stat-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px 18px; text-align:center; box-shadow:var(--shadow); } .landing-stat-card .num{font-size:32px; font-weight:800; color:var(--primary); margin-bottom:6px;} .landing-stat-card .label{font-size:13px; color:var(--muted); font-weight:700;} .landing-section{padding:70px 5%; max-width:1600px; margin:0 auto;} .landing-section-title{text-align:center; font-size:clamp(24px, 3.5vw, 32px); font-weight:800; margin:0 0 44px; color:var(--text);} .landing-section.legal-article{max-width:820px; text-align:start;} .legal-back{display:inline-flex; align-items:center; gap:6px; color:var(--primary); text-decoration:none; font-weight:700; font-size:13.5px; margin-bottom:20px;} .legal-article h1{font-size:30px; font-weight:800; margin:0 0 6px; color:var(--text);} .legal-article h2{font-size:18px; font-weight:800; margin:34px 0 12px; color:var(--text);} .legal-article .legal-updated{font-size:12.5px; color:var(--muted); margin-bottom:22px;} .legal-article .legal-intro{font-size:15.5px; color:var(--text); line-height:1.8; margin-bottom:6px;} .legal-article p{font-size:14.5px; line-height:1.9; color:var(--muted); margin:0 0 10px;} .landing-features-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 320px)); justify-content:center; gap:22px;} .landing-feature-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px 22px; text-align:center; } .landing-feature-icon{ width:56px; height:56px; border-radius:16px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; } .landing-feature-icon .icon-svg{width:26px; height:26px;} .landing-feature-card h3{font-size:16px; font-weight:800; margin:0 0 8px; color:var(--text);} .landing-feature-card p{font-size:13.5px; color:var(--muted); line-height:1.7; margin:0;} .landing-how-grid{display:grid; grid-template-columns:repeat(3, minmax(220px, 320px)); justify-content:center; gap:32px; counter-reset:step;} .landing-how-step{text-align:center; position:relative;} .landing-how-step .step-num{ counter-increment:step; width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin:0 auto 18px; } .landing-how-step .step-num::before{content:counter(step);} .landing-how-step h3{font-size:16px; font-weight:800; margin:0 0 8px; color:var(--text);} .landing-how-step p{font-size:13.5px; color:var(--muted); line-height:1.7; margin:0;} .landing-platforms-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:16px;} .landing-platform-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 10px; background:var(--card); border:1px solid var(--border); border-radius:14px; transition:transform .15s, border-color .15s; } .landing-platform-card:hover{transform:translateY(-3px); border-color:var(--primary);} .landing-platform-card img{width:36px; height:36px; border-radius:50%; object-fit:cover;} .landing-platform-card span{font-size:12.5px; font-weight:700; color:var(--text);} .landing-payment-icon{ width:36px; height:36px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; } .landing-payment-icon .icon-svg{width:18px; height:18px;} .landing-cta{ text-align:center; padding:64px 5%; width:90%; max-width:1600px; margin:0 auto 70px; border-radius:24px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .landing-cta h2{color:#fff; font-size:clamp(22px, 3.5vw, 30px); font-weight:800; margin:0 0 12px;} .landing-cta p{color:rgba(255,255,255,.85); font-size:14.5px; margin:0 0 28px;} .landing-cta a.btn-cta{ display:inline-flex; align-items:center; gap:8px; padding:15px 34px; border-radius:999px; background:#fff; color:var(--primary); text-decoration:none; font-weight:800; font-size:15px; } .landing-cta a.btn-cta:hover{background:var(--card-alt);} .landing-footer{border-top:1px solid var(--border); padding:50px 5% 30px; color:var(--muted); font-size:13.5px;} .landing-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; max-width:1600px; margin:0 auto; text-align:start; } .landing-footer-col h4{font-size:14px; font-weight:800; color:var(--text); margin:0 0 16px;} .landing-footer-col{display:flex; flex-direction:column; gap:12px;} .landing-footer-col a{color:var(--muted); text-decoration:none; font-weight:600; font-size:13.5px;} .landing-footer-col a:hover{color:var(--primary);} .landing-footer-brand .brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:14px;} .landing-footer-brand .brand img{height:30px; width:auto;} .landing-footer-brand .brand span{font-weight:800; font-size:16px; color:var(--text);} .landing-footer-brand p{margin:0; font-size:13px; color:var(--muted);} @media (max-width:960px){ .landing-hero-grid{grid-template-columns:1fr; gap:36px;} .landing-login-card{max-width:420px; margin:0 auto; width:100%;} .landing-stats{grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));} .landing-how-grid{grid-template-columns:repeat(auto-fit, minmax(200px, 320px));} } @media (max-width:640px){ .landing-nav-inner{padding:12px 4%;} .landing-nav-links{gap:12px;} .landing-nav-links a{font-size:13px;} .landing-nav-link-payments{display:none;} .landing-nav-utils{order:2;} .landing-nav-auth{order:3; flex-basis:100%; gap:10px;} .landing-nav-auth a{flex:1;} .landing-nav-auth a.btn-outline, .landing-nav-auth a.btn-fill{padding:10px 14px; font-size:13px;} .landing-hero-text{text-align:center;} .landing-hero-actions{justify-content:center;} .landing-badges{justify-content:center;} .landing-login-card{padding:26px 20px;} .landing-stats{grid-template-columns:1fr; margin-top:-24px;} .landing-how-grid{grid-template-columns:1fr;} .landing-cta{width:92%; margin:0 auto 50px; padding:48px 20px;} .landing-footer-grid{grid-template-columns:1fr; gap:28px; text-align:center;} .landing-footer-brand .brand{justify-content:center;} }