/** * Customer Account / Dashboard Styles * Covers: auth pages (login/register) + customer dashboard + profile */ /* ============================================ Auth Pages — Full-Viewport Split Layout ============================================ */ /* * The body itself becomes the split-screen grid so both panels * fill the full viewport height without any wrapping container. */ .auth-page-body { margin: 0; padding: 0; min-height: 100vh; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; font-family: var(--font-primary); background-color: var(--color-background); } /* ============================================ Brand Panel (Left / Right in RTL) ============================================ */ .auth-brand-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 4rem 3.5rem; /* Rich olive gradient — dark at origin, lighter towards opposite corner */ background: linear-gradient( 145deg, var(--color-primary-hover, #4F6228) 0%, var(--color-primary) 45%, var(--color-primary-light, #6B8338) 100% ); overflow: hidden; /* Subtle repeating radial dot texture using pseudo-element */ } /* Dot pattern texture layer */ .auth-brand-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } /* Large decorative circle — top-right glow */ .auth-brand-panel::after { content: ""; position: absolute; top: -80px; right: -80px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); pointer-events: none; } /* RTL: flip decorative circle to left side */ [dir="rtl"] .auth-brand-panel::after { right: auto; left: -80px; } /* Inner content sits above the pseudo-element layers */ .auth-brand-content { position: relative; z-index: 1; color: var(--color-white); } /* Store icon + name row */ .auth-store-identity { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .auth-store-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background-color: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; color: var(--color-white); border: 1px solid rgba(255, 255, 255, 0.25); } .auth-store-name { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--color-white); margin: 0; } /* Tagline */ .auth-tagline { font-size: var(--text-base); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.82); margin-bottom: 2.5rem; max-width: 320px; } /* Separator between tagline and benefits */ .auth-brand-divider { width: 48px; height: 2px; background-color: rgba(255, 255, 255, 0.35); border-radius: var(--radius-full); margin-bottom: 2rem; } /* Benefits list */ .auth-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.125rem; } .auth-benefit-item { display: flex; align-items: center; gap: 1rem; } /* RTL: no flex-direction override needed — with direction:rtl on , flex-direction:row already flows items right→left, so icon (first child) lands on the right and text (second child) on the left, which is correct. */ .auth-benefit-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; color: var(--color-white); } .auth-benefit-text { font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(255, 255, 255, 0.9); line-height: var(--leading-snug); } /* Bottom watermark badge */ .auth-brand-badge { margin-top: 3rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.75); letter-spacing: 0.04em; text-transform: uppercase; font-weight: var(--weight-semibold); } /* ============================================ Form Panel (Right / Left in RTL) ============================================ */ .auth-form-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--color-surface); padding: 3rem 2.5rem; overflow-y: auto; } .auth-form-inner { width: 100%; max-width: 400px; } /* Heading block */ .auth-heading-group { margin-bottom: 2rem; } .auth-title { font-size: var(--text-3xl); font-weight: var(--weight-extrabold); color: var(--color-text-primary); line-height: var(--leading-tight); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .auth-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; line-height: var(--leading-normal); } /* ============================================ Auth Form Controls ============================================ */ /* Form group with label */ .auth-field { margin-bottom: 1.25rem; } .auth-field .form-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: 0.5rem; display: block; } /* Input wrapper that holds icon + input */ .auth-input-wrap { position: relative; } /* Icon inside input (leading) */ .auth-input-icon { position: absolute; top: 50%; left: 0.875rem; transform: translateY(-50%); font-size: 1rem; color: var(--color-text-muted); pointer-events: none; transition: color var(--transition-fast); line-height: 1; } /* RTL: flip icon to right side */ [dir="rtl"] .auth-input-icon { left: auto; right: 0.875rem; } /* Input field itself — padded to clear the icon */ .auth-input-wrap .form-control { padding-left: 2.75rem; border-color: var(--color-border); border-radius: var(--radius-md); height: 46px; font-size: var(--text-sm); color: var(--color-text-primary); background-color: var(--color-gray-50); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } /* RTL: icon is on right, so padding shifts to right; text-align: right needed because browsers force direction:ltr on type="email" inputs, overriding the inherited RTL direction — explicit text-align keeps placeholder on the correct side */ [dir="rtl"] .auth-input-wrap .form-control { padding-left: 0.875rem; padding-right: 2.75rem; text-align: right; } /* Focus state: colored ring + white background */ .auth-input-wrap .form-control:focus { border-color: var(--color-primary); background-color: var(--color-surface); box-shadow: 0 0 0 3px rgba(85, 107, 47, 0.15); outline: none; } /* Colour the icon when its sibling input is focused */ .auth-input-wrap:focus-within .auth-input-icon { color: var(--color-primary); } /* Error state */ .auth-input-wrap .form-control.is-invalid { border-color: var(--color-error); background-color: var(--color-surface); } .auth-input-wrap .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.12); } /* ============================================ Password toggle button (show/hide) ============================================ */ .auth-input-wrap .btn-password-toggle { position: absolute; top: 50%; right: 0.875rem; transform: translateY(-50%); background: none; border: none; padding: 0; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; line-height: 1; transition: color var(--transition-fast); z-index: 2; } .auth-input-wrap .btn-password-toggle:hover { color: var(--color-primary); } /* When toggle is present, add extra right-padding to input */ .auth-input-wrap.has-toggle .form-control { padding-right: 2.75rem; } /* RTL: toggle goes to left */ [dir="rtl"] .auth-input-wrap .btn-password-toggle { right: auto; left: 0.875rem; } [dir="rtl"] .auth-input-wrap.has-toggle .form-control { padding-right: 2.75rem; padding-left: 2.75rem; } /* ============================================ Remember Me & Extras Row ============================================ */ .auth-extras-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .auth-extras-row .form-check-label { font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer; } .auth-extras-row .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } /* ============================================ Submit Button ============================================ */ .btn-auth-submit { width: 100%; height: 48px; background-color: var(--color-primary); color: var(--color-button-text); border: none; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: 0.01em; cursor: pointer; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; } .btn-auth-submit:hover { background-color: var(--color-primary-hover, #4F6228); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(85, 107, 47, 0.3); } .btn-auth-submit:active { transform: translateY(0); box-shadow: none; } .btn-auth-submit:focus-visible { outline: 3px solid rgba(85, 107, 47, 0.4); outline-offset: 2px; } /* ============================================ Footer Link (switch page) ============================================ */ .auth-footer-text { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .auth-footer-link { color: var(--color-primary); font-weight: var(--weight-semibold); text-decoration: none; transition: color var(--transition-fast); } .auth-footer-link:hover { color: var(--color-primary-hover, #4F6228); text-decoration: underline; } /* ============================================ Alert overrides for auth context ============================================ */ .auth-form-inner .alert { border-radius: var(--radius-md); font-size: var(--text-sm); margin-bottom: 1.25rem; padding: 0.875rem 1rem; } .auth-form-inner .alert-danger { background-color: #fef2f2; border-color: #fecaca; color: var(--color-error); } .auth-form-inner .alert-success { background-color: #f0fdf4; border-color: #bbf7d0; color: var(--color-success); } /* Horizontal rule separator */ .auth-separator { border: none; border-top: 1px solid var(--color-border-light, var(--color-border)); margin: 1.5rem 0; } /* Optional help text below a field */ .auth-field-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 0.375rem; display: block; } /* ============================================ Mobile brand strip ============================================ */ .auth-mobile-header { display: none; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover, #4F6228)); padding: 1.25rem 1.5rem; align-items: center; gap: 0.625rem; } .auth-mobile-icon { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); } .auth-mobile-name { font-size: 1rem; font-weight: 600; color: #fff; line-height: 1; } /* SVG illustration in the brand panel */ .auth-illustration { display: block; width: 100%; max-width: 300px; margin: 1.75rem auto 0; opacity: 0.92; } /* ============================================ Mobile: stack vertically, hide brand panel ============================================ */ @media (max-width: 767.98px) { .auth-page-body { grid-template-columns: 1fr; min-height: 100vh; } /* Show mobile brand strip */ .auth-mobile-header { display: flex; } /* Hide the entire brand panel on mobile */ .auth-brand-panel { display: none; } /* Form panel fills full screen */ .auth-form-panel { justify-content: flex-start; padding: 2.5rem 1.5rem 3rem; min-height: 100vh; } .auth-form-inner { max-width: 100%; } /* Add top breathing room so content doesn't crowd the status bar */ .auth-heading-group { margin-top: 0.5rem; margin-bottom: 1.5rem; } .auth-title { font-size: var(--text-2xl); } } /* Tablet: show brand panel but reduce padding */ @media (min-width: 768px) and (max-width: 1023.98px) { .auth-brand-panel { padding: 3rem 2.5rem; } .auth-form-panel { padding: 2.5rem 2rem; } .auth-store-name { font-size: var(--text-xl); } .auth-tagline { font-size: var(--text-sm); } } /* ============================================ Customer Dashboard Layout ============================================ */ .dashboard-wrapper { background-color: var(--color-background); min-height: calc(100vh - 120px); padding: 2rem 0; } /* Sidebar */ .dashboard-sidebar { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem 0; position: sticky; top: 1.5rem; } .dashboard-sidebar .sidebar-header { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid var(--color-border-light, var(--color-border)); margin-bottom: 1rem; } .dashboard-sidebar .sidebar-store-name { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.25rem; } .dashboard-sidebar .sidebar-user-name { font-size: 0.875rem; color: var(--color-text-secondary); } .dashboard-sidebar .nav-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.5rem; color: var(--color-text-primary); border-radius: 0; font-size: 0.9375rem; transition: background-color 0.15s, color 0.15s; } .dashboard-sidebar .nav-link:hover { background-color: var(--color-gray-100, #f3f4f6); color: var(--color-primary); } .dashboard-sidebar .nav-link.active { background-color: var(--color-primary); color: var(--color-white); } .dashboard-sidebar .nav-link i { font-size: 1.125rem; flex-shrink: 0; } .dashboard-sidebar .sidebar-divider { border-color: var(--color-border); margin: 1rem 0; } /* Logout button in sidebar */ .dashboard-sidebar .btn-logout { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 1.5rem; background: none; border: none; color: var(--color-error, #D62828); font-size: 0.9375rem; cursor: pointer; text-align: start; transition: background-color 0.15s; } .dashboard-sidebar .btn-logout:hover { background-color: #fef2f2; } /* ============================================ Dashboard Main Content ============================================ */ .dashboard-main .page-heading { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 1.5rem; } .dashboard-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.75rem; margin-bottom: 1.5rem; } .dashboard-card .card-section-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-light, var(--color-border)); } /* ============================================ Avatar Upload ============================================ */ .avatar-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .avatar-circle { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-border); background-color: var(--color-gray-100, #f3f4f6); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .avatar-circle .avatar-placeholder { font-size: 3rem; color: var(--color-text-muted); } .avatar-hint { font-size: 0.8125rem; color: var(--color-text-muted); text-align: center; } /* ============================================ Language Toggle in Auth Bar ============================================ */ .auth-bar { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border-light, var(--color-border)); padding: 0.5rem 0; font-size: 0.875rem; } .auth-bar .auth-links { display: flex; align-items: center; gap: 0.75rem; } .auth-bar .auth-links a { color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s; } .auth-bar .auth-links a:hover { color: var(--color-primary); } .auth-bar .auth-links .btn-logout-inline { background: none; border: none; color: var(--color-text-secondary); padding: 0; font-size: 0.875rem; cursor: pointer; transition: color 0.15s; } .auth-bar .auth-links .btn-logout-inline:hover { color: var(--color-error, #D62828); } /* ============================================ RTL Mirror Styles ============================================ */ [dir="rtl"] .dashboard-sidebar .btn-logout { text-align: right; } [dir="rtl"] .auth-bar .auth-links { flex-direction: row-reverse; } /* ============================================ Responsive (Dashboard) ============================================ */ @media (max-width: 767.98px) { .dashboard-sidebar { position: static; margin-bottom: 1.5rem; } .dashboard-wrapper { padding: 1rem 0; } .dashboard-card { padding: 1.25rem; } }