/* ============================================================
   RoraNetwork - Main Stylesheet (Complete & Clean)
   ============================================================ */

:root {
    --primary: #4361EE;
    --primary-light: #5E7BF2;
    --primary-dark: #3651DE;
    --primary-glow: rgba(67,97,238,0.15);
    --secondary: #7B2FF7;
    --accent-green: #0DAB76;
    --accent-green-hover: #0B9466;
    --accent-green-light: rgba(13,171,118,0.08);
    --accent-yellow: #FFB800;
    --dark-bg: #0B1120;
    --card-bg: #fff;
    --card-border: #EDF0F7;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --card-shadow-hover: 0 8px 30px rgba(67,97,238,0.12), 0 2px 8px rgba(0,0,0,0.04);
    --text-heading: #111827;
    --text-body: #374151;
    --text-muted: #6B7280;
    --text-light: #9CA3AF;
    --body-bg: #F8FAFC;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--body-bg); color:var(--text-body); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans',sans-serif; }
a { text-decoration:none; transition:var(--transition-base); }
.fw-600 { font-weight:600; }

/* ============ TOP BAR ============ */
.top-bar { background:var(--dark-bg); padding:10px 0; font-size:13px; color:rgba(255,255,255,0.65); border-bottom:1px solid rgba(255,255,255,0.06); }
.top-bar a { color:rgba(255,255,255,0.65); font-size:13px; }
.top-bar a:hover { color:#fff; }
.top-bar .top-contacts { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.top-bar .contact-item { display:flex; align-items:center; gap:7px; }
.top-bar .contact-item i { color:var(--primary-light); font-size:12px; }
.top-bar .top-actions { display:flex; align-items:center; justify-content:flex-end; }
.top-bar .top-actions a { display:flex; align-items:center; gap:6px; }
.top-bar .top-actions a i { color:var(--accent-yellow); }

/* ============ NAVBAR ============ */
.main-navbar { background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.05),0 4px 20px rgba(0,0,0,0.03); position:sticky; top:0; z-index:1000; }
.main-navbar .navbar { padding:14px 0; }
.main-navbar .navbar-brand { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:22px; color:var(--text-heading); display:flex; align-items:center; gap:10px; }
.brand-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--primary),var(--secondary)); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; box-shadow:0 4px 12px rgba(67,97,238,0.3); position:relative; }
.brand-icon::after { content:''; position:absolute; inset:-2px; border-radius:14px; background:linear-gradient(135deg,var(--primary),var(--secondary)); z-index:-1; opacity:0.2; }
.brand-text-accent { color:var(--primary); }
.main-navbar .nav-link { color:var(--text-body)!important; font-weight:500; font-size:15px; padding:8px 18px!important; position:relative; }
.main-navbar .nav-link::after { content:''; position:absolute; bottom:2px; left:18px; right:18px; height:2px; background:var(--primary); border-radius:2px; transform:scaleX(0); transition:transform var(--transition-base); }
.main-navbar .nav-link:hover::after, .main-navbar .nav-link.active::after { transform:scaleX(1); }
.main-navbar .nav-link:hover, .main-navbar .nav-link.active { color:var(--primary)!important; }
.main-navbar .dropdown-toggle::after { border:none; content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; margin-left:5px; vertical-align:middle; }
.main-navbar .dropdown-menu { border:1px solid var(--card-border); border-radius:var(--border-radius-md); box-shadow:0 12px 40px rgba(0,0,0,0.08); padding:8px; margin-top:8px; min-width:200px; }
.main-navbar .dropdown-item { padding:10px 14px; border-radius:var(--border-radius-sm); font-size:14px; font-weight:500; color:var(--text-body); }
.main-navbar .dropdown-item:hover { background:var(--primary-glow); color:var(--primary); }
.btn-signup { border:2px solid var(--accent-yellow); color:var(--accent-yellow); font-weight:600; padding:8px 20px; border-radius:var(--border-radius-sm); font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.btn-signup:hover { background:var(--accent-yellow); color:#fff; box-shadow:0 4px 12px rgba(255,184,0,0.3); }
.btn-login { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-weight:600; padding:8px 20px; border-radius:var(--border-radius-sm); font-size:14px; border:none; display:inline-flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(67,97,238,0.25); }
.btn-login:hover { background:linear-gradient(135deg,var(--primary-dark),#2a40c4); color:#fff; box-shadow:0 4px 16px rgba(67,97,238,0.35); transform:translateY(-1px); }
.btn-cart-icon { color:var(--text-body); font-size:18px; padding:8px 12px; position:relative; display:inline-flex; align-items:center; }
.btn-cart-icon:hover { color:var(--primary); }
.cart-badge { position:absolute; top:0; right:2px; background:var(--accent-green); color:#fff; font-size:10px; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ============ BANNER ============ */
.page-banner { background:linear-gradient(135deg,#4361EE 0%,#6C3CE0 40%,#7B2FF7 100%); padding:55px 0 65px; text-align:center; position:relative; overflow:hidden; }
.page-banner::before { content:''; position:absolute; top:-100px; right:-50px; width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%); border-radius:50%; }
.page-banner::after { content:''; position:absolute; bottom:-120px; left:-30px; width:300px; height:300px; background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%); border-radius:50%; }
.banner-decoration { position:absolute; top:20px; right:8%; width:200px; height:200px; border:2px solid rgba(255,255,255,0.08); border-radius:50%; animation:float 6s ease-in-out infinite; }
.banner-decoration-2 { position:absolute; bottom:10px; left:5%; width:120px; height:120px; border:2px solid rgba(255,255,255,0.05); border-radius:50%; animation:float 8s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-15px) rotate(5deg)} }
.banner-wave { position:absolute; bottom:0; left:0; width:100%; height:40px; overflow:hidden; }
.banner-wave svg { position:absolute; bottom:0; width:100%; height:100%; }
.page-banner h1 { color:#fff; font-weight:800; font-size:38px; margin-bottom:12px; position:relative; z-index:2; letter-spacing:-0.5px; }
.page-banner .breadcrumb { justify-content:center; position:relative; z-index:2; margin-bottom:0; }
.page-banner .breadcrumb-item a { color:rgba(255,255,255,0.8); font-weight:500; }
.page-banner .breadcrumb-item a:hover { color:#fff; }
.page-banner .breadcrumb-item.active { color:#fff; font-weight:500; }
.page-banner .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,0.5); content:"›"; font-size:16px; }

/* ============ PRODUCT CARDS ============ */
.products-section { padding:50px 0 20px; }
.product-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--border-radius-md); overflow:hidden; transition:var(--transition-smooth); margin-bottom:30px; height:100%; display:flex; flex-direction:column; box-shadow:var(--card-shadow); animation:fadeInUp 0.5s ease forwards; opacity:0; }
.product-card:hover { box-shadow:var(--card-shadow-hover); transform:translateY(-6px); border-color:rgba(67,97,238,0.2); }
.product-card .card-img-wrapper { position:relative; height:200px; overflow:hidden; background:linear-gradient(135deg,#EEF2FF,#E8ECFC); }
.product-card .card-img-wrapper img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.product-card:hover .card-img-wrapper img { transform:scale(1.08); }
.product-card .card-img-wrapper::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.04) 100%); }
.product-card .card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.product-card .product-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-heading); margin-bottom:10px; line-height:1.45; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card .product-title a { color:var(--text-heading); }
.product-card .product-title a:hover { color:var(--primary); }
.product-card .star-rating { margin-bottom:10px; display:flex; gap:2px; }
.product-card .star-rating i { color:var(--accent-yellow); font-size:12px; }
.product-card .star-rating i.empty { color:#E5E7EB; }
.product-card .product-price { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:var(--text-heading); margin-bottom:16px; }
.product-card .card-actions { margin-top:auto; display:flex; gap:8px; }
.btn-buy { background:var(--accent-green); color:#fff; border:none; padding:9px 18px; border-radius:var(--border-radius-sm); font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:7px; cursor:pointer; box-shadow:0 2px 6px rgba(13,171,118,0.2); }
.btn-buy:hover { background:var(--accent-green-hover); color:#fff; transform:translateY(-1px); }
.btn-add-cart { background:transparent; color:var(--text-body); border:1.5px solid var(--card-border); padding:9px 14px; border-radius:var(--border-radius-sm); font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-add-cart:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-glow); }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.product-category { display:inline-block; font-size:11px; font-weight:700; color:var(--primary); background:var(--primary-glow); padding:3px 10px; border-radius:6px; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
.product-category:hover { background:var(--primary); color:#fff; }
.price-original { text-decoration:line-through; color:var(--text-light); font-size:14px; font-weight:500; margin-left:8px; }
.rating-count { font-size:12px; color:var(--text-muted); margin-left:4px; }
.product-badge { position:absolute; top:12px; left:12px; z-index:3; padding:4px 12px; border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.badge-sale { background:#EF4444; color:#fff; }
.badge-featured { background:var(--accent-yellow); color:#111; }

.empty-state { text-align:center; padding:60px 20px; background:#fff; border-radius:16px; border:1px solid var(--card-border); }
.empty-icon { width:80px; height:80px; margin:0 auto 20px; background:var(--primary-glow); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--primary); }
.empty-state h3 { font-size:20px; font-weight:700; color:var(--text-heading); margin-bottom:8px; }
.empty-state p { color:var(--text-muted); font-size:14px; margin-bottom:24px; }

/* ============ PRODUCT LISTING SIDEBAR ============ */
.filter-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.filter-group { padding:20px 22px; border-bottom:1px solid var(--card-border); }
.filter-group:last-child { border-bottom:none; }
.filter-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-heading); margin-bottom:14px; display:flex; align-items:center; }
.filter-title i { color:var(--primary); font-size:13px; }
.search-input-wrap { position:relative; }
.search-input-wrap .form-control { border:1.5px solid var(--card-border); border-radius:10px; padding:10px 40px 10px 14px; font-size:13px; font-family:'DM Sans',sans-serif; }
.search-input-wrap .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.search-input-wrap button { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:var(--primary); color:#fff; border:none; width:32px; height:32px; border-radius:8px; font-size:12px; cursor:pointer; }
.search-input-wrap button:hover { background:var(--primary-dark); }
.category-list { list-style:none; padding:0; margin:0; }
.category-list li { margin-bottom:2px; }
.category-list li a { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-radius:8px; font-size:13px; color:var(--text-body); font-weight:500; }
.category-list li a:hover { background:var(--primary-glow); color:var(--primary); }
.category-list li a.active { background:var(--primary); color:#fff; font-weight:600; }
.category-list li a.active .count { background:rgba(255,255,255,0.25); color:#fff; }
.category-list .count { background:var(--body-bg); color:var(--text-muted); font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }

/* ============ PRODUCTS TOOLBAR ============ */
.products-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--card-border); }
.results-count { color:var(--text-muted); font-size:14px; margin:0; font-weight:500; }
.toolbar-right { display:flex; align-items:center; gap:10px; }
.toolbar-right label { font-size:13px; color:var(--text-muted); font-weight:500; white-space:nowrap; }
.toolbar-right .form-select { border:1.5px solid var(--card-border); border-radius:8px; font-size:13px; padding:6px 32px 6px 12px; font-family:'DM Sans',sans-serif; width:auto; min-width:160px; }
.toolbar-right .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.search-notice { display:flex; justify-content:space-between; align-items:center; background:var(--primary-glow); padding:10px 16px; border-radius:10px; margin-bottom:20px; font-size:13px; color:var(--text-body); }
.search-notice a { color:var(--primary); font-weight:600; }

/* ============ PAGINATION ============ */
.pagination-section { padding:10px 0 55px; text-align:center; }
.pagination-section .results-info { color:var(--text-muted); font-size:14px; margin-bottom:15px; font-weight:500; }
.pagination-section .pagination { justify-content:center; gap:6px; }
.pagination-section .page-link { border:1px solid var(--card-border); color:var(--text-body); font-weight:600; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px!important; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; }
.pagination-section .page-item.active .page-link { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border-color:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(67,97,238,0.3); }
.pagination-section .page-link:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ============ NEWSLETTER ============ */
.newsletter-section { background:linear-gradient(135deg,#4361EE 0%,#6C3CE0 40%,#7B2FF7 100%); padding:75px 0; text-align:center; position:relative; overflow:hidden; }
.newsletter-section::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 60%); border-radius:50%; }
.newsletter-section h2 { color:#fff; font-weight:800; font-size:32px; margin-bottom:12px; position:relative; z-index:2; }
.newsletter-section p { color:rgba(255,255,255,0.85); margin-bottom:32px; font-size:16px; position:relative; z-index:2; }
.newsletter-form { max-width:540px; margin:0 auto; position:relative; z-index:2; }
.newsletter-form .input-group { background:#fff; border-radius:60px; overflow:hidden; padding:6px; box-shadow:0 8px 30px rgba(0,0,0,0.12); }
.newsletter-form .form-control { border:none; padding:14px 24px; font-size:14px; font-family:'DM Sans',sans-serif; background:transparent; }
.newsletter-form .form-control:focus { box-shadow:none; }
.newsletter-form .btn-subscribe { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; padding:14px 32px; border-radius:60px; font-weight:700; font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; white-space:nowrap; }
.newsletter-form .btn-subscribe:hover { background:linear-gradient(135deg,var(--primary-dark),#2a40c4); }

/* ============ FOOTER ============ */
.site-footer { background:var(--dark-bg); padding:65px 0 0; color:rgba(255,255,255,0.6); }
.site-footer h5 { font-family:'Plus Jakarta Sans',sans-serif; color:#fff; font-weight:700; font-size:18px; margin-bottom:24px; }
.footer-about .brand-name { color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:20px; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-about .brand-name .brand-icon { width:36px; height:36px; font-size:15px; }
.footer-about p { font-size:14px; line-height:1.75; margin-bottom:22px; color:rgba(255,255,255,0.55); }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:40px; height:40px; border:1px solid rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); font-size:15px; }
.footer-socials a:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px); }
.footer-links ul { list-style:none; padding:0; margin:0; }
.footer-links ul li { margin-bottom:12px; }
.footer-links ul li a { color:rgba(255,255,255,0.55); font-size:14px; display:inline-flex; align-items:center; gap:10px; }
.footer-links ul li a::before { content:''; width:6px; height:6px; background:var(--primary); border-radius:50%; flex-shrink:0; }
.footer-links ul li a:hover { color:#fff; padding-left:5px; }
.footer-links ul li a:hover::before { background:var(--accent-yellow); }
.footer-contact .contact-item { margin-bottom:18px; }
.footer-contact .contact-item strong { color:#fff; font-size:14px; font-weight:600; display:block; margin-bottom:4px; }
.footer-contact .contact-item span, .footer-contact .contact-item a { color:rgba(255,255,255,0.55); font-size:14px; }
.footer-contact .contact-item a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding:22px 0; margin-top:45px; text-align:center; font-size:14px; color:rgba(255,255,255,0.45); }
.footer-bottom a { color:var(--primary-light); font-weight:700; }
.footer-bottom a:hover { color:#fff; }
.back-to-top { position:fixed; bottom:30px; right:30px; width:48px; height:48px; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border:none; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; opacity:0; visibility:hidden; z-index:999; box-shadow:0 6px 20px rgba(67,97,238,0.35); transition:var(--transition-base); }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { transform:translateY(-3px); }

/* ============ AUTH PAGES ============ */
.auth-section { min-height:50vh; }
.auth-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:0 4px 24px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02); padding:40px 36px; transition:var(--transition-smooth); }
.auth-card-header { text-align:center; margin-bottom:28px; }
.auth-icon { width:60px; height:60px; background:linear-gradient(135deg,var(--primary-glow),rgba(123,47,247,0.1)); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:24px; color:var(--primary); margin-bottom:16px; }
.auth-card-header h2 { font-size:24px; font-weight:800; color:var(--text-heading); margin-bottom:6px; letter-spacing:-0.3px; }
.auth-card-header p { color:var(--text-muted); font-size:14px; margin-bottom:0; }
.auth-card .form-floating>.form-control { border:1.5px solid var(--card-border); border-radius:10px; height:56px; font-family:'DM Sans',sans-serif; font-size:14px; transition:border-color var(--transition-base),box-shadow var(--transition-base); }
.auth-card .form-floating>.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.auth-card .form-floating>label { font-size:14px; color:var(--text-muted); font-family:'DM Sans',sans-serif; }
.password-toggle { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-light); cursor:pointer; z-index:5; padding:4px 6px; font-size:14px; }
.password-toggle:hover { color:var(--primary); }
.password-strength { margin-top:-4px; }
.strength-bar { height:4px; background:#E5E7EB; border-radius:4px; overflow:hidden; }
.strength-fill { height:100%; border-radius:4px; transition:width 0.3s,background 0.3s; width:0; }
.strength-text { font-size:12px; font-weight:600; margin-top:4px; display:block; }
.btn-auth-submit { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border:none; padding:14px 28px; border-radius:10px; font-size:15px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(67,97,238,0.25); transition:var(--transition-base); }
.btn-auth-submit:hover { background:linear-gradient(135deg,var(--primary-dark),#2a40c4); box-shadow:0 6px 20px rgba(67,97,238,0.35); transform:translateY(-1px); }
.auth-link { color:var(--primary); font-size:13px; font-weight:600; }
.auth-link:hover { color:var(--primary-dark); text-decoration:underline; }
.auth-footer { text-align:center; margin-top:24px; padding-top:20px; border-top:1px solid var(--card-border); }
.auth-footer p { color:var(--text-muted); font-size:14px; margin-bottom:0; }
.auth-footer a { color:var(--primary); font-weight:700; }
.auth-footer a:hover { text-decoration:underline; }
.auth-card .form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.auth-card .form-check-label { font-size:13px; color:var(--text-muted); }
.auth-card .form-check-label a { color:var(--primary); font-weight:600; }

/* ============ PROFILE PAGE ============ */
.profile-sidebar { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.profile-avatar { text-align:center; padding:32px 24px 20px; border-bottom:1px solid var(--card-border); }
.avatar-circle { width:80px; height:80px; background:linear-gradient(135deg,var(--primary-glow),rgba(123,47,247,0.12)); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:32px; color:var(--primary); margin-bottom:14px; }
.profile-avatar h3 { font-size:18px; font-weight:700; color:var(--text-heading); margin-bottom:4px; }
.profile-avatar p { font-size:13px; margin-bottom:10px; }
.badge-role { display:inline-block; padding:4px 14px; border-radius:20px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }
.badge-user { background:var(--primary-glow); color:var(--primary); }
.badge-admin { background:rgba(13,171,118,0.1); color:var(--accent-green); }
.profile-stats { display:flex; border-bottom:1px solid var(--card-border); }
.profile-stats .stat-item { flex:1; text-align:center; padding:18px 10px; border-right:1px solid var(--card-border); }
.profile-stats .stat-item:last-child { border-right:none; }
.stat-number { display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; color:var(--text-heading); }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500; }
.profile-nav { padding:12px; }
.profile-nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:10px; color:var(--text-body); font-size:14px; font-weight:500; transition:var(--transition-base); }
.profile-nav-item:hover { background:var(--primary-glow); color:var(--primary); }
.profile-nav-item.text-danger:hover { background:rgba(239,68,68,0.06); }
.profile-nav-item i { width:18px; text-align:center; font-size:14px; }
.profile-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.profile-card-header { padding:20px 28px; border-bottom:1px solid var(--card-border); background:#FAFBFE; }
.profile-card-header h4 { font-size:17px; font-weight:700; color:var(--text-heading); margin-bottom:0; }
.profile-card-body { padding:28px; }
.profile-card-body .form-control { border:1.5px solid var(--card-border); border-radius:10px; padding:12px 16px; font-size:14px; font-family:'DM Sans',sans-serif; }
.profile-card-body .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.profile-card-body .form-label { font-size:13px; color:var(--text-muted); margin-bottom:6px; }

/* ============ PRODUCT DETAIL — IMAGE SLIDER ============ */
.pd-slider-wrap { position:relative; }
.pd-main-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pd-main-img > img,
.pd-main-img > #pdMainImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: opacity 0.3s ease;
    background: #fff;
}
.pd-sale-badge { position:absolute; top:12px; left:12px; z-index:5; background:#EF4444; color:#fff; padding:4px 12px; border-radius:6px; font-size:12px; font-weight:700; }
.pd-featured-badge { position:absolute; top:12px; right:12px; z-index:5; background:var(--accent-yellow); color:#111; padding:4px 12px; border-radius:6px; font-size:11px; font-weight:700; }
.pd-arrow { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.9); border:1px solid var(--card-border); color:var(--text-heading); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.pd-arrow:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.pd-arrow-left { left:10px; }
.pd-arrow-right { right:10px; }
.pd-thumbs { display:flex; gap:10px; margin-top:12px; justify-content:center; }
.pd-thumb { width:80px; height:60px; border-radius:10px; overflow:hidden; border:2.5px solid transparent; cursor:pointer; transition:all 0.2s; background:#fff; }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }
.pd-thumb.active, .pd-thumb:hover { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }

/* ============ PRODUCT DETAIL — INFO PANEL ============ */
.pd-info { padding-left:10px; }
.pd-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pd-cat-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; background:var(--accent-green); color:#fff; }
.pd-cat-badge:hover { background:#0A8F63; color:#fff; }
.pd-title { font-size:24px; font-weight:800; color:var(--text-heading); line-height:1.3; margin:0 0 12px; letter-spacing:-0.3px; }
.pd-rating-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.pd-rating-row .star-rating i { font-size:13px; }
.pd-rating-text { font-size:13px; color:var(--text-muted); }
.pd-sales-text { font-size:13px; color:var(--text-muted); }
.pd-sales-text i { margin-right:3px; }
.pd-price-box { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; padding:14px 18px; background:linear-gradient(135deg,var(--primary-glow),rgba(13,171,118,0.05)); border-radius:12px; border:1px solid rgba(67,97,238,0.1); }
.pd-price { font-family:'Plus Jakarta Sans',sans-serif; font-size:30px; font-weight:800; color:var(--primary); }
.pd-price-old { font-size:18px; color:var(--text-muted); text-decoration:line-through; }
.save-badge { background:rgba(239,68,68,0.1); color:#EF4444; padding:4px 12px; border-radius:6px; font-size:12px; font-weight:700; }
.pd-short-desc { font-size:14px; line-height:1.7; color:var(--text-body); margin-bottom:20px; }
.pd-actions { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.pd-btn-buy { background:var(--accent-green); color:#fff; border:none; padding:12px 28px; border-radius:10px; font-size:14px; font-weight:700; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 3px 12px rgba(13,171,118,0.25); transition:all 0.2s; }
.pd-btn-buy:hover { background:#0A8F63; transform:translateY(-1px); }
.pd-btn-cart { background:#fff; color:var(--primary); border:2px solid var(--primary); padding:12px 24px; border-radius:10px; font-size:14px; font-weight:700; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:8px; cursor:pointer; transition:all 0.2s; }
.pd-btn-cart:hover { background:var(--primary-glow); }

/* ============ CONTACT BUTTONS ============ */
.pd-contact-btns { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.pd-contact-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:700; text-decoration:none; transition:all 0.2s; border:none; }
.pd-btn-whatsapp { background:#25D366; color:#fff; box-shadow:0 3px 10px rgba(37,211,102,0.25); }
.pd-btn-whatsapp:hover { background:#1DA851; color:#fff; transform:translateY(-1px); }
.pd-btn-whatsapp i { font-size:16px; }
.pd-btn-phone { background:#1B5E20; color:#fff; box-shadow:0 3px 10px rgba(27,94,32,0.2); }
.pd-btn-phone:hover { background:#145218; color:#fff; transform:translateY(-1px); }
.pd-btn-demo { background:var(--primary); color:#fff; box-shadow:0 3px 10px rgba(67,97,238,0.25); }
.pd-btn-demo:hover { background:var(--primary-dark); color:#fff; transform:translateY(-1px); }
.pd-meta-list { display:flex; flex-direction:column; gap:8px; padding:16px 18px; background:#F8FAFC; border-radius:12px; border:1px solid var(--card-border); }
.pd-meta { font-size:13px; color:var(--text-body); font-weight:500; display:flex; align-items:center; gap:10px; }
.pd-meta i { width:16px; text-align:center; font-size:12px; color:var(--primary); }

/* ============ YOUTUBE VIDEO ============ */
.pd-video-card { background:#fff; border-radius:14px; border:1px solid var(--card-border); box-shadow:0 2px 8px rgba(0,0,0,0.04); padding:24px; }
.pd-video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; background:#000; }
.pd-video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.pd-section-title { font-size:18px; font-weight:700; color:var(--text-heading); margin:0 0 18px; display:flex; align-items:center; gap:8px; padding-bottom:14px; border-bottom:2px solid var(--card-border); }
.pd-section-title i { font-size:16px; }

/* ============ DESCRIPTION CARD ============ */
.pd-desc-card { background:#fff; border-radius:14px; border:1px solid var(--card-border); box-shadow:0 2px 8px rgba(0,0,0,0.04); padding:24px 28px; }
.pd-desc-body h3, .pd-desc-body h4 { font-size:16px; font-weight:700; color:var(--text-heading); margin:22px 0 10px; }
.pd-desc-body p { font-size:14px; line-height:1.75; color:var(--text-body); margin-bottom:10px; }
.pd-desc-body ul { list-style:none; padding:0; }
.pd-desc-body ul li { padding:4px 0 4px 24px; font-size:14px; color:var(--text-body); position:relative; }
.pd-desc-body ul li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:0; top:6px; color:var(--accent-green); font-size:11px; }
.pd-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.pd-feature-item { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text-body); padding:6px 0; }
.pd-feature-item i { color:var(--accent-green); font-size:12px; margin-top:3px; flex-shrink:0; }
.pd-tags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:18px; margin-top:18px; border-top:1px solid var(--card-border); }
.pd-tags-label { font-size:13px; font-weight:700; color:var(--text-heading); }
.pd-tag { padding:4px 14px; border-radius:20px; font-size:12px; font-weight:600; background:var(--primary-glow); color:var(--primary); }
.pd-tag:hover { background:var(--primary); color:#fff; }

/* ============ PRODUCT TABS ============ */
.product-tabs .nav-tabs { border-bottom:2px solid var(--card-border); gap:4px; }
.product-tabs .nav-link { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:600; color:var(--text-muted); border:none; padding:12px 22px; border-radius:10px 10px 0 0; transition:var(--transition-base); }
.product-tabs .nav-link:hover { color:var(--primary); background:var(--primary-glow); }
.product-tabs .nav-link.active { color:var(--primary); border-bottom:2px solid var(--primary); margin-bottom:-2px; background:transparent; }
.tab-body { background:#fff; border:1px solid var(--card-border); border-top:none; border-radius:0 0 16px 16px; padding:28px; box-shadow:var(--card-shadow); }
.tab-body p { font-size:14px; line-height:1.7; color:var(--text-body); }
.section-heading { font-size:22px; font-weight:800; color:var(--text-heading); margin-bottom:24px; letter-spacing:-0.3px; }

/* ============ REVIEWS ============ */
.reviews-list { display:flex; flex-direction:column; gap:16px; }
.review-item { padding:18px; background:var(--body-bg); border-radius:12px; border:1px solid var(--card-border); }
.review-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary-glow),rgba(123,47,247,0.12)); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--primary); font-size:16px; flex-shrink:0; }
.review-header strong { font-size:14px; color:var(--text-heading); display:block; }
.review-header .star-rating i { font-size:11px; }
.review-date { margin-left:auto; font-size:12px; color:var(--text-light); white-space:nowrap; }
.review-text { font-size:13px; color:var(--text-body); line-height:1.6; margin:0; }
.review-form h4 { font-size:17px; font-weight:700; color:var(--text-heading); margin-bottom:16px; }
.star-picker { display:flex; gap:6px; }
.star-picker i { font-size:22px; color:#E5E7EB; cursor:pointer; transition:color 0.15s; }
.star-picker i.fas { color:var(--accent-yellow); }
.star-picker i:hover { color:var(--accent-yellow); }
.review-form .form-control { border:1.5px solid var(--card-border); border-radius:10px; font-size:14px; font-family:'DM Sans',sans-serif; }
.review-form .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.pd-reviews-list { display:flex; flex-direction:column; gap:12px; margin-bottom:10px; }
.pd-review { padding:16px; background:#F8FAFC; border-radius:10px; border:1px solid var(--card-border); }
.pd-review-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pd-review-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--primary-glow),rgba(123,47,247,0.12)); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--primary); font-size:15px; flex-shrink:0; }
.pd-review-date { margin-left:auto; font-size:12px; color:var(--text-muted); }

/* ============ OLD DETAIL CLASSES (Compat) ============ */
.product-detail-img { background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--card-shadow); position:relative; }
.product-detail-img img { width:100%; height:auto; display:block; }
.product-gallery { display:flex; gap:10px; margin-top:12px; }
.gallery-thumb { width:70px; height:70px; border-radius:10px; overflow:hidden; border:2px solid var(--card-border); cursor:pointer; transition:var(--transition-base); }
.gallery-thumb.active, .gallery-thumb:hover { border-color:var(--primary); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.product-detail-info { padding-left:10px; }
.detail-title { font-size:26px; font-weight:800; color:var(--text-heading); line-height:1.3; margin-bottom:14px; letter-spacing:-0.3px; }
.detail-rating { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.detail-rating .star-rating i { font-size:14px; }
.rating-text { font-size:13px; color:var(--text-muted); font-weight:500; }
.sales-text { font-size:13px; color:var(--accent-green); font-weight:600; }
.detail-price { margin-bottom:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.current-price { font-family:'Plus Jakarta Sans',sans-serif; font-size:32px; font-weight:800; color:var(--text-heading); letter-spacing:-0.5px; }
.original-price { font-size:18px; color:var(--text-light); text-decoration:line-through; font-weight:500; }
.detail-description { margin-bottom:20px; }
.detail-description p { color:var(--text-body); font-size:15px; line-height:1.7; }
.detail-features { margin-bottom:24px; }
.detail-features h4 { font-size:15px; font-weight:700; margin-bottom:12px; color:var(--text-heading); }
.detail-features ul { list-style:none; padding:0; margin:0; }
.detail-features li { padding:6px 0; font-size:14px; color:var(--text-body); display:flex; align-items:center; gap:10px; }
.detail-features li i { color:var(--accent-green); font-size:13px; }
.detail-actions { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.btn-buy-lg { padding:14px 32px; font-size:15px; border-radius:12px; }
.btn-demo { background:transparent; color:var(--primary); border:2px solid var(--primary); padding:14px 28px; border-radius:12px; font-size:15px; font-weight:600; font-family:'DM Sans',sans-serif; display:inline-flex; align-items:center; gap:8px; }
.btn-demo:hover { background:var(--primary-glow); color:var(--primary-dark); }
.detail-meta { display:flex; flex-direction:column; gap:8px; }
.meta-item { font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.meta-item i { color:var(--accent-green); font-size:12px; }

/* ============ CART PAGE ============ */
.cart-section { min-height:50vh; }
.cart-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.cart-card-header { padding:18px 24px; background:#FAFBFE; border-bottom:1px solid var(--card-border); }
.cart-card-header h4 { font-size:16px; font-weight:700; color:var(--text-heading); margin:0; }
.cart-card-footer { padding:16px 24px; border-top:1px solid var(--card-border); background:#FAFBFE; }
.cart-table-wrap { overflow-x:auto; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table th { padding:12px 20px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--card-border); text-align:left; }
.cart-table td { padding:16px 20px; border-bottom:1px solid var(--card-border); vertical-align:middle; }
.cart-table tr:last-child td { border-bottom:none; }
.cart-product { display:flex; align-items:center; gap:14px; }
.cart-product img { width:70px; height:50px; object-fit:cover; border-radius:8px; flex-shrink:0; border:1px solid var(--card-border); }
.cart-product-title { font-size:14px; font-weight:600; color:var(--text-heading); display:block; line-height:1.4; }
.cart-product-title:hover { color:var(--primary); }
.badge-unavailable { display:inline-block; background:rgba(239,68,68,0.1); color:#EF4444; font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; margin-top:4px; }
.cart-price { font-size:14px; font-weight:600; color:var(--text-heading); white-space:nowrap; }
.cart-line-total { font-size:15px; font-weight:700; color:var(--text-heading); white-space:nowrap; }
.qty-control { display:inline-flex; align-items:center; gap:0; border:1.5px solid var(--card-border); border-radius:8px; overflow:hidden; }
.qty-btn { width:34px; height:34px; border:none; background:#FAFBFE; font-size:16px; font-weight:700; color:var(--text-body); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition-base); }
.qty-btn:hover { background:var(--primary-glow); color:var(--primary); }
.qty-value { width:36px; text-align:center; font-size:14px; font-weight:700; color:var(--text-heading); background:#fff; }
.cart-remove-btn { background:none; border:none; color:var(--text-light); cursor:pointer; font-size:14px; padding:6px; border-radius:6px; transition:var(--transition-base); }
.cart-remove-btn:hover { color:#EF4444; background:rgba(239,68,68,0.06); }
.cart-mobile-item { background:#fff; border:1px solid var(--card-border); border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:var(--card-shadow); }
.cart-mobile-top { display:flex; align-items:flex-start; gap:12px; }
.cart-mobile-top img { width:60px; height:45px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.cart-mobile-info { flex:1; }
.cart-mobile-info .cart-price { display:block; margin-top:4px; }
.cart-mobile-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--card-border); }
.btn-continue-shopping { color:var(--primary); font-size:13px; font-weight:600; display:inline-flex; align-items:center; }
.btn-continue-shopping:hover { color:var(--primary-dark); }

/* ============ ORDER SUMMARY ============ */
.summary-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.sticky-summary { position:sticky; top:90px; }
.summary-header { padding:18px 24px; background:#FAFBFE; border-bottom:1px solid var(--card-border); }
.summary-header h4 { font-size:16px; font-weight:700; color:var(--text-heading); margin:0; }
.summary-body { padding:20px 24px; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:14px; }
.summary-value { font-weight:600; color:var(--text-heading); }
.summary-divider { height:1px; background:var(--card-border); margin:12px 0; }
.summary-total { padding:8px 0; }
.summary-total span:first-child { font-size:16px; font-weight:700; color:var(--text-heading); }
.summary-total-value { font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:800; color:var(--primary); }
.summary-footer { padding:0 24px 24px; }
.btn-checkout { display:flex; align-items:center; justify-content:center; width:100%; background:linear-gradient(135deg,var(--accent-green),var(--accent-green-hover)); color:#fff; border:none; padding:14px 24px; border-radius:12px; font-size:15px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(13,171,118,0.3); transition:var(--transition-base); text-decoration:none; }
.btn-checkout:hover { background:linear-gradient(135deg,var(--accent-green-hover),#0A8558); color:#fff; transform:translateY(-1px); }
.summary-secure { text-align:center; margin-top:12px; font-size:12px; color:var(--text-light); display:flex; align-items:center; justify-content:center; gap:6px; }
.summary-secure i { color:var(--accent-green); }
.coupon-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); padding:20px 24px; }
.coupon-card h5 { font-size:14px; font-weight:700; color:var(--text-heading); margin-bottom:12px; }
.coupon-input { display:flex; gap:8px; }
.coupon-input .form-control { border:1.5px solid var(--card-border); border-radius:8px; font-size:13px; padding:10px 14px; }
.coupon-input .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.btn-apply-coupon { background:var(--primary); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-apply-coupon:hover { background:var(--primary-dark); }
.coupon-msg { font-size:12px; margin-top:8px; }

/* ============ CHECKOUT PAGE ============ */
.checkout-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.checkout-card-header { padding:18px 24px; background:#FAFBFE; border-bottom:1px solid var(--card-border); }
.checkout-card-header h4 { font-size:16px; font-weight:700; color:var(--text-heading); margin:0; }
.checkout-card-body { padding:24px; }
.checkout-card-body .form-control { border:1.5px solid var(--card-border); border-radius:10px; font-size:14px; font-family:'DM Sans',sans-serif; padding:10px 14px; }
.checkout-card-body .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.checkout-card-body .form-label { font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.checkout-items { display:flex; flex-direction:column; gap:14px; }
.checkout-item { display:flex; align-items:center; gap:12px; }
.checkout-item img { width:50px; height:38px; object-fit:cover; border-radius:6px; flex-shrink:0; border:1px solid var(--card-border); }
.checkout-item-info { flex:1; min-width:0; }
.checkout-item-title { font-size:13px; font-weight:600; color:var(--text-heading); display:block; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkout-item-qty { font-size:12px; color:var(--text-muted); }
.checkout-item-price { font-size:14px; font-weight:700; color:var(--text-heading); white-space:nowrap; }
.payment-methods { display:flex; flex-direction:column; gap:10px; }
.payment-option { cursor:pointer; display:block; }
.payment-option input[type="radio"] { display:none; }
.payment-option-content { display:flex; align-items:center; gap:14px; padding:16px 18px; border:2px solid var(--card-border); border-radius:12px; transition:var(--transition-base); }
.payment-option input:checked + .payment-option-content { border-color:var(--primary); background:var(--primary-glow); }
.payment-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.payment-option-content strong { font-size:14px; color:var(--text-heading); display:block; }
.payment-option-content span { font-size:12px; color:var(--text-muted); display:block; margin-top:2px; }

/* ============ ORDER SUCCESS ============ */
.success-card { background:#fff; border-radius:20px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); padding:48px 40px; }
.success-icon { width:80px; height:80px; margin:0 auto 24px; background:linear-gradient(135deg,var(--accent-green),#059669); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:36px; color:#fff; box-shadow:0 8px 30px rgba(13,171,118,0.3); animation:successPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes successPop { 0%{transform:scale(0)} 100%{transform:scale(1)} }
.success-card h2 { font-size:26px; font-weight:800; color:var(--text-heading); margin-bottom:8px; }
.success-subtitle { color:var(--text-muted); font-size:15px; margin-bottom:28px; }
.order-info-box { background:var(--body-bg); border:1px solid var(--card-border); border-radius:14px; padding:20px 24px; margin-bottom:24px; text-align:left; }
.order-info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; color:var(--text-body); }
.order-info-row strong { color:var(--text-heading); }
.bank-details-box { background:#FFF7ED; border:1px solid #FED7AA; border-radius:14px; padding:20px 24px; margin-bottom:20px; text-align:left; }
.bank-details-box h4 { font-size:15px; font-weight:700; color:#92400E; margin-bottom:10px; }
.bank-details-box p { font-size:13px; color:#78350F; margin-bottom:12px; }
.bank-info { display:flex; flex-direction:column; gap:6px; }
.bank-row { font-size:13px; color:#78350F; display:flex; gap:8px; }
.bank-row span { min-width:110px; }
.bank-note { font-size:12px; color:#92400E; margin-top:12px; margin-bottom:0; padding-top:10px; border-top:1px solid #FED7AA; }
.success-note { margin-bottom:20px; }
.success-note p { font-size:13px; color:var(--text-muted); margin:0; }
.success-actions { display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ============ STATUS BADGES ============ */
.status-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; }
.status-pending { background:rgba(245,158,11,0.1); color:#D97706; }
.status-processing { background:rgba(67,97,238,0.1); color:var(--primary); }
.status-completed { background:rgba(13,171,118,0.1); color:var(--accent-green); }
.status-cancelled { background:rgba(239,68,68,0.1); color:#EF4444; }
.status-refunded { background:rgba(107,114,128,0.1); color:var(--text-muted); }
.status-unpaid { background:rgba(239,68,68,0.1); color:#EF4444; }
.status-paid { background:rgba(13,171,118,0.1); color:var(--accent-green); }
.status-failed { background:rgba(239,68,68,0.1); color:#EF4444; }

/* ============ ORDERS PAGE ============ */
.orders-card { background:#fff; border-radius:16px; border:1px solid var(--card-border); box-shadow:var(--card-shadow); overflow:hidden; }
.orders-table { width:100%; border-collapse:collapse; }
.orders-table th { padding:14px 20px; font-size:12px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--card-border); background:#FAFBFE; text-align:left; }
.orders-table td { padding:14px 20px; border-bottom:1px solid var(--card-border); font-size:14px; vertical-align:middle; }
.orders-table tr:last-child td { border-bottom:none; }
.order-number-text { color:var(--primary); font-size:13px; }
.btn-view-order { background:var(--primary-glow); color:var(--primary); padding:6px 16px; border-radius:8px; font-size:12px; font-weight:700; display:inline-block; }
.btn-view-order:hover { background:var(--primary); color:#fff; }
.order-mobile-card { background:#fff; border:1px solid var(--card-border); border-radius:14px; padding:18px; margin-bottom:12px; box-shadow:var(--card-shadow); }
.order-mobile-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--card-border); }
.order-mobile-header strong { font-size:14px; color:var(--primary); }
.order-mobile-body { display:flex; flex-direction:column; gap:6px; }
.order-mobile-row { font-size:13px; color:var(--text-body); display:flex; justify-content:space-between; }
.order-mobile-row span:first-child { color:var(--text-muted); }
.pay-amount-display { margin-bottom:16px; }
.pay-label { display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.pay-amount { font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; color:var(--text-heading); }

/* ============ CT CART CLASSES ============ */
.ct-empty { text-align:center; padding:60px 20px; background:#fff; border-radius:14px; border:1px solid var(--card-border); }
.ct-empty-icon { width:80px; height:80px; margin:0 auto 20px; background:var(--primary-glow); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--primary); }
.ct-empty h3 { font-size:20px; font-weight:700; color:var(--text-heading); margin-bottom:8px; }
.ct-empty p { font-size:14px; color:var(--text-muted); margin-bottom:24px; }
.ct-empty-btn { display:inline-flex; align-items:center; gap:6px; background:var(--primary); color:#fff; padding:12px 24px; border-radius:10px; font-weight:700; font-size:14px; }
.ct-empty-btn:hover { background:var(--primary-dark); color:#fff; }
.ct-card { background:#fff; border-radius:14px; border:1px solid var(--card-border); box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden; }
.ct-card-header { padding:16px 22px; border-bottom:1px solid var(--card-border); }
.ct-card-header h5 { font-size:16px; font-weight:700; color:var(--text-heading); margin:0; }
.ct-item { display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--card-border); }
.ct-item:last-of-type { border-bottom:none; }
.ct-item-img { width:80px; height:60px; border-radius:8px; overflow:hidden; border:1px solid var(--card-border); flex-shrink:0; }
.ct-item-img img { width:100%; height:100%; object-fit:cover; }
.ct-item-info { flex:1; min-width:0; }
.ct-item-title { font-size:14px; font-weight:700; color:var(--text-heading); display:block; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-item-title:hover { color:var(--primary); }
.ct-item-price { font-size:13px; color:var(--text-muted); }
.ct-item-qty { display:flex; align-items:center; gap:0; border:1.5px solid var(--card-border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.ct-qty-btn { width:34px; height:34px; background:#F8FAFC; border:none; font-size:11px; color:var(--text-body); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ct-qty-btn:hover { background:var(--primary-glow); color:var(--primary); }
.ct-qty-num { width:36px; text-align:center; font-weight:700; font-size:14px; color:var(--text-heading); }
.ct-item-total { font-size:15px; font-weight:700; color:var(--text-heading); min-width:90px; text-align:right; }
.ct-item-remove { width:34px; height:34px; border-radius:8px; background:#FEF2F2; border:1px solid #FECACA; color:#EF4444; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-item-remove:hover { background:#EF4444; color:#fff; }
.ct-continue { padding:14px 22px; border-top:1px solid var(--card-border); }
.ct-continue a { font-size:13px; font-weight:600; color:var(--primary); }
.ct-continue a:hover { color:var(--primary-dark); }
.ct-summary { background:#fff; border-radius:14px; border:1px solid var(--card-border); box-shadow:0 2px 8px rgba(0,0,0,0.04); padding:24px; position:sticky; top:90px; }
.ct-summary-title { font-size:16px; font-weight:700; color:var(--text-heading); margin:0 0 18px; padding-bottom:14px; border-bottom:2px solid var(--card-border); }
.ct-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--text-body); padding:8px 0; }
.ct-summary-divider { height:1px; background:var(--card-border); margin:10px 0; }
.ct-summary-total { font-size:18px; font-weight:800; color:var(--text-heading); }
.ct-summary-total span:last-child { color:var(--primary); font-family:'Plus Jakarta Sans',sans-serif; }
.ct-checkout-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--accent-green); color:#fff; padding:14px; border-radius:10px; font-weight:700; font-size:15px; margin-top:18px; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(13,171,118,0.25); transition:all 0.2s; }
.ct-checkout-btn:hover { background:#0A8F63; color:#fff; transform:translateY(-1px); }
.ct-secure { text-align:center; font-size:12px; color:var(--text-muted); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; }
.ct-secure i { color:var(--accent-green); }
.ct-coupon { margin-top:20px; padding-top:18px; border-top:1px solid var(--card-border); }
.ct-coupon-label { font-size:13px; font-weight:700; color:var(--text-heading); display:block; margin-bottom:8px; }
.ct-coupon-input { display:flex; gap:0; }
.ct-coupon-input input { flex:1; border:1.5px solid var(--card-border); border-right:none; border-radius:8px 0 0 8px; padding:9px 12px; font-size:13px; font-family:'DM Sans',sans-serif; }
.ct-coupon-input input:focus { border-color:var(--primary); outline:none; }
.ct-coupon-input button { background:var(--primary); color:#fff; border:none; padding:9px 18px; border-radius:0 8px 8px 0; font-weight:700; font-size:13px; cursor:pointer; font-family:'DM Sans',sans-serif; }
.ct-coupon-input button:hover { background:var(--primary-dark); }

/* ============ RESPONSIVE ============ */
@media(max-width:1199px) { .product-card .card-img-wrapper{height:180px} }
@media(max-width:991px) {
    .top-bar{display:none} .page-banner h1{font-size:30px} .navbar-nav{padding:15px 0} .nav-actions{padding:10px 0;display:flex;gap:10px} .main-navbar .nav-link::after{display:none}
    .product-detail-info{padding-left:0;margin-top:20px} .detail-title{font-size:22px} .current-price{font-size:26px}
    .pd-info{padding-left:0;margin-top:16px} .pd-title{font-size:20px} .pd-price{font-size:26px} .pd-desc-card{padding:20px} .pd-features-grid{grid-template-columns:1fr}
}
@media(max-width:767px) {
    .product-card .card-img-wrapper{height:190px} .newsletter-section h2{font-size:26px} .newsletter-section{padding:50px 0} .site-footer{padding:40px 0 0} .footer-col{margin-bottom:35px}
    .auth-card{padding:28px 20px} .profile-stats{flex-direction:column} .profile-stats .stat-item{border-right:none;border-bottom:1px solid var(--card-border)} .profile-stats .stat-item:last-child{border-bottom:none}
    .products-toolbar{flex-direction:column;gap:10px;align-items:flex-start} .detail-actions{flex-direction:column} .detail-actions .btn-buy-lg,.detail-actions .btn-demo{width:100%;justify-content:center}
    .review-header{flex-wrap:wrap} .review-date{margin-left:52px;width:100%}
    .success-card{padding:32px 20px} .success-card h2{font-size:22px} .pay-amount{font-size:28px} .coupon-input{flex-direction:column} .btn-apply-coupon{width:100%} .order-info-row{font-size:13px}
    .pd-actions{flex-direction:column} .pd-btn-buy,.pd-btn-cart{width:100%;justify-content:center} .pd-contact-btns{flex-direction:column} .pd-contact-btn{justify-content:center}
    .ct-item{flex-wrap:wrap;gap:10px} .ct-item-info{flex-basis:calc(100% - 96px)} .ct-item-qty{margin-left:auto} .ct-item-total{text-align:left}
}
@media(max-width:575px) {
    .page-banner{padding:40px 0 50px} .page-banner h1{font-size:26px} .products-section{padding:30px 0 10px}
    .product-card .card-actions{flex-direction:column} .product-card .card-actions .btn-buy,.product-card .card-actions .btn-add-cart{justify-content:center}
    .newsletter-form .input-group{flex-direction:column;border-radius:16px;padding:10px;gap:8px} .newsletter-form .btn-subscribe{width:100%}
}

/* ============================================================
   NOTIFICATION BELL
   ============================================================ */

/* Bell button */
.notif-wrapper { position: relative; }

.notif-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(67,97,238,0.08);
    color: #4361EE;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
    outline: none;
}
.notif-btn:hover { background: rgba(67,97,238,0.16); transform: scale(1.05); }
.notif-btn:focus-visible { box-shadow: 0 0 0 3px rgba(67,97,238,0.25); }
.notif-btn i { font-size: 15px; transition: transform 0.2s; }
.notif-btn.ringing i { animation: bell-ring 0.6s ease; }

@keyframes bell-ring {
    0%,100% { transform: rotate(0deg); }
    15%     { transform: rotate(14deg); }
    30%     { transform: rotate(-12deg); }
    45%     { transform: rotate(10deg); }
    60%     { transform: rotate(-8deg); }
    75%     { transform: rotate(4deg); }
}

/* Badge */
.notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #EF4444;
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s cubic-bezier(0.34,1.56,0.64,1), transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}
.notif-badge.show { opacity: 1; transform: scale(1); }

/* Dropdown — always display:flex, animate with opacity+transform */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: -6px;
    width: 360px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 16px 48px rgba(15,23,42,0.12), 0 0 0 1px rgba(67,97,238,0.08);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    pointer-events: none;
}
.notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Caret arrow */
.notif-dropdown::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 16px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid rgba(67,97,238,0.1);
    border-top: 1px solid rgba(67,97,238,0.1);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

/* Header */
.notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 13px;
    border-bottom: 1px solid #F1F5F9;
}
.notif-head-left { display: flex; align-items: center; gap: 8px; }
.notif-dropdown-head h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.1px;
}
.notif-count-pill {
    display: none;
    font-size: 10px;
    font-weight: 800;
    color: #4361EE;
    background: #EEF2FF;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0.1px;
}
.notif-count-pill.show { display: inline-block; }
.notif-mark-all {
    font-size: 12px;
    color: #94A3B8;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
    transition: color 0.15s;
    font-family: 'DM Sans', sans-serif;
}
.notif-mark-all:hover { color: #4361EE; }

/* List */
.notif-list {
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.notif-list::-webkit-scrollbar { width: 3px; }
.notif-list::-webkit-scrollbar-track { background: transparent; }
.notif-list::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 4px; }

/* Item */
.notif-item {
    display: flex;
    gap: 12px;
    padding: 13px 18px;
    border-left: 3px solid transparent;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
    position: relative;
    align-items: flex-start;
}
.notif-item + .notif-item { border-top: 1px solid #F8FAFC; }
.notif-item:hover { background: #FAFBFF; }
.notif-item.unread { background: #F6F8FF; border-left-color: #4361EE; }
.notif-item.unread:hover { background: #EEF2FF; }

/* Rounded-square icon */
.notif-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 1px;
}
.notif-icon.type-trade_new           { background:#EEF2FF; color:#4361EE; }
.notif-icon.type-trade_paid          { background:#D1FAE5; color:#059669; }
.notif-icon.type-trade_delivered     { background:#FEF3C7; color:#B45309; }
.notif-icon.type-trade_completed     { background:#D1FAE5; color:#059669; }
.notif-icon.type-trade_disputed      { background:#FEE2E2; color:#DC2626; }
.notif-icon.type-trade_resolved      { background:#DCFCE7; color:#16A34A; }
.notif-icon.type-trade_message       { background:#EDE9FE; color:#7C3AED; }
.notif-icon.type-wallet_funded       { background:#D1FAE5; color:#059669; }
.notif-icon.type-withdrawal_approved { background:#D1FAE5; color:#059669; }
.notif-icon.type-withdrawal_rejected { background:#FEE2E2; color:#DC2626; }
.notif-icon.type-general             { background:#F1F5F9; color:#64748B; }

/* Text */
.notif-content { flex: 1; min-width: 0; }
.notif-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item.unread .notif-title { font-weight: 700; color: #0F172A; }
.notif-body {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
}
.notif-meta {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notif-time {
    font-size: 11px;
    color: #9CA3AF;
    white-space: nowrap;
}
.notif-unread-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4361EE;
    flex-shrink: 0;
    display: none;
}
.notif-item.unread .notif-unread-dot { display: block; }

/* Empty state */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 10px;
}
.notif-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-empty-icon i { font-size: 22px; color: #CBD5E1; }
.notif-empty p {
    margin: 0;
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
}

/* Footer */
.notif-dropdown-foot {
    padding: 11px 18px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFE;
}
.notif-dropdown-foot a {
    font-size: 13px;
    color: #4361EE;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.15s;
}
.notif-dropdown-foot a:hover { color: #3651DE; }
.notif-dropdown-foot a i { font-size: 11px; }

@media (max-width: 575px) {
    .notif-dropdown { width: calc(100vw - 24px); right: -10px; }
    .notif-dropdown::before { right: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL MOBILE APP NAV  — applied on pages with .page-has-mobile-nav
   ═══════════════════════════════════════════════════════════════ */

/* On mobile: hide the desktop top-bar & main-navbar, add body padding */
@media (max-width: 991.98px) {
    .page-has-mobile-nav .top-bar,
    .page-has-mobile-nav .main-navbar { display: none !important; }
    .page-has-mobile-nav { padding-bottom: 76px; }
}

/* ── Bottom navigation bar ── */
.mob-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    background: #fff; border-top: 1px solid #EDF0F7;
    display: flex; padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
}
.mob-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: #9CA3AF; font-size: 10px; font-weight: 600;
    letter-spacing: .2px; padding: 2px 0; transition: color .15s;
}
.mob-nav-item i { font-size: 20px; }
.mob-nav-item.active { color: #4361EE; }
.mob-nav-sell {
    position: relative; flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 2px; text-decoration: none; color: #374151;
    font-size: 10px; font-weight: 600; padding: 2px 0;
}
.mob-nav-sell-pip {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg,#4361EE,#7B2FF7);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
    box-shadow: 0 4px 16px rgba(67,97,238,.35);
    margin-top: -18px;
}

/* Profile / Me tab active colour (reuses primary) */
.mob-nav-item.active { color: #4361EE; }

/* Hide bottom nav on desktop */
@media (min-width: 992px) {
    .mob-bottom-nav { display: none !important; }
}