/* ==================================================
   ASSAM MOTORS — MAIN STYLESHEET
   ================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; max-width: 100%; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; position: relative; }
body { background: #f5f6f8; color: #1a1a1a; line-height: 1.5; }
img { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 40px; width: 100%; }

/* ===== PDI TOPBAR ===== */
.pdi-topbar { background: linear-gradient(135deg, #f4a261 0%, #e63946 50%, #c92a37 100%); color: #fff; padding: 11px 0; position: sticky; top: 0; z-index: 1001; box-shadow: 0 4px 20px rgba(230,57,70,0.35); }
.pdi-topbar-inner { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; font-size: 14px; font-weight: 600; }
.pdi-topbar-badge { background: #fff; color: #e63946; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; animation: pdiPulse 1.5s ease-in-out infinite; }
@keyframes pdiPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }
.pdi-topbar-price { font-size: 20px; font-weight: 800; }
.pdi-topbar-price .old { font-size: 14px; text-decoration: line-through; opacity: 0.75; margin-left: 6px; }
.pdi-topbar-btn { background: #fff; color: #e63946; border: none; padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 800; }

/* HEADER */
.header { background: #0b2545; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; background: #fff; padding: 3px; flex-shrink: 0; }
.brand-text strong { display: block; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.1; }
.brand-text small { display: block; color: #94a3b8; font-size: 10px; font-weight: 500; }
.main-nav { display: flex; gap: 28px; margin-left: 20px; margin-right: auto; }
.main-nav a { color: #e2e8f0; font-size: 14px; font-weight: 500; padding: 4px 0; }
.main-nav a:hover, .main-nav a.active { color: #f4a261; }
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.icon-btn { background: transparent; border: none; width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #e2e8f0; position: relative; }
.icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cart-count { position: absolute; top: 4px; right: 4px; background: #e63946; color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid #0b2545; }
.login-btn { margin-left: 12px; padding: 10px 20px; font-size: 13px; font-weight: 600; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 8px; }
.login-btn:hover { background: #fff; color: #0b2545; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: #e63946; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; }
.user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); min-width: 220px; padding: 8px; display: none; z-index: 100; }
.user-dropdown.open { display: block; }
.user-dropdown-header { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; }
.user-dropdown-header strong { display: block; color: #0b2545; font-size: 14px; }
.user-dropdown-header small { color: #94a3b8; font-size: 12px; }
.user-dropdown a, .user-dropdown button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: #334155; font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: inherit; }
.user-dropdown a:hover, .user-dropdown button:hover { background: #f1f5f9; color: #0b2545; }
.user-dropdown .logout { color: #e63946; border-top: 1px solid #f1f5f9; margin-top: 6px; padding-top: 10px; }

/* HERO */
.hero { position: relative; min-height: 480px; background: #0b2545 url('images/hero-banner.jpg') center/cover no-repeat; display: flex; align-items: center; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,37,69,0.92) 0%, rgba(11,37,69,0.55) 45%, rgba(11,37,69,0.05) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 60px 40px; }
.hero-content { max-width: 640px; color: #fff; }
.hero-tag { color: #f4a261; font-size: 12px; letter-spacing: 3px; font-weight: 700; margin-bottom: 16px; }
.hero h1 { font-size: 46px; font-weight: 800; line-height: 1.15; margin-bottom: 14px; }
.hero h1 span { color: #e63946; }
.hero p { color: #cbd5e1; margin-bottom: 30px; font-size: 15px; }
.hero-search { display: flex; background: #fff; border-radius: 8px; overflow: hidden; max-width: 580px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); align-items: center; width: 100%; }
.hero-search svg { margin-left: 20px; }
.hero-search input { flex: 1; padding: 18px 16px; border: none; outline: none; font-size: 15px; }
.hero-search button { background: #e63946; color: #fff; border: none; padding: 0 40px; height: 56px; font-weight: 700; font-size: 15px; }

/* VEHICLE SELECTOR */
.vehicle-selector { background: #fff; margin-top: -34px; padding: 22px 28px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 14px; position: relative; z-index: 10; flex-wrap: wrap; }
.vehicle-selector label { font-weight: 700; color: #0b2545; font-size: 14px; margin-right: 8px; }
.vehicle-selector select { padding: 12px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #fafafa; min-width: 130px; }
.garage-btn { background: #0b2545; color: #fff; padding: 12px 22px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* SECTION */
.section { padding: 50px 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.section-head h2 { font-size: 26px; font-weight: 700; color: #0b2545; }
.section-head a { color: #e63946; font-size: 14px; font-weight: 600; }

/* CATEGORIES */
.cat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }
.cat-card { background: #fff; border-radius: 12px; padding: 18px 10px 14px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.cat-card:hover { transform: translateY(-6px); border-color: #e63946; }
.cat-card .cat-img { width: 68px !important; height: 68px !important; object-fit: contain !important; margin: 0 auto 12px !important; }
.cat-card span { font-size: 12px; font-weight: 600; color: #1a1a1a; }

/* PARTS TYPES */
.parts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.parts-box { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.parts-box h3 { font-size: 20px; margin: 12px 0 10px; color: #0b2545; }
.parts-box p { font-size: 14px; color: #64748b; margin-bottom: 20px; }
.badge { display: inline-block; color: #fff; font-size: 11px; padding: 5px 12px; border-radius: 20px; font-weight: 700; }
.badge.red { background: #e63946; }
.badge.green { background: #2a9d8f; }
.badge.blue { background: #1e3a8a; }
.parts-btn { background: #0b2545; color: #fff; border: none; padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; }

/* BRANDS */
.brand-row { display: flex; gap: 14px; flex-wrap: wrap; }
.brand-card { background: #fff; padding: 18px 28px; border-radius: 10px; font-weight: 800; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 2px solid transparent; cursor: pointer; }
.brand-bosch { color: #e30613; border-color: #e30613; }
.brand-mahle { color: #003c7d; border-color: #003c7d; }
.brand-mann { color: #1a1a1a; border-color: #f4b400; }
.brand-ngk, .brand-denso, .brand-kyb, .brand-brembo { color: #e60012; border-color: #e60012; }
.brand-zf { color: #003399; border-color: #003399; }
.brand-valeo { color: #7ab800; border-color: #7ab800; }
.brand-castrol { color: #009639; border-color: #009639; }

/* PRODUCTS */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; position: relative; transition: all 0.3s; }
.prod-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(11,37,69,0.12); }
.prod-tag { position: absolute; top: 12px; left: 12px; background: #e63946; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 12px; font-weight: 700; z-index: 2; }
.prod-tag.popular { background: #f4a261; }
.prod-img { width: 100%; height: 200px; background: #f0f2f5; overflow: hidden; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-info { padding: 16px; }
.prod-info h4 { font-size: 15px; color: #1a1a1a; margin-bottom: 6px; font-weight: 600; }
.prod-info .brand-name { font-size: 12px; color: #94a3b8; margin-bottom: 10px; text-transform: uppercase; }
.prod-info .price { font-size: 18px; font-weight: 800; color: #0b2545; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-info .price span { font-size: 13px; color: #94a3b8; text-decoration: line-through; font-weight: 400; }
.prod-info .off { color: #2a9d8f; font-size: 12px; font-weight: 700; }
.add-cart-btn { width: 100%; margin-top: 12px; background: #0b2545; color: #fff; border: none; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.add-cart-btn:hover { background: #e63946; }
.add-cart-btn.added { background: #2a9d8f; }

/* SERVICE + PDI */
.service-pdi-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: stretch; }
.service-banner { background: linear-gradient(135deg, #0b2545 0%, #1e3a8a 100%); border-radius: 14px; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.service-banner-left { display: flex; align-items: center; gap: 16px; }
.service-icon { width: 52px; height: 52px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.service-banner h3 { font-size: 20px; margin-bottom: 3px; }
.service-banner p { color: #cbd5e1; font-size: 13px; }
.service-features { display: flex; gap: 10px; flex-wrap: wrap; }
.service-tag { background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.18); color: #e2e8f0; padding: 8px 16px; border-radius: 20px; font-size: 12.5px; font-weight: 600; font-family: inherit; }
.service-tag::before { content: '✓ '; color: #2a9d8f; font-weight: 700; }
.service-tag:hover { background: #e63946; border-color: #e63946; color: #fff; }
.service-tag:hover::before { color: #fff; }
.service-tag.selected { background: #2a9d8f; border-color: #2a9d8f; color: #fff; }
.service-btn { background: #e63946; color: #fff; border: none; padding: 12px 28px; border-radius: 8px; font-weight: 700; font-size: 14px; align-self: flex-start; }

.pdi-banner { background: linear-gradient(135deg, #fff5e6 0%, #ffe0cc 100%); border: 2px solid #f4a261; border-radius: 14px; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; color: #0b2545; position: relative; overflow: hidden; }
.pdi-banner::after { content: '25% OFF'; position: absolute; top: 18px; right: -38px; background: #e63946; color: #fff; padding: 5px 42px; font-size: 11px; font-weight: 800; transform: rotate(35deg); }
.pdi-banner-head { display: flex; align-items: center; gap: 12px; }
.pdi-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #f4a261, #e76f51); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.pdi-banner h3 { font-size: 19px; font-weight: 800; margin-bottom: 2px; }
.pdi-banner p { font-size: 12.5px; color: #64748b; }
.pdi-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdi-price-new { font-size: 32px; font-weight: 800; color: #e63946; line-height: 1; }
.pdi-price-old { font-size: 16px; color: #94a3b8; text-decoration: line-through; }
.pdi-price-save { background: #2a9d8f; color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.pdi-features { display: flex; flex-wrap: wrap; gap: 6px; }
.pdi-features span { background: rgba(11,37,69,0.06); color: #0b2545; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.pdi-btn { background: linear-gradient(135deg, #e63946, #c92a37); color: #fff; border: none; padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 700; margin-top: auto; }

/* FOOTER */
footer { background: #071a33; color: #cbd5e1; padding: 60px 0 24px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.5fr 1.5fr; gap: 40px; margin-bottom: 40px; }
footer h4 { color: #fff; margin-bottom: 18px; font-size: 15px; font-weight: 700; }
footer a { color: #94a3b8; display: block; margin-bottom: 10px; font-size: 14px; word-break: break-word; }
footer a:hover { color: #f4a261; }
.footer-brand .footer-logo { width: 60px; height: 60px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; margin-bottom: 14px; }
.footer-brand p { font-size: 13px; line-height: 1.7; color: #94a3b8; }
.footer-news p { font-size: 13px; color: #94a3b8; margin-bottom: 14px; }
.news-input { display: flex; background: #0b2545; border-radius: 8px; overflow: hidden; border: 1px solid #1e3a8a; }
.news-input input { flex: 1; padding: 11px 14px; background: transparent; border: none; outline: none; color: #fff; font-size: 13px; min-width: 0; }
.news-input button { background: #e63946; color: #fff; border: none; padding: 0 18px; font-weight: 700; font-size: 12px; }
.news-message { font-size: 12px; margin-top: 8px; display: none; padding: 8px 12px; border-radius: 6px; }
.news-message.show { display: block; }
.news-message.success { background: rgba(42,157,143,0.15); color: #2a9d8f; }
.news-message.error { background: rgba(230,57,70,0.15); color: #e63946; }
.footer-bottom { border-top: 1px solid #1e3a8a; padding-top: 22px; text-align: center; font-size: 13px; color: #64748b; }

/* MODALS */
.modal-overlay { position: fixed; inset: 0; background: rgba(11,37,69,0.85); backdrop-filter: blur(6px); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all 0.3s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 25px 70px rgba(0,0,0,0.4); transform: scale(0.9); transition: transform 0.3s; }
.modal-overlay.open .modal { transform: scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; color: #64748b; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #e63946; color: #fff; }
.modal-view { padding: 38px; }
.modal-head { margin-bottom: 26px; }
.modal-head h3 { font-size: 24px; color: #0b2545; margin-bottom: 6px; }
.modal-head p { font-size: 14px; color: #64748b; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-form .form-group { display: flex; flex-direction: column; }
.modal-form .form-group.full { grid-column: 1 / -1; }
.modal-form label { font-size: 13px; margin-bottom: 7px; color: #334155; font-weight: 600; }
.modal-form input, .modal-form select, .modal-form textarea { padding: 12px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #fafafa; font-size: 14px; outline: none; font-family: inherit; width: 100%; }
.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: #e63946; background: #fff; }
.modal-submit { grid-column: 1 / -1; background: linear-gradient(135deg, #e63946, #c92a37); color: #fff; border: none; padding: 15px; border-radius: 10px; font-size: 15px; font-weight: 700; }

.thank-you { text-align: center; }
.thank-icon { font-size: 64px; margin-bottom: 15px; }
.thank-you h3 { font-size: 26px; color: #0b2545; margin-bottom: 12px; }
.thank-summary { background: #f8fafc; border-radius: 12px; padding: 20px; margin: 22px 0; text-align: left; font-size: 14px; }
.thank-summary div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.thank-summary div:last-child { border-bottom: none; }
.thank-note { background: #ecfdf5; color: #065f46; padding: 12px; border-radius: 10px; font-size: 13px; text-align: left; }

/* AUTH */
.auth-tabs { display: flex; gap: 8px; background: #f1f5f9; padding: 5px; border-radius: 10px; margin-bottom: 24px; }
.auth-tab { flex: 1; padding: 11px; border: none; background: transparent; border-radius: 8px; font-size: 14px; font-weight: 600; color: #64748b; font-family: inherit; }
.auth-tab.active { background: #0b2545; color: #fff; }
.auth-form { display: grid; gap: 14px; }
.auth-form .form-group { display: flex; flex-direction: column; }
.auth-form label { font-size: 13px; margin-bottom: 7px; color: #334155; font-weight: 600; }
.auth-form input { padding: 12px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px; background: #fafafa; font-size: 14px; outline: none; font-family: inherit; width: 100%; }
.auth-error { background: #fef2f2; color: #b91c1c; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; display: none; }
.auth-error.show { display: block; }
.auth-success { background: #ecfdf5; color: #065f46; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; display: none; }
.auth-success.show { display: block; }
.auth-switch { text-align: center; font-size: 13px; color: #64748b; margin-top: 14px; }
.auth-switch a { color: #e63946; font-weight: 600; cursor: pointer; }

/* PROFILE */
.profile-header { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #f1f5f9; }
.profile-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #e63946, #c92a37); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; text-transform: uppercase; flex-shrink: 0; }
.profile-info h3 { font-size: 22px; color: #0b2545; margin-bottom: 4px; }
.profile-info p { font-size: 14px; color: #64748b; }

/* LIST */
.list-container { max-height: 500px; overflow-y: auto; padding-right: 8px; }
.list-item { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.list-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.list-item-id { font-size: 13px; font-weight: 700; color: #0b2545; }
.list-item-status { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; }
.status-confirmed { background: #d1fae5; color: #065f46; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-completed { background: #dbeafe; color: #1e40af; }
.status-cancelled { background: #fee2e2; color: #991b1b; }
.list-item-body { font-size: 13.5px; color: #334155; line-height: 1.7; }
.list-item-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.list-btn { background: #0b2545; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; }
.list-btn.danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.list-btn.danger:hover { background: #e63946; color: #fff; }
.empty-list { text-align: center; padding: 50px 20px; color: #94a3b8; }
.empty-list-icon { font-size: 48px; margin-bottom: 12px; }
.empty-list h4 { color: #0b2545; font-size: 17px; margin-bottom: 8px; }
.empty-list p { font-size: 13.5px; margin-bottom: 18px; }
.empty-list .list-btn { padding: 10px 22px; font-size: 13px; background: #e63946; }

/* CART */
.cart-sidebar { position: fixed; top: 0; right: -420px; width: 400px; max-width: 90vw; height: 100vh; background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,0.15); z-index: 2000; display: flex; flex-direction: column; transition: right 0.3s; }
.cart-sidebar.open { right: 0; }
.cart-header { padding: 22px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.cart-header h3 { font-size: 20px; color: #0b2545; }
.close-btn { background: none; border: none; font-size: 22px; color: #64748b; }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 24px; }
.empty-cart { text-align: center; color: #94a3b8; padding: 40px 0; font-size: 14px; }
.cart-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.cart-item-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; background: #f0f2f5; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h5 { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.cart-item-price { font-size: 14px; color: #0b2545; font-weight: 700; }
.remove-btn { background: none; border: none; color: #e63946; font-size: 18px; }
.cart-footer { padding: 22px 24px; border-top: 1px solid #e5e7eb; }
.cart-total { font-size: 18px; font-weight: 700; color: #0b2545; margin-bottom: 16px; display: flex; justify-content: space-between; }
.checkout-btn { width: 100%; background: #e63946; color: #fff; border: none; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; }
.cart-overlay.open { opacity: 1; visibility: visible; }

/* TOAST */
.toast { position: fixed; bottom: 100px; right: 20px; left: 20px; max-width: 400px; margin-left: auto; background: #2a9d8f; color: #fff; padding: 14px 24px; border-radius: 10px; font-weight: 600; z-index: 3000; opacity: 0; transform: translateY(20px); transition: all 0.3s; font-size: 14px; text-align: center; }
.toast.show { opacity: 1; transform: translateY(0); }

/* WHATSAPP */
.whatsapp { position: fixed; bottom: 20px; right: 20px; width: 54px; height: 54px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 999; }

/* ========== PRODUCT DETAIL MODAL (Boodmo Style) ========== */
.product-detail-modal { max-width: 1000px !important; max-height: 95vh; }
.pd-content { padding: 32px; }
.pd-top { display: grid; grid-template-columns: 340px 1fr; gap: 30px; margin-bottom: 24px; }
.pd-image-box { background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 14px; padding: 20px; text-align: center; position: relative; }
.pd-image-box img { width: 100%; height: 300px; object-fit: contain; border-radius: 10px; }
.pd-oem-badge { position: absolute; top: 16px; left: 16px; background: #dbeafe; color: #1e40af; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.pd-info-box h2 { font-size: 22px; color: #0b2545; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.pd-brand { color: #64748b; font-size: 14px; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.5px; }
.pd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-tag-badge { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.pd-tag-badge.free-delivery { background: #dbeafe; color: #1e40af; }
.pd-tag-badge.choice { background: #e0e7ff; color: #3730a3; }
.pd-tag-badge.fulfilled { background: #d1fae5; color: #065f46; }
.pd-seller-info { font-size: 13px; color: #64748b; margin-bottom: 16px; }
.pd-seller-info strong { color: #0b2545; }
.pd-price-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-price { font-size: 32px; font-weight: 800; color: #0b2545; line-height: 1; }
.pd-mrp { font-size: 16px; color: #94a3b8; text-decoration: line-through; }
.pd-off-badge { background: #2a9d8f; color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.pd-stock { color: #2a9d8f; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.pd-stock.low { color: #e63946; }
.pd-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pd-add-btn { flex: 1; min-width: 180px; background: linear-gradient(135deg, #e63946, #c92a37); color: #fff; border: none; padding: 14px 24px; border-radius: 10px; font-size: 15px; font-weight: 700; font-family: inherit; }
.pd-add-btn:disabled { background: #cbd5e1; }
.pd-wishlist-btn { background: #fff; border: 1.5px solid #e5e7eb; color: #334155; padding: 14px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; }
.pd-wishlist-btn:hover { border-color: #e63946; color: #e63946; }
.pd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; padding: 18px; background: #f8fafc; border-radius: 12px; margin-bottom: 20px; }
.pd-spec-item .label { font-size: 11px; color: #94a3b8; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; }
.pd-spec-item .value { font-size: 14px; color: #0b2545; font-weight: 700; }
.pd-section { border-top: 1px solid #e5e7eb; padding-top: 18px; margin-top: 18px; }
.pd-section h3 { font-size: 16px; color: #0b2545; font-weight: 700; margin-bottom: 10px; }
.pd-section p { font-size: 14px; color: #475569; line-height: 1.7; }
.pd-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
.pd-trust-item { display: flex; align-items: center; gap: 10px; padding: 14px; background: #ecfdf5; border-radius: 10px; font-size: 13px; font-weight: 600; color: #065f46; }
.pd-trust-item .icon { font-size: 22px; }

/* RESPONSIVE */
@media (max-width: 1280px) {
  .cat-grid { grid-template-columns: repeat(5, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-pdi-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .header-inner { height: 62px; gap: 8px; }
  .brand-logo { width: 34px; height: 34px; }
  .brand-text strong { font-size: 14px; }
  .brand-text small { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .login-btn { padding: 7px 10px; font-size: 11px; }
  .user-btn { padding: 6px 8px; font-size: 11px; }
  .user-avatar { width: 22px; height: 22px; }
  #userNameDisplay { display: none; }
  .hero { min-height: 380px; }
  .hero-inner { padding: 30px 16px; }
  .hero h1 { font-size: 26px; }
  .hero-search input { padding: 14px 12px; font-size: 13px; }
  .hero-search button { padding: 0 18px; height: 48px; font-size: 13px; }
  .vehicle-selector { flex-direction: column; align-items: stretch; }
  .vehicle-selector select { width: 100%; min-width: 0; }
  .garage-btn { margin-left: 0; width: 100%; justify-content: center; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cat-card .cat-img { width: 50px !important; height: 50px !important; }
  .parts-row { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 25px; }
  .modal { max-width: 95vw !important; border-radius: 14px; }
  .modal-view { padding: 24px 18px; }
  .modal-form { grid-template-columns: 1fr; }
  .pd-top { grid-template-columns: 1fr; gap: 18px; }
  .pd-content { padding: 20px; }
  .pd-image-box img { height: 220px; }
  .pd-price { font-size: 26px; }
  .pd-trust { grid-template-columns: 1fr; }
  .pd-actions { flex-direction: column; }
}
@media (max-width: 500px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 22px; }
  .prod-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .pdi-topbar-inner > span:not(.pdi-topbar-badge):not(.pdi-topbar-price) { display: none; }
  .toast { right: 12px; left: 12px; bottom: 90px; }
}
/* Unified Service Booking */
.unified-booking-modal{max-width:760px!important}.booking-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 22px}.booking-steps span{text-align:center;padding:9px 5px;border-radius:8px;background:#f1f5f9;color:#64748b;font-size:12px;font-weight:800}.booking-steps span.active{background:#0b2545;color:#fff}.booking-step-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-step-panel .full,.pdi-extra{grid-column:1/-1}.pdi-extra{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px}.pdi-extra h4{margin:0 0 12px}.pdi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group small,.pay-choice small{display:block;color:#64748b;margin-top:4px}.otp-box{grid-column:1/-1}.booking-back{width:100%;border:0;background:transparent;padding:12px;color:#64748b;cursor:pointer}.booking-error{color:#dc2626;padding:8px 0}.booking-ok{color:#059669;padding:8px 0;font-weight:800}.booking-price{display:flex;justify-content:space-between;grid-column:1/-1;padding:15px;border-radius:10px;background:#f8fafc;margin-bottom:8px}.pay-choice{grid-column:1/-1;display:flex;gap:12px;padding:14px;border:1px solid #dbe3ed;border-radius:10px;cursor:pointer}.pay-choice input{width:auto}.pdi-mini-timeline{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.pdi-mini-timeline span{font-size:10px;padding:4px 6px;border-radius:10px;background:#eef2f7;color:#64748b}.pdi-mini-timeline span.current{background:#0b2545;color:white}@media(max-width:640px){.booking-step-panel,.pdi-grid{grid-template-columns:1fr}.booking-steps span{font-size:10px}.unified-booking-modal{max-width:96%!important}}


/* ===== BOOKING DESKTOP V2 ===== */
@media (min-width: 900px){
  #bookingModal{align-items:flex-start;overflow-y:auto;padding:28px 24px;}
  #bookingModal .unified-booking-modal{max-width:1180px!important;max-height:none;overflow:visible;border-radius:22px;}
  #bookingModal .modal-view{padding:34px 40px 38px;}
  #bookingModal .modal-head{padding-right:50px;}
  #bookingModal .modal-head h3{font-size:30px;margin-bottom:8px;}
  #bookingModal .booking-steps{grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 28px;}
  #bookingModal .booking-steps span{padding:12px 10px;border-radius:12px;font-size:13px;}
  #bookingModal .booking-step-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;}
  #bookingModal .pdi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
  #bookingModal .pdi-extra{padding:20px;border-radius:16px;}
  #bookingModal .modal-form input,#bookingModal .modal-form select,#bookingModal .modal-form textarea{padding:13px 14px;font-size:14px;background:#fff;}
  #bookingModal .modal-submit{min-height:48px;font-size:15px;border-radius:12px;}
}
@media (max-width:899px){#bookingModal{padding:12px}#bookingModal .unified-booking-modal{max-width:96vw!important}}


/* ===== VEHICLE SELECTOR / MY GARAGE / FITMENT ===== */
.vehicle-selector{gap:10px;flex-wrap:wrap}.vehicle-selector select{min-width:120px}.vehicle-selection-note{font-size:11px;color:#64748b;margin:7px 4px 0}.garage-modal{max-width:820px!important}.garage-selected-box{background:#f8fbff;border:1px solid #cfe0ee;border-radius:10px;padding:12px;margin-bottom:12px;color:#294766;font-size:13px}.garage-save-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.garage-warning{background:#fffbeb;border:1px solid #fde68a;color:#854d0e;padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.5;margin:10px 0}.garage-divider{height:1px;background:#e2e8f0;margin:18px 0}.garage-vehicle-list{display:grid;gap:10px}.garage-vehicle-card{border:1px solid #dce5ee;border-radius:11px;padding:13px;background:#fff}.garage-vehicle-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.garage-vehicle-card h4{margin:0;color:#0b2c4d}.garage-vehicle-card p{font-size:12px;color:#64748b;margin:4px 0}.garage-badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}.garage-badge.exact{background:#ecfdf5;color:#047857}.garage-badge.basic{background:#fffbeb;color:#92400e}.garage-id-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:10px}.garage-id-grid input{border:1px solid #d7dee8;border-radius:7px;padding:8px;font-size:12px}.garage-update-btn{border:0;border-radius:7px;background:#0b2c4d;color:#fff;padding:0 10px;font-weight:800}.garage-job-list{margin-top:10px;border-top:1px dashed #d8e2ec;padding-top:8px}.garage-job{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:12px;border-bottom:1px solid #f1f5f9}.garage-job strong{color:#0b2c4d}.garage-public-status{font-weight:800;color:#1d4ed8;text-align:right}.fitment-box{margin-top:14px;border:1px solid #dce5ee;border-radius:10px;padding:12px;background:#f8fafc}.fitment-box h3{font-size:14px;margin:0 0 8px}.fitment-row{display:flex;justify-content:space-between;gap:10px;padding:8px;border-radius:8px;margin-top:6px;font-size:12px}.fitment-row.high,.fitment-row.likely{background:#ecfdf5;color:#065f46}.fitment-row.manual{background:#fffbeb;color:#854d0e}.fitment-row.no{background:#fff1f2;color:#9f1239}.fitment-note{font-size:10px;margin-top:3px;opacity:.85}
@media(max-width:700px){.garage-save-grid,.garage-id-grid{grid-template-columns:1fr}.garage-update-btn{min-height:38px}.garage-vehicle-top,.garage-job{flex-direction:column}.garage-public-status{text-align:left}}

/* ===== MY GARAGE FORM UI POLISH ===== */
#garageModal .modal-view{padding:34px 36px 38px}
#garageModal .modal-head{padding-right:48px;margin-bottom:18px}
#garageModal .modal-head h3{font-size:24px;line-height:1.2;margin-bottom:5px}
#garageModal .modal-head p{font-size:13px;line-height:1.45}
#garageModal .garage-selected-box{padding:13px 15px;margin-bottom:14px;border-radius:11px;background:#f8fbff;border:1.5px solid #cfe0ee;line-height:1.55}
#garageModal .garage-form-section{border:1px solid #e2e8f0;background:#fbfcfe;border-radius:13px;padding:15px;margin-top:2px}
#garageModal .garage-form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid #e8edf3}
#garageModal .garage-form-heading strong{display:block;color:#0b2545;font-size:14px}
#garageModal .garage-form-heading span{display:block;color:#64748b;font-size:11px;margin-top:3px}
#garageModal .garage-save-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
#garageModal .garage-save-grid .form-group{display:flex;flex-direction:column;min-width:0}
#garageModal .garage-save-grid label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#334155;font-size:12px;font-weight:700;line-height:1.25}
#garageModal .garage-save-grid label em{font-style:normal;background:#fee2e2;color:#b91c1c;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
#garageModal .garage-save-grid label small{background:#eef2f7;color:#64748b;border-radius:999px;padding:2px 7px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
#garageModal .garage-save-grid input{display:block;width:100%;height:44px;padding:11px 13px;border:1.5px solid #dbe3ec;border-radius:10px;background:#fff;color:#0f172a;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
#garageModal .garage-save-grid input::placeholder{color:#94a3b8;opacity:1}
#garageModal .garage-save-grid input:focus{border-color:#e63946;background:#fff;box-shadow:0 0 0 3px rgba(230,57,70,.08)}
#garageModal .garage-warning{margin:13px 0 0;padding:11px 13px;border-radius:10px;font-size:11.5px;line-height:1.55}
#garageModal .garage-warning b{color:#7c4a03}
#garageModal .garage-save-btn{display:block;width:100%;min-height:48px;margin-top:12px;border-radius:10px;box-shadow:0 5px 14px rgba(201,42,55,.15)}
#garageModal #garageMessage>div{margin-top:10px!important;border-radius:9px!important;font-size:12px!important}
#garageModal .garage-divider{margin:20px 0 16px}
@media(max-width:700px){
  #garageModal .modal-view{padding:26px 18px 30px}
  #garageModal .garage-save-grid{grid-template-columns:1fr;gap:12px}
  #garageModal .garage-form-section{padding:13px}
  #garageModal .garage-save-grid input{height:46px}
}

.garage-no-selection-help{display:none;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:10px 12px;margin-bottom:12px;color:#64748b;font-size:11px;line-height:1.5}

/* Customer My Garage — public Job Card status timeline */
.garage-job-wrap{border-top:1px solid #e7edf3;padding-top:8px;margin-top:8px}.garage-status-timeline{margin:8px 4px 2px 8px;padding-left:12px;border-left:2px solid #dbe7f2}.garage-status-step{position:relative;padding:0 0 9px 8px}.garage-status-step>span{position:absolute;left:-17px;top:4px;width:8px;height:8px;background:#173c68;border-radius:50%;box-shadow:0 0 0 3px #eef5fb}.garage-status-step b{display:block;font-size:10px;color:#173c68}.garage-status-step small{display:block;font-size:9px;color:#7b8da0}.garage-status-step em{display:block;font-style:normal;font-size:9px;color:#64748b;margin-top:2px}

/* ===== My Garage Vehicle Edit ===== */
.garage-card-badges{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.garage-badge.pending{background:#eff6ff;color:#1d4ed8}
.garage-nickname{display:inline-block;background:#f1f5f9;color:#475569;border-radius:999px;padding:3px 8px;font-size:9px;font-weight:800;margin-bottom:5px}
.garage-card-actions{display:flex;align-items:center;gap:10px;margin-top:9px}
.garage-edit-btn,.garage-request-btn{border:0;border-radius:8px;background:#0b2c4d;color:#fff;padding:8px 12px;font-size:11px;font-weight:800;cursor:pointer}
.garage-edit-btn:hover,.garage-request-btn:hover{background:#163f6d}
.garage-request-btn:disabled{opacity:.55;cursor:not-allowed}
.garage-card-tip{font-size:10px;color:#92400e}
.garage-edit-modal{max-width:760px!important}
.garage-edit-section{border:1px solid #dce5ee;border-radius:12px;padding:14px;margin-top:12px;background:#fff}
.garage-edit-section.identity{background:#f8fbff}
.garage-edit-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#0b2c4d;font-size:13px;font-weight:900;margin-bottom:12px}
.garage-lock-pill{background:#e2e8f0;color:#475569;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:900}
.garage-edit-help{font-size:11px;color:#64748b;line-height:1.5;margin:8px 0 11px}
.garage-identity-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.garage-identity-summary div{border:1px solid #e2e8f0;border-radius:9px;background:#fff;padding:9px 10px}
.garage-identity-summary span{display:block;font-size:9px;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.garage-identity-summary b{display:block;color:#0b2c4d;font-size:12px;margin-top:3px}
.garage-correction-form{border-top:1px dashed #cbd5e1;margin-top:12px;padding-top:12px}
.garage-correction-form select{width:100%;height:44px;border:1.5px solid #dbe3ec;border-radius:10px;background:#fff;padding:0 12px;color:#0f172a}
.garage-correction-reason{margin-top:12px}
.garage-correction-reason textarea{width:100%;border:1.5px solid #dbe3ec;border-radius:10px;padding:11px 13px;font:inherit;resize:vertical}
.garage-pending-box{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:10px 12px;border-radius:9px;font-size:11px;line-height:1.5;margin-bottom:10px}
#garageEditModal .garage-save-grid input:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed}
@media(max-width:700px){.garage-identity-summary{grid-template-columns:1fr}.garage-card-actions{align-items:flex-start;flex-direction:column}.garage-card-badges{align-items:flex-start}}

/* ===== My Garage Vehicle Edit — UI V2 ===== */
#garageEditModal{padding:22px;background:rgba(4,20,39,.58);backdrop-filter:blur(4px)}
#garageEditModal .garage-edit-modal{width:min(860px,96vw);max-width:860px!important;max-height:92vh;border-radius:20px;overflow:hidden;background:#f5f8fc;box-shadow:0 28px 75px rgba(2,19,38,.28);border:1px solid rgba(255,255,255,.75)}
#garageEditModal .modal-close{top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:#eef3f8;color:#64748b;font-size:16px;z-index:5;transition:.18s ease}
#garageEditModal .modal-close:hover{background:#e2e8f0;color:#0b2c4d;transform:rotate(4deg)}
#garageEditModal .modal-view{padding:28px 30px 32px;overflow-y:auto;max-height:92vh}
#garageEditModal .garage-edit-hero{display:flex;align-items:center;gap:14px;padding:0 52px 20px 0;border-bottom:1px solid #dfe7f0;margin-bottom:18px}
#garageEditModal .garage-edit-hero-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 48px;background:linear-gradient(145deg,#0b2c4d,#173f6c);font-size:24px;box-shadow:0 8px 18px rgba(11,44,77,.18)}
#garageEditModal .garage-edit-hero h3{margin:0;color:#0b2545;font-size:24px;line-height:1.15;font-weight:900;letter-spacing:-.02em}
#garageEditModal .garage-edit-hero p{margin:5px 0 0;color:#708197;font-size:12.5px;line-height:1.5;max-width:650px}
#garageEditModal .garage-edit-section{margin-top:14px;padding:20px;border:1px solid #dce6f0;border-radius:16px;background:#fff;box-shadow:0 3px 12px rgba(15,40,70,.035)}
#garageEditModal .garage-edit-section.identity{background:#f9fbfe;border-color:#d8e4ef}
#garageEditModal .garage-edit-title-wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #edf1f5}
#garageEditModal .garage-section-kicker{display:block;color:#2e5f94;font-size:9px;line-height:1;font-weight:900;letter-spacing:.13em;margin-bottom:6px}
#garageEditModal .garage-edit-title-wrap h4{margin:0;color:#112f50;font-size:16px;line-height:1.2;font-weight:900}
#garageEditModal .garage-edit-title-wrap p{margin:4px 0 0;color:#7b8b9d;font-size:11px;line-height:1.4}
#garageEditModal .garage-safe-pill,#garageEditModal .garage-lock-pill{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:9.5px;font-weight:900;line-height:1}
#garageEditModal .garage-safe-pill{background:#ecfdf5;color:#047857;border:1px solid #c9f4df}
#garageEditModal .garage-lock-pill{background:#eef3f8;color:#51677f;border:1px solid #dbe5ee}
#garageEditModal .garage-save-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 18px}
#garageEditModal .garage-save-grid .form-group,#garageEditModal .garage-correction-reason{display:flex;flex-direction:column;min-width:0;margin:0}
#garageEditModal .garage-save-grid label,#garageEditModal .garage-correction-reason label{display:flex;align-items:center;gap:7px;min-height:19px;margin:0 0 7px;color:#31475f;font-size:11.5px;font-weight:800;line-height:1.25}
#garageEditModal .garage-save-grid label small{display:inline-flex;align-items:center;margin:0;background:#f1f5f9;color:#718096;border-radius:999px;padding:3px 7px;font-size:8.5px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.02em}
#garageEditModal .garage-save-grid label em,#garageEditModal .garage-correction-reason label em{font-style:normal;display:inline-flex;align-items:center;margin:0;background:#fff1f2;color:#be123c;border-radius:999px;padding:3px 7px;font-size:8px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.02em}
#garageEditModal .garage-save-grid input,#garageEditModal .garage-save-grid select,#garageEditModal .garage-correction-reason textarea{display:block;width:100%;box-sizing:border-box;border:1.5px solid #d7e1eb;border-radius:11px;background:#fff;color:#132d49;font-family:inherit;font-size:13px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
#garageEditModal .garage-save-grid input,#garageEditModal .garage-save-grid select{height:46px;padding:0 13px}
#garageEditModal .garage-correction-reason textarea{min-height:92px;padding:12px 13px;line-height:1.45;resize:vertical}
#garageEditModal .garage-save-grid input::placeholder,#garageEditModal .garage-correction-reason textarea::placeholder{color:#9ba9b8;opacity:1}
#garageEditModal .garage-save-grid input:focus,#garageEditModal .garage-save-grid select:focus,#garageEditModal .garage-correction-reason textarea:focus{border-color:#356da7;box-shadow:0 0 0 3px rgba(53,109,167,.10);background:#fff}
#garageEditModal .garage-save-grid input:disabled{opacity:1;background:#f2f5f8;color:#7d8b99;border-color:#e0e7ee;cursor:not-allowed;-webkit-text-fill-color:#7d8b99}
#garageEditModal .garage-primary-btn,#garageEditModal .garage-secondary-btn{appearance:none;border:0;min-height:46px;border-radius:11px;padding:0 16px;font-family:inherit;font-size:12px;font-weight:900;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
#garageEditModal .garage-primary-btn{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#0b2c4d,#173f6c);color:#fff;box-shadow:0 8px 17px rgba(11,44,77,.16)}
#garageEditModal .garage-primary-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,44,77,.21)}
#garageEditModal .garage-primary-btn b{font-size:17px;line-height:1}
#garageEditModal .garage-secondary-btn{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#173f6c;border:1.5px solid #b9cde0;box-shadow:none}
#garageEditModal .garage-secondary-btn:hover{background:#f1f6fb;border-color:#7fa5c9}
#garageEditModal .garage-secondary-btn:disabled{opacity:.55;cursor:not-allowed}
#garageEditModal .garage-identity-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#garageEditModal .garage-identity-summary div{min-height:64px;box-sizing:border-box;border:1px solid #dfe7ef;border-radius:11px;background:#fff;padding:10px 12px;box-shadow:0 1px 4px rgba(15,40,70,.025)}
#garageEditModal .garage-identity-summary div:nth-child(2){grid-column:span 2}
#garageEditModal .garage-identity-summary span{display:block;margin:0 0 5px;color:#8291a2;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;line-height:1.15}
#garageEditModal .garage-identity-summary b{display:block;margin:0;color:#102f50;font-size:12px;font-weight:900;line-height:1.35;word-break:break-word}
#garageEditModal .garage-edit-help{display:flex;align-items:flex-start;gap:9px;margin:12px 0;padding:11px 12px;border-radius:10px;background:#f2f7fc;border:1px solid #dce8f3;color:#65788d;font-size:10.5px;line-height:1.5}
#garageEditModal .garage-edit-help>span{font-size:14px;line-height:1.25}
#garageEditModal .garage-edit-help b{color:#35536f}
#garageEditModal .garage-correction-form{margin-top:15px;padding:16px;border:1px solid #dbe5ef;border-radius:13px;background:#fff}
#garageEditModal .garage-correction-head{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
#garageEditModal .garage-correction-head b{color:#123354;font-size:13px}
#garageEditModal .garage-correction-head span{color:#7c8da0;font-size:10.5px}
#garageEditModal .garage-correction-reason{margin-top:15px}
#garageEditModal .garage-pending-box{margin:0 0 14px;padding:12px 14px;border-radius:11px;background:#eff6ff;border:1px solid #c8ddf5;color:#214e7a;font-size:11px;line-height:1.55}
@media(max-width:700px){
  #garageEditModal{padding:8px;align-items:flex-start}
  #garageEditModal .garage-edit-modal{width:100%;max-width:100%!important;max-height:calc(100vh - 16px);border-radius:16px}
  #garageEditModal .modal-view{padding:22px 16px 26px;max-height:calc(100vh - 16px)}
  #garageEditModal .garage-edit-hero{padding-right:42px;align-items:flex-start}
  #garageEditModal .garage-edit-hero-icon{width:42px;height:42px;flex-basis:42px;border-radius:12px;font-size:21px}
  #garageEditModal .garage-edit-hero h3{font-size:20px}
  #garageEditModal .garage-edit-section{padding:15px;border-radius:13px}
  #garageEditModal .garage-edit-title-wrap{flex-direction:column;gap:9px}
  #garageEditModal .garage-save-grid{grid-template-columns:1fr;gap:13px}
  #garageEditModal .garage-identity-summary{grid-template-columns:1fr 1fr}
  #garageEditModal .garage-identity-summary div:nth-child(2){grid-column:span 1}
}
@media(max-width:430px){#garageEditModal .garage-identity-summary{grid-template-columns:1fr}}

/* =========================================================
   MY GARAGE — JOB ESTIMATE + CUSTOMER APPROVAL
   ========================================================= */
.garage-estimate-card{margin:12px 0 2px;border:1px solid #fed7aa;border-radius:12px;background:#fffaf0;overflow:hidden}
.garage-estimate-card.approved{border-color:#a7f3d0;background:#f0fdf4}.garage-estimate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(148,163,184,.22)}.garage-estimate-head span{display:block;font-size:10px;font-weight:900;letter-spacing:.06em;color:#b45309}.garage-estimate-card.approved .garage-estimate-head span{color:#047857}.garage-estimate-head h5{margin:3px 0 0;color:#0b2c4d;font-size:15px}.garage-estimate-head small{color:#64748b}.garage-estimate-head>strong{font-size:20px;color:#0b2c4d;white-space:nowrap}
.garage-estimate-table-wrap{overflow:auto}.garage-estimate-table{width:100%;min-width:560px;border-collapse:collapse;background:#fff}.garage-estimate-table th,.garage-estimate-table td{padding:8px 9px;border-bottom:1px solid #eef2f7;text-align:left;font-size:11px}.garage-estimate-table th{background:#f8fafc;color:#64748b;text-transform:uppercase;font-size:9px;letter-spacing:.04em}.garage-estimate-table td:last-child,.garage-estimate-table th:last-child{text-align:right}.garage-est-type{display:inline-flex;padding:3px 6px;border-radius:999px;font-size:8px;font-weight:900}.garage-est-type.part{background:#dbeafe;color:#1d4ed8}.garage-est-type.labour{background:#dcfce7;color:#047857}
.garage-estimate-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px 12px}.garage-estimate-totals span{padding:7px 8px;border-radius:8px;background:#fff;border:1px solid #edf2f7;color:#64748b;font-size:9px}.garage-estimate-totals b{display:block;margin-top:2px;color:#0b2c4d;font-size:11px}.garage-estimate-note{margin:0 12px 10px;padding:9px 10px;border-radius:8px;background:#fff;border:1px solid #edf2f7}.garage-estimate-note b{color:#0b2c4d;font-size:10px}.garage-estimate-note p{margin:4px 0 0;color:#64748b;font-size:10px;white-space:pre-wrap}
.garage-estimate-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px 12px}.garage-estimate-actions button{border:0;border-radius:9px;padding:10px 13px;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.garage-est-help{background:#eef2ff;color:#3730a3}.garage-est-approve{background:#0f766e;color:#fff;box-shadow:0 5px 14px rgba(15,118,110,.18)}.garage-est-approved{background:#dcfce7;color:#047857!important;cursor:default!important}
@media(max-width:680px){.garage-estimate-head{flex-direction:column}.garage-estimate-totals{grid-template-columns:repeat(2,minmax(0,1fr))}.garage-estimate-actions{flex-direction:column}.garage-estimate-actions button{width:100%}}

.garage-verbal-note{border-color:#bfdbfe!important;background:#eff6ff!important}.garage-verbal-note b{color:#1d4ed8!important}


.garage-approval-id{margin:10px 12px 0;padding:10px 12px;border-radius:9px;background:#ecfdf5;border:1px solid #a7f3d0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center}.garage-approval-id span{font-size:8px;font-weight:900;letter-spacing:.08em;color:#047857}.garage-approval-id b{font-size:13px;color:#065f46}.garage-approval-id small{grid-column:1/-1;color:#5d756b;font-size:9px}.garage-estimate-payable{margin:0 12px 10px;padding:10px 12px;border-radius:9px;background:#0b2c4d;color:#fff;display:flex;justify-content:space-between;align-items:center}.garage-estimate-payable span{font-size:10px;font-weight:800}.garage-estimate-payable b{font-size:18px}.garage-estimate-round{margin:0 12px 6px;text-align:right;color:#64748b;font-size:9px}.garage-estimate-round b{color:#0b2c4d}.garage-est-consent{margin:0 12px 12px;padding:9px 10px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;color:#8a4b12;font-size:9px;line-height:1.45}.garage-estimate-missing{padding:12px}.garage-estimate-missing b{color:#b45309}.garage-estimate-missing p{margin:4px 0 0;color:#64748b;font-size:10px}