/** * Custom WooCommerce My Account Page Styles for MyAayurveda * - Matches the theme's core visual design language: * Forest Green (#08550f), Clean Cards, Rounded Borders, Elegant Typography, * Tactile Pill Buttons, and Refined Inputs with Focus Rings. * - STRICTLY SCOPED to My Account container & widget only (.elementor-widget-woocommerce-my-account, * .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .woocommerce-EditAccountForm, #customer_login) * to NEVER conflict with Header, Footer, Search bars, or other components. * - Fully Responsive across Desktop, Tablet, and Mobile. */ /* ================= 1. CONTAINER & GENERAL WRAPPERS ================= */ .elementor-element.elementor-element-aeae862 > .e-con-inner { width: 100% !important; max-width: 1312px !important; margin: 0 auto !important; box-sizing: border-box !important; } /* My Account Flexbox 2-Column Layout (Logged-in view) */ .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce:has(.woocommerce-MyAccount-navigation), .elementor-widget-woocommerce-my-account .woocommerce:has(.woocommerce-MyAccount-navigation), .woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: flex !important; flex-direction: row !important; gap: 32px !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; } /* Clear legacy Elementor floats */ .elementor-widget-woocommerce-my-account .woocommerce::before, .elementor-widget-woocommerce-my-account .woocommerce::after, .woocommerce-account .entry-content > .woocommerce::before, .woocommerce-account .entry-content > .woocommerce::after { content: none !important; display: none !important; } /* ================= 2. NAVIGATION SIDEBAR ================= */ .elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 280px !important; width: 280px !important; min-width: 260px !important; max-width: 320px !important; float: none !important; background: #ffffff !important; border: 1px solid #eef0f2 !important; border-radius: 16px !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03) !important; padding: 16px !important; box-sizing: border-box !important; margin: 0 !important; } /* Navigation List */ .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .woocommerce-MyAccount-navigation ul li { list-style: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; position: relative !important; } /* Remove Elementor's legacy divider line */ .woocommerce-MyAccount-navigation ul li::after { content: none !important; display: none !important; } /* Navigation Links */ .woocommerce-MyAccount-navigation ul li a, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 13px 18px !important; border-radius: 12px !important; font-family: var(--font-primary, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important; font-size: 15px !important; font-weight: 500 !important; color: #4b5563 !important; text-decoration: none !important; background-color: transparent !important; border: 1px solid transparent !important; box-sizing: border-box !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Icons before navigation links */ .woocommerce-MyAccount-navigation ul li a::before { content: "" !important; display: inline-block !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.75 !important; transition: opacity 0.2s, filter 0.2s !important; } /* Specific SVG Icons for each tab */ /* Dashboard */ .woocommerce-MyAccount-navigation-link--dashboard a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9'%3E%3C/rect%3E%3Crect x='14' y='3' width='7' height='5'%3E%3C/rect%3E%3Crect x='14' y='12' width='7' height='9'%3E%3C/rect%3E%3Crect x='3' y='16' width='7' height='5'%3E%3C/rect%3E%3C/svg%3E") !important; } /* Orders */ .woocommerce-MyAccount-navigation-link--orders a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E") !important; } /* Downloads (Hidden per request) */ .woocommerce-MyAccount-navigation-link--downloads, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-navigation-link--downloads { display: none !important; } /* Addresses */ .woocommerce-MyAccount-navigation-link--edit-address a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E") !important; } /* Account Details */ .woocommerce-MyAccount-navigation-link--edit-account a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' 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") !important; } /* Logout */ .woocommerce-MyAccount-navigation-link--customer-logout a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' 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") !important; } /* Hover State */ .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover { background-color: #f0fdf4 !important; color: #08550f !important; transform: translateX(3px) !important; } .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover::before { opacity: 1 !important; filter: invert(24%) sepia(85%) saturate(1450%) hue-rotate(95deg) brightness(95%) contrast(98%) !important; } /* Active State (Rich Forest Green Pill) */ .woocommerce-MyAccount-navigation ul li.is-active a, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a { background-color: #08550f !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(8, 85, 15, 0.25) !important; } .woocommerce-MyAccount-navigation ul li.is-active a::before { opacity: 1 !important; filter: brightness(0) invert(1) !important; } /* Customer Logout Distinct Styling */ .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid #f1f5f9 !important; margin-top: 8px !important; padding-top: 10px !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #64748b !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background-color: #fef2f2 !important; color: #dc2626 !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before { filter: none !important; opacity: 1 !important; } /* ================= 3. CONTENT AREA CARD ================= */ .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; float: none !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Content Card Wrapper */ .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content-wrapper, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content-wrapper, .woocommerce-account .woocommerce-MyAccount-content { background: #ffffff !important; border: 1px solid #eef0f2 !important; border-radius: 16px !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03) !important; padding: 36px 40px !important; box-sizing: border-box !important; } .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content-wrapper { /* Avoid nested double-card padding */ border: none !important; box-shadow: none !important; } /* General Typography inside Content */ .woocommerce-MyAccount-content p { font-size: 15px; line-height: 1.6; color: #374151; margin-bottom: 20px; } .woocommerce-MyAccount-content a { color: #08550f !important; font-weight: 600; text-decoration: none; transition: color 0.15s; } .woocommerce-MyAccount-content a:hover { color: #06400b !important; text-decoration: underline; } /* ================= 4. NOTICES (SCOPED TO MY ACCOUNT & FIX BROKEN ICONS) ================= */ .woocommerce-MyAccount-content .woocommerce-notices-wrapper, .elementor-widget-woocommerce-my-account .woocommerce-notices-wrapper { width: 100% !important; margin-bottom: 24px !important; } /* Notice Container Styling with Flex Row */ .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-error, .elementor-widget-woocommerce-my-account .woocommerce-info, .elementor-widget-woocommerce-my-account .woocommerce-message, .elementor-widget-woocommerce-my-account .woocommerce-error { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 14px !important; border-radius: 12px !important; padding: 14px 20px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.5 !important; margin: 0 0 20px 0 !important; box-sizing: border-box !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; } /* Notice Icons (Kill broken font glyphs) */ .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-error::before, .elementor-widget-woocommerce-my-account .woocommerce-info::before, .elementor-widget-woocommerce-my-account .woocommerce-message::before, .elementor-widget-woocommerce-my-account .woocommerce-error::before { font-family: inherit !important; content: "" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; position: static !important; flex-shrink: 0 !important; margin: 0 !important; order: -1 !important; } .woocommerce-MyAccount-content .woocommerce-info::after, .woocommerce-MyAccount-content .woocommerce-message::after, .woocommerce-MyAccount-content .woocommerce-error::after, .elementor-widget-woocommerce-my-account .woocommerce-info::after, .elementor-widget-woocommerce-my-account .woocommerce-message::after, .elementor-widget-woocommerce-my-account .woocommerce-error::after { content: none !important; display: none !important; } /* Info Notice (e.g. Empty Orders "No order has been made yet.") */ .woocommerce-MyAccount-content .woocommerce-info, .elementor-widget-woocommerce-my-account .woocommerce-info { background-color: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-left: 4px solid #08550f !important; color: #1e293b !important; } .woocommerce-MyAccount-content .woocommerce-info::before, .elementor-widget-woocommerce-my-account .woocommerce-info::before { background-color: #08550f !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important; } /* Success Notice */ .woocommerce-MyAccount-content .woocommerce-message, .elementor-widget-woocommerce-my-account .woocommerce-message { background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-left: 4px solid #16a34a !important; color: #166534 !important; } .woocommerce-MyAccount-content .woocommerce-message::before, .elementor-widget-woocommerce-my-account .woocommerce-message::before { background-color: #16a34a !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; } /* Error Notice */ .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-MyAccount-content .woocommerce-error, .elementor-widget-woocommerce-my-account .woocommerce-error, ul.woocommerce-error { background-color: #fef2f2 !important; border: 1px solid #fecaca !important; border-left: 4px solid #ef4444 !important; color: #991b1b !important; list-style: none !important; padding: 14px 18px !important; border-radius: 12px !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08) !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 20px 0 !important; text-align: left !important; } .woocommerce-notices-wrapper .woocommerce-error::before, .woocommerce-MyAccount-content .woocommerce-error::before, .elementor-widget-woocommerce-my-account .woocommerce-error::before, ul.woocommerce-error::before { content: "" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; min-width: 20px !important; border-radius: 50% !important; background-color: #ef4444 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 10px 10px !important; flex-shrink: 0 !important; margin: 2px 0 0 0 !important; order: -1 !important; position: static !important; } .woocommerce-notices-wrapper ul.woocommerce-error, .elementor-widget-woocommerce-my-account ul.woocommerce-error, ul.woocommerce-error { list-style: none !important; margin-left: 0 !important; padding-left: 14px !important; } .woocommerce-notices-wrapper ul.woocommerce-error li, .elementor-widget-woocommerce-my-account ul.woocommerce-error li, .woocommerce-error li, ul.woocommerce-error li { list-style: none !important; padding: 0 !important; margin: 0 !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; line-height: 1.5 !important; color: #991b1b !important; flex: 1 1 auto !important; text-align: left !important; } .woocommerce-notices-wrapper ul.woocommerce-error li::before, .woocommerce-notices-wrapper ul.woocommerce-error li::after, ul.woocommerce-error li::before, ul.woocommerce-error li::after { content: none !important; display: none !important; } .woocommerce-error strong, ul.woocommerce-error strong { color: #7f1d1d !important; font-weight: 700 !important; } .woocommerce-error a, ul.woocommerce-error a { color: #dc2626 !important; font-weight: 600 !important; text-decoration: underline !important; margin-left: 4px !important; transition: color 0.15s ease !important; } .woocommerce-error a:hover, ul.woocommerce-error a:hover { color: #991b1b !important; text-decoration: underline !important; } /* Notice Action Buttons (Always cleanly on the right!) */ .woocommerce-MyAccount-content .woocommerce-info a.button, .woocommerce-MyAccount-content .woocommerce-message a.button, .elementor-widget-woocommerce-my-account .woocommerce-info a.button, .elementor-widget-woocommerce-my-account .woocommerce-message a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #08550f !important; color: #ffffff !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-radius: 30px !important; padding: 10px 22px !important; border: none !important; cursor: pointer !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(8, 85, 15, 0.22) !important; box-sizing: border-box !important; transition: all 0.2s ease !important; order: 99 !important; margin-left: auto !important; margin-right: 0 !important; float: none !important; white-space: nowrap !important; } .woocommerce-MyAccount-content .woocommerce-info a.button:hover, .woocommerce-MyAccount-content .woocommerce-message a.button:hover, .elementor-widget-woocommerce-my-account .woocommerce-info a.button:hover, .elementor-widget-woocommerce-my-account .woocommerce-message a.button:hover { background-color: #06400b !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(8, 85, 15, 0.32) !important; } /* ================= 5. FORMS & INPUT CONTROLS (STRICTLY SCOPED) ================= */ .woocommerce-EditAccountForm, .woocommerce-MyAccount-content form, .elementor-widget-woocommerce-my-account form { width: 100% !important; box-sizing: border-box !important; } /* Form Row - Clean, Transparent Wrapper (No unwanted grey boxes) */ .woocommerce-MyAccount-content .form-row, .elementor-widget-woocommerce-my-account .form-row, .woocommerce-MyAccount-content form .form-row, .elementor-widget-woocommerce-my-account form .form-row { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 20px !important; box-sizing: border-box !important; } /* Side-by-Side First & Last Name (Desktop & Tablet) */ .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-first, .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first, .woocommerce-address-fields .form-row-first, .elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row-first, .elementor-widget-woocommerce-my-account .woocommerce-address-fields .form-row-first, .elementor-widget-woocommerce-my-account .form-row-first { width: calc(50% - 12px) !important; float: left !important; margin-right: 24px !important; margin-left: 0 !important; margin-bottom: 20px !important; clear: none !important; } .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row-last, .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last, .woocommerce-address-fields .form-row-last, .elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row-last, .elementor-widget-woocommerce-my-account .woocommerce-address-fields .form-row-last, .elementor-widget-woocommerce-my-account .form-row-last { width: calc(50% - 12px) !important; float: right !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important; clear: none !important; } .woocommerce-MyAccount-content .form-row-wide, .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-wide, .woocommerce-address-fields .form-row-wide, .elementor-widget-woocommerce-my-account .form-row-wide { width: 100% !important; clear: both !important; float: none !important; margin-bottom: 20px !important; } .woocommerce-MyAccount-content .clear, .elementor-widget-woocommerce-my-account .clear { clear: both !important; display: block !important; width: 100% !important; height: 0 !important; } /* Field Labels */ .woocommerce-MyAccount-content form .form-row label, .elementor-widget-woocommerce-my-account form .form-row label { display: block !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 8px !important; line-height: 1.4 !important; } /* Required Asterisk */ .woocommerce-MyAccount-content form .form-row label .required, .elementor-widget-woocommerce-my-account form .form-row label .required { color: #ef4444 !important; font-weight: 700 !important; margin-left: 2px !important; } /* Text, Email, Password Inputs */ .woocommerce-MyAccount-content form input[type="text"], .woocommerce-MyAccount-content form input[type="email"], .woocommerce-MyAccount-content form input[type="password"], .woocommerce-MyAccount-content form input[type="tel"], .woocommerce-MyAccount-content form textarea, .woocommerce-MyAccount-content form select, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="text"], .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="email"], .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="password"], .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input[type="tel"] { display: block !important; width: 100% !important; height: 48px !important; padding: 12px 16px !important; background-color: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; font-weight: 400 !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; outline: none !important; } .woocommerce-MyAccount-content form textarea { height: auto !important; min-height: 100px !important; } /* Focus States (Theme Green Ring) */ .woocommerce-MyAccount-content form input[type="text"]:focus, .woocommerce-MyAccount-content form input[type="email"]:focus, .woocommerce-MyAccount-content form input[type="password"]:focus, .woocommerce-MyAccount-content form input[type="tel"]:focus, .woocommerce-MyAccount-content form textarea:focus, .woocommerce-MyAccount-content form select:focus, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content input:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; background-color: #ffffff !important; } /* ================= SELECT2 & DROPDOWN FIELDS (COUNTRY & STATE) ================= */ .woocommerce-MyAccount-content .select2-container, .elementor-widget-woocommerce-my-account .select2-container, .woocommerce-address-fields .select2-container, .woocommerce-MyAccount-content .woocommerce-input-wrapper .select2-container { width: 100% !important; display: block !important; box-sizing: border-box !important; background: transparent !important; border: none !important; } .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default, .elementor-widget-woocommerce-my-account .select2-container--default, .woocommerce-MyAccount-content .select2-container--default, .woocommerce-address-fields .select2-container--default { background-color: transparent !important; background: transparent !important; border: none !important; border-radius: 0 !important; } /* Single Selection Box (Matches text input fields in height, border, background, and radius) */ .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default .select2-selection--single, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single, .woocommerce-MyAccount-content .select2-container--default .select2-selection--single, .woocommerce-address-fields .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; width: 100% !important; height: 48px !important; min-height: 48px !important; background-color: #ffffff !important; background: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; outline: none !important; margin: 0 !important; padding: 0 !important; position: relative !important; } /* Hover and Focus States */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single:hover, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single:hover, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default .select2-selection--single:hover { border-color: #9ca3af !important; } .woocommerce-MyAccount-content .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single, .elementor-widget-woocommerce-my-account .select2-container--default.select2-container--focus .select2-selection--single, .elementor-widget-woocommerce-my-account .select2-container--default.select2-container--open .select2-selection--single, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default.select2-container--open .select2-selection--single { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; background-color: #ffffff !important; background: #ffffff !important; } /* Rendered Value Text */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single .select2-selection__rendered, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; font-weight: 400 !important; color: #111827 !important; line-height: 46px !important; padding-left: 16px !important; padding-right: 44px !important; display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; } /* Placeholder */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__placeholder, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single .select2-selection__placeholder, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; } /* Dropdown Arrow Wrapper */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .select2-container--default .select2-selection--single .select2-selection__arrow, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single .select2-selection__arrow, .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute !important; top: 50% !important; right: 14px !important; transform: translateY(-50%) !important; height: 24px !important; width: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Custom SVG Chevron Arrow */ .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow b, .elementor-widget-woocommerce-my-account .select2-container--default .select2-selection--single .select2-selection__arrow b, .elementor-widget-woocommerce-my-account .e-my-account-tab .select2-container--default .select2-selection--single .select2-selection__arrow b { border: none !important; width: 14px !important; height: 14px !important; margin: 0 !important; position: static !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; transition: transform 0.2s ease !important; } .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .elementor-widget-woocommerce-my-account .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg) !important; } /* Dropdown Menu Popup */ .select2-dropdown { background: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 12px !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; overflow: hidden !important; margin-top: 4px !important; z-index: 99999 !important; } /* Search input inside dropdown */ .select2-dropdown .select2-search--dropdown { padding: 8px 10px !important; background-color: #fafbfc !important; border-bottom: 1px solid #f1f3f5 !important; } .select2-dropdown .select2-search--dropdown .select2-search__field { border: 1.5px solid #d1d5db !important; border-radius: 8px !important; padding: 8px 12px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; outline: none !important; box-sizing: border-box !important; width: 100% !important; background: #ffffff !important; } .select2-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; } /* Results List */ .select2-dropdown .select2-results__option { padding: 10px 16px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; color: #1f2937 !important; transition: background-color 0.15s ease !important; } .select2-dropdown .select2-results__option--highlighted { background-color: #f0fdf4 !important; color: #08550f !important; } .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: #08550f !important; color: #ffffff !important; font-weight: 600 !important; } /* Native select element (identical appearance and custom chevron arrow) */ .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content form select, .woocommerce-address-fields select, .elementor-widget-woocommerce-my-account select, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .form-row select, .elementor-widget-woocommerce-my-account .woocommerce .form-row select { display: block !important; width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 0 42px 0 16px !important; background-color: #ffffff !important; background: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; outline: none !important; cursor: pointer !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .woocommerce-MyAccount-content select:focus, .woocommerce-address-fields select:focus, .elementor-widget-woocommerce-my-account select:focus, .elementor-widget-woocommerce-my-account .woocommerce .form-row select:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; } .woocommerce-MyAccount-content select:focus, .elementor-widget-woocommerce-my-account select:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; } /* Password Toggle Wrapper & Eye Button */ .woocommerce-MyAccount-content .password-input, .elementor-widget-woocommerce-my-account .password-input { position: relative !important; display: block !important; width: 100% !important; } .woocommerce-MyAccount-content .password-input input, .elementor-widget-woocommerce-my-account .password-input input { padding-right: 48px !important; } .woocommerce-MyAccount-content button.show-password-input, .elementor-widget-woocommerce-my-account button.show-password-input { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; color: #6b7280 !important; width: 24px !important; height: 24px !important; min-width: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: color 0.15s ease !important; z-index: 2 !important; } .woocommerce-MyAccount-content button.show-password-input:hover, .elementor-widget-woocommerce-my-account button.show-password-input:hover { color: #08550f !important; background: transparent !important; box-shadow: none !important; transform: translateY(-50%) !important; } /* Helper / Description Text under fields */ .woocommerce-MyAccount-content span#account_display_name_description, .woocommerce-MyAccount-content em { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: #6b7280 !important; margin-top: 6px !important; font-style: normal !important; line-height: 1.4 !important; } /* Fieldset & Legend for Password Change */ .woocommerce-MyAccount-content fieldset, .elementor-widget-woocommerce-my-account fieldset { border: none !important; padding: 0 !important; margin: 36px 0 24px 0 !important; border-top: 1px solid #f1f5f9 !important; padding-top: 28px !important; width: 100% !important; box-sizing: border-box !important; background: transparent !important; } .woocommerce-MyAccount-content fieldset legend, .elementor-widget-woocommerce-my-account fieldset legend { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 18px !important; font-weight: 700 !important; color: #111827 !important; margin-bottom: 20px !important; padding: 0 0 10px 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; background: transparent !important; } .woocommerce-MyAccount-content fieldset legend::before, .elementor-widget-woocommerce-my-account fieldset legend::before { content: "" !important; display: inline-block !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308550f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; } /* ================= 6. BUTTONS (STRICTLY SCOPED TO MY ACCOUNT) ================= */ .woocommerce-MyAccount-content button[name="save_account_details"], .woocommerce-MyAccount-content button[name="save_address"], .woocommerce-MyAccount-content .woocommerce-Button.button, .woocommerce-address-fields button[type="submit"], .woocommerce-address-fields .button, .elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .button, .elementor-widget-woocommerce-my-account .woocommerce-address-fields .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; background-color: #08550f !important; color: #ffffff !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 30px !important; padding: 14px 36px !important; border: none !important; cursor: pointer !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(8, 85, 15, 0.28) !important; box-sizing: border-box !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; margin-top: 10px !important; } .woocommerce-MyAccount-content button[name="save_account_details"]:hover, .woocommerce-MyAccount-content button[name="save_address"]:hover, .woocommerce-MyAccount-content .woocommerce-Button.button:hover, .woocommerce-address-fields button[type="submit"]:hover, .woocommerce-address-fields .button:hover, .elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .button:hover, .elementor-widget-woocommerce-my-account .woocommerce-address-fields .button:hover { background-color: #06400b !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(8, 85, 15, 0.38) !important; } .woocommerce-MyAccount-content button[name="save_account_details"]:active, .woocommerce-MyAccount-content .woocommerce-Button.button:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(8, 85, 15, 0.25) !important; } /* ================= 7. DASHBOARD TAB GREETING (TARGETED ONLY ON DASHBOARD) ================= */ .e-my-account-tab__dashboard .woocommerce-MyAccount-content > p:first-child, .woocommerce-account .woocommerce-MyAccount-content > p:not(.form-row):first-child { font-size: 16px !important; color: #374151 !important; line-height: 1.6 !important; background-color: #f8fafc !important; border: 1px solid #eef0f2 !important; border-radius: 12px !important; padding: 20px 24px !important; margin-bottom: 24px !important; } .e-my-account-tab__dashboard .woocommerce-MyAccount-content > p:first-child strong, .woocommerce-account .woocommerce-MyAccount-content > p:not(.form-row):first-child strong { color: #08550f !important; font-weight: 700 !important; } /* ================= 8. ORDERS TABLE ================= */ .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-MyAccount-content table.shop_table.my_account_orders, .elementor-widget-woocommerce-my-account table.woocommerce-orders-table, .elementor-widget-woocommerce-my-account table.shop_table.my_account_orders { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; border: 1px solid #eef0f2 !important; border-radius: 14px !important; overflow: hidden !important; background: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important; margin: 0 0 24px 0 !important; } .woocommerce-MyAccount-content table.woocommerce-orders-table thead, .woocommerce-MyAccount-content table.shop_table.my_account_orders thead { background-color: #f8f9fa !important; } .woocommerce-MyAccount-content table.woocommerce-orders-table thead th, .woocommerce-MyAccount-content table.shop_table.my_account_orders thead th { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #374151 !important; padding: 16px 20px !important; border: none !important; border-bottom: 1px solid #eef0f2 !important; text-align: left !important; } .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td, .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td { padding: 16px 20px !important; vertical-align: middle !important; border: none !important; border-bottom: 1px solid #f1f3f5 !important; font-size: 14px !important; color: #1f2937 !important; } .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:last-child td, .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody tr:last-child td { border-bottom: none !important; } /* Order Link */ .woocommerce-orders-table__cell-order-number a { color: #08550f !important; font-weight: 700 !important; text-decoration: none !important; } .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline !important; } /* Order Action "View" Button */ .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button { background-color: #f0fdf4 !important; color: #08550f !important; border: 1.5px solid #bbf7d0 !important; border-radius: 20px !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: capitalize !important; letter-spacing: 0 !important; box-shadow: none !important; margin: 0 !important; transition: all 0.2s ease !important; } .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a.button:hover { background-color: #08550f !important; color: #ffffff !important; border-color: #08550f !important; transform: translateY(-1px) !important; } /* ================= 9. ADDRESSES SECTION (SIDE-BY-SIDE EQUAL COLUMNS) ================= */ .woocommerce-account .u-columns.woocommerce-Addresses, .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses, .woocommerce-account .woocommerce-Addresses, .woocommerce-MyAccount-content .woocommerce-Addresses, .elementor-widget-woocommerce-my-account .woocommerce-Addresses { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; width: 100% !important; margin-top: 20px !important; float: none !important; clear: both !important; box-sizing: border-box !important; } .woocommerce-account .u-columns.woocommerce-Addresses::before, .woocommerce-account .u-columns.woocommerce-Addresses::after, .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses::before, .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses::after { content: none !important; display: none !important; } @media (max-width: 768px) { .woocommerce-account .u-columns.woocommerce-Addresses, .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses, .elementor-widget-woocommerce-my-account .woocommerce-Addresses { grid-template-columns: 1fr !important; } } .woocommerce-account .woocommerce-Address, .woocommerce-MyAccount-content .woocommerce-Address, .elementor-widget-woocommerce-my-account .woocommerce-Address, .woocommerce-account .u-columns.woocommerce-Addresses .col-1, .woocommerce-account .u-columns.woocommerce-Addresses .col-2, .woocommerce-account .u-columns.woocommerce-Addresses .u-column1, .woocommerce-account .u-columns.woocommerce-Addresses .u-column2 { position: relative !important; background: #ffffff !important; border: 1.5px solid #eef0f2 !important; border-radius: 16px !important; padding: 24px 28px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important; box-sizing: border-box !important; width: 100% !important; float: none !important; margin: 0 !important; } .woocommerce-MyAccount-content .woocommerce-Address .title, .woocommerce-MyAccount-content .woocommerce-Addresses header.title, .elementor-widget-woocommerce-my-account .woocommerce-Address .title, .elementor-widget-woocommerce-my-account .woocommerce-Addresses header.title { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; padding-bottom: 14px !important; border-bottom: 1px solid #f1f5f9 !important; width: 100% !important; } .woocommerce-MyAccount-content .woocommerce-Address .title h3, .woocommerce-MyAccount-content .woocommerce-Addresses header.title h3, .elementor-widget-woocommerce-my-account .woocommerce-Address .title h3, .elementor-widget-woocommerce-my-account .woocommerce-Addresses header.title h3 { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 18px !important; font-weight: 700 !important; color: #111827 !important; margin: 0 !important; float: none !important; display: block !important; line-height: 1.3 !important; white-space: nowrap !important; } /* Edit / Add Address Link Pill */ .woocommerce-MyAccount-content .woocommerce-Address .edit, .woocommerce-MyAccount-content .woocommerce-Addresses a.edit, .elementor-widget-woocommerce-my-account .woocommerce-Address .edit, .elementor-widget-woocommerce-my-account .woocommerce-Addresses a.edit { position: static !important; float: none !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; background-color: #f0fdf4 !important; color: #08550f !important; border: 1.5px solid #bbf7d0 !important; border-radius: 20px !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; white-space: nowrap !important; flex-shrink: 0 !important; } .woocommerce-MyAccount-content .woocommerce-Address .edit:hover, .woocommerce-MyAccount-content .woocommerce-Addresses a.edit:hover, .elementor-widget-woocommerce-my-account .woocommerce-Address .edit:hover, .elementor-widget-woocommerce-my-account .woocommerce-Addresses a.edit:hover { background-color: #08550f !important; color: #ffffff !important; border-color: #08550f !important; } .woocommerce-MyAccount-content address { font-style: normal !important; line-height: 1.6 !important; color: #64748b !important; font-size: 14px !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Hide "My account" title container when user is NOT logged in */ body:not(.logged-in) .elementor-element.elementor-element-3355c73, body:not(.logged-in) .elementor-element-3355c73, body:not(.logged-in) [data-id="3355c73"], body:not(.logged-in) .elementor-element.elementor-element-f2afdd9, body:not(.logged-in) .elementor-element-f2afdd9, body:not(.logged-in) [data-id="f2afdd9"] { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } /* Tighter vertical spacing for main content container */ .elementor-element.elementor-element-aeae862 { padding-top: 15px !important; padding-bottom: 20px !important; } /* ================= 10. LOGIN & REGISTER VIEW (EXACT MATCH FOR REFERENCE) ================= */ #customer_login, .woocommerce-account #customer_login, .elementor-widget-woocommerce-my-account #customer_login, .elementor-widget-woocommerce-my-account .u-columns.col2-set#customer_login, .u-columns.col2-set#customer_login { width: 100% !important; max-width: 100% !important; margin: 0 auto 12px auto !important; padding: 0 16px !important; box-sizing: border-box !important; float: none !important; clear: both !important; } .woocommerce-account:not(.logged-in) .woocommerce-MyAccount-content, .elementor-widget-woocommerce-my-account:has(#customer_login) .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } #customer_login::before, #customer_login::after { content: none !important; display: none !important; } /* Desktop: 2 Equal Columns Side-by-Side (769px and above) */ @media (min-width: 769px) { #customer_login, .woocommerce-account #customer_login, .elementor-widget-woocommerce-my-account #customer_login, .elementor-widget-woocommerce-my-account .u-columns.col2-set#customer_login, .u-columns.col2-set#customer_login { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px !important; margin: 8px auto 20px auto !important; padding: 0 16px !important; } } /* Tablet & Mobile: Stack in 1 Single Full-Width Column (768px and below) */ @media (max-width: 768px) { #customer_login, .woocommerce-account #customer_login, .elementor-widget-woocommerce-my-account #customer_login, .elementor-widget-woocommerce-my-account .u-columns.col2-set#customer_login, .u-columns.col2-set#customer_login { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 18px !important; margin: 4px auto 12px auto !important; padding: 0 10px !important; width: 100% !important; max-width: 100% !important; } #customer_login .u-column1, #customer_login .u-column2, #customer_login .col-1, #customer_login .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } } #customer_login .u-column1, #customer_login .u-column2, #customer_login .col-1, #customer_login .col-2 { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Headings: "Login" & "Register" in Theme Green, Left-Aligned */ #customer_login h2, .woocommerce-account #customer_login h2, .elementor-widget-woocommerce-my-account #customer_login h2 { font-family: var(--font-primary, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important; font-size: 28px !important; font-weight: 700 !important; color: #08550f !important; text-align: left !important; margin: 0 0 16px 0 !important; line-height: 1.25 !important; } /* Dual Card Containers */ #customer_login form.login, #customer_login form.register, .elementor-widget-woocommerce-my-account form.login, .elementor-widget-woocommerce-my-account form.register { background-color: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 12px !important; padding: 28px 24px !important; box-shadow: none !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* Input Fields inside Login / Register */ #customer_login form .form-row, .elementor-widget-woocommerce-my-account form.login .form-row, .elementor-widget-woocommerce-my-account form.register .form-row { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 18px !important; box-shadow: none !important; } #customer_login form label, .elementor-widget-woocommerce-my-account form.login label, .elementor-widget-woocommerce-my-account form.register label { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 8px !important; display: block !important; } #customer_login form input[type="text"], #customer_login form input[type="email"], #customer_login form input[type="password"], .elementor-widget-woocommerce-my-account form.login input[type="text"], .elementor-widget-woocommerce-my-account form.login input[type="password"], .elementor-widget-woocommerce-my-account form.register input[type="email"], .elementor-widget-woocommerce-my-account form.register input[type="password"] { display: block !important; width: 100% !important; height: 46px !important; padding: 10px 14px !important; background-color: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 8px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; color: #1f2937 !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 0.2s, box-shadow 0.2s !important; outline: none !important; } #customer_login form input:focus, .elementor-widget-woocommerce-my-account form.login input:focus, .elementor-widget-woocommerce-my-account form.register input:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; } /* Login Actions: Theme Button Pattern (Full Width Pill Button & Remember Me) */ #customer_login form.login p:has(.woocommerce-form-login__submit), .elementor-widget-woocommerce-my-account form.login p:has(.woocommerce-form-login__submit) { display: flex !important; align-items: stretch !important; flex-direction: column !important; gap: 12px !important; margin-top: 18px !important; margin-bottom: 8px !important; background: transparent !important; width: 100% !important; } #customer_login form.login .woocommerce-form-login__submit, .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__submit, #customer_login form.register .woocommerce-form-register__submit, .elementor-widget-woocommerce-my-account form.register .woocommerce-form-register__submit { order: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important; background-color: #08550f !important; color: #ffffff !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 30px !important; padding: 14px 28px !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(8, 85, 15, 0.28) !important; box-sizing: border-box !important; margin: 0 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } #customer_login form.login .woocommerce-form-login__submit:hover, .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__submit:hover, #customer_login form.register .woocommerce-form-register__submit:hover, .elementor-widget-woocommerce-my-account form.register .woocommerce-form-register__submit:hover { background-color: #06400b !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(8, 85, 15, 0.38) !important; } #customer_login form.login .woocommerce-form-login__submit:active, .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__submit:active, #customer_login form.register .woocommerce-form-register__submit:active, .elementor-widget-woocommerce-my-account form.register .woocommerce-form-register__submit:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(8, 85, 15, 0.25) !important; } #customer_login form.login .woocommerce-form-login__rememberme, .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__rememberme { order: 2 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 4px 0 0 0 !important; cursor: pointer !important; font-size: 14px !important; font-weight: 400 !important; color: #374151 !important; } #customer_login form.login .woocommerce-form-login__rememberme input[type="checkbox"], .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__rememberme input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: #08550f !important; cursor: pointer !important; } #customer_login form.login .woocommerce-LostPassword, .elementor-widget-woocommerce-my-account form.login .woocommerce-LostPassword { margin-top: 8px !important; margin-bottom: 0 !important; text-align: left !important; } #customer_login form.login .woocommerce-LostPassword a, .elementor-widget-woocommerce-my-account form.login .woocommerce-LostPassword a { color: #374151 !important; font-size: 14px !important; font-weight: 400 !important; text-decoration: none !important; } #customer_login form.login .woocommerce-LostPassword a:hover, .elementor-widget-woocommerce-my-account form.login .woocommerce-LostPassword a:hover { color: #08550f !important; text-decoration: underline !important; } /* Register Button Spacing */ #customer_login form.register .woocommerce-form-register__submit, .elementor-widget-woocommerce-my-account form.register .woocommerce-form-register__submit { margin-top: 16px !important; } #customer_login form.register p:not(.form-row) { font-size: 13.5px !important; color: #64748b !important; line-height: 1.5 !important; margin: 12px 0 16px 0 !important; } #customer_login form.register .woocommerce-privacy-policy-text p { font-size: 13px !important; color: #64748b !important; line-height: 1.5 !important; margin: 12px 0 16px 0 !important; } #customer_login form.register .woocommerce-privacy-policy-link { color: #08550f !important; font-weight: 500 !important; } /* ================= 10.1 LOST PASSWORD & RESET PASSWORD FORMS ================= */ .woocommerce form.lost_reset_password, .woocommerce form.woocommerce-ResetPassword, .woocommerce-ResetPassword.lost_reset_password, .elementor-widget-woocommerce-my-account form.lost_reset_password, .elementor-widget-woocommerce-my-account form.woocommerce-ResetPassword { background-color: #ffffff !important; border: 1px solid #eef0f2 !important; border-radius: 16px !important; padding: 36px 40px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; box-sizing: border-box !important; width: 100% !important; max-width: 580px !important; margin: 30px auto !important; float: none !important; clear: both !important; } /* Heading: "Lost Password" / "Reset Password" in Theme Green */ .woocommerce form.lost_reset_password::before, .elementor-widget-woocommerce-my-account form.lost_reset_password::before { content: "Lost Password"; display: block !important; font-family: var(--font-primary, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important; font-size: 26px !important; font-weight: 700 !important; color: #08550f !important; text-align: left !important; margin: 0 0 14px 0 !important; line-height: 1.25 !important; } .woocommerce form.lost_reset_password:has(button[value="Save"])::before, .elementor-widget-woocommerce-my-account form.lost_reset_password:has(button[value="Save"])::before { content: "Reset Password"; } /* Intro Paragraph */ .woocommerce form.lost_reset_password > p:first-of-type, .elementor-widget-woocommerce-my-account form.lost_reset_password > p:first-of-type { font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14.5px !important; color: #4b5563 !important; line-height: 1.6 !important; margin: 0 0 24px 0 !important; text-align: left !important; } /* Form Row Layout */ .woocommerce form.lost_reset_password .form-row, .elementor-widget-woocommerce-my-account form.lost_reset_password .form-row { width: 100% !important; float: none !important; clear: both !important; margin: 0 0 20px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Label */ .woocommerce form.lost_reset_password .form-row label, .elementor-widget-woocommerce-my-account form.lost_reset_password .form-row label { display: block !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 8px !important; line-height: 1.4 !important; text-align: left !important; } /* Required Asterisk */ .woocommerce form.lost_reset_password .form-row label .required, .elementor-widget-woocommerce-my-account form.lost_reset_password .form-row label .required { color: #ef4444 !important; font-weight: 700 !important; margin-left: 3px !important; } /* Input Field */ .woocommerce form.lost_reset_password input.input-text, .woocommerce form.lost_reset_password input[type="text"], .woocommerce form.lost_reset_password input[type="password"], .elementor-widget-woocommerce-my-account form.lost_reset_password input.input-text, .elementor-widget-woocommerce-my-account form.lost_reset_password input[type="text"], .elementor-widget-woocommerce-my-account form.lost_reset_password input[type="password"] { display: block !important; width: 100% !important; height: 48px !important; padding: 12px 16px !important; background-color: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 15px !important; font-weight: 400 !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; box-sizing: border-box !important; outline: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .woocommerce form.lost_reset_password input.input-text:focus, .woocommerce form.lost_reset_password input:focus, .elementor-widget-woocommerce-my-account form.lost_reset_password input:focus { border-color: #08550f !important; box-shadow: 0 0 0 3px rgba(8, 85, 15, 0.15) !important; background-color: #ffffff !important; } /* Reset Password Button - Theme Forest Green Pill Button */ .woocommerce form.lost_reset_password button.button, .woocommerce form.lost_reset_password button[type="submit"], .elementor-widget-woocommerce-my-account form.lost_reset_password button.button, .elementor-widget-woocommerce-my-account form.lost_reset_password button[type="submit"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important; background-color: #08550f !important; color: #ffffff !important; font-family: var(--font-primary, "Roboto", sans-serif) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 30px !important; padding: 14px 28px !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(8, 85, 15, 0.28) !important; box-sizing: border-box !important; margin: 8px 0 0 0 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } .woocommerce form.lost_reset_password button.button:hover, .woocommerce form.lost_reset_password button[type="submit"]:hover, .elementor-widget-woocommerce-my-account form.lost_reset_password button.button:hover, .elementor-widget-woocommerce-my-account form.lost_reset_password button[type="submit"]:hover { background-color: #06400b !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(8, 85, 15, 0.38) !important; } .woocommerce form.lost_reset_password button.button:active, .woocommerce form.lost_reset_password button[type="submit"]:active, .elementor-widget-woocommerce-my-account form.lost_reset_password button.button:active, .elementor-widget-woocommerce-my-account form.lost_reset_password button[type="submit"]:active { transform: translateY(0) !important; box-shadow: 0 2px 8px rgba(8, 85, 15, 0.25) !important; } /* Notices on Lost Password Page */ .woocommerce-lost-password .woocommerce-notices-wrapper, .woocommerce:has(form.lost_reset_password) .woocommerce-notices-wrapper { max-width: 580px !important; margin: 0 auto 20px auto !important; } /* Mobile responsive padding */ @media (max-width: 768px) { .woocommerce form.lost_reset_password, .woocommerce form.woocommerce-ResetPassword, .woocommerce-ResetPassword.lost_reset_password, .elementor-widget-woocommerce-my-account form.lost_reset_password, .elementor-widget-woocommerce-my-account form.woocommerce-ResetPassword { padding: 24px 20px !important; margin: 16px auto !important; border-radius: 14px !important; } .woocommerce form.lost_reset_password::before, .elementor-widget-woocommerce-my-account form.lost_reset_password::before { font-size: 22px !important; margin-bottom: 10px !important; } } /* ================= 11. STRICT PROTECTION: HEADER & FOOTER PRESERVATION ================= */ .mya-header .mya-search-button, .mya-search-area .mya-search-button, .mya-search-form .mya-search-button, header .mya-search-button { background: #173d2b !important; color: #ffffff !important; border: none !important; outline: none !important; border-radius: 9999px !important; padding: 0 22px !important; height: 36px !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; margin-top: 0 !important; box-shadow: none !important; transform: none !important; letter-spacing: 0.04em !important; } .mya-header .mya-search-button:hover, .mya-search-area .mya-search-button:hover, .mya-search-form .mya-search-button:hover, header .mya-search-button:hover { background: #0d281a !important; color: #ffffff !important; transform: none !important; box-shadow: none !important; } .mya-header .mya-search-input, .mya-search-area .mya-search-input, .mya-search-form .mya-search-input, header .mya-search-input { height: 100% !important; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 12px 0 6px !important; font-size: 14.5px !important; color: #1f2937 !important; } /* ================= 12. RESPONSIVE DESIGN (TABLET & MOBILE) ================= */ @media (max-width: 991px) { /* Stack Navigation Sidebar & Content Card Vertically */ .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce:has(.woocommerce-MyAccount-navigation), .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce, .elementor-widget-woocommerce-my-account .woocommerce:has(.woocommerce-MyAccount-navigation), .elementor-widget-woocommerce-my-account .woocommerce, .woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation), .woocommerce-account .entry-content > .woocommerce, .woocommerce-account .woocommerce { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; } /* Navigation Sidebar Full Width on Tablet */ .elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; float: none !important; padding: 16px !important; margin: 0 !important; box-sizing: border-box !important; } .woocommerce-MyAccount-navigation ul { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; } .woocommerce-MyAccount-navigation ul li { width: calc(50% - 4px) !important; flex: 1 1 calc(50% - 4px) !important; max-width: 100% !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; flex-basis: 100% !important; width: 100% !important; } /* Content Card Full Width */ .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content, .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-content { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; float: none !important; clear: both !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content-wrapper, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content-wrapper, .woocommerce-account .woocommerce-MyAccount-content { padding: 28px 24px !important; width: 100% !important; box-sizing: border-box !important; } } @media (max-width: 767px) { /* Mobile Outer Spacing */ .elementor-element.elementor-element-aeae862 { padding-left: 12px !important; padding-right: 12px !important; padding-top: 8px !important; padding-bottom: 16px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .elementor-element.elementor-element-aeae862 > .e-con-inner { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .elementor-widget-woocommerce-my-account { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Compact Navigation Menu on Mobile (Vertical Pill List) */ .elementor-widget-woocommerce-my-account .woocommerce .woocommerce-MyAccount-navigation, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-navigation { padding: 12px 14px !important; border-radius: 14px !important; width: 100% !important; } .woocommerce-MyAccount-navigation ul { flex-direction: column !important; gap: 6px !important; } .woocommerce-MyAccount-navigation ul li { width: 100% !important; flex: 1 1 100% !important; } .woocommerce-MyAccount-navigation ul li a, .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a { padding: 11px 16px !important; font-size: 14px !important; } /* Content Card on Mobile */ .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content-wrapper, .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-MyAccount-content-wrapper, .woocommerce-account .woocommerce-MyAccount-content { padding: 22px 16px !important; border-radius: 14px !important; width: 100% !important; } /* All Form Rows Stack 100% Width */ .woocommerce-MyAccount-content .form-row, .woocommerce-MyAccount-content .form-row-first, .woocommerce-MyAccount-content .form-row-last, .woocommerce-MyAccount-content .form-row-wide, .woocommerce-address-fields .form-row, .woocommerce-address-fields .form-row-first, .woocommerce-address-fields .form-row-last, .woocommerce-address-fields .form-row-wide, .woocommerce-EditAccountForm .form-row, .woocommerce-EditAccountForm .form-row-first, .woocommerce-EditAccountForm .form-row-last, .woocommerce-EditAccountForm .form-row-wide, .elementor-widget-woocommerce-my-account .form-row, .elementor-widget-woocommerce-my-account .form-row-first, .elementor-widget-woocommerce-my-account .form-row-last, .elementor-widget-woocommerce-my-account .form-row-wide { width: 100% !important; float: none !important; margin-right: 0 !important; margin-left: 0 !important; margin-bottom: 16px !important; clear: both !important; box-sizing: border-box !important; } /* Full-Width Touch-Friendly Buttons on Mobile */ .woocommerce-MyAccount-content button[name="save_account_details"], .woocommerce-MyAccount-content button[name="save_address"], .woocommerce-MyAccount-content .woocommerce-Button.button, .woocommerce-address-fields button[type="submit"], .woocommerce-address-fields .button, .elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .button, .elementor-widget-woocommerce-my-account .woocommerce-address-fields .button { width: 100% !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: 14px !important; font-size: 14px !important; } /* Addresses Tab Stack */ .woocommerce-account .u-columns.woocommerce-Addresses, .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses, .elementor-widget-woocommerce-my-account .woocommerce-Addresses { grid-template-columns: 1fr !important; gap: 16px !important; } .woocommerce-account .woocommerce-Address, .woocommerce-MyAccount-content .woocommerce-Address, .elementor-widget-woocommerce-my-account .woocommerce-Address { padding: 18px 16px !important; } /* Login & Register 1-Column Stack on Mobile */ #customer_login, .woocommerce-account #customer_login, .elementor-widget-woocommerce-my-account #customer_login, .elementor-widget-woocommerce-my-account .u-columns.col2-set#customer_login, .u-columns.col2-set#customer_login { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 16px !important; padding: 4px 0 16px 0 !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #customer_login .u-column1, #customer_login .u-column2, #customer_login .col-1, #customer_login .col-2 { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #customer_login form.login, #customer_login form.register, .elementor-widget-woocommerce-my-account #customer_login form.login, .elementor-widget-woocommerce-my-account #customer_login form.register, .elementor-widget-woocommerce-my-account form.login, .elementor-widget-woocommerce-my-account form.register { padding: 22px 18px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Login Form Actions (Button & Remember Me on Mobile) */ /* Login & Register Full-Width Buttons on Mobile */ #customer_login form.login p:has(.woocommerce-form-login__submit), .elementor-widget-woocommerce-my-account form.login p:has(.woocommerce-form-login__submit) { display: flex !important; align-items: stretch !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; box-sizing: border-box !important; } #customer_login form.login .woocommerce-form-login__submit, .elementor-widget-woocommerce-my-account form.login .woocommerce-form-login__submit, #customer_login form.register .woocommerce-form-register__submit, .elementor-widget-woocommerce-my-account form.register .woocommerce-form-register__submit { width: 100% !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* Notices Mobile Layout (Clean Horizontal Row with Left-Aligned Icon) */ .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-error, .elementor-widget-woocommerce-my-account .woocommerce-info, .elementor-widget-woocommerce-my-account .woocommerce-message, .elementor-widget-woocommerce-my-account .woocommerce-error, ul.woocommerce-error { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 10px !important; font-size: 13.5px !important; margin-bottom: 16px !important; } .woocommerce-notices-wrapper .woocommerce-info::before, .woocommerce-notices-wrapper .woocommerce-message::before, .woocommerce-notices-wrapper .woocommerce-error::before, .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-error::before, .elementor-widget-woocommerce-my-account .woocommerce-info::before, .elementor-widget-woocommerce-my-account .woocommerce-message::before, .elementor-widget-woocommerce-my-account .woocommerce-error::before, ul.woocommerce-error::before { width: 18px !important; height: 18px !important; min-width: 18px !important; margin-top: 2px !important; flex-shrink: 0 !important; } .woocommerce-MyAccount-content .woocommerce-info a.button, .woocommerce-MyAccount-content .woocommerce-message a.button, .elementor-widget-woocommerce-my-account .woocommerce-info a.button, .elementor-widget-woocommerce-my-account .woocommerce-message a.button { margin-left: 0 !important; margin-top: 8px !important; width: 100% !important; text-align: center !important; justify-content: center !important; order: 99 !important; } /* Orders Table Mobile Scroll */ .woocommerce-MyAccount-content .woocommerce-orders-table, .woocommerce-MyAccount-content table.shop_table.my_account_orders { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; } } @media (max-width: 480px) { .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 20px !important; } .woocommerce-MyAccount-content input[type="text"], .woocommerce-MyAccount-content input[type="email"], .woocommerce-MyAccount-content input[type="password"], .woocommerce-MyAccount-content input[type="tel"], .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content .select2-container--default .select2-selection--single { height: 46px !important; min-height: 46px !important; font-size: 14.5px !important; } .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px !important; font-size: 14.5px !important; } }