/* ============================================= SMARTNET MYACCOUNT DASHBOARD CSS — FIXED v3.3 FIX LIST: 1. Hamburger button: LEFT → RIGHT side 2. Professional hamburger design 3. Close (X) button logo pe overlap nahi karega 4. Sidebar: LEFT → RIGHT side pe move kiya ============================================= */ html, html body.smartnet-myaccount-page, body.smartnet-myaccount-page { margin: 0 !important; padding: 0 !important; min-height: 100vh !important; background: #0b1020 !important; background-color: #0b1020 !important; color: #e5e7eb !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; overflow-x: hidden !important; } body.smartnet-myaccount-page *, body.smartnet-myaccount-page *::before, body.smartnet-myaccount-page *::after { box-sizing: border-box; } body.smartnet-myaccount-page #page, body.smartnet-myaccount-page .site, body.smartnet-myaccount-page #content, body.smartnet-myaccount-page .site-content, body.smartnet-myaccount-page .content-area, body.smartnet-myaccount-page .content, body.smartnet-myaccount-page .main-content, body.smartnet-myaccount-page .content-wrapper, body.smartnet-myaccount-page .page-wrapper, body.smartnet-myaccount-page .site-main-wrapper, body.smartnet-myaccount-page main.site-main, body.smartnet-myaccount-page #main, body.smartnet-myaccount-page .page-content, body.smartnet-myaccount-page .entry-content, body.smartnet-myaccount-page .woocommerce, body.smartnet-myaccount-page .woocommerce-page, body.smartnet-myaccount-page .container, body.smartnet-myaccount-page .container-fluid, body.smartnet-myaccount-page .row, body.smartnet-myaccount-page .elementor, body.smartnet-myaccount-page .elementor-section, body.smartnet-myaccount-page .elementor-container, body.smartnet-myaccount-page .elementor-column, body.smartnet-myaccount-page .elementor-widget-wrap, body.smartnet-myaccount-page .elementor-widget-container, body.smartnet-myaccount-page .site-inner, body.smartnet-myaccount-page .wrapper, body.smartnet-myaccount-page .inner-wrap, body.smartnet-myaccount-page article.page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0b1020 !important; border: 0 !important; } body.smartnet-myaccount-page .entry-content > *, body.smartnet-myaccount-page .woocommerce > *, body.smartnet-myaccount-page .woocommerce-account > * { margin-top: 0 !important; } body.smartnet-myaccount-page h1.entry-title, body.smartnet-myaccount-page h2.entry-title, body.smartnet-myaccount-page .entry-header, body.smartnet-myaccount-page .page-title, body.smartnet-myaccount-page .wc-myaccount-heading, body.smartnet-myaccount-page .woocommerce-account-title, body.smartnet-myaccount-page .page-header, body.smartnet-myaccount-page .breadcrumb-area, body.smartnet-myaccount-page .feron-breadcrumb, body.smartnet-myaccount-page .thim-breadcrumb, body.smartnet-myaccount-page .header-spacer, body.smartnet-myaccount-page .header-space, body.smartnet-myaccount-page .header-placeholder, body.smartnet-myaccount-page .sticky-header-placeholder, body.smartnet-myaccount-page .navbar-placeholder, body.smartnet-myaccount-page .page-banner, body.smartnet-myaccount-page .inner-banner, body.smartnet-myaccount-page .title-bar, body.smartnet-myaccount-page .page-title-bar, body.smartnet-myaccount-page .site-footer, body.smartnet-myaccount-page footer.site-footer, body.smartnet-myaccount-page #colophon, body.smartnet-myaccount-page footer#colophon, body.smartnet-myaccount-page .footer-widgets, body.smartnet-myaccount-page .footer-bottom, body.smartnet-myaccount-page .footer-wrap, body.smartnet-myaccount-page .feron-footer, body.smartnet-myaccount-page .hacklayer-footer, body.smartnet-myaccount-page .thim-footer, body.smartnet-myaccount-page footer[class*="footer"], body.smartnet-myaccount-page footer[id*="footer"] { display: none !important; } body.smartnet-myaccount-page .site-header, body.smartnet-myaccount-page header.site-header, body.smartnet-myaccount-page #masthead, body.smartnet-myaccount-page .header-main, body.smartnet-myaccount-page .feron-header, body.smartnet-myaccount-page .hacklayer-header, body.smartnet-myaccount-page .thim-header, body.smartnet-myaccount-page .header-wrapper, body.smartnet-myaccount-page .header-top, body.smartnet-myaccount-page .site-header-menu, body.smartnet-myaccount-page .feron-mobile-menu, body.smartnet-myaccount-page .nav-bar-wrapper, body.smartnet-myaccount-page .nav-container, body.smartnet-myaccount-page .menu-toggle, body.smartnet-myaccount-page .navbar-toggle, body.smartnet-myaccount-page .mobile-menu-toggle, body.smartnet-myaccount-page .hamburger-menu, body.smartnet-myaccount-page .hamburger, body.smartnet-myaccount-page .mobile-toggle, body.smartnet-myaccount-page .mobile-nav-toggle, body.smartnet-myaccount-page .feron-header-menu-toggle, body.smartnet-myaccount-page .thim-header-toggle, body.smartnet-myaccount-page .hacklayer-mobile-toggle, body.smartnet-myaccount-page .wp-block-navigation__responsive-container-open, body.smartnet-myaccount-page #mobile-menu-button, body.smartnet-myaccount-page #menu-toggle, body.smartnet-myaccount-page #hamburger-btn, body.smartnet-myaccount-page .mean-bar, body.smartnet-myaccount-page .meanmenu-reveal, body.smartnet-myaccount-page [class*="hamburger"]:not(.smartnet-mobile-toggle), body.smartnet-myaccount-page [class*="mobile-toggle"]:not(.smartnet-mobile-toggle), body.smartnet-myaccount-page [class*="menu-toggle"]:not(.smartnet-mobile-toggle), body.smartnet-myaccount-page [class*="nav-toggle"]:not(.smartnet-mobile-toggle), body.smartnet-myaccount-page [id*="hamburger"]:not(#smartnet-menu-toggle), body.smartnet-myaccount-page [id*="mobile-menu"]:not(#smartnet-menu-toggle) { display: none !important; visibility: hidden !important; } body.smartnet-myaccount-page .woocommerce-account > .woocommerce > nav, body.smartnet-myaccount-page .woocommerce-MyAccount-navigation:not(.smartnet-sidebar), body.smartnet-myaccount-page #secondary, body.smartnet-myaccount-page .widget-area, body.smartnet-myaccount-page .site-sidebar, body.smartnet-myaccount-page aside.sidebar, body.smartnet-myaccount-page .feron-sidebar, body.smartnet-myaccount-page .thim-sidebar, body.smartnet-myaccount-page .sidebar-area, body.smartnet-myaccount-page .account-page-left-sidebar, body.smartnet-myaccount-page .woocommerce-account .col-left, body.smartnet-myaccount-page .woocommerce-account .col-md-3, body.smartnet-myaccount-page .woocommerce-account .col-lg-3 { display: none !important; } body.smartnet-myaccount-page .woocommerce-MyAccount-content, body.smartnet-myaccount-page .site-content, body.smartnet-myaccount-page #primary, body.smartnet-myaccount-page .woocommerce-account .col-md-9, body.smartnet-myaccount-page .woocommerce-account .col-lg-9, body.smartnet-myaccount-page .woocommerce-account .col-right { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none !important; margin: 0 !important; } body.smartnet-myaccount-page .woocommerce-MyAccount-content > p:first-child:not([class]), body.smartnet-myaccount-page .woocommerce-MyAccount-content > p:first-of-type:not([class]) { display: none !important; } .smartnet-account-layout { display: grid !important; grid-template-columns: 236px minmax(0, 1fr) !important; /* Desktop: Sidebar LEFT, Content RIGHT */ width: 100vw !important; max-width: 100vw !important; min-height: 100vh !important; /* Full-height sidebar background trick: grid paints sidebar color on left column */ background-image: linear-gradient(to right, #070b14 236px, #0b1020 236px) !important; background-color: #0b1020 !important; align-items: stretch !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background: #0b1020 !important; clear: both !important; } .smartnet-sidebar { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 236px !important; min-width: 236px !important; max-width: 236px !important; min-height: 100vh !important; position: sticky !important; top: 0 !important; align-self: stretch !important; padding: 16px 12px !important; background: #070b14 !important; color: #f8fafc !important; border-right: 1px solid #1f2937 !important; /* Desktop: sidebar left pe, border right side mein */ overflow-y: auto !important; float: none !important; scrollbar-width: thin; scrollbar-color: #334155 #070b14; } .smartnet-sidebar::-webkit-scrollbar { width: 6px; } .smartnet-sidebar::-webkit-scrollbar-track { background: #070b14; } .smartnet-sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 20px; } /* Sidebar ke direct children — compress nahi honge, scroll karega container */ .smartnet-sidebar > *, .smartnet-sidebar > .smartnet-brand, .smartnet-sidebar > .smartnet-profile-card, .smartnet-sidebar > .smartnet-sidebar-search, .smartnet-sidebar > .smartnet-menu, .smartnet-sidebar > nav { flex-shrink: 0 !important; min-height: 0 !important; } .smartnet-brand, .smartnet-profile-card { display: flex; align-items: center; gap: 10px; min-width: 0; } .smartnet-brand { padding: 2px 4px; color: #f8fafc !important; text-decoration: none !important; } .smartnet-brand-mark, .smartnet-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: #84cc16; color: #08111f; font-size: 13px; font-weight: 800; } .smartnet-brand-text, .smartnet-profile-text { display: block; min-width: 0; } .smartnet-brand-text strong, .smartnet-profile-text strong, .smartnet-brand-text small, .smartnet-profile-text small { display: block; max-width: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .smartnet-brand-text strong, .smartnet-profile-text strong { color: #f8fafc; font-size: 13px; font-weight: 700; line-height: 1.25; } .smartnet-brand-text small, .smartnet-profile-text small { margin-top: 2px; color: #94a3b8; font-size: 11px; line-height: 1.25; } .smartnet-profile-card { padding: 10px; border: 1px solid #1f2937; border-radius: 12px; background: #0c1220; } .smartnet-sidebar-search input { width: 100%; min-height: 38px; padding: 9px 11px !important; border: 1px solid #1f2937 !important; border-radius: 10px !important; background: #0c1220 !important; color: #e5e7eb !important; font-size: 13px !important; outline: 0 !important; box-shadow: none !important; } .smartnet-sidebar-search input::placeholder { color: #64748b; } .smartnet-menu-label { display: block; margin: 0 0 7px 8px; color: #64748b; font-size: 11px; font-weight: 700; } .smartnet-menu ul { display: grid !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .smartnet-menu a { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 38px !important; padding: 8px 10px !important; border-radius: 10px !important; color: #cbd5e1 !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; } .smartnet-menu a:hover, .smartnet-menu .is-active a, .smartnet-menu .woocommerce-MyAccount-navigation-link--dashboard.is-active a { background: #172033 !important; color: #ffffff !important; } .smartnet-menu-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: #111827; color: #94a3b8; font-size: 10px; font-weight: 800; } .smartnet-menu .is-active .smartnet-menu-icon, .smartnet-menu a:hover .smartnet-menu-icon { background: #84cc16; color: #08111f; } .smartnet-account-main { min-width: 0 !important; min-height: 100vh !important; padding: 22px clamp(18px, 2.6vw, 32px) 32px !important; background: #0b1020 !important; overflow-x: hidden !important; } .smartnet-dashboard { width: 100%; max-width: none; margin: 0; } .smartnet-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .smartnet-page-head span, .smartnet-widget-head span { display: block; margin-bottom: 4px; color: #84cc16; font-size: 12px; font-weight: 700; } .smartnet-page-head h1 { margin: 0 0 4px; color: #f8fafc; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .smartnet-page-head p { max-width: 560px; margin: 0; color: #94a3b8; font-size: 14px; line-height: 1.55; } .smartnet-button, .smartnet-widget-head > a, .smartnet-empty-state a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid #84cc16; border-radius: 9px; background: #84cc16; color: #08111f !important; text-decoration: none !important; font-size: 13px; font-weight: 800; white-space: nowrap; } .smartnet-widget-head > a { min-height: 32px; padding: 7px 11px; border-color: #334155; background: #101827; color: #e5e7eb !important; } .smartnet-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } .smartnet-stat-widget, .smartnet-widget { border: 1px solid #1f2937; border-radius: 14px; background: #101827; box-shadow: none; } .smartnet-stat-widget { display: block; min-height: 96px; padding: 14px; color: #f8fafc !important; text-decoration: none !important; } .smartnet-stat-widget:hover, .smartnet-action-list a:hover, .smartnet-table-list a:hover { border-color: #334155; background: #121d2f; } .smartnet-stat-widget span, .smartnet-stat-widget small { display: block; color: #94a3b8; font-size: 12px; line-height: 1.4; } .smartnet-stat-widget strong { display: block; margin: 8px 0 3px; color: #f8fafc; font-size: 24px; line-height: 1.1; font-weight: 700; } .smartnet-widget-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.85fr); gap: 14px; } .smartnet-widget { padding: 16px; } .smartnet-widget-large { grid-row: auto; } .smartnet-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; } .smartnet-widget-head h2 { margin: 0; color: #f8fafc; font-size: 17px; line-height: 1.3; font-weight: 700; } .smartnet-table-list, .smartnet-action-list, .smartnet-detail-list { display: grid; gap: 8px; } .smartnet-table-list a, .smartnet-action-list a, .smartnet-detail-list > div, .smartnet-download-box { display: grid; gap: 4px; padding: 12px; border: 1px solid #1f2937; border-radius: 11px; background: #0c1220; text-decoration: none !important; } .smartnet-table-list a { grid-template-columns: minmax(70px, 0.7fr) minmax(100px, 1fr) auto; align-items: center; gap: 10px; color: #e5e7eb !important; } .smartnet-table-list span, .smartnet-table-list strong, .smartnet-table-list em { font-size: 13px; line-height: 1.35; } .smartnet-table-list span, .smartnet-action-list span, .smartnet-empty-state p, .smartnet-download-box span { color: #94a3b8; } .smartnet-table-list strong, .smartnet-action-list strong, .smartnet-empty-state strong { color: #f8fafc; font-weight: 700; } .smartnet-table-list em { justify-self: end; padding: 4px 8px; border-radius: 999px; background: rgba(132, 204, 22, 0.12); color: #bef264; font-style: normal; font-weight: 700; white-space: nowrap; } .smartnet-action-list a { color: inherit !important; } .smartnet-action-list strong, .smartnet-action-list span, .smartnet-empty-state strong, .smartnet-empty-state p, .smartnet-download-box span { display: block; margin: 0; font-size: 13px; line-height: 1.45; } .smartnet-detail-list { margin: 0; } .smartnet-detail-list > div { grid-template-columns: 86px minmax(0, 1fr); align-items: center; } .smartnet-detail-list dt, .smartnet-detail-list dd { margin: 0; min-width: 0; font-size: 13px; line-height: 1.4; } .smartnet-detail-list dt { color: #94a3b8; font-weight: 600; } .smartnet-detail-list dd { color: #f8fafc; font-weight: 700; overflow-wrap: anywhere; } .smartnet-download-box strong { display: block; margin-bottom: 5px; color: #f8fafc; font-size: 30px; line-height: 1; font-weight: 700; } .smartnet-empty-state { padding: 24px 14px; border: 1px dashed #334155; border-radius: 12px; background: #0c1220; text-align: center; } .smartnet-empty-state p { margin: 5px 0 13px; } /* ============================================= HAMBURGER BUTTON — FIX v3.2 Changes: - LEFT → RIGHT side (right: 16px) - Professional design with backdrop blur - Logo overlap problem fix: close X alag jagah ============================================= */ .smartnet-mobile-toggle { display: none !important; position: fixed !important; top: 14px !important; right: 16px !important; /* ← RIGHT side pe move kiya */ left: auto !important; /* ← left: auto taaki left se override na ho */ z-index: 10001 !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(132, 204, 22, 0.25) !important; border-radius: 10px !important; background: rgba(7, 11, 20, 0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(132, 204, 22, 0.08) !important; cursor: pointer !important; padding: 0 !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; overflow: hidden !important; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; } .smartnet-mobile-toggle * { display: none !important; } .smartnet-mobile-toggle > span { display: block !important; height: 2px !important; background: #e2e8f0 !important; border-radius: 999px !important; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, width 0.2s ease !important; flex-shrink: 0 !important; } .smartnet-mobile-toggle > span:nth-child(1) { width: 18px !important; } .smartnet-mobile-toggle > span:nth-child(2) { width: 22px !important; } .smartnet-mobile-toggle > span:nth-child(3) { width: 14px !important; align-self: flex-end !important; margin-right: 10px !important; } .smartnet-mobile-toggle:hover { border-color: rgba(132, 204, 22, 0.5) !important; background: rgba(12, 18, 32, 0.96) !important; box-shadow: 0 4px 20px rgba(132, 204, 22, 0.12), 0 4px 16px rgba(0, 0, 0, 0.5) !important; } /* ============================================= OPEN STATE — X / Close button Logo pe overlap hone ki problem fix: - X button tabhi dikhega jab sidebar open ho - Position: right side mein hi rahega (left nahi jayega) ============================================= */ .smartnet-mobile-toggle.is-open { border-color: rgba(132, 204, 22, 0.4) !important; background: rgba(10, 16, 28, 0.96) !important; } .smartnet-mobile-toggle.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; width: 18px !important; } .smartnet-mobile-toggle.is-open > span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; } .smartnet-mobile-toggle.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; width: 18px !important; margin-right: 0 !important; align-self: center !important; } /* Overlay */ .smartnet-sidebar-overlay { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(2, 6, 23, 0.72) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; z-index: 9998 !important; } .smartnet-sidebar-overlay.is-open { display: block !important; } body.smartnet-sidebar-open { overflow: hidden !important; } /* Sidebar open hone ke baad bhi button RIGHT side mein rahega */ body.smartnet-sidebar-open .smartnet-mobile-toggle { right: 16px !important; left: auto !important; } /* ============================================= AUTH PAGE ============================================= */ .smartnet-auth-page { width: min(900px, calc(100vw - 28px)); margin: 36px auto; display: grid; grid-template-columns: 0.82fr 1fr; gap: 14px; } .smartnet-auth-intro, .smartnet-auth-card { border: 1px solid #1f2937; border-radius: 14px; background: #101827; } .smartnet-auth-intro { padding: 26px; color: #f8fafc; } .smartnet-auth-intro h1 { margin: 18px 0 8px; color: #f8fafc; font-size: 27px; line-height: 1.2; } .smartnet-auth-intro p { margin: 0; color: #94a3b8; font-size: 14px; line-height: 1.55; } .smartnet-auth-card { padding: 24px; } .smartnet-auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .smartnet-auth-tabs a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 9px; border: 1px solid #334155; background: #0c1220; color: #cbd5e1 !important; text-decoration: none !important; font-size: 13px; font-weight: 700; } .smartnet-auth-tabs a.is-active { background: #84cc16; border-color: #84cc16; color: #08111f !important; } .smartnet-auth-panel h2 { margin: 0 0 18px; color: #f8fafc; font-size: 22px; } .smartnet-auth-form .woocommerce-form-row { margin-bottom: 14px; } .smartnet-auth-form label { display: block; margin-bottom: 6px; color: #cbd5e1; font-size: 13px; font-weight: 700; } .smartnet-auth-form input[type="text"], .smartnet-auth-form input[type="email"], .smartnet-auth-form input[type="password"] { width: 100% !important; min-height: 44px !important; padding: 11px 12px !important; border: 1px solid #334155 !important; border-radius: 9px !important; background: #0c1220 !important; color: #f8fafc !important; font-size: 14px !important; outline: none !important; box-shadow: none !important; } .smartnet-auth-form input:focus { border-color: #84cc16 !important; } .smartnet-auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .smartnet-auth-actions label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #94a3b8; } .smartnet-auth-actions a, .toggle-link-section a { color: #bef264 !important; text-decoration: none !important; font-size: 13px; font-weight: 700; } .smartnet-auth-submit, .woocommerce .smartnet-auth-submit.button { width: 100% !important; min-height: 44px !important; padding: 12px 16px !important; border: 1px solid #84cc16 !important; border-radius: 9px !important; background: #84cc16 !important; color: #08111f !important; font-size: 14px !important; font-weight: 800 !important; cursor: pointer !important; box-shadow: none !important; } .toggle-link-section, .smartnet-form-note { margin-top: 14px; color: #94a3b8; text-align: center; font-size: 13px; } .ajax-msg { display: none; margin-bottom: 12px; padding: 10px 12px; border-radius: 9px; font-size: 13px; } .ajax-msg.wc-success { background: rgba(132, 204, 22, 0.12); color: #bef264; } .ajax-msg.wc-error { background: rgba(248, 113, 113, 0.12); color: #fca5a5; } /* ============================================= DESKTOP — SIDEBAR NORMAL POSITION ============================================= */ @media (min-width: 1025px) { .smartnet-account-layout aside.smartnet-sidebar.woocommerce-MyAccount-navigation, .smartnet-sidebar { position: sticky !important; left: auto !important; transform: none !important; z-index: auto !important; } } /* ============================================= TABLET — 1100px ============================================= */ @media (max-width: 1100px) { .smartnet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .smartnet-widget-grid { grid-template-columns: 1fr; } .smartnet-widget-large { grid-row: auto; } } /* ============================================= MOBILE — 1024px Main changes: - Hamburger right: 16px (left nahi) - Sidebar left side se slide in karega (same as before) - Close button right side mein FIXED (logo pe nahi) ============================================= */ @media (max-width: 1024px) { /* Hamburger — RIGHT side pe show hoga */ .smartnet-mobile-toggle { display: flex !important; right: 16px !important; left: auto !important; } /* Theme wrapper padding zero karo — yahi side spaces ka root cause hai */ body.smartnet-myaccount-page .entry-content, body.smartnet-myaccount-page .woocommerce, body.smartnet-myaccount-page .container, body.smartnet-myaccount-page .site-content, body.smartnet-myaccount-page #content, body.smartnet-myaccount-page #primary, body.smartnet-myaccount-page .content-area, body.smartnet-myaccount-page main.site-main, body.smartnet-myaccount-page .woocommerce-MyAccount-content, body.smartnet-myaccount-page article.page, body.smartnet-myaccount-page .page-content, body.smartnet-myaccount-page .inner-wrap, body.smartnet-myaccount-page .wrapper, body.smartnet-myaccount-page .site-inner, body.smartnet-myaccount-page .feron-page-content-area, body.smartnet-myaccount-page .page-content-wrap, body.smartnet-myaccount-page [class*="padding-"], body.smartnet-myaccount-page [class*="page-content-wrap"] { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } .smartnet-account-layout { grid-template-columns: 1fr !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Content: side padding sirf 12px DONO selectors — specificity match karo warna 44px rule jeet jaata hai */ .smartnet-account-main, .woocommerce-MyAccount-content.smartnet-account-main, body.smartnet-myaccount-page .smartnet-account-main, body.smartnet-myaccount-page .woocommerce-MyAccount-content.smartnet-account-main { padding: 70px 12px 28px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Mobile sidebar: top+bottom=0 trick height: 100vh nahi — bottom: 0 use karo Brave/Chrome bottom nav bar ke peeche content nahi jaata ab */ .smartnet-account-layout aside.smartnet-sidebar.woocommerce-MyAccount-navigation, body.smartnet-myaccount-page .smartnet-sidebar, .smartnet-sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: min(300px, 84vw) !important; min-width: 0 !important; max-width: 84vw !important; z-index: 10000 !important; overflow-y: scroll !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; transform: translateX(100%) !important; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: -8px 0 42px rgba(0, 0, 0, 0.5) !important; border-left: 1px solid #1f2937 !important; border-right: none !important; padding-bottom: 80px !important; } .smartnet-account-layout aside.smartnet-sidebar.woocommerce-MyAccount-navigation.is-open, body.smartnet-myaccount-page .smartnet-sidebar.is-open, .smartnet-sidebar.is-open { transform: translateX(0) !important; } } /* ============================================= SMALL MOBILE — 720px ============================================= */ @media (max-width: 720px) { .smartnet-page-head, .smartnet-widget-head { flex-direction: column; align-items: stretch; } .smartnet-page-head h1 { font-size: 23px; } .smartnet-button, .smartnet-widget-head > a { width: 100%; } .smartnet-stats, .smartnet-widget-grid, .smartnet-table-list a, .smartnet-detail-list > div, .smartnet-auth-page { grid-template-columns: 1fr; } .smartnet-table-list em { justify-self: start; } .smartnet-auth-page { margin: 14px auto; } .smartnet-auth-intro, .smartnet-auth-card { padding: 20px; } .smartnet-account-main, .woocommerce-MyAccount-content.smartnet-account-main, body.smartnet-myaccount-page .smartnet-account-main, body.smartnet-myaccount-page .woocommerce-MyAccount-content.smartnet-account-main { padding: 68px 10px 20px !important; } .smartnet-mobile-toggle { right: 14px !important; left: auto !important; top: 12px !important; } } /* ============================================= SMARTNET REWARDS + POINTS ACTIVITY HARD FIX ============================================= */ .smartnet-rewards-scope, .smartnet-rewards-scope *, .smartnet-rewards-scope *::before, .smartnet-rewards-scope *::after { box-sizing: border-box !important; text-transform: none !important; letter-spacing: normal !important; } .smartnet-dashboard-reward-preview, .smartnet-reward-hero-widget { overflow: hidden !important; background: #101827 !important; border-color: #1f2937 !important; } .smartnet-reward-preview-link { display: block !important; width: 100% !important; color: inherit !important; text-decoration: none !important; } .smartnet-reward-preview-link > span { display: block !important; margin-top: 12px !important; color: #94a3b8 !important; font-size: 12px !important; line-height: 1.45 !important; text-align: center !important; } .smartnet-activity-card { display: block !important; width: 100% !important; padding: 16px !important; border: 1px solid #1f2937 !important; border-radius: 14px !important; background: #111827 !important; overflow-x: auto !important; } .smartnet-activity-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; } .smartnet-activity-title { display: flex !important; align-items: center !important; gap: 8px !important; color: #f8fafc !important; font-size: 14px !important; font-weight: 900 !important; } .smartnet-activity-title i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; min-width: 20px !important; border-radius: 5px !important; background: #26344f !important; color: #c7d2fe !important; font-style: normal !important; font-size: 9px !important; font-weight: 900 !important; } .smartnet-activity-title strong, .smartnet-activity-year { color: #f8fafc !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.2 !important; } .smartnet-activity-year { color: #e5e7eb !important; font-size: 13px !important; white-space: nowrap !important; } .smartnet-activity-key { display: flex !important; align-items: center !important; gap: 7px !important; flex-wrap: wrap !important; margin-bottom: 14px !important; color: #94a3b8 !important; font-size: 10px !important; font-weight: 700 !important; } .smartnet-activity-key b { color: #94a3b8 !important; font-size: 10px !important; font-weight: 800 !important; white-space: nowrap !important; } .smartnet-activity-key i { display: inline-block !important; width: 9px !important; height: 9px !important; min-width: 9px !important; min-height: 9px !important; border-radius: 2px !important; background: #26344f !important; font-size: 0 !important; line-height: 0 !important; } .smartnet-activity-key em { display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-left: auto !important; padding: 8px 12px !important; border: 1px solid #26344f !important; border-radius: 8px !important; background: #111d31 !important; color: #94a3b8 !important; font-style: normal !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap !important; } .smartnet-activity-key em strong { color: #ccff00 !important; font-size: 18px !important; font-weight: 900 !important; } .smartnet-activity-wrap, .smartnet-activity-body, .smartnet-activity-grid { width: 100% !important; } .smartnet-activity-months { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; width: calc(100% - 32px) !important; margin: 0 0 6px 32px !important; color: #64748b !important; font-size: 10px !important; font-weight: 900 !important; } .smartnet-activity-months span { display: block !important; color: #64748b !important; font-size: 10px !important; font-weight: 900 !important; } .smartnet-activity-body { display: flex !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } .smartnet-activity-days { display: grid !important; grid-template-rows: repeat(4, 13px) !important; gap: 7px !important; width: 24px !important; min-width: 24px !important; padding-top: 1px !important; } .smartnet-activity-days span { display: block !important; width: 24px !important; height: 13px !important; color: #64748b !important; font-size: 9px !important; font-weight: 900 !important; line-height: 13px !important; } .smartnet-activity-grid { display: grid !important; grid-template-columns: repeat(53, minmax(6px, 1fr)) !important; grid-template-rows: repeat(7, auto) !important; grid-auto-flow: column !important; gap: 4px !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .smartnet-activity-grid span.smartnet-activity-cell { display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; aspect-ratio: 1 / 1 !important; border: 0 !important; border-radius: 2px !important; background: #26344f !important; overflow: hidden !important; text-indent: -9999px !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; opacity: 1 !important; visibility: visible !important; } .smartnet-activity-grid span.level-0, .smartnet-activity-key i.level-0 { background: #26344f !important; } .smartnet-activity-grid span.level-2, .smartnet-activity-key i.level-2 { background: #5f8f26 !important; } .smartnet-activity-grid span.level-3, .smartnet-activity-key i.level-3 { background: #7fb72a !important; } .smartnet-activity-grid span.level-4, .smartnet-activity-key i.level-4 { background: #ccff00 !important; box-shadow: 0 0 14px rgba(204, 255, 0, 0.28) !important; } .smartnet-activity-note { display: block !important; margin: 14px 0 0 !important; color: #64748b !important; font-size: 11px !important; font-weight: 700 !important; text-align: center !important; } .smartnet-reward-tier-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 14px !important; } @media (max-width: 900px) { .smartnet-activity-key em { width: 100% !important; margin-left: 0 !important; justify-content: center !important; } .smartnet-reward-tier-list { grid-template-columns: 1fr !important; } } /* ============================================= NEXTEND SOCIAL LOGIN — DARK THEME INTEGRATION ============================================= */ .smartnet-social-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #4b5563; font-size: 12px; font-weight: 700; } .smartnet-social-divider::before, .smartnet-social-divider::after { content: ''; flex: 1; height: 1px; background: #1f2937; } .smartnet-social-login-wrap { width: 100%; margin-top: 4px; } /* Nextend Social Login button overrides for dark theme */ body.smartnet-myaccount-page .nsl-container, body.smartnet-myaccount-page .nsl-container-login { display: block !important; visibility: visible !important; width: 100% !important; margin: 0 !important; } body.smartnet-myaccount-page .nsl-button { display: flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; padding: 10px 14px !important; border: 1px solid #334155 !important; border-radius: 9px !important; background: #0c1220 !important; color: #e5e7eb !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: border-color 0.2s ease, background 0.2s ease !important; box-shadow: none !important; gap: 10px !important; margin-bottom: 10px !important; } body.smartnet-myaccount-page .nsl-button:hover { border-color: #84cc16 !important; background: #111d31 !important; color: #f8fafc !important; } body.smartnet-myaccount-page .nsl-button-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 24px !important; height: 24px !important; } body.smartnet-myaccount-page .nsl-button-icon svg, body.smartnet-myaccount-page .nsl-button-icon img { width: 20px !important; height: 20px !important; } body.smartnet-myaccount-page .nsl-button-label-container { display: block !important; color: #e5e7eb !important; font-size: 14px !important; font-weight: 600 !important; } body.smartnet-myaccount-page .nsl-button-default, body.smartnet-myaccount-page .nsl-button-svelte { background: #0c1220 !important; }