html {
background-color: #fff !important;
}
body.theme-light {
background-color: #fff !important;
}
body.theme-dark {
background-color: #000 !important;
}
.theme-light #page,
.theme-light .page-content {
background-color: #fff !important;
}
.theme-dark #page,
.theme-dark .page-content {
background-color: #000 !important;
}
.home-app-page {
min-height: 100svh !important;
padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
background: radial-gradient(circle at 90% 0, rgba(183, 32, 43, .08), transparent 28%) !important;
}
.header-app { min-height: 64px; padding: 7px 12px !important; align-items: center; justify-content: space-between; gap: 12px; }
.header-app .app-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; z-index: 2; }
.header-app .app-header-action, .header-app .app-header-login { min-width: 42px !important; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #253942; border: 1px solid rgba(15,23,42,.08); border-radius: 13px; text-decoration: none; background: rgba(255,255,255,.78); box-shadow: 0 5px 14px rgba(15,23,42,.06); }
.header-app .app-header-action i { font-size: 1.15rem; }
.passenger-car-icon { display: block; width: 22px; height: 22px; fill: currentColor; }
.header-app .app-header-action:hover, .header-app .app-header-action:focus-visible { color: #b7202b; }
.header-bar .app-header-login { width: auto; min-width: 64px !important; gap: 5px; padding: 0 10px; color: #fff !important; border: 0; font-size: 11px !important; line-height: 1; font-weight: 800; background: linear-gradient(135deg, #b7202b, #7e111b); }
.header-bar .app-header-login i { color: #fff !important; font-size: 15px !important; }
.header-bar .app-header-login span { color: #fff !important; font-size: 11px !important; line-height: 1; }
.header-bar .app-header-login:hover, .header-bar .app-header-login:focus-visible { color: #fff !important; }
.header-app .app-header-notification { position: relative; }
.header-app .app-header-notification em:not(:empty) { position: absolute; top: -5px; left: -4px; min-width: 18px; height: 18px; padding: 0 4px; color: #fff; font-size: .6rem; font-style: normal; line-height: 18px; border-radius: 9px; background: #b7202b; }
.header-bar.header-app .header-brand { flex: 0 1 230px; margin: 0 auto 0 0 !important; text-align: left !important; overflow: hidden; }
.header-app .header-brand img { display: block; width: auto; max-width: 100%; height: 43px; margin-right: auto; object-fit: contain; }
.theme-dark .header-app .app-header-action { color: #f7f8f9; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.07); }
.home-car-hero { position: relative; min-height: 290px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 12px; margin: 5px 12px 16px; padding: 32px 34px; overflow: hidden; color: #fff; border-radius: 28px; background: linear-gradient(135deg, #101c22 0%, #263b44 58%, #15242b 100%); box-shadow: 0 22px 50px rgba(15,23,42,.2); }
.home-car-hero::before { content: ""; position: absolute; width: 280px; height: 280px; top: -150px; right: -90px; border-radius: 50%; background: rgba(183,32,43,.28); filter: blur(4px); }
.home-hero-copy { position: relative; z-index: 2; }
.home-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 7px 11px; color: #ffd9dc; font-size: .68rem; font-weight: 800; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(255,255,255,.07); }
.home-car-hero h1 { max-width: 470px; margin: 0 0 10px; color: #fff; font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 950; line-height: 1.55; }
.home-car-hero p { max-width: 520px; margin: 0; color: rgba(255,255,255,.72); font-size: .8rem; line-height: 2; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.home-primary-action, .home-secondary-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; color: #fff; font-size: .75rem; font-weight: 900; text-decoration: none; border-radius: 13px; }
.home-primary-action { background: linear-gradient(135deg, #cf2936, #a01420); box-shadow: 0 10px 24px rgba(183,32,43,.35); }
.home-secondary-action { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.home-primary-action:hover, .home-secondary-action:hover { color: #fff; transform: translateY(-2px); }
.home-hero-visual { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.home-hero-visual img { position: relative; z-index: 2; width: min(100%, 390px); filter: drop-shadow(0 22px 20px rgba(0,0,0,.32)); transform: translateY(8px); }
.home-hero-glow { position: absolute; width: 260px; height: 120px; bottom: 28px; border-radius: 50%; background: rgba(183,32,43,.35); filter: blur(34px); }
.home-hero-chip { position: absolute; z-index: 3; bottom: 7px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; color: #fff; font-size: .64rem; font-weight: 800; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(7,14,18,.62); backdrop-filter: blur(10px); }
.home-trust-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0 12px 18px; }
.home-trust-row > div { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 70px; padding: 10px; border: 1px solid rgba(15,23,42,.07); border-radius: 17px; background: rgba(255,255,255,.82); box-shadow: 0 9px 25px rgba(15,23,42,.05); }
.home-trust-row i { color: #b7202b; font-size: 1.35rem; }
.home-trust-row span { display: flex; flex-direction: column; gap: 2px; }
.home-trust-row strong { color: #233740; font-size: .72rem; }
.home-trust-row small { color: #839098; font-size: .6rem; }
.home-service-sections { display: grid; gap: 18px; padding: 0 12px 20px; }
.home-service-section { padding: 18px; border: 1px solid rgba(15, 23, 42, .08); border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(15, 23, 42, .08); }
.home-section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.home-section-heading h2 { margin: 0; font-size: 1.05rem; font-weight: 900; color: #172b35; }
.home-section-heading p { margin: 3px 0 0; color: #839098; font-size: .66rem; }
.home-section-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #fff !important; background: linear-gradient(135deg, #b7202b, #7e111b); box-shadow: 0 7px 18px rgba(183, 32, 43, .25); }
.home-section-icon i, .home-section-icon i::before { display: inline-block; color: #fff !important; font-size: 1.15rem !important; line-height: 1; }
.home-section-icon .passenger-car-icon { width: 23px; height: 23px; color: #fff; }
.home-section-icon-dark { background: linear-gradient(135deg, #b7202b, #7e111b); box-shadow: 0 7px 18px rgba(183,32,43,.25); }
.home-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-category-item { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 6px; text-align: center; color: #263b45; background: #f6f8fa; border: 1px solid rgba(15, 23, 42, .06); border-radius: 15px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, color .18s ease; }
.home-category-item i { font-size: 1.8rem; color: #b7202b; }
.home-category-item span { font-size: .82rem; line-height: 1.55; font-weight: 800; }
.home-category-item small { margin-top: -6px; color: #89959c; font-size: .6rem; }
.home-category-featured { color: #fff; border-color: transparent; background: linear-gradient(145deg, #bd222e, #86131c); box-shadow: 0 11px 25px rgba(183,32,43,.22); }
.home-category-featured i, .home-category-featured small { color: #fff; }
.home-category-item:hover, .home-category-item:focus-visible { color: #b7202b; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15, 23, 42, .1); outline: none; }
.home-category-featured:hover, .home-category-featured:focus-visible { color: #fff; }
.theme-dark .home-service-section { background: #121b24; border-color: rgba(255,255,255,.08); }
.theme-dark .home-section-heading h2, .theme-dark .home-category-item { color: #f4f6f8; }
.theme-dark .home-category-item { background: #1a2631; border-color: rgba(255,255,255,.06); }
.theme-dark .home-trust-row > div { background: #121b24; border-color: rgba(255,255,255,.07); }
.theme-dark .home-trust-row strong { color: #f4f6f8; }
.theme-dark .home-category-featured { background: linear-gradient(145deg, #bd222e, #86131c); }
.auth-page { min-height: 100svh; display: flex; align-items: flex-start; justify-content: center; padding: 30px 16px 110px; background: radial-gradient(circle at top right, rgba(183,32,43,.12), transparent 35%); }
.auth-card { width: 100%; max-width: 440px; margin-top: 18px; padding: 30px 24px; text-align: center; border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.12); }
.auth-badge { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; place-items: center; border-radius: 22px; color: #fff; font-size: 2rem; background: linear-gradient(135deg, #b7202b, #761019); box-shadow: 0 12px 28px rgba(183,32,43,.28); }
.auth-card h1 { margin-bottom: 8px; font-size: 1.35rem; font-weight: 900; }
.auth-card > p { margin-bottom: 25px; color: #74818a; line-height: 1.8; }
.auth-label { display: block; margin: 0 4px 8px; text-align: right; font-weight: 800; }
.auth-input-wrap { position: relative; }
.auth-input-wrap i { position: absolute; right: 16px; top: 50%; z-index: 2; color: #b7202b; font-size: 1.2rem; transform: translateY(-50%); }
.auth-input { height: 56px !important; padding: 0 48px 0 16px !important; border: 1px solid #dce2e6 !important; border-radius: 14px !important; text-align: left; font-size: 1.05rem !important; letter-spacing: 1px; background: #f8fafb !important; }
.auth-input:focus { border-color: #b7202b !important; box-shadow: 0 0 0 4px rgba(183,32,43,.09) !important; }
.auth-hint, .auth-security { display: block; margin-top: 10px; color: #7c8991; font-size: .75rem; }
.auth-validation { display: block; margin-top: 6px; text-align: right; font-size: .75rem; }
.auth-alert { margin-bottom: 16px; padding: 10px; color: #a6121e; background: #fff0f1; border-radius: 10px; }
.auth-submit { width: 100%; min-height: 52px; margin-top: 24px; color: #fff !important; border-radius: 14px !important; font-weight: 900 !important; background: linear-gradient(135deg, #b7202b, #7e111b) !important; box-shadow: 0 12px 25px rgba(183,32,43,.22); }
.auth-submit i { margin-right: 7px; }
.otp-inputs { display: flex; justify-content: center; gap: 12px; margin: 26px 0 5px; }
.otp-box { position: relative; z-index: 2; width: 58px; height: 64px; border: 1px solid #d6dde1; border-radius: 15px; text-align: center; font-size: 1.55rem; font-weight: 900; color: #1b2c34; background: #f8fafb; outline: none; pointer-events: auto !important; touch-action: manipulation; user-select: text; -webkit-user-select: text; caret-color: #b7202b; }
.otp-box:focus { border-color: #b7202b; box-shadow: 0 0 0 4px rgba(183,32,43,.09); }
.otp-resend { display: flex; min-height: 44px; margin-top: 20px; align-items: center; justify-content: center; gap: 8px; color: #75828a; font-size: .82rem; }
.otp-resend button { padding: 7px 12px; color: #b7202b; font-weight: 900; border: 0; border-radius: 9px; background: #fff0f1; }
.otp-resend button:disabled { color: #9ca6ac; background: #f1f3f4; }
.theme-dark .auth-card { background: #121b24; border-color: rgba(255,255,255,.08); }
.theme-dark .auth-card h1, .theme-dark .auth-label { color: #f5f7f8; }
.theme-dark .auth-input, .theme-dark .otp-box { color: #fff; border-color: #34424d !important; background: #1a2631 !important; }
.profile-page, .sale-public-page { min-height: 100svh; padding: 4px 14px 110px; }
.profile-hero-card { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 22px; color: #fff; border-radius: 22px; background: linear-gradient(135deg, #172b35, #294651); box-shadow: 0 18px 42px rgba(23,43,53,.2); }
.profile-avatar { display: grid; flex: 0 0 68px; width: 68px; height: 68px; place-items: center; border-radius: 22px; color: #172b35; font-size: 2rem; background: #fff; }
.profile-welcome { flex: 1; }
.profile-welcome span { font-size: .75rem; opacity: .75; }
.profile-welcome h1 { margin: 3px 0 5px; color: #fff; font-size: 1.35rem; font-weight: 900; }
.profile-welcome p { margin: 0; font-size: .78rem; opacity: .8; }
.profile-logout { padding: 10px 15px; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; text-decoration: none; background: rgba(255,255,255,.08); }
.profile-name-card, .profile-section-card { margin-bottom: 16px; padding: 20px; border: 1px solid rgba(15,23,42,.08); border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.07); }
.profile-name-card { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: 20px; align-items: center; }
.profile-name-card h2 { margin-bottom: 6px; font-size: 1rem; font-weight: 900; }
.profile-name-card p { margin: 0; color: #74818a; font-size: .78rem; }
.profile-name-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.profile-name-form input { min-height: 46px; border-radius: 12px; }
.profile-name-form button { color: #fff; padding: 0 18px; border-radius: 12px; background: #b7202b; }
.profile-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.profile-section-title > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, #b7202b, #7e111b); }
.profile-section-title h2 { margin: 0 0 3px; font-size: 1rem; font-weight: 900; }
.profile-section-title p { margin: 0; color: #7c8991; font-size: .72rem; }
.profile-action-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.profile-action { min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 8px; color: #273b45; text-align: center; text-decoration: none; border: 1px solid rgba(15,23,42,.06); border-radius: 15px; background: #f6f8fa; transition: transform .18s ease, box-shadow .18s ease; }
.profile-action > i { color: #b7202b; font-size: 1.65rem; }
.profile-action span { font-size: .8rem; font-weight: 900; }
.profile-action small { color: #7c8991; font-size: .65rem; }
.profile-action:hover { color: #b7202b; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(15,23,42,.09); }
.sale-public-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 24px; color: #fff; border-radius: 22px; background: linear-gradient(135deg, #8d111c, #c92d39); box-shadow: 0 18px 40px rgba(183,32,43,.24); }
.sale-hero-icon { display: grid; flex: 0 0 64px; width: 64px; height: 64px; place-items: center; border-radius: 20px; color: #b7202b; font-size: 1.9rem; background: #fff; }
.sale-public-hero h1 { margin: 0 0 5px; color: #fff; font-size: 1.45rem; font-weight: 900; }
.sale-public-hero p { margin: 0; font-size: .8rem; line-height: 1.8; opacity: .88;color:white; }
.sale-empty-state { padding: 55px 20px; text-align: center; border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.07); }
.sale-empty-state i { color: #b7202b; font-size: 3rem; }
.sale-empty-state h2 { margin: 15px 0 8px; font-size: 1.05rem; font-weight: 900; }
.sale-empty-state p { color: #7c8991; font-size: .78rem; }
.sale-circular-list { display: grid; gap: 18px; }
.sale-circular-card { padding: 20px; border: 1px solid rgba(15,23,42,.08); border-radius: 22px; background: #fff; box-shadow: 0 14px 36px rgba(15,23,42,.08); }
.sale-circular-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid #edf0f2; }
.sale-status { display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; color: #16774a; font-size: .65rem; font-weight: 900; border-radius: 20px; background: #e7f8ef; }
.sale-circular-head h2 { margin: 8px 0 5px; font-size: 1.1rem; font-weight: 900; }
.sale-circular-head p { max-width: 650px; margin: 0; color: #687780; font-size: .76rem; line-height: 1.8; }
.sale-date { display: flex; align-items: center; gap: 8px; align-self: center; padding: 9px 12px; color: #52636c; white-space: nowrap; border-radius: 11px; background: #f4f6f7; font-size: .72rem; font-weight: 800; }
.sale-date i { color: #b7202b; }
.sale-car-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 17px; }
.sale-car-card { padding: 17px; border: 1px solid #e5e9ec; border-radius: 18px; background: linear-gradient(180deg, #fff, #fafbfc); }
.sale-car-title { display: flex; align-items: center; gap: 10px; }
.sale-car-symbol { display: grid; width: 46px; height: 46px; place-items: center; color: #b7202b; font-size: 1.45rem; border-radius: 14px; background: #fff0f1; }
.sale-car-title > div:nth-child(2) { flex: 1; }
.sale-car-title h3 { margin: 0 0 3px; font-size: 1rem; font-weight: 900; }
.sale-car-title p { margin: 0; color: #78858d; font-size: .68rem; }
.sale-price-type { padding: 5px 8px; color: #8d111c; font-size: .6rem; font-weight: 900; border-radius: 8px; background: #fff0f1; }
.sale-car-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 16px 0 10px; }
.sale-car-specs div { padding: 9px 6px; text-align: center; border-radius: 10px; background: #f2f5f6; }
.sale-car-specs span, .sale-car-specs strong { display: block; }
.sale-car-specs span { margin-bottom: 3px; color: #7b8890; font-size: .61rem; }
.sale-car-specs strong { font-size: .7rem; }
.sale-price-list { border-top: 1px dashed #dfe4e7; border-bottom: 1px dashed #dfe4e7; }
.sale-price-list div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: .72rem; }
.sale-price-list div + div { border-top: 1px solid #f0f2f3; }
.sale-price-list span { color: #687780; }
.sale-price-list strong { color: #172b35; font-size: .76rem; }
.sale-price-list small { font-size: .58rem; }
.sale-more-details { margin-top: 10px; color: #687780; font-size: .68rem; }
.sale-more-details summary { cursor: pointer; color: #b7202b; font-weight: 900; }
.sale-more-details div { display: grid; gap: 5px; margin-top: 8px; padding: 9px; border-radius: 9px; background: #f5f7f8; }
.sale-request-button { width: 100%; min-height: 48px; margin-top: 14px; color: #fff; font-weight: 900; border: 0; border-radius: 13px; background: linear-gradient(135deg, #b7202b, #7e111b); box-shadow: 0 9px 20px rgba(183,32,43,.2); }
.sale-otp-modal { position: relative; padding: 30px 24px; text-align: center; border: 0; border-radius: 24px; }
.sale-otp-modal h2 { margin-bottom: 7px; font-size: 1.25rem; font-weight: 900; }
.sale-otp-modal p { margin-bottom: 20px; color: #74818a; font-size: .78rem; }
.sale-otp-modal label { display: block; margin-bottom: 7px; text-align: right; font-size: .78rem; font-weight: 900; }
.sale-otp-layer { z-index: 10050 !important; pointer-events: auto !important; }
.sale-otp-layer .modal-dialog, .sale-otp-layer .modal-content { position: relative; pointer-events: auto; }
body.sale-otp-open .modal-backdrop { z-index: 10040 !important; }
body.sale-otp-open #spinner { display: none !important; pointer-events: none !important; }
.otp-inline-message { margin: 0 0 16px; padding: 10px 12px; color: #a12626; font-size: .72rem; line-height: 1.8; text-align: center; border: 1px solid #f1c7c7; border-radius: 10px; background: #fff4f4; }
.sale-modal-close { position: absolute; top: 15px; left: 15px; width: 35px; height: 35px; color: #6d7a82; border: 0; border-radius: 10px; background: #f1f3f4; }
.sale-modal-otp { margin-top: 18px; }
.theme-dark .profile-name-card, .theme-dark .profile-section-card, .theme-dark .sale-circular-card, .theme-dark .sale-empty-state, .theme-dark .sale-otp-modal { color: #f4f6f8; background: #121b24; border-color: rgba(255,255,255,.08); }
.theme-dark .profile-action, .theme-dark .sale-car-card { color: #f4f6f8; background: #1a2631; border-color: rgba(255,255,255,.07); }
.theme-dark .sale-circular-head { border-color: rgba(255,255,255,.08); }
.theme-dark .sale-car-specs div, .theme-dark .sale-date, .theme-dark .sale-more-details div { background: #22313d; }
.theme-dark .sale-price-list strong { color: #fff; }
.pre-sale-page, .admin-pre-sale-page { min-height: 100svh; padding: 4px 14px 110px; }
.pre-sale-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 24px; color: #fff; border-radius: 22px; background: linear-gradient(135deg, #172b35, #315563); box-shadow: 0 18px 42px rgba(23,43,53,.2); }
.pre-sale-hero > span { display: grid; flex: 0 0 64px; width: 64px; height: 64px; place-items: center; color: #b7202b; font-size: 1.9rem; border-radius: 20px; background: #fff; }
.pre-sale-hero h1 { margin: 0 0 6px; color: #fff; font-size: 1.4rem; font-weight: 900; }
.pre-sale-hero p { margin: 0; font-size: .78rem; line-height: 1.8; opacity: .84;color:white }
.pre-sale-form-card { padding: 24px; border: 1px solid rgba(15,23,42,.08); border-radius: 22px; background: #fff; box-shadow: 0 14px 36px rgba(15,23,42,.08); }
.pre-sale-form-title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #edf0f2; }
.pre-sale-form-title > i { display: grid; width: 46px; height: 46px; place-items: center; color: #fff; font-size: 1.25rem; border-radius: 14px; background: linear-gradient(135deg, #b7202b, #7e111b); }
.pre-sale-form-title h2 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 900; }
.pre-sale-form-title p { margin: 0; color: #7b8890; font-size: .7rem; }
.pre-sale-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.pre-sale-field label { display: block; margin: 0 3px 7px; color: #344852; font-size: .76rem; font-weight: 900; }
.pre-sale-field .form-control { min-height: 50px; padding: 10px 13px; border: 1px solid #dce2e6; border-radius: 13px; background: #f8fafb; }
.pre-sale-field textarea.form-control { min-height: 105px; resize: vertical; }
.pre-sale-field .form-control:focus { border-color: #b7202b; box-shadow: 0 0 0 4px rgba(183,32,43,.08); }
.pre-sale-field > span { display: block; margin-top: 5px; font-size: .68rem; }
.pre-sale-field > small { display: block; margin-top: 5px; color: #7c8991; font-size: .65rem; }
.pre-sale-field-full { grid-column: 1 / -1; }
.pre-sale-radio-group { min-height: 50px; display: flex; align-items: center; gap: 20px; padding: 9px 13px; border: 1px solid #dce2e6; border-radius: 13px; background: #f8fafb; }
.pre-sale-radio-group label { display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; }
.pre-sale-radio-group input { accent-color: #b7202b; }
.pre-sale-notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 12px 14px; color: #6b5b2d; font-size: .7rem; line-height: 1.8; border-radius: 12px; background: #fff8df; }
.pre-sale-notice i { margin-top: 3px; color: #d49d12; }
.pre-sale-submit { width: 100%; min-height: 52px; margin-top: 18px; color: #fff; font-weight: 900; border: 0; border-radius: 14px; background: linear-gradient(135deg, #b7202b, #7e111b); box-shadow: 0 11px 24px rgba(183,32,43,.22); }
.pre-sale-submit:disabled { opacity: .65; }
.admin-pre-sale-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 22px; color: #fff; border-radius: 20px; background: linear-gradient(135deg, #172b35, #315563); box-shadow: 0 16px 36px rgba(23,43,53,.18); }
.admin-pre-sale-head h1 { margin: 0 0 5px; color: #fff; font-size: 1.3rem; font-weight: 900; }
.admin-pre-sale-head p { margin: 0; font-size: .72rem; opacity: .8; }
.admin-pre-sale-head > span { padding: 8px 12px; white-space: nowrap; font-size: .7rem; font-weight: 900; border-radius: 10px; background: rgba(255,255,255,.12); }
.admin-pre-sale-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.admin-pre-sale-card { padding: 17px; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.07); }
.admin-pre-sale-card.is-closed { opacity: .72; }
.admin-pre-sale-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #edf0f2; }
.admin-pre-sale-card-head h2 { margin: 0 0 4px; font-size: .95rem; font-weight: 900; }
.admin-pre-sale-card-head > div > span { color: #74818a; font-size: .67rem; }
.status-active, .status-closed { padding: 5px 8px; white-space: nowrap; font-size: .6rem; font-weight: 900; border-radius: 20px; }
.status-active { color: #9b6510; background: #fff3d5; }
.status-closed { color: #26714d; background: #e6f7ee; }
.admin-pre-sale-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.admin-pre-sale-info div { padding: 9px; border-radius: 10px; background: #f5f7f8; }
.admin-pre-sale-info div.full { grid-column: 1 / -1; }
.admin-pre-sale-info span, .admin-pre-sale-info strong { display: block; }
.admin-pre-sale-info span { margin-bottom: 4px; color: #7b8890; font-size: .6rem; }
.admin-pre-sale-info strong { font-size: .7rem; line-height: 1.7; }
.admin-pre-sale-card form button { width: 100%; min-height: 42px; color: #fff; font-size: .72rem; font-weight: 900; border: 0; border-radius: 11px; background: #237750; }
.theme-dark .pre-sale-form-card, .theme-dark .admin-pre-sale-card { color: #f4f6f8; background: #121b24; border-color: rgba(255,255,255,.08); }
.theme-dark .pre-sale-form-title { border-color: rgba(255,255,255,.08); }
.theme-dark .pre-sale-field label { color: #f4f6f8; }
.theme-dark .pre-sale-field .form-control, .theme-dark .pre-sale-radio-group, .theme-dark .admin-pre-sale-info div { color: #fff; border-color: #34424d; background: #1a2631; }
.theme-dark .admin-pre-sale-card-head { border-color: rgba(255,255,255,.08); }
#footer-bar.footer-bar-detached {
position: fixed !important;
left: env(safe-area-inset-left) !important;
right: env(safe-area-inset-right) !important;
bottom: 0 !important;
width: auto !important;
max-width: 560px !important;
min-height: 70px !important;
height: calc(70px + env(safe-area-inset-bottom)) !important;
margin-right: auto !important;
margin-left: auto !important;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
border-radius: 18px 18px 0 0 !important;
display: flex !important;
align-items: stretch !important;
justify-content: space-between !important;
border: 1px solid rgba(26, 48, 51, 0.12) !important;
border-bottom: 0 !important;
box-shadow: 0 -12px 30px rgba(16, 24, 40, 0.16) !important;
}
#footer-bar a:not(.btn) {
height: 100% !important;
padding: 6px 2px 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
text-decoration: none !important;
transition: background-color 180ms ease, transform 180ms ease !important;
}
#footer-bar a:not(.btn):hover,
#footer-bar a:not(.btn):focus-visible {
background-color: rgba(183, 32, 43, 0.08) !important;
transform: translateY(-2px) !important;
outline: none !important;
}
#footer-bar .iconMenu {
height: 24px !important;
max-height: 24px !important;
width: 24px !important;
object-fit: contain !important;
margin: 0 auto 4px !important;
}
#footer-bar a:not(.btn) span {
max-width: 100% !important;
margin-top: 0 !important;
font-size: 0.72rem !important;
line-height: 1.25 !important;
font-weight: 900 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
font-family: inherit !important;
}
#footer-bar .active-nav {
/* background-color: rgba(183, 32, 43, 0.08) !important;
color: #b7202b !important;*/
}
#footer-bar .active-nav .iconMenu {
width: 24px !important;
height: 24px !important;
max-height: 24px !important;
min-height: 0 !important;
margin: 0 auto 4px !important;
margin-top: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 4px 8px rgba(183, 32, 43, 0.20)) !important;
}
#footer-bar .active-nav span {
margin-top: 0 !important;
padding-top: 0 !important;
}
.theme-light #footer-bar {
background-color: rgba(248, 250, 252, 0.96) !important;
border-color: rgba(15, 23, 42, 0.10) !important;
}
.theme-dark #footer-bar {
background-color: rgba(8, 12, 17, 0.96) !important;
border-color: rgba(255, 255, 255, 0.10) !important;
}
.theme-light .header-bar {
background-color: rgba(248, 250, 252, 0.92) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
.theme-dark .header-bar {
background-color: rgba(8, 12, 17, 0.92) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark #footer-bar a:not(.btn):hover,
.theme-dark #footer-bar a:not(.btn):focus-visible,
.theme-dark #footer-bar .active-nav {
/* background-color: rgba(255, 211, 96, 0.12) !important;*/
}
.theme-dark #footer-bar .active-nav {
color: #ffd360 !important;
}
.theme-dark #footer-bar .active-nav::after {
background-color: #ffd360 !important;
}
@media (min-width: 768px) {
.home-app-page {
padding-right: 16px !important;
padding-left: 16px !important;
}
.home-service-sections { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 575.98px) {
.home-app-page {
padding-right: 8px !important;
padding-left: 8px !important;
}
.header-app { min-height: 60px; padding: 7px 8px !important; gap: 7px; }
.header-app .app-header-actions { gap: 5px; }
.header-app .app-header-action { min-width: 38px !important; width: 38px; height: 38px; border-radius: 12px; }
.header-bar .app-header-login { min-width: 58px !important; height: 38px; padding: 0 9px; }
.header-bar .app-header-login i { font-size: 14px !important; }
.header-bar .app-header-login span { font-size: 10px !important; }
.header-bar.header-app .header-brand { flex-basis: 148px; }
.header-app .header-brand img { height: 38px; }
.home-car-hero { min-height: 0; grid-template-columns: 1fr; margin: 2px 8px 12px; padding: 22px 18px 15px; border-radius: 22px; }
.home-car-hero h1 { font-size: 1.35rem; }
.home-car-hero p { font-size: .7rem; }
.home-hero-actions { margin-top: 17px; }
.home-primary-action, .home-secondary-action { min-height: 43px; padding: 0 13px; font-size: .68rem; }
.home-hero-visual { min-height: 145px; margin-top: -5px; }
.home-hero-visual img { width: min(88%, 310px); }
.home-hero-chip { bottom: 0; left: 0; }
.home-trust-row { gap: 6px; margin: 0 8px 13px; }
.home-trust-row > div { min-height: 64px; flex-direction: column; gap: 4px; padding: 7px 3px; text-align: center; }
.home-trust-row i { font-size: 1.15rem; }
.home-trust-row small { display: none; }
.home-service-sections { padding-right: 8px; padding-left: 8px; gap: 13px; }
.home-service-section { padding: 14px 12px; border-radius: 17px; }
.home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.home-category-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-category-item { min-height: 92px; padding: 9px 3px; }
.home-category-item i { font-size: 1.55rem; }
.home-category-item span { font-size: .72rem; }
.auth-card { padding: 26px 18px; }
.otp-inputs { gap: 8px; }
.otp-box { width: 52px; height: 60px; }
.profile-page, .sale-public-page { padding-right: 8px; padding-left: 8px; }
.profile-hero-card { align-items: flex-start; padding: 17px; gap: 11px; }
.profile-avatar { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
.profile-welcome h1 { font-size: 1.05rem; }
.profile-welcome p { display: none; }
.profile-logout { padding: 8px 10px; font-size: .68rem; }
.profile-name-card { grid-template-columns: 1fr; padding: 16px; }
.profile-name-form { grid-template-columns: 1fr 1fr; }
.profile-name-form button { grid-column: 1 / -1; min-height: 44px; }
.profile-section-card { padding: 15px 12px; }
.profile-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-action { min-height: 105px; }
.sale-public-hero { padding: 18px 15px; }
.sale-hero-icon { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
.sale-public-hero h1 { font-size: 1.15rem; }
.sale-public-hero p { font-size: .68rem; }
.sale-circular-card { padding: 15px 11px; }
.sale-circular-head { flex-direction: column; gap: 10px; }
.sale-date { align-self: flex-start; }
.sale-car-grid { grid-template-columns: 1fr; }
.sale-car-card { padding: 14px 12px; }
.sale-otp-modal { padding: 28px 16px; }
.pre-sale-page, .admin-pre-sale-page { padding-right: 8px; padding-left: 8px; }
.pre-sale-hero { padding: 18px 15px; gap: 11px; }
.pre-sale-hero > span { flex-basis: 52px; width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
.pre-sale-hero h1 { font-size: 1.1rem; }
.pre-sale-hero p { font-size: .66rem; }
.pre-sale-form-card { padding: 17px 12px; }
.pre-sale-form-grid { grid-template-columns: 1fr; gap: 12px; }
.pre-sale-field-full { grid-column: auto; }
.admin-pre-sale-head { align-items: flex-start; padding: 17px 14px; }
.admin-pre-sale-head p { display: none; }
.admin-pre-sale-list { grid-template-columns: 1fr; }
#footer-bar.footer-bar-detached {
max-width: none !important;
border-radius: 16px 16px 0 0 !important;
}
}
.footer-bar .active-nav .iconMenu{
border-style:none!important
}