/* ========================================================= MEGALUX — MY ACCOUNT STEP 04 FULL WIDTH + ELECTRONICS DESIGN SYSTEM ========================================================= */ /* ========================================================= DESIGN TOKENS ========================================================= */ :root { --ml-primary: #102A43; --ml-primary-dark: #081C2E; --ml-yellow: #FFC400; --ml-orange: #FF8A00; --ml-bg: #F5F7FA; --ml-card: #FFFFFF; --ml-text: #102A43; --ml-muted: #718096; --ml-border: #E5EAF0; --ml-radius: 18px; --ml-shadow: 0 8px 30px rgba(16, 42, 67, .07); } /* ========================================================= RESET WOODMART ACCOUNT WIDTH ========================================================= */ /* * WoodMart places My Account inside several wrappers. * We remove the width restriction from the account page. */ body.woocommerce-account .main-page-wrapper { width: 100% !important; max-width: none !important; padding: 0 !important; background: var(--ml-bg) !important; } body.woocommerce-account .site-content { width: 100% !important; max-width: none !important; } body.woocommerce-account .wd-content-layout { width: 100% !important; max-width: none !important; } body.woocommerce-account .wd-page-content { width: 100% !important; max-width: none !important; } /* ========================================================= MAIN CONTAINER ========================================================= */ body.woocommerce-account .woocommerce { width: calc(100% - 80px) !important; max-width: 1500px !important; margin-left: auto !important; margin-right: auto !important; padding: 50px 0 90px !important; } /* ========================================================= ACCOUNT GRID NOTE (MEGALUX redesign): the float/width/background/border/ radius/shadow rules that used to build the two-column split were REMOVED here. The nav/content split, card background, radius and shadow are now produced by the WoodMart Layout's own Elementor containers + widget settings (post 1022). Keeping float:right/left + fixed widths here would fight that flex-based layout (collapsed floats, double borders). ========================================================= */ /* ========================================================= SIDEBAR TITLE ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation::before { content: "حساب کاربری"; display: block; padding: 12px 14px 18px; margin-bottom: 8px; color: var(--ml-primary); font-size: 18px; font-weight: 900; border-bottom: 1px solid var(--ml-border); } /* ========================================================= NAVIGATION ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 3px 0 !important; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center; min-height: 52px; padding: 0 14px !important; border-radius: 13px; color: var(--ml-text) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; transition: .2s ease; } /* ========================================================= NAVIGATION HOVER ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #FFF8DD !important; color: var(--ml-primary) !important; transform: translateX(-3px); } /* ========================================================= ACTIVE ITEM ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: linear-gradient( 135deg, var(--ml-primary), #174A73 ) !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(16,42,67,.18); } /* ========================================================= NAV ICON ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation li a::before { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 10px; border-radius: 10px; background: #F3F6F9; color: var(--ml-orange); font-size: 15px; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { background: rgba(255,196,0,.16); color: var(--ml-yellow); } /* ========================================================= ICONS ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before { content: "⌂"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before { content: "▣"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before { content: "↓"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before { content: "⌖"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "◈"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before { content: "♙"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--wishlist a::before { content: "♡"; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "↪"; } /* ========================================================= LOGOUT ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--ml-border); } body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #D64545 !important; } /* ========================================================= CONTENT TYPOGRAPHY ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content h2 { margin-top: 0; color: var(--ml-primary); font-size: 27px; font-weight: 900; } body.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--ml-primary); font-size: 19px; font-weight: 800; } body.woocommerce-account .woocommerce-MyAccount-content p { color: var(--ml-muted); font-size: 14px; line-height: 2; } /* ========================================================= BUTTON ========================================================= */ body.woocommerce-account .woocommerce-MyAccount-content .button { min-height: 46px; padding: 0 22px !important; border: 0 !important; border-radius: 12px !important; background: var(--ml-orange) !important; color: #FFFFFF !important; font-weight: 800 !important; transition: transform .2s ease, box-shadow .2s ease; } body.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: #E97800 !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,138,0,.25); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { body.woocommerce-account .woocommerce { width: calc(100% - 40px) !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.woocommerce-account .woocommerce { width: calc(100% - 20px) !important; padding: 25px 0 50px !important; } }