/* SHAWEI-STORE v3 — Clean CSS */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Cairo',sans-serif!important;background-color:#243447!important;color:#fff!important;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
ul,ol{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,h5,h6{margin:0}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;outline:none}
p{margin:0}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#243447}
::-webkit-scrollbar-thumb{background:#4a5568;border-radius:10px}

/* === LAYOUT === */
.page-wrapper{display:flex;flex-direction:row-reverse;flex:1;min-height:100vh}
.main-content{flex:1;padding:1.5rem 2.5rem}

/* === HEADER === */
.main-header{background:#1e2d3b!important;border-bottom:1px solid #374151!important;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50}
.logo-area{display:flex;align-items:center;gap:.5rem}
.header-actions{display:flex;align-items:center;gap:1rem}
.hamburger-btn{background:0 0;border:none;color:#fff;cursor:pointer;padding:.5rem;border-radius:9999px}

/* === SIDEBAR === */
.sidebar{width:320px;background:#2a3b4c;flex-shrink:0;border-left:1px solid #374151;padding:1.5rem;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-login-card{background:linear-gradient(180deg,#ff6b35,#ff4d4d);border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem;text-align:center}
.sidebar-login-card h3{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}
.sidebar-login-card p{font-size:.85rem;color:rgba(255,255,255,.9);margin-bottom:1.5rem}
.btn-login{width:100%;background:#00e676!important;color:#fff!important;border:none;padding:.5rem;border-radius:.5rem;font-weight:700;font-size:.85rem;cursor:pointer;text-align:center;display:block;margin-bottom:.75rem}
.btn-google{width:100%;background:#fff!important;color:#374151!important;border:none;padding:.5rem;border-radius:.5rem;font-weight:700;font-size:.8rem;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:.5rem}
.sidebar-nav a{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.95rem;color:#d1d5db;font-weight:600;border-radius:.5rem;margin-bottom:.15rem}
.sidebar-nav a:hover{background:rgba(255,255,255,.05)}
.sidebar-nav a.active{background:#40566d}
.sidebar-nav a i:first-child{width:20px;text-align:center}
.sidebar-toggle{padding:1rem 0;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between}
.sidebar-toggle span{font-size:.85rem;color:#9ca3af}
.sidebar-credit{text-align:center;padding:1rem 0;border-top:1px solid rgba(255,255,255,.08)}

/* === UC GRID === */
.uc-grid{display:grid;gap:3rem 1.5rem}
@media(min-width:768px){.uc-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.uc-grid{grid-template-columns:repeat(4,1fr)}}
.uc-card{display:flex;flex-direction:column;align-items:center}
.uc-card-image{clip-path:circle(50% at 50% 50%);width:180px;height:180px;object-fit:cover;margin-bottom:-28px;position:relative;z-index:1}
.uc-btn{display:block;width:100%;background:#ff49db!important;color:#fff!important;border:none;padding:.55rem .5rem;border-radius:9999px;font-weight:700;font-size:.85rem;text-align:center;cursor:pointer}
.uc-card .uc-info{text-align:center;font-size:.82rem;color:#d1d5db;margin-top:.35rem}

/* === GAME BUTTON === */
.game-btn{background:#ff49db!important;color:#fff!important;border:none;padding:.5rem 1.25rem;border-radius:9999px;font-weight:700;font-size:.85rem;cursor:pointer}

/* === PAYMENT BOX === */
.payment-box{background:#1a252f;border-radius:1rem;padding:1.5rem;margin-bottom:1.5rem}
.payment-box h5{font-weight:700;margin-bottom:1rem}

/* === PAYMENT GATEWAY CARDS === */
.payment-gateway-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-top:.75rem}
.payment-gateway-card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:2px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem .75rem;cursor:pointer;transition:all .3s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.payment-gateway-card:hover{border-color:rgba(255,107,53,.4);background:rgba(255,107,53,.06);transform:translateY(-2px)}
.payment-gateway-card.selected,.payment-gateway-card:has(input:checked){border-color:#ff6b35;background:rgba(255,107,53,.12);box-shadow:0 0 0 3px rgba(255,107,53,.25)}
.payment-gateway-card .gw-name{font-size:.78rem;font-weight:600;color:#d1d5db}
.payment-gateway-card .gw-check{display:none;width:18px;height:18px;background:#ff6b35;border-radius:50%;position:absolute;top:-6px;right:-6px;align-items:center;justify-content:center}
.payment-gateway-card.selected .gw-check,.payment-gateway-card:has(input:checked) .gw-check{display:flex}
.payment-gateway-card .gw-check i{color:#fff;font-size:10px}
.payment-gateway-card .gw-icon-wrap{width:32px;height:32px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.payment-gateway-card .gw-icon{width:100%;height:100%;object-fit:cover}

/* === AUTH === */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:80vh;padding:1.5rem 1rem}
.auth-container{width:100%;max-width:480px}
.auth-form-card{background:#1a252f;border-radius:1rem;padding:1.5rem}
.auth-form-card input,.auth-form-card select{font-size:16px!important}

/* === FOOTER === */
.footer-section{background:#15202b;border-top:1px solid rgba(255,255,255,.05);padding:3rem 0 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.footer-box h5{font-weight:700;margin-bottom:1rem}
.footer-box p,.footer-box ul li{font-size:.85rem;color:#9ca3af}
.footer-box ul li{margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.footer-box ul li i{color:#ff6b35;width:20px;text-align:center}
.footer-box ul li a{color:#9ca3af}
.footer-box ul li a:hover{color:#ff6b35}
.social-links{display:flex;gap:.5rem;margin-top:1rem}
.social-links a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#9ca3af}
.social-links a:hover{background:#ff6b35;color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;margin-top:2rem;border-top:1px solid rgba(255,255,255,.05);font-size:.8rem;color:#6b7280}
.footer-bottom .copyright a{color:#ff6b35}
.language-links{display:flex;gap:1rem}
.language-links a{color:#6b7280}
.language-links a:hover{color:#ff6b35}

/* === MOBILE === */
.mobile-fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50}
.mobile-fab a{width:48px;height:48px;background:#00e676;border-radius:50%;display:flex;align-items:center;justify-content:center}
.mobile-menu{position:fixed;top:0;right:-280px;width:280px;height:100%;background:#1a252f;z-index:70;padding:2rem 1rem;transition:right .3s ease;overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,.4)}
.mobile-menu.active{right:0}
.mobile-menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;backdrop-filter:blur(4px)}
.mobile-menu-overlay.active{display:block}
.mobile-menu nav a:hover{background:rgba(255,255,255,.05)}
.scroll-top{position:fixed;bottom:1.5rem;left:1.5rem;width:40px;height:40px;background:#ff6b35;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:50}

/* === PRELOADER === */
#preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#243447;display:flex;align-items:center;justify-content:center;z-index:99999;transition:opacity .5s}
#preloader.hide-preloader{opacity:0;pointer-events:none}

/* === RESPONSIVE === */
@media(max-width:1023px){.sidebar{display:none}.main-content{padding:1rem}.footer-bottom{flex-direction:column;gap:1rem;text-align:center}}
@media(max-width:767px){.dashboard-cards-grid{grid-template-columns:repeat(4,1fr)!important;gap:0.3rem!important}.dash-card{padding:0.4rem;gap:0.2rem;flex-direction:column;text-align:center;border-radius:0.5rem}.dash-card .dash-icon{width:20px;height:20px;font-size:0.55rem;border-radius:4px}.dash-card .dash-info h2{font-size:0.65rem}.dash-card .dash-info h2 sup{font-size:0.5rem}.dash-card .dash-info p{font-size:0.5rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.categories-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.section-area{margin-top:1.5rem}.section-header h2{font-size:1rem}.section-header a{font-size:0.75rem}.category-card .card-inner{border-radius:1rem}.category-card .card-title{font-size:0.75rem}}@media(max-width:1023px){.dashboard-cards-grid{grid-template-columns:repeat(4,1fr)!important;gap:0.3rem!important}.dash-card{padding:0.4rem;gap:0.2rem;flex-direction:column;text-align:center;border-radius:0.5rem}.dash-card .dash-icon{width:20px;height:20px;font-size:0.55rem;border-radius:4px}.dash-card .dash-info h2{font-size:0.65rem}.dash-card .dash-info p{font-size:0.5rem}}
@media(max-width:767px){.uc-card-image{width:130px;height:130px;margin-bottom:-22px}.uc-btn{font-size:.75rem;padding:.4rem}}

/* === DASHBOARD === */
.dashboard-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;margin-bottom:2rem}
.dash-card{background:#1a252f;border-radius:1rem;padding:1.5rem;display:flex;align-items:center;gap:1rem}
.dash-icon{width:48px;height:48px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.dash-info h4{font-size:1.25rem;font-weight:700}
.dash-info span{font-size:.78rem;color:#9ca3af}

/* === SECTION === */
.section-area{margin-top:2.5rem}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.section-header h2{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.section-header a{font-size:.85rem;color:#ff6b35;display:flex;align-items:center;gap:.3rem}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2rem}
.category-card{display:flex;flex-direction:column;align-items:center}
.category-card .card-inner{position:relative;width:100%;aspect-ratio:1/1;background:#1a252f;border-radius:1.5rem;overflow:hidden;border:1px solid rgba(255,255,255,.05);transition:transform .3s}
.category-card .card-inner:hover{transform:translateY(-5px)}
.category-card .card-inner img{width:100%;height:100%;object-fit:cover}
.category-card .card-title{font-weight:700;font-size:.85rem;margin-top:.5rem;text-align:center}
.about-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.about-text h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem}
.about-text p{color:#9ca3af;margin-bottom:1.5rem}
.counter-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;margin-top:2.5rem}
.counter-item{background:#1a252f;border-radius:1rem;padding:2rem;text-align:center}
.counter-item h2{font-size:2rem;font-weight:900;color:#ff6b35}
.counter-item h5{font-size:.9rem;color:#9ca3af;margin-top:.5rem}
.choose-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.choose-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:rgba(255,255,255,.03);border-radius:.75rem;margin-bottom:1rem}
.testimonial-card{background:#1a252f;border-radius:1rem;padding:1.5rem;margin:.5rem}
.faq-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.faq-item{background:rgba(255,255,255,.03);border-radius:.75rem;overflow:hidden;margin-bottom:.75rem}
.faq-question{width:100%;background:transparent;border:none;color:#fff;padding:1rem;font-family:inherit;font-size:.9rem;font-weight:600;text-align:right;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-answer{display:none;padding:0 1rem 1rem;color:#9ca3af;font-size:.85rem}
.faq-answer.show{display:block}
.blog-card{background:#1a252f;border-radius:1rem;overflow:hidden}
.blog-image{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-content{padding:1rem}
.blog-title{font-weight:700;margin-bottom:.5rem}
.page-header-custom{background:#1a252f;padding:2rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.page-header-custom h2{font-size:1.5rem;font-weight:700}

/* === SHOP === */
.shop-container{display:flex;gap:2rem;margin-top:1rem}
.shop-filter{width:260px;flex-shrink:0}
.shop-items{flex:1}
@media(max-width:1023px){.shop-container{flex-direction:column}.shop-filter{width:100%}}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem}
.products-grid .product-item{display:flex;flex-direction:column;align-items:center}
.products-grid .product-item .thumb{width:100%;aspect-ratio:1/1;background:#1a252f;border-radius:1.5rem;overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.products-grid .product-item .thumb img{width:100%;height:100%;object-fit:cover}
.products-grid .product-item .name{margin-top:.5rem;font-weight:700;font-size:.85rem;text-align:center}
.pagination-custom{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2rem}
.pagination-custom a,.pagination-custom span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:.5rem;background:rgba(255,255,255,.05);color:#d1d5db;font-size:.85rem}
.pagination-custom a:hover{background:#ff6b35;color:#fff}
.pagination-custom .active{background:#ff6b35;color:#fff;font-weight:700}

/* === SHARED DASHBOARD (sh-*) === */
.sh-page-title{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem}
.sh-content-card{background:#1a252f;border-radius:1rem;padding:1.5rem;margin-bottom:1.25rem}
.sh-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.25rem;border-radius:.5rem;font-weight:600;font-size:.85rem;cursor:pointer;border:none}
.sh-btn-primary{background:#ff6b35;color:#fff}
.sh-btn-danger{background:#ef4444;color:#fff}
.sh-badge{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:600}
.sh-badge-success{background:rgba(16,185,129,.15);color:#10b981}
.sh-badge-danger{background:rgba(239,68,68,.15);color:#ef4444}
.sh-badge-warning{background:rgba(245,158,11,.15);color:#f59e0b}
.sh-table{width:100%;border-collapse:collapse}
.sh-table th{text-align:right;padding:.75rem .5rem;font-size:.78rem;color:#9ca3af;border-bottom:1px solid rgba(255,255,255,.08)}
.sh-table td{padding:.75rem .5rem;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.04)}
.sh-form-group{margin-bottom:1rem}
.sh-form-group label{font-size:.85rem;font-weight:600;margin-bottom:.4rem;display:block;color:#d1d5db}
.sh-form-group input,.sh-form-group textarea{width:100%;padding:.5rem .75rem;font-size:.85rem;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:.5rem}
.sh-info-row{display:flex;align-items:center;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.sh-info-label{width:140px;flex-shrink:0;color:#9ca3af;font-size:.85rem}
.sh-info-value{flex:1;font-weight:600;font-size:.85rem}
.sh-empty-state{text-align:center;padding:3rem 1rem;color:#6b7280}
.sh-empty-state i{font-size:2.5rem;margin-bottom:1rem;display:block;opacity:.5}
.font-bold{font-weight:700}
.form-select-custom{background:#1a252f;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.5rem 2rem .5rem .75rem;color:#fff;font-size:.8rem;outline:none;cursor:pointer;appearance:auto}
.form-select-custom option{background:#243447;color:#fff;padding:.5rem}
.results-count{color:#9ca3af!important;font-size:.85rem}
.sort-select{display:flex;align-items:center;gap:.5rem}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.text-center{text-align:center}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-300{color:#d1d5db}
.sh-gateway-card{background:#1a252f;border:1px solid rgba(255,255,255,.05);border-radius:1rem;padding:1rem;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;text-align:center}
.sh-gateway-card:hover{border-color:#ff6b35;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.max-h-\[50px\]{max-height:50px}
.min-w-0{min-width:0}
.mx-auto{margin-left:auto;margin-right:auto}
.space-y-2>*+*{margin-top:.5rem}
.space-y-2{margin-bottom:.5rem}

/* === BOOTSTRAP COMPAT (minimal) === */
.hidden{display:none!important}
.d-flex{display:flex!important}
.d-none{display:none!important}
.d-block{display:block!important}
.flex-wrap{flex-wrap:wrap!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-start{justify-content:flex-start!important}
.justify-content-end{justify-content:flex-end!important}
.align-items-center{align-items:center!important}
.text-center{text-align:center!important}
.text-danger{color:#ef4444!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mb-5{margin-bottom:3rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.m-1{margin:.25rem!important}
.w-100{width:100%!important}
.pe-lg-5{padding-right:3rem!important}
.img-fluid{max-width:100%;height:auto}
.row{display:flex;flex-wrap:wrap}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.col-lg-4{flex:0 0 33.333%;max-width:33.333%;padding:0 .75rem}
.col-md-6{flex:0 0 50%;max-width:50%;padding:0 .75rem}
.col-lg-8{flex:0 0 66.666%;max-width:66.666%;padding:0 .75rem}
.btn{display:inline-block;font-weight:600;text-align:center;padding:.375rem .75rem;border-radius:.5rem;cursor:pointer;background:rgba(255,255,255,.05);color:#fff}
.border-b{border-bottom:1px solid rgba(255,255,255,.1)}
.border-t{border-top:1px solid rgba(255,255,255,.1)}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.w-12{width:3rem}
.h-12{height:3rem}
.w-20{width:5rem}
.h-20{height:5rem}
.text-3xl{font-size:1.875rem}
.form-control{width:100%;padding:.5rem .75rem;font-size:.85rem;color:#fff;background:rgba(255,255,255,.05);border:1px solid #4b5563;border-radius:9999px;outline:none}
.badge{display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:600}
.bg-success{background:rgba(16,185,129,.15);color:#10b981}
.bg-warning{background:rgba(245,158,11,.15);color:#f59e0b}
.bg-danger{background:rgba(239,68,68,.15);color:#ef4444}
.bg-secondary{background:rgba(107,114,128,.15);color:#9ca3af}