/** * Mercado Mayor — Mi Cuenta Professional Redesign * Elegant, professional styling for WooCommerce My Account pages * Loads after b2b-marketplace.css and mercado-mayor-fonts */ /* ======================================================================== 1. DESIGN TOKENS — My Account Specific ======================================================================== */ :root { /* My Account specific tokens extending the B2B design system */ --ma-sidebar-width: 300px; --ma-sidebar-collapsed: 80px; --ma-content-padding: 56px 64px; --ma-card-radius: 16px; --ma-card-shadow: 0 2px 12px rgba(30, 30, 30, 0.05), 0 1px 3px rgba(30, 30, 30, 0.03); --ma-card-shadow-hover: 0 12px 32px rgba(30, 30, 30, 0.08), 0 4px 12px rgba(30, 30, 30, 0.04); --ma-border: var(--mm-border); --ma-border-strong: var(--mm-border-strong); --ma-radius-sm: 8px; --ma-radius: 8px; --ma-radius-lg: 12px; --ma-radius-pill: 999px; --ma-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Shadows from B2B system - enhanced */ --ma-shadow-sm: 0 1px 2px rgba(30, 30, 30, 0.04); --ma-shadow: 0 2px 8px rgba(30, 30, 30, 0.05), 0 1px 2px rgba(30, 30, 30, 0.03); --ma-shadow-md: 0 4px 16px rgba(30, 30, 30, 0.06), 0 2px 4px rgba(30, 30, 30, 0.04); --ma-shadow-lg: 0 12px 32px rgba(30, 30, 30, 0.08), 0 4px 12px rgba(30, 30, 30, 0.04); --ma-shadow-xl: 0 20px 48px rgba(30, 30, 30, 0.10), 0 8px 16px rgba(30, 30, 30, 0.05); --ma-shadow-accent: 0 8px 24px rgba(139, 90, 43, 0.25), 0 4px 8px rgba(139, 90, 43, 0.15); --ma-shadow-button: 0 4px 6px rgba(0, 0, 0, 0.1); --ma-shadow-button-hover: 0 6px 12px rgba(0, 0, 0, 0.15); /* Typography scale for My Account - Elegant Serif for buttons */ --ma-text-xs: 0.8125rem; /* 13px */ --ma-text-sm: 0.9375rem; /* 15px */ --ma-text-base: 1.0625rem; /* 17px */ --ma-text-lg: 1.1875rem; /* 19px */ --ma-text-xl: 1.375rem; /* 22px */ --ma-text-2xl: 1.625rem; /* 26px */ --ma-text-3xl: 2.125rem; /* 34px */ --ma-text-4xl: 2.75rem; /* 44px */ --ma-text-5xl: 3.5rem; /* 56px */ /* Font families */ --ma-font-ui: var(--mm-font-ui); --ma-font-display: var(--mm-font-display); --ma-font-serif: 'Playfair Display', 'Lora', Georgia, serif; /* Line heights for elegance */ --ma-leading-tight: 1.15; --ma-leading-snug: 1.375; --ma-leading-normal: 1.6; --ma-leading-relaxed: 1.75; /* Spacing scale - more generous */ --ma-space-1: 4px; --ma-space-2: 8px; --ma-space-3: 12px; --ma-space-4: 16px; --ma-space-5: 20px; --ma-space-6: 24px; --ma-space-7: 28px; --ma-space-8: 32px; --ma-space-10: 40px; --ma-space-12: 48px; --ma-space-14: 56px; --ma-space-16: 64px; --ma-space-20: 80px; /* Color accents - Red theme for buttons */ --ma-accent-red: #C0392B; --ma-accent-red-hover: #E74C3C; --ma-accent-red-soft: #FADBD8; --ma-accent-red-strong: #922B21; --ma-accent-gold: #8B5A2B; --ma-accent-gold-light: #C9A876; --ma-accent-gold-soft: #F5EDE3; --ma-accent-gold-strong: #6B4226; /* Pure white for text/icons on red buttons */ --ma-pure-white: #FFFFFF; /* Faire-style navigation pills — neutral resting state, red accent on hover/active to match the main site menu's red current-item style. */ --ma-nav-bg: #F9FAFB; --ma-nav-border: #E5E7EB; --ma-nav-ink: #1F2937; --ma-nav-active-bg: var(--mm-accent); --ma-nav-active-border: var(--mm-accent); /* B2B marketplace neutral scale (Faire-style form/button system) */ --ma-gray-900: #111827; --ma-gray-800: #1F2937; --ma-gray-700: #374151; --ma-gray-300: #D1D5DB; --ma-gray-200: #E5E7EB; --ma-gray-50: #F9FAFB; /* Form fields */ --ma-input-height: 44px; --ma-input-border: var(--ma-gray-300); --ma-input-ink: var(--ma-gray-900); --ma-input-focus: var(--ma-gray-900); --ma-label-ink: var(--ma-gray-700); /* Primary buttons */ --ma-btn-bg: var(--ma-gray-900); --ma-btn-bg-hover: var(--ma-gray-700); } /* ======================================================================== 2. LAYOUT — Main My Account Container ======================================================================== */ .woocommerce-MyAccount { display: grid; grid-template-columns: var(--ma-sidebar-width) 1fr; gap: var(--ma-space-8); max-width: 1400px; margin: 0 auto; padding: var(--ma-space-8) var(--ma-space-6); min-height: calc(100vh - 200px); } /* RTL support */ .rtl .woocommerce-MyAccount { direction: rtl; } /* ======================================================================== 1B. TYPOGRAPHY BASE — Serif headings, Sans-serif body (account-wide) ======================================================================== */ body.woocommerce-account { font-family: var(--mm-font-ui); } body.woocommerce-account h1, body.woocommerce-account h2, body.woocommerce-account h3 { font-family: var(--mm-font-display); } /* WordPress page title ("Mi cuenta") rendered by the theme's page template */ body.woocommerce-account h1.vw-page-title { font-size: var(--ma-text-4xl); font-weight: 600; color: var(--mm-ink); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--ma-space-6); padding: var(--ma-space-4) 0 var(--ma-space-5); border-bottom: 1px solid var(--ma-border); } @media (max-width: 768px) { body.woocommerce-account h1.vw-page-title { font-size: var(--ma-text-2xl); padding: var(--ma-space-2) 0 var(--ma-space-4); margin-bottom: var(--ma-space-4); } } /* ======================================================================== 1C. BREADCRUMB — intentionally left unstyled here. The theme's global style.css already gives ".bradcrumbs" a consistent look (light box for parent links, red box for the current page) that's used on every other page (Cart, Shop, etc.). My Account now matches that same default instead of using its own design, per site-wide consistency. ======================================================================== */ /* ======================================================================== 3. SIDEBAR NAVIGATION — Faire-Style Minimalist Pills ======================================================================== */ .woocommerce-MyAccount-navigation { position: sticky; top: 120px; height: fit-content; max-height: calc(100vh - 160px); overflow-y: auto; background: var(--mm-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-radius-lg); padding: var(--ma-space-3); box-shadow: var(--ma-shadow-sm); scrollbar-width: thin; scrollbar-color: var(--ma-nav-border) transparent; } .woocommerce-MyAccount-navigation::-webkit-scrollbar { width: 6px; } .woocommerce-MyAccount-navigation::-webkit-scrollbar-track { background: transparent; } .woocommerce-MyAccount-navigation::-webkit-scrollbar-thumb { background: var(--ma-nav-border); border-radius: 3px; } .woocommerce-MyAccount-navigation::-webkit-scrollbar-thumb:hover { background: var(--mm-border-strong); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ma-space-2); } .woocommerce-MyAccount-navigation li, li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link { /* Neutralize the theme's own style.css default, which paints every item as a solid red tile with 12px padding sitting behind our pill design (that's what was bleeding through as a red ring / muddy "Salir" button). */ background: transparent !important; padding: 0 !important; margin: 0 !important; } /* Navigation pills - Faire-style neutral cards. font-weight/background/border carry !important because style.css's "nav.woocommerce-MyAccount-navigation a" (bold, red tile) out-specifies a plain ".woocommerce-MyAccount-navigation a" selector. */ .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: var(--ma-space-3); padding: 12px var(--ma-space-4); color: var(--ma-nav-ink) !important; text-decoration: none; font-family: var(--mm-font-ui); font-size: 14px; font-weight: 500 !important; letter-spacing: 0.3px; line-height: 1.4; border-radius: 10px !important; background: var(--ma-nav-bg) !important; border: 1px solid var(--ma-nav-border) !important; box-shadow: none; transition: var(--ma-transition); position: relative; } .woocommerce-MyAccount-navigation a:hover { color: #ffffff !important; text-decoration: none; background: var(--ma-nav-active-bg) !important; border-color: var(--ma-nav-active-border) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--ma-nav-active-bg) !important; border-color: var(--ma-nav-active-border) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18); } /* Clean line-icons — masked so they inherit the current text color */ .woocommerce-MyAccount-navigation a::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; display: inline-block; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: var(--ma-transition); } /* Dashboard */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); } /* Orders */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'%3E%3C/path%3E%3Cpath d='M15 18H9'%3E%3C/path%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62L18.3 9.38a1 1 0 0 0-.78-.38H14'%3E%3C/path%3E%3Ccircle cx='17' cy='18' r='2'%3E%3C/circle%3E%3Ccircle cx='7' cy='18' r='2'%3E%3C/circle%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'%3E%3C/path%3E%3Cpath d='M15 18H9'%3E%3C/path%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62L18.3 9.38a1 1 0 0 0-.78-.38H14'%3E%3C/path%3E%3Ccircle cx='17' cy='18' r='2'%3E%3C/circle%3E%3Ccircle cx='7' cy='18' r='2'%3E%3C/circle%3E%3C/svg%3E"); } /* Downloads */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E"); } /* Addresses */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E"); } /* Account Details */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E"); } /* Payment Methods */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'%3E%3C/rect%3E%3Cline x1='2' y1='10' x2='22' y2='10'%3E%3C/line%3E%3Cline x1='16' y1='16' x2='16' y2='16'%3E%3C/line%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'%3E%3C/rect%3E%3Cline x1='2' y1='10' x2='22' y2='10'%3E%3C/line%3E%3Cline x1='16' y1='16' x2='16' y2='16'%3E%3C/line%3E%3C/svg%3E"); } /* Logout — separated from the main list, muted-red to signal a destructive action. !important here because it must win over this file's own blanket "li { margin/padding: 0 !important }" reset above. */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: var(--ma-space-2) !important; padding-top: var(--ma-space-3) !important; border-top: 1px solid var(--ma-nav-border); } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { background: transparent; border-color: transparent; color: #AA2418 !important; } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #AA2418; border-color: #AA2418; color: #ffffff !important; } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E"); } /* ======================================================================== 4. CONTENT AREA — Professional Card-Based Layout ======================================================================== */ .woocommerce-MyAccount-content { background: transparent; } /* Page header */ .woocommerce-MyAccount-content > .woocommerce-account-title, .woocommerce-MyAccount-content > h1, .woocommerce-MyAccount-content > h2:first-child { font-family: var(--mm-font-display); font-size: var(--ma-text-4xl); font-weight: 600; color: var(--mm-ink); line-height: 1.2; margin: 0 0 var(--ma-space-3); letter-spacing: -0.02em; } .woocommerce-MyAccount-content > .woocommerce-account-title + p, .woocommerce-MyAccount-content > h1 + p, .woocommerce-MyAccount-content > h2:first-child + p { font-family: var(--mm-font-ui); font-size: var(--ma-text-lg); color: var(--mm-ink-muted); line-height: 1.6; margin: 0 0 var(--ma-space-8); font-weight: 400; } /* ======================================================================== 4B. DASHBOARD INTRO — Welcome Panel + Vendor CTAs ======================================================================== */ /* Greeting — "Hello NAME" — styled as a small welcome panel */ .woocommerce-MyAccount-content > p:first-of-type { display: flex; align-items: center; gap: var(--ma-space-3); font-family: var(--mm-font-ui); font-size: var(--ma-text-lg); font-weight: 500; color: var(--mm-ink); background: var(--ma-nav-bg); border: 1px solid var(--ma-nav-border); border-radius: var(--ma-radius-lg); padding: var(--ma-space-5) var(--ma-space-6); margin: 0 0 var(--ma-space-5); } .woocommerce-MyAccount-content > p:first-of-type::before { content: '\f2bd'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 26px; color: var(--ma-nav-active-bg); flex-shrink: 0; } .woocommerce-MyAccount-content > p:first-of-type a { color: var(--mm-ink-muted); font-weight: 500; text-decoration: underline; transition: var(--ma-transition); } .woocommerce-MyAccount-content > p:first-of-type a:hover { color: var(--mm-accent); } /* Description — "From your account dashboard you can..." */ .woocommerce-MyAccount-content > p:first-of-type + p { font-size: var(--ma-text-base); color: var(--mm-ink-muted); line-height: 1.7; margin: 0 0 var(--ma-space-6); padding-bottom: var(--ma-space-6); border-bottom: 1px solid var(--ma-border); } .woocommerce-MyAccount-content > p:first-of-type + p a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ma-border-strong); text-underline-offset: 3px; transition: var(--ma-transition); } .woocommerce-MyAccount-content > p:first-of-type + p a:hover { color: var(--mm-accent); text-decoration-color: var(--mm-accent); } /* "Go to Vendor Dashboard" — Dokan CTA for existing sellers */ .woocommerce-MyAccount-content a.vendor-dashboard { display: inline-flex; align-items: center; gap: var(--ma-space-3); padding: 14px 28px; font-family: var(--mm-font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0.2px; color: #FFFFFF !important; background: linear-gradient(135deg, #111827 0%, #2D3748 100%); border-radius: 10px; text-decoration: none; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.25); transition: var(--ma-transition); } .woocommerce-MyAccount-content a.vendor-dashboard::before { content: '\f3fd'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; } .woocommerce-MyAccount-content a.vendor-dashboard:hover { color: #FFFFFF !important; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17, 24, 39, 0.32); background: linear-gradient(135deg, #1F2937 0%, #374151 100%); } /* "Become a Vendor" promo — Dokan CTA for customers who aren't sellers yet */ .woocommerce-MyAccount-content .dokan-account-migration-lists { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-content .dokan-account-migration-lists li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ma-space-5); background: var(--ma-nav-bg); border: 1px solid var(--ma-nav-border); border-radius: var(--ma-radius-lg); padding: var(--ma-space-6); } .woocommerce-MyAccount-content .dokan-account-migration-lists .left-content p:first-child { font-family: var(--mm-font-display); font-size: var(--ma-text-lg); font-weight: 600; color: var(--mm-ink); margin: 0 0 4px; } .woocommerce-MyAccount-content .dokan-account-migration-lists .left-content p:last-child { font-size: var(--ma-text-sm); color: var(--mm-ink-muted); margin: 0; } .woocommerce-MyAccount-content .dokan-account-migration-lists a.btn-primary { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: 12px 24px; font-family: var(--mm-font-ui); font-size: 14px; font-weight: 600; border-radius: 6px; background: var(--ma-btn-bg); color: #FFFFFF; text-decoration: none; white-space: nowrap; transition: all 0.2s ease; } .woocommerce-MyAccount-content .dokan-account-migration-lists a.btn-primary:hover { background: var(--ma-btn-bg-hover); color: #FFFFFF; text-decoration: none; } .woocommerce-MyAccount-content .dokan-account-migration-lists .dokan-clearfix { display: none; } @media (max-width: 640px) { .woocommerce-MyAccount-content > p:first-of-type { flex-direction: column; align-items: flex-start; text-align: left; } .woocommerce-MyAccount-content .dokan-account-migration-lists li { flex-direction: column; align-items: flex-start; } .woocommerce-MyAccount-content .dokan-account-migration-lists a.btn-primary, .woocommerce-MyAccount-content a.vendor-dashboard { width: 100%; justify-content: center; } } /* ======================================================================== 5. CONTENT CARDS — Unified Card System ======================================================================== */ .woocommerce-MyAccount-content > div:not(.woocommerce-MyAccount-content > div:first-child), .woocommerce-MyAccount-content section, .woocommerce-MyAccount-content .woocommerce-addresses, .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads, .woocommerce-MyAccount-content .woocommerce-orders, .woocommerce-MyAccount-content .woocommerce-MyAccount-content > div { background: var(--mm-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-card-radius); padding: var(--ma-content-padding); margin-bottom: var(--ma-space-6); box-shadow: var(--ma-card-shadow); transition: var(--ma-transition); } .woocommerce-MyAccount-content > div:hover, .woocommerce-MyAccount-content section:hover, .woocommerce-MyAccount-content .woocommerce-addresses:hover, .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads:hover, .woocommerce-MyAccount-content .woocommerce-orders:hover { box-shadow: var(--ma-card-shadow-hover); border-color: var(--ma-border-strong); } /* Section headings within content */ .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content .woocommerce-column__title, .woocommerce-MyAccount-content .woocommerce-address-title { font-family: var(--mm-font-display); font-size: var(--ma-text-2xl); font-weight: 600; color: var(--mm-ink); line-height: 1.3; margin: 0 0 var(--ma-space-6); padding-bottom: var(--ma-space-4); border-bottom: 1px solid var(--ma-border); letter-spacing: -0.01em; } .woocommerce-MyAccount-content h3 { font-size: var(--ma-text-xl); margin-bottom: var(--ma-space-4); padding-bottom: var(--ma-space-3); } /* ======================================================================== 6. ORDERS TABLE — Professional Data Table ======================================================================== */ .woocommerce-orders table.shop_table { width: 100%; border-collapse: collapse; font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); margin: 0; } .woocommerce-orders table.shop_table thead { background: var(--mm-surface-sunken); border-bottom: 2px solid var(--ma-border); } .woocommerce-orders table.shop_table th { font-family: var(--mm-font-ui); font-size: var(--ma-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-ink-muted); padding: var(--ma-space-4) var(--ma-space-3); text-align: left; border: none; white-space: nowrap; } .woocommerce-orders table.shop_table tbody tr { border-bottom: 1px solid var(--ma-border); transition: var(--ma-transition); } .woocommerce-orders table.shop_table tbody tr:last-child { border-bottom: none; } .woocommerce-orders table.shop_table tbody tr:hover { background: var(--mm-surface-alt); } .woocommerce-orders table.shop_table td { padding: var(--ma-space-4) var(--ma-space-3); vertical-align: middle; color: var(--mm-ink); font-size: var(--ma-text-sm); border: none; } /* Order number */ .woocommerce-orders table.shop_table .order-number { font-family: var(--mm-font-ui); font-weight: 600; font-size: var(--ma-text-base); color: var(--mm-ink); } /* Order date */ .woocommerce-orders table.shop_table .order-date { color: var(--mm-ink-muted); font-size: var(--ma-text-sm); } /* Order status badges */ .woocommerce-orders table.shop_table .order-status { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-1) var(--ma-space-3); border-radius: var(--ma-radius-pill); font-size: var(--ma-text-xs); font-weight: 600; text-transform: capitalize; letter-spacing: 0.02em; } .woocommerce-orders table.shop_table .order-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .woocommerce-orders table.shop_table .order-status.status-completed { background: #ECFDF5; color: #065F46; } .woocommerce-orders table.shop_table .order-status.status-completed::before { background: #10B981; } .woocommerce-orders table.shop_table .order-status.status-processing, .woocommerce-orders table.shop_table .order-status.status-on-hold { background: #FFF7ED; color: #9A3412; } .woocommerce-orders table.shop_table .order-status.status-processing::before, .woocommerce-orders table.shop_table .order-status.status-on-hold::before { background: #F59E0B; } .woocommerce-orders table.shop_table .order-status.status-pending { background: #FEF3C7; color: #92400E; } .woocommerce-orders table.shop_table .order-status.status-pending::before { background: #F59E0B; } .woocommerce-orders table.shop_table .order-status.status-cancelled, .woocommerce-orders table.shop_table .order-status.status-refunded, .woocommerce-orders table.shop_table .order-status.status-failed { background: #FEF2F2; color: #991B1B; } .woocommerce-orders table.shop_table .order-status.status-cancelled::before, .woocommerce-orders table.shop_table .order-status.status-refunded::before, .woocommerce-orders table.shop_table .order-status.status-failed::before { background: #EF4444; } /* Order total */ .woocommerce-orders table.shop_table .order-total { font-family: var(--mm-font-display); font-size: var(--ma-text-base); font-weight: 600; color: var(--mm-ink); white-space: nowrap; } /* Order actions */ .woocommerce-orders table.shop_table .order-actions { white-space: nowrap; } .woocommerce-orders table.shop_table .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-4); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 500; border-radius: var(--ma-radius); border: 1px solid var(--ma-border); background: var(--mm-surface); color: var(--mm-ink); text-decoration: none; transition: var(--ma-transition); min-width: 120px; } .woocommerce-orders table.shop_table .button:hover { background: var(--mm-surface-sunken); border-color: var(--ma-border-strong); color: var(--mm-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--ma-card-shadow); } .woocommerce-orders table.shop_table .button.alt, .woocommerce-orders table.shop_table .button.wc-forward { background: var(--mm-ink); border-color: var(--mm-ink); color: var(--mm-surface); } .woocommerce-orders table.shop_table .button.alt:hover, .woocommerce-orders table.shop_table .button.wc-forward:hover { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; } /* Empty state */ .woocommerce-orders .woocommerce-MyAccount-content > p:only-child, .woocommerce-MyAccount-content .woocommerce-nothing-found { text-align: center; padding: var(--ma-space-16) var(--ma-space-8) !important; color: var(--mm-ink-muted); font-size: var(--ma-text-lg); line-height: 1.6; } .woocommerce-orders .woocommerce-MyAccount-content > p:only-child::before, .woocommerce-MyAccount-content .woocommerce-nothing-found::before { content: '\f07c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-4xl); display: block; color: var(--mm-border); margin-bottom: var(--ma-space-4); } /* ======================================================================== 7. DOWNLOADS TABLE ======================================================================== */ .woocommerce-MyAccount-downloads table.shop_table { width: 100%; border-collapse: collapse; font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); } .woocommerce-MyAccount-downloads table.shop_table thead { background: var(--mm-surface-sunken); border-bottom: 2px solid var(--ma-border); } .woocommerce-MyAccount-downloads table.shop_table th { font-family: var(--mm-font-ui); font-size: var(--ma-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-ink-muted); padding: var(--ma-space-4) var(--ma-space-3); text-align: left; border: none; } .woocommerce-MyAccount-downloads table.shop_table td { padding: var(--ma-space-4) var(--ma-space-3); vertical-align: middle; color: var(--mm-ink); border-bottom: 1px solid var(--ma-border); } .woocommerce-MyAccount-downloads table.shop_table tbody tr:last-child td { border-bottom: none; } .woocommerce-MyAccount-downloads table.shop_table tbody tr:hover { background: var(--mm-surface-alt); } .woocommerce-MyAccount-downloads .download-file { font-weight: 500; color: var(--mm-ink); } .woocommerce-MyAccount-downloads .download-count, .woocommerce-MyAccount-downloads .download-expires { color: var(--mm-ink-muted); font-size: var(--ma-text-sm); } .woocommerce-MyAccount-downloads .button { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-4); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 500; border-radius: var(--ma-radius); border: 1px solid var(--mm-accent-pastel); background: var(--mm-accent-pastel); color: var(--mm-ink); text-decoration: none; transition: var(--ma-transition); } .woocommerce-MyAccount-downloads .button:hover { background: var(--mm-accent-pastel-hover); border-color: var(--mm-accent-pastel-hover); color: var(--mm-ink); transform: translateY(-1px); box-shadow: var(--ma-shadow-accent); } /* ======================================================================== 8. ADDRESSES — Elegant Address Cards ======================================================================== */ .woocommerce-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ma-space-6); margin-top: var(--ma-space-6); } .woocommerce-addresses .woocommerce-address { background: var(--mm-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-card-radius); padding: var(--ma-space-6); transition: var(--ma-transition); position: relative; overflow: hidden; } .woocommerce-addresses .woocommerce-address::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--mm-accent), var(--mm-accent-hover)); opacity: 0; transition: var(--ma-transition); } .woocommerce-addresses .woocommerce-address:hover { box-shadow: var(--ma-card-shadow-hover); border-color: var(--ma-border-strong); transform: translateY(-2px); } .woocommerce-addresses .woocommerce-address:hover::before { opacity: 1; } .woocommerce-addresses .woocommerce-address-title { font-family: var(--mm-font-display); font-size: var(--ma-text-lg); font-weight: 600; color: var(--mm-ink); margin: 0 0 var(--ma-space-3); display: flex; align-items: center; gap: var(--ma-space-2); } .woocommerce-addresses .woocommerce-address-title::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); color: var(--mm-accent); } .woocommerce-addresses .woocommerce-address-title.woocommerce-address-title--billing::before { content: '\f3c5'; /* credit-card */ } .woocommerce-addresses .woocommerce-address-title.woocommerce-address-title--shipping::before { content: '\f0d1'; /* box-open */ } .woocommerce-addresses address { font-style: normal; font-size: var(--ma-text-base); line-height: 1.7; color: var(--mm-ink-muted); margin: 0 0 var(--ma-space-4); } .woocommerce-addresses address br { display: block; content: ''; margin-bottom: var(--ma-space-1); } .woocommerce-addresses .woocommerce-address-edit { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-4); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 500; border-radius: var(--ma-radius); border: 1px solid var(--ma-border); background: var(--mm-surface); color: var(--mm-ink); text-decoration: none; transition: var(--ma-transition); } .woocommerce-addresses .woocommerce-address-edit:hover { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; text-decoration: none; } /* ======================================================================== 9. FORM FIELDS — Unified Input System Covers Account Details, Addresses (both share .woocommerce-MyAccount-content) plus Login / Register / Lost password, so every account form matches. ======================================================================== */ .woocommerce-EditAccountForm, .woocommerce-EditAccountForm fieldset { margin: 0; padding: 0; border: none; } .woocommerce-EditAccountForm .woocommerce-form-row, .woocommerce-address-fields .woocommerce-form-row { margin-bottom: var(--ma-space-5); } .woocommerce-EditAccountForm .woocommerce-form-row:last-of-type { margin-bottom: var(--ma-space-6); } /* Section titles inside forms — e.g. "Password change" / "Cambio de contraseña" */ .woocommerce-EditAccountForm fieldset { margin-top: var(--ma-space-8); } .woocommerce-EditAccountForm legend { width: 100%; font-family: var(--mm-font-display); font-size: var(--ma-text-xl); font-weight: 600; color: var(--mm-ink); letter-spacing: -0.01em; padding: 0 0 var(--ma-space-3); margin: 0 0 var(--ma-space-5); border-bottom: 1px solid var(--ma-border); } .woocommerce-MyAccount-content label, .woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-form-lost-password label, .woocommerce-ResetPassword label { display: block; font-family: var(--mm-font-ui); font-size: 13px; font-weight: 600; color: var(--ma-label-ink); margin-bottom: 6px; } .woocommerce-MyAccount-content label .required { color: var(--wc-red); margin-left: var(--ma-space-1); } .woocommerce-EditAccountForm .woocommerce-input-wrapper { position: relative; } .woocommerce-MyAccount-content .input-text, .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea, .woocommerce-form-login .input-text, .woocommerce-form-register .input-text, .woocommerce-form-lost-password .input-text, .woocommerce-ResetPassword .input-text { display: block; width: 100%; height: var(--ma-input-height); padding: 0 14px; font-family: var(--mm-font-ui); font-size: 14px; line-height: var(--ma-input-height); color: var(--ma-input-ink); background: #FFFFFF; border: 1px solid var(--ma-input-border); border-radius: 6px; transition: var(--ma-transition); box-sizing: border-box; } .woocommerce-MyAccount-content textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; } .woocommerce-MyAccount-content .input-text:focus, .woocommerce-MyAccount-content select:focus, .woocommerce-MyAccount-content textarea:focus, .woocommerce-form-login .input-text:focus, .woocommerce-form-register .input-text:focus, .woocommerce-form-lost-password .input-text:focus, .woocommerce-ResetPassword .input-text:focus { outline: none; border-color: var(--ma-input-focus); box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08); } .woocommerce-MyAccount-content .input-text::placeholder, .woocommerce-form-login .input-text::placeholder, .woocommerce-form-register .input-text::placeholder { color: var(--mm-ink-subtle); } .woocommerce-MyAccount-content .input-text:disabled, .woocommerce-MyAccount-content .input-text[readonly] { background: var(--mm-surface-sunken); color: var(--mm-ink-muted); cursor: not-allowed; } /* Password field with toggle */ .woocommerce-EditAccountForm .woocommerce-input-wrapper .input-text[type="password"] { padding-right: 48px; } /* Primary submit buttons — Account details, Addresses, Login, Register. !important guards against b2b-marketplace.css's global ".woocommerce button.button" rule, which can out-specificity a plain two-class selector. */ .woocommerce-EditAccountForm .button, .woocommerce-EditAccountForm button.button, .woocommerce-address-fields .button, .woocommerce-address-fields button.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ma-space-2); padding: 12px 24px; font-family: var(--mm-font-ui); font-size: 14px; font-weight: 600; border-radius: 6px !important; border: none !important; background: var(--ma-btn-bg) !important; color: #FFFFFF !important; cursor: pointer; transition: all 0.2s ease; margin-top: var(--ma-space-2); box-shadow: none !important; } .woocommerce-EditAccountForm .button:hover, .woocommerce-EditAccountForm button.button:hover, .woocommerce-address-fields .button:hover, .woocommerce-address-fields button.button:hover { background: var(--ma-btn-bg-hover) !important; color: #FFFFFF !important; } .woocommerce-EditAccountForm .button:focus, .woocommerce-EditAccountForm button.button:focus, .woocommerce-address-fields .button:focus, .woocommerce-address-fields button.button:focus { outline: none; box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.15); } /* Password strength meter */ .woocommerce-password-strength { margin-top: var(--ma-space-2); font-size: var(--ma-text-sm); font-weight: 500; } .woocommerce-password-strength.strong { color: #065F46; } .woocommerce-password-strength.short { color: #991B1B; } .woocommerce-password-strength.bad { color: #9A3412; } .woocommerce-password-strength.good { color: #92400E; } /* ======================================================================== 10. PAYMENT METHODS — Clean Card Display ======================================================================== */ .woocommerce-MyAccount-content .woocommerce-account-payment-methods { margin-top: var(--ma-space-6); } .woocommerce-MyAccount-content .woocommerce-account-payment-methods .wc_payment_method { display: flex; align-items: center; gap: var(--ma-space-4); padding: var(--ma-space-4) var(--ma-space-5); background: var(--mm-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-card-radius); margin-bottom: var(--ma-space-4); transition: var(--ma-transition); } .woocommerce-MyAccount-content .woocommerce-account-payment-methods .wc_payment_method:hover { border-color: var(--ma-border-strong); box-shadow: var(--ma-card-shadow-hover); } .woocommerce-MyAccount-content .woocommerce-account-payment-methods .wc_payment_method:last-child { margin-bottom: 0; } .woocommerce-MyAccount-content .payment_method_image { flex-shrink: 0; width: 60px; height: 38px; display: flex; align-items: center; justify-content: center; } .woocommerce-MyAccount-content .payment_method_image img { max-width: 100%; max-height: 100%; filter: grayscale(0.3); transition: var(--ma-transition); } .woocommerce-MyAccount-content .wc_payment_method:hover .payment_method_image img { filter: grayscale(0); } .woocommerce-MyAccount-content .payment_method_details { flex: 1; min-width: 0; } .woocommerce-MyAccount-content .payment_method_name { font-family: var(--mm-font-display); font-size: var(--ma-text-lg); font-weight: 600; color: var(--mm-ink); margin: 0 0 var(--ma-space-1); } .woocommerce-MyAccount-content .payment_method_type { font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); color: var(--mm-ink-muted); margin: 0; } .woocommerce-MyAccount-content .payment_method_actions { flex-shrink: 0; } .woocommerce-MyAccount-content .payment_method_actions .button { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-2) var(--ma-space-4); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 500; border-radius: var(--ma-radius); border: 1px solid var(--wc-red); background: transparent; color: var(--wc-red); text-decoration: none; transition: var(--ma-transition); } .woocommerce-MyAccount-content .payment_method_actions .button:hover { background: var(--wc-red); color: #fff; text-decoration: none; } /* Add payment method button */ .woocommerce-MyAccount-content .add_payment_method { margin-top: var(--ma-space-8); padding-top: var(--ma-space-8); border-top: 1px solid var(--ma-border); } .woocommerce-MyAccount-content .add_payment_method .button { display: inline-flex; align-items: center; gap: var(--ma-space-2); padding: var(--ma-space-3) var(--ma-space-6); font-family: var(--mm-font-ui); font-size: var(--ma-text-base); font-weight: 600; border-radius: var(--ma-radius); border: none; background: var(--mm-accent-pastel); color: var(--mm-ink); text-decoration: none; transition: var(--ma-transition); } .woocommerce-MyAccount-content .add_payment_method .button:hover { background: var(--mm-accent-pastel-hover); color: var(--mm-ink); transform: translateY(-1px); box-shadow: var(--ma-shadow-accent); } .woocommerce-MyAccount-content .add_payment_method .button::before { content: '\f067'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); } /* ======================================================================== 11. LOGIN / REGISTER LAYOUT — Faire-Style Card Grid ======================================================================== */ /* Balanced 2-column grid when registration is enabled. NOTE: WooCommerce's "col-1"/"col-2" classes collide with Bootstrap's grid utility classes of the same name (which set flex-basis: 8.33%/16.66%), which is why these columns used to collapse instead of sitting side by side. !important guards against that framework collision. */ body.woocommerce-account #customer_login.u-columns.col2-set { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--ma-space-6) !important; max-width: 900px !important; margin: var(--ma-space-6) auto !important; align-items: stretch !important; } body.woocommerce-account #customer_login .u-column1.col-1, body.woocommerce-account #customer_login .u-column2.col-2 { float: none !important; width: auto !important; max-width: 100% !important; flex: none !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-radius: 12px !important; padding: 32px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; } /* When nested in a column card, the form itself stays borderless */ #customer_login .woocommerce-form-login, #customer_login .woocommerce-form-register { max-width: none; margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; } /* Single-form view. functions.php always adds one of these two classes for logged-out visitors (login is the default), so exactly one card renders — a single centered column that no competing float/flex/grid rule from WooCommerce, Bootstrap or the Customizer snippet can stagger. */ body.woocommerce-account.show-login-only #customer_login.u-columns.col2-set, body.woocommerce-account.show-register-only #customer_login.u-columns.col2-set { display: block !important; width: 100% !important; max-width: 560px !important; margin: var(--ma-space-8) auto !important; padding: 0 !important; } body.woocommerce-account.show-login-only #customer_login .u-column2.col-2, body.woocommerce-account.show-register-only #customer_login .u-column1.col-1 { display: none !important; } /* The visible card fills that centered column */ body.woocommerce-account.show-login-only #customer_login .u-column1.col-1, body.woocommerce-account.show-register-only #customer_login .u-column2.col-2 { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 36px 40px !important; } /* ---- Card polish ----------------------------------------------------- The "Acceder" / "Registrarse"

is a SIBLING of the form, not inside it, so every form-scoped heading rule missed it — it was rendering as a small unstyled default heading. */ #customer_login .u-column1 > h2, #customer_login .u-column2 > h2 { font-family: var(--mm-font-display); font-size: var(--ma-text-2xl); font-weight: 600; color: var(--mm-ink); text-align: center; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var(--ma-space-6); padding-bottom: var(--ma-space-4); border-bottom: 1px solid var(--ma-border); } /* "Recuérdame" */ #customer_login .woocommerce-form-login__rememberme { margin-bottom: var(--ma-space-5); } #customer_login .woocommerce-form-login__rememberme input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--ma-gray-900); cursor: pointer; } #customer_login .woocommerce-form-login__rememberme span { font-size: 14px; color: var(--mm-ink-muted); } /* Taller submit so it anchors the card */ #customer_login .woocommerce-form-login .button, #customer_login .woocommerce-form-register .button { padding: 14px 24px !important; letter-spacing: 0.3px; } /* "¿Olvidaste la contraseña?" — a secondary action, so quiet grey and centered rather than a loud red link pinned to the right edge. */ #customer_login .lost_password { text-align: center; margin: var(--ma-space-4) 0 0; font-size: 13px; } #customer_login .lost_password a { color: var(--mm-ink-muted) !important; text-decoration: underline; text-underline-offset: 3px; transition: var(--ma-transition); } #customer_login .lost_password a:hover { color: var(--mm-accent) !important; } /* "¿No tienes cuenta? Registrarse" / "¿Ya tienes cuenta? Iniciar sesión" */ .account-view-toggle { margin: var(--ma-space-5) 0 0; padding-top: var(--ma-space-4); border-top: 1px solid var(--ma-border); font-family: var(--mm-font-ui); font-size: 14px; color: var(--mm-ink-muted); text-align: center; } .account-view-toggle a { color: var(--mm-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: var(--ma-transition); } .account-view-toggle a:hover { color: var(--mm-accent); } /* Standalone card — lost password, reset password, or login with registration disabled */ .woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-lost-password, .woocommerce-ResetPassword { max-width: 480px; margin: var(--ma-space-10) auto; padding: 32px; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .woocommerce-form-login h2, .woocommerce-form-register h2, .woocommerce-form-lost-password h2, .woocommerce-ResetPassword h2 { font-size: var(--ma-text-3xl); font-weight: 600; color: var(--mm-ink); text-align: center; margin: 0 0 var(--ma-space-3); letter-spacing: -0.02em; } /* Intro blurb (e.g. the lost-password instructions). Must exclude field rows: on the login and register forms the first

IS the first input's row, so an unqualified :first-of-type centered and muted that field's label and pushed a 32px gap under it. */ .woocommerce-form-login > p:first-of-type:not(.woocommerce-form-row):not(.form-row), .woocommerce-form-register > p:first-of-type:not(.woocommerce-form-row):not(.form-row), .woocommerce-form-lost-password > p:first-of-type:not(.woocommerce-form-row):not(.form-row) { text-align: center; color: var(--mm-ink-muted); font-size: var(--ma-text-base); line-height: 1.6; margin-bottom: var(--ma-space-8); } .woocommerce-form-login .woocommerce-form-row, .woocommerce-form-register .woocommerce-form-row, .woocommerce-form-lost-password .woocommerce-form-row { margin-bottom: var(--ma-space-5); } .woocommerce-form-login .button, .woocommerce-form-register .button, .woocommerce-form-lost-password .button, .woocommerce-ResetPassword .button { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--ma-space-2); padding: 12px 24px; font-family: var(--mm-font-ui); font-size: 14px; font-weight: 600; border-radius: 6px !important; border: none !important; background: var(--ma-btn-bg) !important; color: #FFFFFF !important; cursor: pointer; transition: all 0.2s ease; margin-top: var(--ma-space-2); box-shadow: none !important; } .woocommerce-form-login .button:hover, .woocommerce-form-register .button:hover, .woocommerce-form-lost-password .button:hover, .woocommerce-ResetPassword .button:hover { background: var(--ma-btn-bg-hover) !important; color: #FFFFFF !important; } /* "Soy un cliente" / "Soy un vendedor" — Dokan vendor/customer registration */ .woocommerce-form-register .user-role.vendor-customer-registration { display: flex; flex-direction: column; gap: var(--ma-space-3); margin: var(--ma-space-2) 0 var(--ma-space-6); } .woocommerce-form-register .user-role.vendor-customer-registration br { display: none; } .woocommerce-form-register .user-role.vendor-customer-registration label.radio { display: flex; align-items: center; gap: var(--ma-space-3); padding: 12px 16px; margin: 0; border: 1px solid var(--ma-border); border-radius: 6px; font-family: var(--mm-font-ui); font-size: 14px; font-weight: 500; color: var(--mm-ink); cursor: pointer; transition: var(--ma-transition); } .woocommerce-form-register .user-role.vendor-customer-registration label.radio:hover { border-color: var(--ma-border-strong); background: var(--mm-surface-sunken); } .woocommerce-form-register .user-role.vendor-customer-registration input[type="radio"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--ma-gray-900); cursor: pointer; } .woocommerce-form-login .woocommerce-form-login__rememberme, .woocommerce-form-register .woocommerce-form-register__rememberme { display: flex; align-items: center; gap: var(--ma-space-2); margin-bottom: var(--ma-space-5); } .woocommerce-form-login .woocommerce-form-login__rememberme label, .woocommerce-form-register .woocommerce-form-register__rememberme label { margin: 0; font-weight: 400; font-size: var(--ma-text-sm); color: var(--mm-ink-muted); cursor: pointer; } .woocommerce-form-login .lost_password, .woocommerce-form-register .lost_password { display: block; text-align: right; margin-top: var(--ma-space-3); font-size: var(--ma-text-sm); color: var(--mm-accent); text-decoration: none; transition: var(--ma-transition); } .woocommerce-form-login .lost_password:hover, .woocommerce-form-register .lost_password:hover { color: var(--mm-accent-hover); text-decoration: underline; } /* ======================================================================== 12. NOTICES & MESSAGES — Elegant Feedback ======================================================================== */ .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-error, .woocommerce-MyAccount-content .woocommerce-note { padding: var(--ma-space-4) var(--ma-space-5); border-radius: var(--ma-radius); margin-bottom: var(--ma-space-6); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); line-height: 1.6; display: flex; align-items: flex-start; gap: var(--ma-space-3); border: none; box-shadow: var(--ma-card-shadow); } .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-info { background: #EFF6FF; color: #1E40AF; border-left: 3px solid #3B82F6; } .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-info::before { content: '\f05a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); flex-shrink: 0; margin-top: 2px; } .woocommerce-MyAccount-content .woocommerce-error { background: #FEF2F2; color: #991B1B; border-left: 3px solid #EF4444; } .woocommerce-MyAccount-content .woocommerce-error::before { content: '\f06a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); flex-shrink: 0; margin-top: 2px; } .woocommerce-MyAccount-content .woocommerce-note { background: #F5F5F4; color: #44403C; border-left: 3px solid #A8A29E; } .woocommerce-MyAccount-content .woocommerce-note::before { content: '\f0e0'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); flex-shrink: 0; margin-top: 2px; } /* -- Notices printed *above* the account content ------------------------ * wc_add_notice()/wc_print_notices() (the "pendiente de aprobación" message * from mercado_mayor_block_pending_vendor_dashboard(), and any other * WooCommerce notice on this page — password changed, address saved, a * login error) lands in `.woocommerce-notices-wrapper`, which sits *before* * `.woocommerce-MyAccount-content` even opens — a sibling, not a * descendant. Every rule above this point never reached it, so it fell back * to WooCommerce core's own layout: `padding-left: 3.5em` reserving room * for an icon core absolutely-positions at `left: 1.5em`. That still lines * up in principle, but is fragile — anything that nudges the notice's own * padding (a plugin, a future template change) throws the icon straight * onto the text with no safety net, which is exactly what "el mensaje se ve * obstruido" was: the icon sitting on top of "Tu cuenta...". The flex * layout above never has that failure mode (icon and text are ordinary * flex siblings with an explicit gap, not one absolutely-positioned over * the other), so the fix is reusing it here rather than tuning the * padding math. Selectors mirror §12 exactly, just rooted at * `.woocommerce-notices-wrapper` instead of `.woocommerce-MyAccount-content`. */ .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-note { padding: var(--ma-space-4) var(--ma-space-5) !important; border-radius: var(--ma-radius) !important; margin-bottom: var(--ma-space-6) !important; font-family: var(--mm-font-ui) !important; font-size: var(--ma-text-sm) !important; line-height: 1.6 !important; display: flex !important; align-items: flex-start !important; gap: var(--ma-space-3); border: none !important; box-shadow: var(--ma-card-shadow); } .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info { background: #EFF6FF !important; color: #1E40AF !important; border-left: 3px solid #3B82F6 !important; } .woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-info::before { content: '\f05a' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-size: var(--ma-text-base); position: static !important; /* cancels core's `position: absolute; left: 1.5em` */ flex-shrink: 0; margin-top: 2px; } .woocommerce-notices-wrapper .woocommerce-error { background: #FEF2F2 !important; color: #991B1B !important; border-left: 3px solid #EF4444 !important; } .woocommerce-notices-wrapper .woocommerce-error::before { content: '\f06a' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-size: var(--ma-text-base); position: static !important; flex-shrink: 0; margin-top: 2px; } .woocommerce-notices-wrapper .woocommerce-note { background: #F5F5F4 !important; color: #44403C !important; border-left: 3px solid #A8A29E !important; } .woocommerce-notices-wrapper .woocommerce-note::before { content: '\f0e0' !important; font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; font-size: var(--ma-text-base); position: static !important; flex-shrink: 0; margin-top: 2px; } /* -- Pending-vendor dashboard notice -------------------------------------- * mercado_mayor_pending_vendor_dashboard_notice() in functions.php — a * persistent card (not a one-off flash notice) shown right on the My * Account dashboard for a vendor whose "Vender" capability isn't enabled * yet, in the exact spot Dokan's own (now-removed, for this user) "Ir al * escritorio del vendedor" button used to sit. Amber matches the "Pendiente" * status pill used everywhere else on the site (see §7/order status, * status-pending) rather than the blue used for a plain info notice, since * this is specifically a waiting/in-review state. * * !important throughout: this

is also a direct child of * .woocommerce-MyAccount-content, which §5's "Unified Card System" above * restyles into a plain white bordered card (background, border, * border-radius, box-shadow) — appropriate for an orders/addresses section, * but it would flatten this notice's amber identity back to a neutral card. * The override keeps this one intentionally distinct, same reasoning as the * .woocommerce-notices-wrapper block further down. */ .mm-vendor-pending-notice { display: flex !important; align-items: flex-start; gap: var(--ma-space-3); padding: var(--ma-space-4) var(--ma-space-5) !important; margin-bottom: var(--ma-space-6) !important; background: #FEF3C7 !important; border: none !important; border-left: 3px solid #F59E0B !important; border-radius: var(--ma-radius) !important; box-shadow: var(--ma-card-shadow); } .mm-vendor-pending-notice__icon { flex-shrink: 0; margin-top: 2px; } .mm-vendor-pending-notice__icon::before { content: '\f017'; /* fa-clock */ font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); color: #B45309; } .mm-vendor-pending-notice__title { margin: 0 0 2px !important; font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 700; color: #92400E; } .mm-vendor-pending-notice__text { margin: 0 !important; font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); line-height: 1.6; color: #92400E; } /* ======================================================================== 13. PAGINATION — Clean Pagination ======================================================================== */ .woocommerce-MyAccount-content .woocommerce-pagination { display: flex; justify-content: center; align-items: center; gap: var(--ma-space-2); margin-top: var(--ma-space-8); padding-top: var(--ma-space-6); border-top: 1px solid var(--ma-border); } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--ma-space-4); font-family: var(--mm-font-ui); font-size: var(--ma-text-sm); font-weight: 500; color: var(--mm-ink); background: var(--mm-surface); border: 1px solid var(--ma-border); border-radius: var(--ma-radius); text-decoration: none; transition: var(--ma-transition); } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers:hover { background: var(--mm-surface-sunken); border-color: var(--ma-border-strong); color: var(--mm-ink); text-decoration: none; } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.current { background: var(--mm-ink); border-color: var(--mm-ink); color: var(--mm-surface); } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.next, .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.prev { padding: 0 var(--ma-space-4); } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.next::after, .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.prev::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: var(--ma-text-base); } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.prev::before { content: '\f053'; } .woocommerce-MyAccount-content .woocommerce-pagination .page-numbers.next::after { content: '\f054'; } /* ======================================================================== 14. RESPONSIVE — Mobile First Approach ======================================================================== */ /* Tablet */ @media (max-width: 1024px) { .woocommerce-MyAccount { grid-template-columns: 260px 1fr; gap: var(--ma-space-6); padding: var(--ma-space-6) var(--ma-space-4); } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-MyAccount-content .woocommerce-addresses, .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads, .woocommerce-MyAccount-content .woocommerce-orders { padding: var(--ma-space-6); } .woocommerce-MyAccount-content > .woocommerce-account-title, .woocommerce-MyAccount-content > h1, .woocommerce-MyAccount-content > h2:first-child { font-size: var(--ma-text-3xl); } } /* Mobile */ @media (max-width: 768px) { .woocommerce-MyAccount { display: block; padding: var(--ma-space-4); } .woocommerce-MyAccount-navigation { position: static; max-height: none; overflow: visible; margin-bottom: var(--ma-space-6); } .woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: var(--ma-space-2); } .woocommerce-MyAccount-navigation li { width: 100%; } .woocommerce-MyAccount-navigation a { justify-content: flex-start; padding: 14px var(--ma-space-4); font-size: 14px; min-height: 44px; } /* Login / Register — single column stack on mobile, kept tight so the two cards read as one flow instead of two separated blocks */ body.woocommerce-account #customer_login.u-columns.col2-set { grid-template-columns: 1fr !important; gap: var(--ma-space-4) !important; margin: var(--ma-space-4) auto !important; } body.woocommerce-account #customer_login .u-column1.col-1, body.woocommerce-account #customer_login .u-column2.col-2, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-lost-password, .woocommerce-ResetPassword { padding: var(--ma-space-6) !important; } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-MyAccount-content .woocommerce-addresses, .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads, .woocommerce-MyAccount-content .woocommerce-orders { padding: var(--ma-space-5); margin-bottom: var(--ma-space-4); } .woocommerce-MyAccount-content > .woocommerce-account-title, .woocommerce-MyAccount-content > h1, .woocommerce-MyAccount-content > h2:first-child { font-size: var(--ma-text-2xl); margin-bottom: var(--ma-space-2); } .woocommerce-MyAccount-content > .woocommerce-account-title + p, .woocommerce-MyAccount-content > h1 + p, .woocommerce-MyAccount-content > h2:first-child + p { font-size: var(--ma-text-base); margin-bottom: var(--ma-space-6); } /* Tables - horizontal scroll on mobile */ .woocommerce-orders table.shop_table, .woocommerce-MyAccount-downloads table.shop_table { display: block; overflow-x: auto; white-space: nowrap; margin: calc(var(--ma-space-5) * -1) calc(var(--ma-space-5) * -1); padding: var(--ma-space-5); } .woocommerce-orders table.shop_table thead, .woocommerce-MyAccount-downloads table.shop_table thead { display: none; } .woocommerce-orders table.shop_table tbody, .woocommerce-orders table.shop_table tr, .woocommerce-orders table.shop_table td, .woocommerce-MyAccount-downloads table.shop_table tbody, .woocommerce-MyAccount-downloads table.shop_table tr, .woocommerce-MyAccount-downloads table.shop_table td { display: block; width: 100%; } .woocommerce-orders table.shop_table tr, .woocommerce-MyAccount-downloads table.shop_table tr { border-bottom: 2px solid var(--ma-border); padding: var(--ma-space-4) 0; margin: 0; } .woocommerce-orders table.shop_table tr:last-child, .woocommerce-MyAccount-downloads table.shop_table tr:last-child { border-bottom: none; } .woocommerce-orders table.shop_table td, .woocommerce-MyAccount-downloads table.shop_table td { padding: var(--ma-space-2) 0; border: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; } .woocommerce-orders table.shop_table td::before, .woocommerce-MyAccount-downloads table.shop_table td::before { content: attr(data-title); font-family: var(--mm-font-ui); font-size: var(--ma-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-ink-muted); flex-shrink: 0; margin-right: var(--ma-space-4); } .woocommerce-orders table.shop_table .order-actions, .woocommerce-MyAccount-downloads table.shop_table .download-actions { justify-content: flex-end; } .woocommerce-orders table.shop_table .button, .woocommerce-MyAccount-downloads table.shop_table .button { width: 100%; justify-content: center; } /* Addresses stack on mobile */ .woocommerce-addresses { grid-template-columns: 1fr; } /* Payment methods stack */ .woocommerce-MyAccount-content .woocommerce-account-payment-methods .wc_payment_method { flex-direction: column; align-items: flex-start; gap: var(--ma-space-3); } .woocommerce-MyAccount-content .payment_method_actions { width: 100%; } .woocommerce-MyAccount-content .payment_method_actions .button { width: 100%; justify-content: center; } } /* Small mobile */ @media (max-width: 480px) { .woocommerce-MyAccount { padding: var(--ma-space-3); } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-MyAccount-content .woocommerce-addresses, .woocommerce-MyAccount-content .woocommerce-MyAccount-downloads, .woocommerce-MyAccount-content .woocommerce-orders { padding: var(--ma-space-4); } .woocommerce-MyAccount-content > .woocommerce-account-title, .woocommerce-MyAccount-content > h1, .woocommerce-MyAccount-content > h2:first-child { font-size: var(--ma-text-xl); } .woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-lost-password, .woocommerce-ResetPassword { padding: var(--ma-space-6) var(--ma-space-4); } } /* ======================================================================== 15. PRINT STYLES ======================================================================== */ @media print { .woocommerce-MyAccount-navigation, .woocommerce-orders table.shop_table .order-actions, .woocommerce-MyAccount-downloads table.shop_table .download-actions, .woocommerce-addresses .woocommerce-address-edit, .woocommerce-EditAccountForm .button, .add_payment_method .button, .woocommerce-pagination, .button { display: none !important; } .woocommerce-MyAccount { display: block; padding: 0; } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; } .woocommerce-orders table.shop_table, .woocommerce-MyAccount-downloads table.shop_table { display: table; overflow: visible; margin: 0; padding: 0; } .woocommerce-orders table.shop_table thead, .woocommerce-MyAccount-downloads table.shop_table thead { display: table-header-group; } .woocommerce-orders table.shop_table tbody, .woocommerce-orders table.shop_table tr, .woocommerce-orders table.shop_table td, .woocommerce-MyAccount-downloads table.shop_table tbody, .woocommerce-MyAccount-downloads table.shop_table tr, .woocommerce-MyAccount-downloads table.shop_table td { display: table-row; } .woocommerce-orders table.shop_table td::before, .woocommerce-MyAccount-downloads table.shop_table td::before { display: none; } } /* ======================================================================== 16. ACCESSIBILITY — Focus States & Reduced Motion ======================================================================== */ @media (prefers-reduced-motion: reduce) { .woocommerce-MyAccount-navigation li, .woocommerce-MyAccount-navigation a, .woocommerce-MyAccount-content > div, .woocommerce-orders table.shop_table tbody tr, .woocommerce-MyAccount-downloads table.shop_table tbody tr, .woocommerce-addresses .woocommerce-address, .woocommerce-MyAccount-content .woocommerce-account-payment-methods .wc_payment_method, .button, .input-text, select { transition: none !important; } } /* Focus visible for keyboard navigation */ .woocommerce-MyAccount-navigation a:focus-visible, .woocommerce-orders table.shop_table .button:focus-visible, .woocommerce-MyAccount-downloads .button:focus-visible, .woocommerce-addresses .woocommerce-address-edit:focus-visible, .woocommerce-EditAccountForm .input-text:focus-visible, .woocommerce-EditAccountForm .button:focus-visible, .woocommerce-form-login .input-text:focus-visible, .woocommerce-form-login .button:focus-visible, .woocommerce-form-register .input-text:focus-visible, .woocommerce-form-register .button:focus-visible, .add_payment_method .button:focus-visible, .woocommerce-pagination .page-numbers:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { :root { --ma-border: #000; --ma-border-strong: #000; --mm-accent: #000; --mm-accent-hover: #333; } .woocommerce-MyAccount-navigation li.is-active { background: #000; } .woocommerce-MyAccount-navigation li.is-active a { color: #fff; } .woocommerce-orders table.shop_table .order-status { border: 2px solid currentColor; } } /* ======================================================================== 17. DARK MODE SUPPORT (if theme supports it) ======================================================================== */ @media (prefers-color-scheme: dark) { :root { --mm-surface: #1E1E1E; --mm-surface-alt: #262626; --mm-surface-sunken: #2D2D2D; --mm-border: #3D3D3D; --mm-border-strong: #525252; --mm-ink: #FAFAFA; --mm-ink-muted: #A3A3A3; --mm-ink-subtle: #737373; --mm-accent-soft: #450A0A; /* Nav pills stay one step lighter than the page surface in dark mode */ --ma-nav-bg: #2A2A2A; --ma-nav-border: #3D3D3D; --ma-nav-ink: #F5F5F5; --ma-nav-active-bg: var(--mm-accent); --ma-nav-active-border: var(--mm-accent); } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-addresses .woocommerce-address, .woocommerce-orders table.shop_table thead, .woocommerce-MyAccount-downloads table.shop_table thead, #customer_login .u-column1.col-1, #customer_login .u-column2.col-2, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-lost-password, .woocommerce-ResetPassword { background: var(--mm-surface); border-color: var(--ma-border); } .woocommerce-orders table.shop_table tbody tr:hover, .woocommerce-MyAccount-downloads table.shop_table tbody tr:hover { background: var(--mm-surface-alt); } .woocommerce-MyAccount-content .input-text, .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea, .woocommerce-form-login .input-text, .woocommerce-form-register .input-text, .woocommerce-form-lost-password .input-text, .woocommerce-ResetPassword .input-text { background: var(--mm-surface); border-color: var(--ma-border); color: var(--mm-ink); } .woocommerce-MyAccount-content .input-text:disabled, .woocommerce-MyAccount-content .input-text[readonly] { background: var(--mm-surface-sunken); } .woocommerce-form-register .user-role.vendor-customer-registration label.radio { border-color: var(--ma-border); color: var(--mm-ink); } .woocommerce-form-register .user-role.vendor-customer-registration label.radio:hover { background: var(--mm-surface-alt); border-color: var(--ma-border-strong); } .woocommerce-orders table.shop_table .button, .woocommerce-addresses .woocommerce-address-edit { background: var(--mm-surface); border-color: var(--ma-border); color: var(--mm-ink); } .woocommerce-orders table.shop_table .button:hover, .woocommerce-addresses .woocommerce-address-edit:hover { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; } } /* ======================================================================== 18. RTL SUPPORT ======================================================================== */ .rtl .woocommerce-MyAccount-navigation a { text-align: right; } .rtl .woocommerce-orders table.shop_table th, .rtl .woocommerce-orders table.shop_table td, .rtl .woocommerce-MyAccount-downloads table.shop_table th, .rtl .woocommerce-MyAccount-downloads table.shop_table td { text-align: right; } .rtl .woocommerce-addresses address { text-align: right; } .rtl .woocommerce-form-login .lost_password, .rtl .woocommerce-form-register .lost_password { text-align: left; } .rtl .woocommerce-pagination .page-numbers.prev::before { content: '\f054'; } .rtl .woocommerce-pagination .page-numbers.next::after { content: '\f053'; } /* ======================================================================== 19. ANIMATIONS — Subtle Entrance Effects ======================================================================== */ @keyframes ma-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-addresses .woocommerce-address, .woocommerce-orders table.shop_table tbody tr, .woocommerce-MyAccount-downloads table.shop_table tbody tr { animation: ma-fade-in-up 0.4s var(--mm-ease) forwards; opacity: 0; } .woocommerce-MyAccount-content > div:nth-child(1) { animation-delay: 0.05s; } .woocommerce-MyAccount-content > div:nth-child(2) { animation-delay: 0.1s; } .woocommerce-MyAccount-content > div:nth-child(3) { animation-delay: 0.15s; } .woocommerce-MyAccount-content > div:nth-child(4) { animation-delay: 0.2s; } .woocommerce-MyAccount-content > div:nth-child(5) { animation-delay: 0.25s; } .woocommerce-MyAccount-content > div:nth-child(6) { animation-delay: 0.3s; } .woocommerce-addresses .woocommerce-address:nth-child(1) { animation-delay: 0.05s; } .woocommerce-addresses .woocommerce-address:nth-child(2) { animation-delay: 0.1s; } .woocommerce-orders table.shop_table tbody tr:nth-child(1) { animation-delay: 0.05s; } .woocommerce-orders table.shop_table tbody tr:nth-child(2) { animation-delay: 0.1s; } .woocommerce-orders table.shop_table tbody tr:nth-child(3) { animation-delay: 0.15s; } .woocommerce-orders table.shop_table tbody tr:nth-child(4) { animation-delay: 0.2s; } .woocommerce-orders table.shop_table tbody tr:nth-child(5) { animation-delay: 0.25s; } @media (prefers-reduced-motion: reduce) { .woocommerce-MyAccount-content > div, .woocommerce-MyAccount-content section, .woocommerce-addresses .woocommerce-address, .woocommerce-orders table.shop_table tbody tr, .woocommerce-MyAccount-downloads table.shop_table tbody tr { animation: none; opacity: 1; } }