:root { --blue: #92bb40; --blue-dark: #68862e; --green: #243D91; --green-light: #3752b0; --dark: #171717; --text: #2a2a2a; --muted: #666; --border: #e7e7e7; --radius-lg: 0; --radius-md: 0; --radius-sm: 0; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.18); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; overflow-x: hidden; } body { font-family: 'Quicksand', 'Segoe UI', Arial, sans-serif; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; /* Matches .site-header's real rendered height (measured ~70-72px at both mobile and desktop widths) so content never starts out hidden underneath the fixed header on first paint — main.js's applyHeaderSpacing() still runs and can correct this if the header's actual height ever changes, but it's no longer the ONLY thing providing this spacing, so there's nothing to visibly shove into place after the page has already painted. */ padding-top: 72px; } h1, h2, h3, .brand, .footer-brand { font-family: 'Fraunces', Georgia, serif; } a { color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 28px; } section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--dark); } .section-kicker { color: var(--green); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 8px; display: block; } /* ---- Navbar ---- */ /* position: fixed (not sticky) — sticky doesn't reliably stay put once any ancestor has non-visible overflow (this app sets overflow-x: hidden on html/body sitewide to stop horizontal scroll), so fixed is the option that's actually guaranteed to stay pinned regardless. main.js adds the matching padding-top to so page content doesn't start out hidden underneath it. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); box-shadow: var(--shadow-sm); transform: translateY(0); transition: transform 0.25s ease; } /* Scrolling down past the top hides the bar out of the way of the page content; scrolling back up (any amount, anywhere on the page) brings it back immediately — see the scroll listener in main.js. */ .site-header.nav-hidden { transform: translateY(-100%); } .navbar { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; position: relative; } .brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 800; color: var(--blue); text-decoration: none; letter-spacing: -0.5px; } .brand-logo { height: 28px; width: auto; display: block; } .brand-logo-only { height: 38px; } .nav-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 28px; height: 22px; background: none; border: none; cursor: pointer; z-index: 110; } .nav-toggle span { display: block; height: 3px; width: 100%; background: var(--blue); border-radius: 0; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { text-decoration: none; font-weight: 600; color: #333; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--blue); border-bottom-color: var(--green); } .nav-cta { background: var(--blue); color: #fff !important; padding: 10px 22px !important; border-radius: 0; border-bottom: none !important; } .nav-cta:hover { background: var(--blue-dark); border-bottom-color: transparent !important; } /* ---- Hero (full-bleed photo) ---- */ .hero { position: relative; width: 100%; min-height: 78vh; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; padding-bottom: 56px; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 10, 0.35) 0%, rgba(20, 20, 10, 0.6) 100%); } .hero-inner { position: relative; z-index: 1; width: 100%; } .hero-text { max-width: 620px; } .hero-text h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .accent-green { color: var(--blue); } .hero-sub { margin-top: 20px; font-size: 1.15rem; max-width: 480px; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } .hero-swipe { margin-top: 40px; opacity: 0.85; } /* ---- Market trend ticker (bottom of hero) ---- */ .market-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: stretch; background: rgba(10, 14, 6, 0.55); backdrop-filter: blur(3px); } .ticker-label { flex-shrink: 0; display: flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 14px 20px; z-index: 1; } .ticker-viewport { flex: 1; overflow: hidden; } .ticker-track { display: flex; align-items: center; width: max-content; animation: ticker-scroll 30s linear infinite; } .market-ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { flex-shrink: 0; display: flex; align-items: baseline; gap: 10px; padding: 14px 22px; color: #fff; font-size: 0.92rem; white-space: nowrap; } .ticker-name { font-weight: 700; } .ticker-farm { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; } .ticker-farm .ticker-label-prefix { opacity: 0.8; } .ticker-market { color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; } .ticker-market .ticker-label-prefix { opacity: 0.7; } .ticker-change { font-weight: 700; } .ticker-item.up .ticker-change { color: var(--blue); } .ticker-item.down .ticker-change { color: #ff8a75; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .btn-cta { display: inline-block; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none; padding: 15px 34px; border-radius: 0; border: none; cursor: pointer; font-size: 1rem; box-shadow: 0 8px 20px rgba(146, 187, 64, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn-cta:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(146, 187, 64, 0.32); } /* Applied by main.js the instant any form submits, so a click gets immediate visible feedback instead of looking dead for however long the request takes — see the global submit handler in main.js. */ .btn-cta:disabled, .btn-small:disabled, button[disabled].btn-submitting { opacity: 0.65; cursor: wait; transform: none; box-shadow: none; } /* ---- How it works ---- */ .step-num { width: 42px; height: 42px; border-radius: 0; background: var(--blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } /* ---- Feature tiles ---- */ .tiles-grid { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; } .tile { display: flex; align-items: center; justify-content: space-between; text-decoration: none; padding: 56px 40px; min-height: 240px; transition: opacity 0.2s ease; } .tile:hover { opacity: 0.94; } .tile-plan-order { background: #fff; } .tile-label { font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; display: flex; flex-direction: column; } .label-plan { color: var(--blue); } .label-order { color: var(--green); } .tile-arrow { width: 60px; height: 60px; border-radius: 0; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .tile:hover .tile-arrow { transform: rotate(45deg); } .tile-market { position: relative; background-size: cover; background-position: center; isolation: isolate; } .tile-market::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 40, 10, 0.55) 0%, rgba(20, 40, 10, 0.15) 100%); z-index: -1; } .market-pill { background: var(--blue); color: #fff; font-weight: 700; font-size: 1.5rem; padding: 24px 60px; border-radius: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); margin-left: auto; } /* ---- Produce grid (cards with photos) ---- */ .produce-section { padding: 70px 0 80px; background: #f7f8f5; } .produce-section h2, .produce-section .section-kicker { text-align: center; display: block; } .produce-section h2 { margin-bottom: 44px; } .produce-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .product-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .product-card .product-media { height: 200px; overflow: hidden; } .product-card .product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .product-card:hover .product-media img { transform: scale(1.08); } .product-body { padding: 20px 22px 24px; } .product-body h3 { font-size: 1.15rem; color: var(--dark); margin-bottom: 6px; } .product-body p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .product-tag { display: inline-block; margin-top: 12px; font-size: 0.82rem; font-weight: 700; color: var(--green); background: rgba(28, 63, 214, 0.12); padding: 5px 12px; border-radius: 0; } .product-buy-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; } .btn-small { background: var(--blue); color: #fff; border: none; font-weight: 700; font-size: 0.88rem; padding: 9px 18px; border-radius: 0; cursor: pointer; transition: background 0.15s ease; } .btn-small:hover { background: var(--blue-dark); } /* ---- Inner page hero banner (with real photo) ---- */ .page-hero { position: relative; min-height: 34vh; background-size: cover; background-position: center; display: flex; flex-direction: column; color: #fff; text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 5, 0.35) 0%, rgba(10, 10, 5, 0.6) 100%); } .page-hero-inner { position: relative; z-index: 1; padding: 24px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* The ticker (shared with the home hero, where it's absolutely positioned) needs to sit in normal flow here instead — .page-hero is much shorter, so an absolutely-positioned ticker would overlap the centered text above it (e.g. the B2B badge line) rather than pushing the hero taller. */ .page-hero .market-ticker { position: relative; z-index: 1; } .page-hero-inner h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .page-hero-inner p { margin-top: 10px; font-size: 1.1rem; } /* ---- Content sections ---- */ .content-section { padding: 56px 28px; } .content-inner { max-width: 800px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; color: #333; } .split-section { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 20px 28px 60px; } .split-media { flex: 1 1 380px; min-width: 280px; } .split-media img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .split-text { flex: 1 1 380px; min-width: 280px; } .split-text h2 { margin-bottom: 16px; } .split-text p { color: var(--muted); line-height: 1.7; font-size: 1.05rem; } /* ---- Contact layout ---- */ .contact-grid { display: flex; flex-wrap: wrap; gap: 48px; max-width: 1000px; margin: 0 auto; } .contact-info { flex: 1 1 260px; min-width: 240px; } .contact-info h3 { margin-bottom: 14px; color: var(--dark); } .contact-info ul { list-style: none; margin-top: 18px; } .contact-info li { padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--muted); } .contact-info li strong { color: var(--dark); display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .contact-channel { padding: 14px 0; border-bottom: 1px solid var(--border); } .contact-channel strong { color: var(--dark); display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .contact-channel-desc { color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; } .contact-channel a { color: var(--blue); font-weight: 600; } .contact-form-wrap { flex: 1 1 340px; min-width: 280px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-sm); } .contact-form { display: flex; flex-direction: column; gap: 6px; } .contact-form label { font-weight: 600; margin-top: 12px; font-size: 0.92rem; } .contact-form input, .contact-form textarea, .contact-form select { padding: 12px 14px; border: 1px solid #ccc; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; transition: border-color 0.15s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--blue); } .provider-badge { display: inline-block; color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.3px; padding: 4px 12px; border-radius: 0; } .contact-form .btn-cta { align-self: flex-start; margin-top: 20px; } /* ---- Steps list (Plan & Order page) ---- */ .numbered-steps { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .numbered-steps li { list-style: none; display: flex; gap: 18px; align-items: flex-start; background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; } .numbered-steps .step-num { margin-bottom: 0; flex-shrink: 0; } .numbered-steps h3 { color: var(--dark); margin-bottom: 4px; } .numbered-steps p { color: var(--muted); font-size: 0.95rem; } /* ---- Footer ---- */ .site-footer { background: #fff; color: var(--muted); padding: 56px 28px 24px; border-top: 1px solid var(--border); } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; } .footer-col h4 { color: var(--dark); font-size: 1rem; margin-bottom: 16px; } .footer-brand { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 800; color: var(--blue); margin-bottom: 12px; } .footer-brand .brand-logo { height: 24px; } .footer-col p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); } .footer-attribution { font-size: 0.82rem !important; font-weight: 700; color: var(--blue) !important; margin-top: 6px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--muted); text-decoration: none; font-size: 0.92rem; transition: color 0.15s ease; } .footer-col a:hover { color: var(--green); } .footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--border); padding-top: 20px; font-size: 0.85rem; color: var(--muted); text-align: center; } /* ---- Responsive breakpoints ---- */ @media (min-width: 768px) { .tiles-grid { grid-template-columns: 1fr 1fr; } .tile-market { min-height: 320px; } .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } @media (max-width: 767px) { .nav-toggle { display: flex; } body.nav-open-lock { overflow: hidden; } .nav-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(10, 14, 6, 0.45); z-index: 105; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .nav-backdrop.open { opacity: 1; visibility: visible; } .nav-links { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 70vw; max-width: 70vw; height: 100vh; height: 100dvh; background: #fff; flex-direction: column; align-items: stretch; gap: 0; max-height: none; overflow-y: auto; box-shadow: -8px 0 20px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 0.28s ease; z-index: 106; padding-top: 8px; } .nav-links.open { transform: translateX(0); } .nav-links li { border-top: 1px solid #eee; } .nav-links a { display: block; padding: 14px 28px; } .nav-cta { margin: 10px 28px; text-align: center; } .hero-media { order: -1; } .hero-media img { height: 260px; } } @media (min-width: 768px) { .nav-toggle { display: none; } .nav-backdrop { display: none; } } /* ---- Auth forms & admin dashboard (Phase 1) ---- */ .auth-form { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; } .auth-form h1 { margin-bottom: 8px; } .auth-form .field-error { color: #c0392b; font-size: 0.85rem; margin: -2px 0 6px; } .auth-form label { font-weight: 600; margin-top: 12px; font-size: 0.92rem; } .auth-form input, .auth-form select, .auth-form textarea { padding: 12px 14px; border: 1px solid #ccc; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; } .auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: var(--blue); } /* ---- Password show/hide toggle (applied automatically, site-wide) ---- */ .password-field-wrap { position: relative; display: flex; } .password-field-wrap input { flex: 1; padding-right: 42px !important; } .password-toggle-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 8px; display: flex; align-items: center; font-size: 1.05rem; } .password-toggle-btn:hover { color: var(--text); } .category-manager { max-width: 480px; margin: 28px auto 0; padding: 16px 18px; background: #f7f8f5; border-radius: var(--radius-md); } .category-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .category-chip { background: #fff; border: 1px solid var(--border); color: var(--text); font-size: 0.82rem; font-weight: 600; padding: 5px 12px; border-radius: 0; } .measure-row { padding: 12px 0; border-bottom: 1px solid var(--border); } .measure-row-fields { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .measure-row-fields input[type="number"] { flex: 1; min-width: 100px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } .category-add-form { display: flex; gap: 8px; } .category-add-form input { flex: 1; padding: 10px 12px; border: 1px solid #ccc; border-radius: var(--radius-sm); font-size: 0.92rem; font-family: inherit; } .role-toggle { display: flex; gap: 20px; margin-top: 8px; } .role-toggle label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 0; } .auth-form .btn-cta { align-self: flex-start; margin-top: 22px; } .auth-switch { text-align: center; margin-top: 20px; color: var(--muted); font-size: 0.92rem; } .role-section { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 14px; } .form-section-heading { margin: 18px 0 2px; font-size: 1.05rem; } /* Two fields side by side on wide screens (first/last name, city/mtaa) — collapses to a single stacked column on narrow screens instead of squeezing both inputs down to an unusable width. */ .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .form-row-2 > div { display: flex; flex-direction: column; } @media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } } /* Admin dashboard */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-bottom: 36px; } .admin-stat-card { background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; } .admin-stat-card .stat-value { font-size: 2rem; font-weight: 800; color: var(--blue); font-family: 'Fraunces', Georgia, serif; } .admin-stat-card .stat-label { color: var(--muted); font-size: 0.88rem; margin-top: 4px; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.4px; } .price-history-details { margin-top: 14px; } .price-history-details summary { cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--blue); } .price-history-details .admin-table { font-size: 0.85rem; } .admin-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } .admin-nav-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); background: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--ink, #222); } .admin-nav-toggle-btn:hover { border-color: var(--green); color: var(--green); } .admin-nav-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(10, 14, 6, 0.45); z-index: 290; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .admin-nav-backdrop.open { opacity: 1; visibility: visible; } body.admin-nav-scroll-lock { overflow: hidden; } .admin-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); height: 100vh; height: 100dvh; background: #fff; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.28s ease; z-index: 300; display: flex; flex-direction: column; } .admin-nav-drawer.open { transform: translateX(0); } .admin-nav-drawer-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); background: #fff; font-weight: 700; flex-shrink: 0; } .admin-nav-close-btn { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); } .admin-nav-close-btn:hover { color: var(--ink, #222); } .admin-nav-drawer-links { display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 2rem; } .admin-nav-drawer-links a { padding: 14px 20px; border-bottom: 1px solid #eee; color: var(--ink, #222); text-decoration: none; font-size: 0.94rem; } .admin-nav-drawer-links a:hover { background: #f7f9f4; } .admin-nav-cta { background: var(--green); color: #fff !important; font-weight: 700; text-align: center; } .admin-nav-cta:hover { background: var(--green-dark, var(--green)); opacity: 0.92; } .user-filter-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .user-filter-row input, .user-filter-row select { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.9rem; } .user-filter-row input { flex: 1; min-width: 200px; } /* ---- Maps & location picker ---- */ .map-container { width: 100%; height: 400px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); margin: 16px 0; position: relative; z-index: 1; } .map-container.map-fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; border-radius: 0; z-index: 5000; } .map-fullscreen-btn { position: absolute; top: 10px; right: 10px; z-index: 1000; width: 34px; height: 34px; border: none; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; font-size: 1rem; line-height: 1; } .map-search-wrap { position: relative; max-width: 500px; } .amenity-marker { background: transparent; border: none; display: flex; align-items: center; justify-content: center; } .amenity-marker-icon { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .car-marker { background: transparent; border: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .route-marker { background: transparent; border: none; } .route-marker-number { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.85rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .route-marker-you-wrap { background: transparent; border: none; } .route-marker-start { background: var(--green, #2e7d32) !important; outline: 2px solid #fff; outline-offset: -2px; } .route-marker-delivered { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); color: #fff; font-weight: 700; font-size: 0.85rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .route-summary-bar { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: var(--surface-alt, #f5f7f5); border-radius: var(--radius-md); } .route-map-flex { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .route-map-primary { height: 460px; /* grow more than the panel, but never shrink past a usable width — once the panel's own min-width no longer fits alongside this, the whole row wraps (see media query below for a guaranteed stack on small screens rather than relying on this alone). */ flex: 2 1 300px; min-width: 300px; } .route-directions-panel { flex: 1 1 240px; min-width: 240px; background: var(--surface-alt, #f5f7f5); border-radius: var(--radius-md); padding: 14px 16px; max-height: 460px; overflow-y: auto; } @media (max-width: 700px) { .route-map-flex { flex-direction: column; } .route-map-primary { width: 100%; min-width: 0; flex: none; } .route-directions-panel { width: 100%; min-width: 0; flex: none; max-height: 220px; } } .route-directions-panel h4 { margin: 0 0 10px; font-size: 0.95rem; } .route-directions-list { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--text, #222); } .route-directions-list li { margin-bottom: 8px; } .route-directions-empty { list-style: none; margin-left: -18px; color: var(--muted); } .route-start-card { border-left: 3px solid var(--green, #2e7d32); } .picking-guide-tip { padding: 14px 18px; margin-bottom: 12px; background: var(--surface-alt, #f5f7f5); border-radius: var(--radius-md); } .picking-guide-tip h3 { margin: 0 0 6px; font-size: 1rem; } .picking-guide-tip p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .traffic-toggle-control { background: #fff; } .traffic-toggle-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 1.1rem; text-decoration: none; filter: grayscale(0.6); opacity: 0.7; transition: opacity 0.15s ease, filter 0.15s ease; } .traffic-toggle-btn.traffic-toggle-active { filter: none; opacity: 1; background: rgba(255, 193, 7, 0.15); } .weather-badge-control { display: flex; align-items: center; gap: 8px; background: #fff; padding: 6px 12px; border-radius: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); font-size: 0.85rem; margin: 0 0 10px 10px; } .weather-badge-temp { font-weight: 700; } .weather-badge-desc { color: var(--muted); white-space: nowrap; } .video-embed-wrap { position: relative; width: 100%; max-width: 800px; padding-bottom: 45%; height: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .video-embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .video-play-btn { width: 64px; height: 64px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .video-play-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.05); } .route-marker-you { display: flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 0; background: var(--green); color: #fff; font-weight: 700; font-size: 0.75rem; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .geocode-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 500; max-height: 220px; overflow-y: auto; } .geocode-result { padding: 10px 14px; font-size: 0.9rem; cursor: pointer; border-bottom: 1px solid var(--border); } .geocode-result:hover { background: #f5f5f5; } /* ---- Checkout steps ---- */ .checkout-steps { display: flex; gap: 8px; max-width: 800px; margin: 0 auto 30px; justify-content: center; flex-wrap: wrap; } .checkout-step { padding: 8px 18px; border-radius: 0; background: #f0f0f0; color: var(--muted); font-weight: 700; font-size: 0.85rem; } .checkout-step.active { background: var(--blue); color: #fff; } .checkout-step.done { background: var(--green); color: #fff; } /* ---- Cart ---- */ .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .cart-table th, .cart-table td { text-align: left; padding: 14px; border-bottom: 1px solid var(--border); } .cart-table img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); } /* Market-tied cart items — logo + a short name, never one replacing the other, so the shop stays identifiable even when its logo is unfamiliar. Solid, button-like green (same tone as .btn-cta) so it reads as its own small tag, not just muted caption text. */ .market-badge-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--blue); color: #fff; font-weight: 700; font-size: 0.78rem; line-height: 1; padding: 4px 10px 4px 4px; border-radius: 0; } .market-badge-pill img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; display: block; background: #fff; } .qty-controls { display: flex; align-items: center; gap: 10px; } .qty-controls button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: #fff; font-weight: 700; cursor: pointer; } .cart-summary { max-width: 360px; margin-left: auto; background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; } .cart-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.95rem; } .cart-summary-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; font-weight: 800; font-size: 1.15rem; color: var(--dark); } /* On small screens the 5-column cart table has no room to breathe and was pushing the page wider than the viewport ("extends" off-screen). Below 640px, each row becomes its own stacked card instead — no horizontal scrolling, and every control (including Remove) stays fully reachable. */ @media (max-width: 640px) { .cart-table, .cart-table thead, .cart-table tbody, .cart-table tr { display: block; width: 100%; } .cart-table thead { display: none; } .cart-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; padding: 8px 14px; } .cart-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 0; text-align: right; } .cart-table tr td:last-child { border-bottom: none; } .cart-table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 0.82rem; text-align: left; flex-shrink: 0; } .cart-cell-product { justify-content: flex-start; text-align: left; } .cart-cell-product::before { display: none; } .cart-cell-product img { flex-shrink: 0; } .cart-product-info { text-align: left; } .cart-cell-remove { justify-content: center; } .cart-cell-remove form { width: 100%; } .cart-cell-remove .btn-small { width: 100%; } } /* ---- Picker selection card ---- */ /* One auto-suggested picker, not a browsable list — see market/picker_ranking.py. Still used as the visual base for the card itself; the old grid/hover/ click-loading states are gone along with the list they belonged to. */ .picker-select-card { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 24px; } .picker-suggested-card { border-color: var(--blue); } .picker-select-card h3 { font-size: 1.05rem; margin-bottom: 4px; } .picker-select-card .distance { color: var(--green); font-weight: 700; font-size: 0.85rem; } .picker-rating { display: inline-block; margin-left: 8px; color: var(--dark); font-weight: 700; font-size: 0.85rem; } .truck-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 24px; } .truck-option-card { background: #fff; border: 2px solid var(--border); border-radius: var(--radius-md); padding: 20px; text-align: center; transition: border-color 0.15s ease; } .truck-option-card:hover { border-color: var(--blue); } .truck-icon { font-size: 2.4rem; display: block; margin-bottom: 6px; } .truck-icon-img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 6px; } .truck-option-card h3 { font-size: 1.05rem; margin-bottom: 4px; } .truck-capacity { color: var(--muted); font-size: 0.85rem; } .truck-distance { color: var(--muted); font-size: 0.82rem; margin-top: 4px; } .truck-fleet-name { font-weight: 600; font-size: 0.88rem; margin-top: 2px; } .truck-fleet-history { color: var(--muted); font-size: 0.78rem; margin-top: 2px; } .truck-price { color: var(--green); font-weight: 800; font-size: 1.15rem; margin-top: 10px; } .source-type-tag { display: inline-block; background: #f0f0f0; color: var(--dark); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 3px 9px; border-radius: 0; } .availability-status-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9rem; text-align: right; } .availability-status-badge.availability-available { background: rgba(146, 187, 64, 0.15); color: var(--blue-dark); } .availability-status-badge.availability-delivering { background: rgba(36, 61, 145, 0.1); color: var(--green); } .availability-status-badge.availability-at_capacity { background: rgba(192, 57, 43, 0.1); color: #c0392b; } .availability-count { font-size: 0.72rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; } /* ---- Date/time picker ---- */ .date-options { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .date-option { position: relative; } .date-option input { position: absolute; opacity: 0; } .date-option label { display: block; padding: 14px 20px; border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-weight: 700; text-align: center; margin-top: 0; } .date-option input:checked + label { border-color: var(--blue); background: rgba(146, 187, 64, 0.08); color: var(--blue); } .time-options { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .time-option label { display: block; padding: 10px 16px; border: 2px solid var(--border); border-radius: 0; cursor: pointer; font-weight: 600; font-size: 0.9rem; margin-top: 0; } .time-option input { position: absolute; opacity: 0; } .time-option input:checked + label { border-color: var(--green); background: rgba(28, 63, 214, 0.1); color: var(--green); } /* ---- Order tracker ---- */ .order-tracker { display: flex; justify-content: space-between; max-width: 700px; margin: 0 auto 32px; position: relative; } .order-tracker::before { content: ''; position: absolute; top: 18px; left: 5%; right: 5%; height: 3px; background: var(--border); z-index: 0; } .tracker-step { position: relative; z-index: 1; text-align: center; flex: 1; } .tracker-dot { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 3px solid var(--border); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); } .tracker-step.completed .tracker-dot { background: var(--green); border-color: var(--green); color: #fff; } .tracker-step.active .tracker-dot { background: var(--blue); border-color: var(--blue); color: #fff; } .tracker-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); } .tracker-step.completed .tracker-label, .tracker-step.active .tracker-label { color: var(--dark); } /* ---- Order chat (customer <-> picker) ---- */ .order-chat-thread { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 14px; background: #f7f8f5; border-radius: var(--radius-md); margin-bottom: 12px; } .order-chat-msg { max-width: 75%; padding: 8px 14px; border-radius: 0; background: #fff; border: 1px solid var(--border); align-self: flex-start; } .order-chat-msg.mine { align-self: flex-end; background: var(--blue); color: #fff; border-color: var(--blue); } .order-chat-msg p { margin: 0; font-size: 0.9rem; } .order-chat-time { display: block; font-size: 0.7rem; opacity: 0.7; margin-top: 3px; } .order-chat-form { display: flex; gap: 8px; } .order-chat-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } .fleet-chat-widget { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .fleet-chat-thread { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding: 12px; background: #f7f8f5; margin-bottom: 10px; } .fleet-chat-msg { max-width: 80%; padding: 8px 12px; background: #fff; border: 1px solid var(--border); align-self: flex-start; } .fleet-chat-msg.mine { align-self: flex-end; background: var(--blue); color: #fff; border-color: var(--blue); } .fleet-chat-msg p { margin: 0; font-size: 0.88rem; } .fleet-chat-time { display: block; font-size: 0.68rem; opacity: 0.7; margin-top: 2px; } .fleet-chat-form { display: flex; gap: 8px; } .fleet-chat-form input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); font-family: inherit; } /* ---- Floating order-message widget (customer + picker order pages) — bottom-left, mirroring the AI planner's bottom-right FAB pattern, so the two never collide on a page that happened to have both. ---- */ .order-chat-fab { position: fixed; bottom: 26px; left: 26px; width: 56px; height: 56px; border-radius: 50%; background: var(--green); border: none; box-shadow: 0 8px 24px rgba(36, 61, 145, 0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900; transition: transform 0.2s ease, opacity 0.2s ease; } .order-chat-fab:hover { transform: scale(1.06); } .order-chat-fab.hidden-fab { opacity: 0; pointer-events: none; transform: scale(0.6); } .order-chat-badge { position: absolute; top: -4px; right: -4px; background: #e0453c; color: #fff; font-size: 0.68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .order-chat-panel { position: fixed; bottom: 26px; left: 26px; width: 360px; max-width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 100px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 901; opacity: 0; transform: translateY(20px) scale(0.97); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; overflow: hidden; } .order-chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .order-chat-panel-header { background: var(--dark); color: #fff; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; } .order-chat-panel-header strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; } .order-chat-panel .order-chat-thread { flex: 1; max-height: none; margin-bottom: 0; border-radius: 0; } .order-chat-panel .order-chat-form { padding: 12px; border-top: 1px solid var(--border); background: #fff; } @media (max-width: 480px) { .order-chat-fab { left: 20px; bottom: 20px; } .order-chat-panel { width: calc(100vw - 24px); left: 12px; bottom: 12px; } } /* ---- Star rating ---- */ .rating-form { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; } .rating-stars { display: flex; flex-direction: row-reverse; font-size: 1.8rem; } .rating-stars input { display: none; } .rating-stars label { color: var(--border); cursor: pointer; padding: 0 2px; } .rating-stars input:checked ~ label, .rating-stars label:hover, .rating-stars label:hover ~ label { color: #f5a623; } .rating-form textarea { width: 100%; max-width: 400px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } .order-card { background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 16px; } /* ---- Partners / clients logo strip (homepage) ---- */ .partners-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } .partner-logo-card { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 20px; height: 64px; transition: box-shadow 0.15s ease, transform 0.15s ease; } a.partner-logo-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .partner-logo-card img { max-height: 40px; max-width: 140px; width: auto; height: auto; object-fit: contain; } @media (max-width: 640px) { .partner-logo-card { height: 52px; padding: 10px 14px; } .partner-logo-card img { max-height: 30px; max-width: 100px; } } .mini-tracker { display: flex; align-items: center; margin-top: 16px; } .mini-tracker-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--border); flex-shrink: 0; } .mini-tracker-dot.done { background: var(--blue); border-color: var(--blue); } .mini-tracker-dot.active { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 63, 214, 0.2); } .mini-tracker-line { flex: 1; height: 2px; background: var(--border); } .mini-tracker-line.done { background: var(--blue); } /* ---- Spending analytics ---- */ .spending-range-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .spending-range-tabs a { padding: 8px 16px; border-radius: 0; background: #f2f2f2; color: var(--text); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .spending-range-tabs a.active { background: var(--blue); color: #fff; } .spending-summary-grid, .picker-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; } .payout-frequency-form { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.9rem; } .payout-frequency-form select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } .payout-terms-card { background: #f7f8f5; border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 28px; } .payout-terms-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .payout-terms-header h3 { margin: 0; font-size: 1rem; } .payout-terms-current { font-weight: 600; color: var(--dark); margin-top: 2px; } .spending-stat-card { background: #f7f8f5; border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; } .spending-stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; } .spending-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--dark); } .analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 700px) { .analytics-two-col { grid-template-columns: 1fr; } } .spending-trend-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding: 10px 0; border-bottom: 1px solid var(--border); } .spending-trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; } .spending-trend-value { font-size: 0.7rem; color: var(--muted); font-weight: 700; } .spending-trend-bar { width: 100%; max-width: 36px; background: var(--blue); border-radius: 0; min-height: 2px; } .spending-trend-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; } /* ---- My Data ---- */ .my-data-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); } .my-data-row:last-of-type { border-bottom: none; } .status-badge { display: inline-block; padding: 5px 14px; border-radius: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .status-pending_payment { background: #fff3cd; color: #856404; } .status-confirmed { background: #d1ecf1; color: #0c5460; } .status-picking { background: #cce5ff; color: #004085; } .status-in_transit { background: #d4edda; color: #155724; } .status-delivered { background: #d4edda; color: #155724; } .status-cancelled { background: #f8d7da; color: #721c24; } .whatsapp-btn { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; padding: 12px 26px; border-radius: 0; text-decoration: none; font-weight: 700; } .whatsapp-btn:hover { background: #1ebe5b; } .payment-methods-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; text-align: left; } .payment-method-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f7f8f5; border-radius: var(--radius-sm); padding: 10px 14px; } .payment-method-row strong { font-size: 1.05rem; } .payment-proof-steps { text-align: left; max-width: 420px; margin: 0 auto 18px; padding-left: 22px; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .payment-proof-steps li { margin-bottom: 6px; } /* ---- Nav icons (account/cart) ---- */ .nav-icon-item { position: relative; display: flex; align-items: center; } .lang-switch-form { display: flex; background: #f2f2f2; border-radius: 0; padding: 3px; gap: 2px; } .lang-btn { border: none; background: none; color: var(--muted); font-size: 0.72rem; font-weight: 800; padding: 5px 10px; border-radius: 0; cursor: pointer; } .lang-btn.active { background: var(--blue); color: #fff; } .nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f2f2; color: var(--dark); border: none; cursor: pointer; text-decoration: none; transition: background 0.15s ease; position: relative; } .nav-avatar-btn { width: auto; height: 40px; border-radius: 0; gap: 8px; padding: 0 6px 0 0; background: none; } .nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-role-label { font-size: 0.8rem; font-weight: 700; color: var(--dark); padding-right: 4px; } .dropdown-lang-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); } .dropdown-lang-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); } .nav-icon-btn:hover { background: #e6e6e6; } .nav-icon-badge { position: absolute; top: -4px; right: -4px; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .account-dropdown { display: none; position: absolute; top: 48px; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 160px; z-index: 200; overflow: hidden; } .account-dropdown.open { display: block; } .account-dropdown a { display: block; padding: 12px 16px; text-decoration: none; color: var(--dark); font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid var(--border); } .account-dropdown a:last-child { border-bottom: none; } .account-dropdown a:hover { background: #f7f7f7; } .dropdown-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0; background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 800; } /* ---- Location picker extras ---- */ .map-search-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .map-search-row .map-search-wrap { flex: 1; min-width: 220px; } .locate-btn { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.85rem; font-weight: 600; color: var(--blue); cursor: pointer; white-space: nowrap; } .locate-btn:hover { background: #f5f7ff; } /* ---- Checkout location: quick-select cards (current location / Home / Business) — the primary way to set a delivery location; typing/searching is a secondary fallback tucked behind "choose a different location". ---- */ .location-quick-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; } .location-quick-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 18px 14px; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; } .location-quick-card:hover { border-color: var(--blue); transform: translateY(-1px); } .location-quick-card svg { color: var(--blue); } .location-quick-card strong { font-size: 0.92rem; } .location-quick-card small { color: var(--muted); font-size: 0.78rem; } .location-toggle-search-btn { background: none; border: none; color: var(--blue); font-weight: 700; font-size: 0.88rem; cursor: pointer; padding: 0; margin-bottom: 18px; text-decoration: underline; } /* ---- Road surface badge ---- */ .surface-badge { font-weight: 700; font-size: 0.85rem; padding: 3px 10px; border-radius: 0; background: #f0f0f0; color: var(--muted); } .surface-badge.ok { background: rgba(124, 179, 66, 0.15); color: #4b7a1e; } .surface-badge.warn { background: rgba(255, 138, 117, 0.18); color: #b3401f; } .route-start-badge { background: var(--green, #2e7d32); color: #fff; } /* Each badge/label wraps as one whole piece onto its own line on a narrow screen instead of the browser breaking text mid-badge, which is what made a longer label like "Start here to save fuel" look broken. */ .order-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 8px; } /* ---- Picker vehicle marker + name/status tag (checkout picker map, order tracking maps) ---- */ .vehicle-marker { background: transparent; border: none; } .leaflet-tooltip.picker-tag { background: #fff; border: none; border-radius: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); padding: 6px 10px; font-size: 0.82rem; line-height: 1.5; text-align: center; white-space: nowrap; } .leaflet-tooltip.picker-tag::before { border-top-color: #fff; } .leaflet-tooltip.market-name-tag { padding: 3px 8px; font-size: 0.72rem; font-weight: 600; } .picker-tag-available { color: #4b7a1e; font-weight: 700; } .picker-tag-close { color: #b3401f; font-weight: 700; } .leaflet-tooltip.order-dot-badge { background: rgba(30, 30, 30, 0.85); color: #fff; border: none; border-radius: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); padding: 1px 6px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .leaflet-tooltip.order-dot-badge::before { border-top-color: rgba(30, 30, 30, 0.85); } /* ---- Uber-Eats-style product grid ---- */ .market-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 26px; } .market-search-input { flex: 1 1 220px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.92rem; } .market-category-select { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.92rem; background: #fff; } .market-clear-filter { background: var(--muted); } .ue-measure-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem; margin-bottom: 8px; } .ue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; } .ue-card { background: #fff; border-radius: var(--radius-md); overflow: visible; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .ue-card-media { position: relative; height: 160px; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; } .ue-card-media img { width: 100%; height: 100%; object-fit: cover; } .ue-card-body { padding: 16px; } .ue-card-body h3 { font-size: 1.02rem; margin-bottom: 2px; } .ue-card-meta { color: var(--muted); font-size: 0.82rem; margin-bottom: 8px; } .ue-price { font-weight: 800; color: var(--dark); font-size: 0.95rem; } .ue-min-qty { font-size: 0.78rem; color: var(--blue); font-weight: 700; margin-top: 2px; } /* Two compact columns on a phone screen instead of one tall column per product — the auto-fill/minmax above only ever fits one card below ~440px, which made the market feel like an endless scroll of oversized tiles. */ @media (max-width: 640px) { .ue-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ue-card-media { height: 100px; } .ue-card-body { padding: 10px; } .ue-card-body h3 { font-size: 0.85rem; line-height: 1.2; } .ue-card-meta { font-size: 0.72rem; margin-bottom: 4px; } .ue-price { font-size: 0.85rem; } } /* Single buy control: quantity stepper + one "+" add-to-cart button — no separate duplicate "Add to cart" button alongside it. */ .ue-add-row { display: flex; align-items: stretch; gap: 8px; margin-top: 12px; } .ue-qty-input { width: 60px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; text-align: center; flex-shrink: 0; } .ue-add-btn-front { flex-shrink: 0; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--blue); color: #fff; border: none; box-shadow: 0 3px 8px rgba(146, 187, 64, 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .ue-add-btn-front svg { flex-shrink: 0; } .ue-add-btn-front:hover { background: var(--blue-dark); transform: scale(1.03); } .b2b-badge { position: absolute; top: 10px; right: 10px; background: var(--dark); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 0; } .b2b-hero-badge { display: inline-block; margin-top: 14px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-size: 0.82rem; font-weight: 700; padding: 6px 16px; border-radius: 0; } .approval-pending-banner { background: #fff6e0; border: 1px solid #f0d78c; border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px; } .approval-pending-banner strong { color: #8a6200; } .approval-pending-banner p { color: #8a6200; font-size: 0.88rem; margin-top: 4px; } .bulk-savings-badge { background: rgba(146, 187, 64, 0.15); color: #4b7a1e; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 0; } /* ---- Business Mode switch (same account, B2C <-> B2B) ---- */ .business-mode-bar { background: #f2f6ea; border-bottom: 1px solid var(--border); } .business-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 28px; } .business-mode-copy { font-size: 0.9rem; font-weight: 600; color: var(--text); } .mode-switch-form { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mode-switch-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); } .mode-switch { position: relative; display: inline-block; width: 46px; height: 26px; } .mode-switch input { opacity: 0; width: 0; height: 0; } .mode-switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 0; cursor: pointer; transition: background 0.2s ease; } .mode-switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .mode-switch input:checked + .mode-switch-track { background: var(--blue); } .mode-switch input:checked + .mode-switch-track .mode-switch-thumb { transform: translateX(20px); } @media (min-width: 1200px) { .ue-grid { grid-template-columns: repeat(5, 1fr); } } /* ---- Floating cart button (market page, stacked above the chat FAB) ---- Only shown at all once the cart actually has something in it — see .cart-empty below — and gives a quick spin whenever something new is added, so it doubles as an "added to cart" confirmation. ---- */ .cart-fab { position: fixed; bottom: 88px; right: 26px; width: 42px; height: 42px; border-radius: 50%; background: var(--green); box-shadow: 0 8px 24px rgba(36, 61, 145, 0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 899; transition: transform 0.2s ease, opacity 0.2s ease; } .cart-fab svg { width: 18px; height: 18px; } .cart-fab:hover { transform: scale(1.06); } .cart-fab.hidden-fab, .cart-fab.cart-empty { opacity: 0; pointer-events: none; transform: scale(0.6); } /* ---- Floating chat widget — opens as a genuine full-screen panel, not a small corner card, so there's room for the whole conversation plus the order-confirmation and payment cards it can grow to include. ---- */ .chat-fab { position: fixed; bottom: 26px; right: 26px; width: 60px; height: 60px; border-radius: 50%; background: var(--blue); border: none; box-shadow: 0 8px 24px rgba(146, 187, 64, 0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 900; transition: transform 0.2s ease, opacity 0.2s ease; } .chat-fab:hover { transform: scale(1.06); } .chat-fab.hidden-fab { opacity: 0; pointer-events: none; transform: scale(0.6); } /* A bounded floating panel on tablet/desktop — sized to fit a conversation, not the whole monitor (a true full-screen panel on a big screen was mostly empty white space around a narrow chat column). Goes genuinely full-screen only below the phone breakpoint (see media query), where that's actually the right amount of space to use. */ .chat-panel { position: fixed; bottom: 26px; right: 26px; width: 420px; max-width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 80px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 950; opacity: 0; transform: translateY(20px) scale(0.97); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; overflow: hidden; } .chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } @media (max-width: 700px) { .chat-panel { left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-width: 100%; max-height: calc(100vh - 60px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); transform: translateY(16px); } .chat-panel.open { transform: translateY(0); } } .chat-panel-header { background: var(--blue); color: #fff; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; } .chat-panel-header strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; } .chat-panel-header p { font-size: 0.78rem; opacity: 0.85; margin-top: 2px; } .chat-reset-btn { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 6px 10px; border-radius: 0; cursor: pointer; } .chat-close-btn { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f7f8f5; } .chat-mode-picker { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; background: #f7f8f5; } .chat-mode-picker p { font-weight: 700; color: var(--dark); margin-bottom: 4px; } .chat-mode-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; } .chat-mode-btn:hover { border-color: var(--blue); transform: translateY(-1px); } .chat-mode-btn strong { font-size: 0.95rem; display: flex; align-items: center; gap: 8px; } .chat-mode-btn strong i { font-size: 1.05rem; color: var(--blue); } .chat-mode-btn span { font-size: 0.8rem; color: var(--muted); } .chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 0; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; } .chat-msg.user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; } .chat-msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--border); color: var(--dark); border-bottom-left-radius: 4px; } .chat-msg.assistant.typing { color: var(--muted); font-style: italic; } .chat-msg.system { align-self: center; background: rgba(124, 179, 66, 0.15); color: #4b7a1e; font-weight: 700; font-size: 0.8rem; border-radius: 0; } /* ---- Inline cart / order cards rendered in the chat message stream ---- */ .chat-card { align-self: stretch; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 12px 14px; font-size: 0.85rem; } .chat-card-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--dark); margin-bottom: 8px; } .chat-cart-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--dark); } .chat-cart-row small { color: var(--muted); } .chat-cart-subtotal { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 700; } .chat-order-map { height: 140px; border-radius: 0; margin-bottom: 8px; background: #f0f0f0; } .chat-order-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--blue); text-decoration: none; } .chat-order-link:hover { text-decoration: underline; } /* ---- "How to pay" section inside the chat's order-scheduled card ---- */ .chat-payment-section { border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 10px; } .chat-payment-intro { color: var(--muted); font-size: 0.82rem; margin-bottom: 8px; } .chat-payment-method-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f7f8f5; border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; font-size: 0.85rem; } .chat-payment-account { color: var(--muted); font-size: 0.8rem; } .chat-whatsapp-btn { display: flex; justify-content: center; width: 100%; margin-top: 8px; padding: 10px 16px; font-size: 0.85rem; box-sizing: border-box; } .chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: #fff; } .chat-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 0; padding: 10px 16px; font-size: 0.9rem; font-family: inherit; } .chat-input-row input:focus { outline: none; border-color: var(--blue); } .chat-input-row button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } @media (max-width: 480px) { .chat-fab { right: 20px; bottom: 20px; } .cart-fab { right: 20px; bottom: 82px; width: 38px; height: 38px; } } /* ---- Global messages banner ---- */ .site-messages { max-width: 900px; margin: 16px auto 0; padding: 0 28px; } .site-message { background: #eef4ff; color: #1c3fd6; border: 1px solid rgba(28, 63, 214, 0.2); border-radius: var(--radius-sm); padding: 12px 18px; font-size: 0.92rem; font-weight: 600; margin-bottom: 10px; } .site-message.success { background: rgba(124, 179, 66, 0.12); color: #4b7a1e; border-color: rgba(124, 179, 66, 0.3); } .site-message.error { background: rgba(255, 138, 117, 0.12); color: #b3401f; border-color: rgba(255, 138, 117, 0.3); } /* ---- Toast messages (AJAX save/add confirmations, no page reload) ---- */ .toast-stack { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: 100%; padding: 0 16px; } .toast-message { background: #fff; color: var(--dark); border: 1px solid var(--border); border-left: 4px solid var(--green); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 10px 18px; font-size: 0.88rem; font-weight: 600; max-width: 420px; text-align: center; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast-message.toast-in { opacity: 1; transform: translateY(0); } .toast-message.error { border-left-color: #e05a3d; } .toast-message.info { border-left-color: var(--blue); } /* ---- Chat quick replies + checkout bar ---- */ .chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; } .chat-quick-reply-btn { background: #fff; border: 1.5px solid var(--blue); color: var(--blue); font-weight: 700; font-size: 0.82rem; padding: 8px 14px; border-radius: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .chat-quick-reply-btn:hover { background: var(--blue); color: #fff; } .chat-checkout-bar { display: none; align-items: center; justify-content: space-between; background: rgba(124, 179, 66, 0.12); border-top: 1px solid rgba(124, 179, 66, 0.3); padding: 10px 16px; font-size: 0.82rem; font-weight: 700; color: #4b7a1e; } .chat-checkout-bar.visible { display: flex; } .chat-checkout-link { text-decoration: none; color: var(--blue); } /* ---- Chat memory button ---- */ .chat-memory-btn { background: rgba(255, 255, 255, 0.15); border: none; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: 0; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.15s ease; } .chat-memory-btn:hover { background: rgba(255, 255, 255, 0.3); } /* ---- System notes (history restored, memory cleared, etc.) ---- */ .chat-msg.system-note { align-self: center; background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 600; font-style: italic; padding: 6px 12px; border-radius: 0; max-width: 100%; text-align: center; border: 1px dashed var(--border); } /* ---- Fuzzy area confirmation banner (location picker) ---- */ .fuzzy-confirm-banner { background: linear-gradient(135deg, #eef6e6 0%, #f0f7ff 100%); border: 1.5px solid var(--green); border-radius: var(--radius-md); padding: 0; margin-bottom: 14px; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; } .fuzzy-confirm-banner.visible { opacity: 1; transform: translateY(0); } .fuzzy-confirm-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; } .fuzzy-confirm-icon { color: var(--green); flex-shrink: 0; } .fuzzy-confirm-text { flex: 1; font-size: 0.95rem; color: var(--text); min-width: 180px; } .fuzzy-confirm-text strong { color: var(--dark); font-weight: 800; } .fuzzy-confirm-actions { display: flex; gap: 8px; flex-shrink: 0; } .fuzzy-confirm-yes { background: var(--green); color: #fff; border: none; font-weight: 700; font-size: 0.88rem; padding: 9px 20px; border-radius: 0; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .fuzzy-confirm-yes:hover { background: #6a9e38; transform: translateY(-1px); } .fuzzy-confirm-no { background: transparent; color: var(--muted); border: 1.5px solid var(--border); font-weight: 600; font-size: 0.88rem; padding: 9px 20px; border-radius: 0; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .fuzzy-confirm-no:hover { border-color: var(--text); color: var(--text); } /* Persistent "this pin is only approximate" warning -- same shape as .fuzzy-confirm-banner, but the warn palette already used for surface-badge.warn (SLA-overdue badges etc.) instead of the green confirm palette, since this is a caution the customer needs to act on, not an AI suggestion to accept. Stays up until the customer actually corrects the pin (see location-picker.js) -- deliberately never auto-hides on a timer, unlike the button-text label this replaced. */ .approx-location-banner { background: rgba(255, 138, 117, 0.12); border: 1.5px solid #b3401f; border-radius: var(--radius-md); padding: 0; margin-bottom: 14px; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; } .approx-location-banner.visible { opacity: 1; transform: translateY(0); } .approx-location-banner .fuzzy-confirm-icon { color: #b3401f; } .approx-location-banner .fuzzy-confirm-yes { background: #b3401f; } .approx-location-banner .fuzzy-confirm-yes:hover { background: #8f3018; } .geocode-no-result { color: var(--muted) !important; font-style: italic; cursor: default !important; background: #fafafa !important; } .geocode-no-result:hover { background: #fafafa !important; } .mobile-back-btn { display: none; } @keyframes spin { 100% { transform: rotate(360deg); } } @media (max-width: 767px) { .nav-icon-item { width: 100%; position: static; } /* Target .nav-links to override 'display: block' from .nav-links a */ .nav-links .nav-icon-btn { display: flex; width: 100%; height: auto; border-radius: 0; justify-content: flex-start; align-items: center; gap: 12px; padding: 14px 28px; background: none; } .nav-icon-btn:hover { background: #f7f7f7; } /* Ensure badge flows naturally next to the icon instead of flying off the edge */ .nav-links .nav-icon-badge { position: static; margin-left: 4px; min-width: 22px; height: 22px; border-radius: 0; } .mobile-back-btn { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: #f7f8f5; border: none; border-bottom: 1px solid var(--border); width: 100%; font-weight: 800; font-size: 1rem; cursor: pointer; color: var(--dark); } .account-dropdown { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; background: #fff; transform: translateX(100%); transition: transform 0.25s ease; border: none; box-shadow: none; z-index: 10; padding-top: 0; } .account-dropdown.open { transform: translateX(0); } .account-dropdown a { padding: 14px 28px; } .account-dropdown .dropdown-lang-row { padding: 14px 28px; } }