/* ---- views/HomeView.vue ---- */
.s-home .page-container{--primary: rgb(0, 49, 128);--primary-soft: rgba(0, 49, 128, 0.06);--primary-border: rgba(0, 49, 128, 0.16);--secondary: #ff5c5c;--secondary-soft: rgba(255, 92, 92, 0.08);--secondary-border: rgba(255, 92, 92, 0.28);--ink: #1c2126;--muted: #6d7480;--line: #e7eaf0;--surface: #ffffff;--bg: #f6f7fa;--radius-lg: 20px;--radius-md: 14px;--radius-sm: 10px}
.s-home .page-container *, .s-home .page-container *::before, .s-home .page-container *::after{box-sizing: border-box}
.s-home .page-container{min-height: 100vh;display: flex;flex-direction: column;background: var(--bg)}
.s-home .content{flex: 1;width: 100%;margin-top: 70px;padding-bottom: 30px}
.s-home .hero-section{position: relative;isolation: isolate;width: calc(100% - 40px);max-width: 1400px;margin: 50px auto 0;padding: 50px 44px 96px;overflow: hidden;border-radius: var(--radius-lg);color: #ffffff;box-shadow: 0 20px 40px rgba(6, 12, 26, 0.28)}
.s-home .hero-bg-image{position: absolute;inset: 0;z-index: 0;background-color: #0a1120;background-size: cover;background-position: center;background-repeat: no-repeat}
.s-home .hero-bg-overlay{position: absolute;inset: 0;z-index: 1;pointer-events: none;background: linear-gradient(
    90deg,
    rgba(6, 10, 20, 0.94) 0%,
    rgba(6, 10, 20, 0.8) 32%,
    rgba(6, 10, 20, 0.32) 62%,
    rgba(6, 10, 20, 0.08) 100%
  )}
.s-home .hero-badge{position: absolute;top: 22px;right: 22px;z-index: 3;display: inline-flex;align-items: center;gap: 7px;padding: 9px 16px;background: linear-gradient(135deg, #e13a3a, #b21f1f);border-radius: 999px;color: #ffffff;font-size: 11.5px;font-weight: 800;letter-spacing: 0.03em;text-transform: uppercase;white-space: nowrap;box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28)}
.s-home .hero-badge i{font-size: 12px}
.s-home .hero-inner{position: relative;z-index: 2;max-width: 640px}
.s-home .hero-heading{margin: 0 0 20px;color: #ffffff;font-size: 34px;font-weight: 800;letter-spacing: -0.01em;line-height: 1.22}
.s-home .hero-highlight{color: #ff5c5c}
.s-home .hero-checklist{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px 22px;margin: 0 0 26px;padding: 0;list-style: none}
.s-home .hero-checklist li{display: flex;align-items: center;gap: 9px;color: rgba(255, 255, 255, 0.9);font-size: 13.5px;font-weight: 550;line-height: 1.4}
.s-home .hero-checklist i{flex-shrink: 0;color: #6fd3a3;font-size: 15px}
.s-home .hero-location-row{display: flex;justify-content: flex-start}
.s-home .hero-location{display: inline-flex;align-items: center;gap: 8px;padding: 10px 16px;background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.16);border-radius: 999px;color: #ffffff;font-size: 13px;font-weight: 650}
.s-home .hero-location i{color: #ff5c5c}
.s-home .inventory-toolbar{position: relative;z-index: 2;width: calc(100% - 40px);max-width: 1400px;margin: -64px auto 26px;padding: 28px 28px 24px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius-lg);box-shadow: 0 20px 40px rgba(17, 24, 39, 0.09)}
.s-home .inventory-heading{display: flex;flex-direction: column;align-items: flex-start;text-align: left;margin-bottom: 22px}
.s-home .inventory-eyebrow, .s-home .section-eyebrow{display: inline-flex;align-items: center;gap: 6px;margin-bottom: 10px;padding: 5px 12px 5px 10px;color: var(--primary);background: var(--primary-soft);border: 1px solid var(--primary-border);border-radius: 999px;font-size: 11px;font-weight: 800;letter-spacing: 0.08em;text-transform: uppercase}
.s-home .eyebrow-dot{width: 6px;height: 6px;flex-shrink: 0;border-radius: 50%;background: var(--primary)}
.s-home .inventory-heading h1{margin: 0;color: var(--ink);font-size: 27px;font-weight: 800;letter-spacing: -0.01em;line-height: 1.2}
.s-home .inventory-heading p{max-width: 480px;margin: 8px 0 0;color: var(--muted);font-size: 13.5px;line-height: 1.55}
.s-home .category-section{width: 100%;margin-bottom: 20px;padding-top: 18px;border-top: 1px solid var(--line)}
.s-home .category-button-scroll{width: 100%;display: flex;align-items: center;gap: 10px;overflow-x: auto;padding: 2px 2px 6px;scrollbar-width: none}
.s-home .category-button-scroll::-webkit-scrollbar{display: none}
.s-home .category-button{flex: 0 0 auto;min-width: 108px;height: 44px;display: flex;align-items: center;justify-content: center;gap: 8px;padding: 0 16px;background: var(--surface);border: 1px solid var(--line);border-radius: 999px;color: #545b66;font-size: 13px;font-weight: 650;cursor: pointer;transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease}
.s-home .category-button:hover{color: var(--primary);border-color: var(--primary-border);background: var(--primary-soft)}
.s-home .category-button.active{color: #ffffff;background: var(--primary);border-color: var(--primary);box-shadow: 0 6px 14px rgba(0, 49, 128, 0.22)}
.s-home .category-button.active .car-image, .s-home .category-button.active .car-image-bus{filter: brightness(0) invert(1)}
.s-home .car-image, .s-home .car-image-bus{width: 22px;height: 22px;object-fit: contain;transition: transform 0.18s ease, filter 0.18s ease}
.s-home .search-controls{display: flex;flex-wrap: wrap;align-items: stretch;gap: 10px;width: 100%}
.s-home .search-form{flex: 1 1 260px;min-width: 0;margin: 0}
.s-home .search-input-wrapper{position: relative;width: 100%;height: 46px;display: flex;align-items: center;background: var(--bg);border: 1px solid var(--line);border-radius: var(--radius-sm);overflow: hidden;transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease}
.s-home .search-input-wrapper:focus-within{background: var(--surface);border-color: var(--primary);box-shadow: 0 0 0 3px var(--primary-soft)}
.s-home .search-icon{flex: 0 0 auto;margin-left: 14px;color: #9aa1aa;font-size: 14px}
.s-home .searchbar{flex: 1 1 auto;min-width: 0;width: 100%;height: 44px;padding: 0 10px;border: none;outline: none;background: transparent;color: var(--ink);font-size: 14px}
.s-home .searchbar::placeholder{color: #9aa1aa}
.s-home .search-button{flex: 0 0 auto;height: 100%;min-width: 46px;display: flex;align-items: center;justify-content: center;gap: 7px;padding: 0 18px;border: none;border-radius: 0;background: var(--primary);color: #ffffff;font-size: 13px;font-weight: 650;white-space: nowrap;cursor: pointer;transition: background-color 0.18s ease, transform 0.1s ease}
.s-home .search-button:hover{background: rgb(0, 67, 175)}
.s-home .search-button:active{transform: scale(0.97)}
.s-home .filter-controls{display: flex;align-items: center;gap: 8px;flex: 0 0 auto}
.s-home .filter-component, .s-home .sort-component{margin: 0}
.s-home .clear-button{height: 46px;display: flex;align-items: center;justify-content: center;gap: 6px;padding: 0 14px;border: 1px solid var(--line);border-radius: var(--radius-sm);background: var(--surface);color: #666e78;font-size: 12px;font-weight: 600;white-space: nowrap;cursor: pointer;transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease}
.s-home .clear-button:hover{background: var(--secondary-soft);color: var(--secondary);border-color: var(--secondary-border)}
.s-home .vehicles-section{width: 100%;padding: 0 2px}
.s-home .perks-strip{width: calc(100% - 40px);max-width: 1400px;margin: 38px auto 25px;padding: 22px 25px;background: var(--primary);border-radius: var(--radius-lg);box-shadow: 0 12px 28px rgba(0, 49, 128, 0.16)}
.s-home .perks-grid{max-width: 1150px;margin: 0 auto;display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px}
.s-home .perk-item{min-width: 0;display: flex;align-items: center;justify-content: center;gap: 12px;padding: 8px 10px;color: #ffffff}
.s-home .perk-icon{flex-shrink: 0;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border-radius: 12px;background: rgba(255, 255, 255, 0.14);font-size: 16px}
.s-home .perk-icon-accent{background: linear-gradient(135deg, #e13a3a, #b21f1f)}
.s-home .perk-text{display: flex;flex-direction: column;gap: 2px;line-height: 1.25}
.s-home .perk-title{font-size: 13px;font-weight: 700}
.s-home .perk-subtitle{font-size: 11px;opacity: 0.72}
.s-home .why-us-section{width: calc(100% - 40px);max-width: 1200px;margin: 0 auto;padding: 25px 0 55px;text-align: center}
.s-home .section-heading{max-width: 650px;margin: 0 auto 30px;display: flex;flex-direction: column;align-items: center}
.s-home .why-us-heading{margin: 0;color: var(--ink);font-size: 26px;font-weight: 800;letter-spacing: -0.01em;line-height: 1.2}
.s-home .section-description{max-width: 520px;margin: 10px auto 0;color: var(--muted);font-size: 14px;line-height: 1.6}
.s-home .why-us-grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px}
.s-home .why-us-item{min-height: 190px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 25px 18px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius-md);box-shadow: 0 3px 14px rgba(0, 0, 0, 0.035);transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease}
.s-home .why-us-item:hover{transform: translateY(-4px);border-color: var(--primary-border);box-shadow: 0 9px 24px rgba(0, 0, 0, 0.075)}
.s-home .why-us-icon-circle{width: 52px;height: 52px;margin-bottom: 14px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: var(--primary-soft);border: 1px solid var(--primary-border);color: var(--primary);font-size: 19px}
.s-home .why-us-item h3{margin: 0 0 7px;color: #292e35;font-size: 14px;font-weight: 700}
.s-home .why-us-item p{max-width: 200px;margin: 0;color: var(--muted);font-size: 12px;line-height: 1.5}
.s-home .mobile-category-section{padding-top: 16px;margin-bottom: 16px}
.s-home .mobile-category-section .category-button-scroll{justify-content: flex-start;gap: 8px;padding-bottom: 4px}
.s-home .category-button-mobile{flex: 0 0 auto;width: 74px;min-width: 74px;height: 70px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 5px;padding: 6px 4px;background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius-sm);color: #626a75;font-size: 10px;font-weight: 650;cursor: pointer;transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease}
.s-home .category-button-mobile:active{transform: scale(0.96)}
.s-home .category-button-mobile.active{background: var(--primary);border-color: var(--primary);color: #ffffff;box-shadow: 0 5px 12px rgba(0, 49, 128, 0.2)}
.s-home .category-button-mobile.active .car-image-mobile, .s-home .category-button-mobile.active .car-image-bus-mobile{filter: brightness(0) invert(1)}
.s-home .car-image-mobile, .s-home .car-image-bus-mobile{width: 30px;height: 30px;object-fit: contain;transition: filter 0.18s ease}
.s-home .bottom-nav{position: fixed;left: 0;right: 0;bottom: 0;z-index: 1000;height: 65px;display: flex;align-items: flex-end;justify-content: space-around;padding: 4px 5px calc(4px + env(safe-area-inset-bottom));background: rgba(255, 255, 255, 0.97);border-top: 1px solid var(--line);box-shadow: 0 -5px 18px rgba(0, 0, 0, 0.07);backdrop-filter: blur(12px)}
.s-home .bottom-nav-item{flex: 1;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;padding: 0;border: none;background: transparent;color: var(--muted);font-size: 9px;font-weight: 550;cursor: pointer;transition: color 0.18s ease, transform 0.15s ease}
.s-home .bottom-nav-item:active{transform: scale(0.94)}
.s-home .bottom-nav-item.active{color: var(--primary)}
.s-home .bottom-nav-icon{height: 23px;display: flex;align-items: center;justify-content: center;font-size: 18px}
.s-home .bottom-nav-whatsapp{color: #25d366;font-weight: 650}
.s-home .bottom-nav-whatsapp-circle{width: 45px;height: 45px;margin-top: -18px;margin-bottom: 1px;display: flex;align-items: center;justify-content: center;border: 4px solid #ffffff;border-radius: 50%;background: #25d366;color: #ffffff;font-size: 19px;box-shadow: 0 4px 11px rgba(0, 0, 0, 0.2)}
@media (max-width: 992px){.s-home .hero-section{width: calc(100% - 30px);padding: 36px 30px 84px}}
@media (max-width: 992px){.s-home .hero-heading{font-size: 28px}}
@media (max-width: 992px){.s-home .hero-checklist{grid-template-columns: 1fr}}
@media (max-width: 992px){.s-home .inventory-toolbar{width: calc(100% - 30px);margin-top: -56px;padding: 22px 20px 20px}}
@media (max-width: 992px){.s-home .filter-controls{flex-wrap: wrap;justify-content: flex-start}}
@media (max-width: 992px){.s-home .perks-grid{grid-template-columns: repeat(2, 1fr);row-gap: 12px}}
@media (max-width: 992px){.s-home .why-us-grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 768px){.s-home .content{margin-top: 60px;padding-bottom: 78px}}
@media (max-width: 768px){.s-home .hero-section{width: calc(100% - 20px);margin-top: 70px;padding: 62px 20px 68px;border-radius: var(--radius-md)}}
@media (max-width: 768px){.s-home .hero-bg-overlay{background: linear-gradient(
      180deg,
      rgba(6, 10, 20, 0.55) 0%,
      rgba(6, 10, 20, 0.85) 55%,
      rgba(6, 10, 20, 0.94) 100%
    )}}
@media (max-width: 768px){.s-home .hero-badge{top: 14px;right: 14px;padding: 7px 12px;font-size: 9.5px}}
@media (max-width: 768px){.s-home .hero-heading{margin-bottom: 16px;font-size: 22px}}
@media (max-width: 768px){.s-home .hero-checklist{gap: 9px;margin-bottom: 22px}}
@media (max-width: 768px){.s-home .hero-checklist li{font-size: 12.5px}}
@media (max-width: 768px){.s-home .inventory-toolbar{width: calc(100% - 20px);margin: -40px auto 18px;padding: 18px 16px 16px;border-radius: var(--radius-md)}}
@media (max-width: 768px){.s-home .inventory-heading{margin-bottom: 16px}}
@media (max-width: 768px){.s-home .inventory-heading h1{font-size: 21px}}
@media (max-width: 768px){.s-home .inventory-heading p{max-width: none;font-size: 12.5px;line-height: 1.45}}
@media (max-width: 768px){.s-home .inventory-eyebrow{font-size: 10px}}
@media (max-width: 768px){.s-home .category-section{margin-left: -4px;margin-right: -4px;padding-left: 4px;padding-right: 4px}}
@media (max-width: 768px){.s-home .search-controls{flex-direction: column;flex-wrap: nowrap;align-items: stretch}}
@media (max-width: 768px){.s-home .search-form{width: 100%;flex-basis: auto}}
@media (max-width: 768px){.s-home .search-input-wrapper{height: 46px}}
@media (max-width: 768px){.s-home .search-button{min-width: 48px;padding: 0 16px}}
@media (max-width: 768px){.s-home .filter-controls{width: 100%;display: grid;grid-template-columns: 1fr 1fr;gap: 8px}}
@media (max-width: 768px){.s-home .clear-button{grid-column: 1 / -1;width: 100%}}
@media (max-width: 768px){.s-home .perks-strip{width: calc(100% - 20px);margin: 28px auto 20px;padding: 17px 12px;border-radius: var(--radius-md)}}
@media (max-width: 768px){.s-home .perks-grid{grid-template-columns: 1fr 1fr;gap: 8px}}
@media (max-width: 768px){.s-home .perk-item{justify-content: flex-start;padding: 8px 5px;gap: 8px}}
@media (max-width: 768px){.s-home .perk-icon{width: 34px;height: 34px;border-radius: 9px;font-size: 14px}}
@media (max-width: 768px){.s-home .perk-title{font-size: 11px}}
@media (max-width: 768px){.s-home .perk-subtitle{font-size: 9px}}
@media (max-width: 768px){.s-home .why-us-section{width: calc(100% - 20px);padding: 22px 0 30px}}
@media (max-width: 768px){.s-home .section-heading{margin-bottom: 20px}}
@media (max-width: 768px){.s-home .section-eyebrow{font-size: 9px}}
@media (max-width: 768px){.s-home .why-us-heading{font-size: 21px}}
@media (max-width: 768px){.s-home .section-description{padding: 0 8px;font-size: 12px}}
@media (max-width: 768px){.s-home .why-us-grid{gap: 9px}}
@media (max-width: 768px){.s-home .why-us-item{min-height: 145px;padding: 18px 9px;border-radius: 12px}}
@media (max-width: 768px){.s-home .why-us-icon-circle{width: 45px;height: 45px;margin-bottom: 10px;font-size: 17px}}
@media (max-width: 768px){.s-home .why-us-item h3{font-size: 12px;margin-bottom: 5px}}
@media (max-width: 768px){.s-home .why-us-item p{font-size: 10px;line-height: 1.4}}
@media (max-width: 480px){.s-home .hero-section{width: calc(100% - 16px);padding: 56px 16px 58px}}
@media (max-width: 480px){.s-home .hero-badge{top: 12px;right: 12px;padding: 6px 10px;font-size: 8.5px}}
@media (max-width: 480px){.s-home .hero-heading{font-size: 20px}}
@media (max-width: 480px){.s-home .inventory-toolbar{width: calc(100% - 16px);margin-top: -34px;padding: 16px 14px 14px}}
@media (max-width: 480px){.s-home .inventory-heading h1{font-size: 19px}}
@media (max-width: 480px){.s-home .inventory-heading p{font-size: 11.5px}}
@media (max-width: 480px){.s-home .category-button-mobile{width: 70px;min-width: 70px;height: 68px}}
@media (max-width: 480px){.s-home .car-image-mobile, .s-home .car-image-bus-mobile{width: 28px;height: 28px}}
@media (max-width: 480px){.s-home .filter-controls{grid-template-columns: 1fr 1fr;gap: 6px}}
@media (max-width: 480px){.s-home .clear-button{height: 38px}}
@media (max-width: 480px){.s-home .perks-grid{gap: 6px}}
@media (max-width: 480px){.s-home .perk-item{gap: 6px;padding: 7px 3px}}
@media (max-width: 480px){.s-home .perk-icon{width: 30px;height: 30px;font-size: 12px}}
@media (max-width: 480px){.s-home .perk-title{font-size: 10px}}
@media (max-width: 480px){.s-home .perk-subtitle{font-size: 8px}}
@media (max-width: 480px){.s-home .why-us-grid{gap: 7px}}
@media (max-width: 480px){.s-home .why-us-item{min-height: 130px;padding: 14px 6px}}
@media (max-width: 480px){.s-home .why-us-item h3{font-size: 11px}}
@media (max-width: 480px){.s-home .why-us-item p{font-size: 9px}}
@media (max-width: 360px){.s-home .inventory-toolbar{padding: 14px 12px 12px}}
@media (max-width: 360px){.s-home .category-button-mobile{width: 66px;min-width: 66px}}
@media (max-width: 360px){.s-home .search-button{min-width: 44px;padding: 0 12px}}
@media (max-width: 360px){.s-home .perk-title{font-size: 9px}}
@media (max-width: 360px){.s-home .perk-subtitle{font-size: 8px}}
@media (max-width: 360px){.s-home .why-us-item{min-height: 125px}}
/* ---- components/Vehicles.vue ---- */
.s-veh .vehicles-page{--color-primary: #00245f;--color-primary-light: #133a80;--color-primary-tint: rgba(0, 36, 95, 0.08);--color-secondary: #ff5c5c;--color-secondary-dark: #e0453f;--color-ink: #10162b;--color-muted: #6b7280;--color-bg: #f5f6fa;--color-surface: #ffffff;--color-border: #e7e9f1;--color-whatsapp: #25d366;font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif}
.s-veh .vehicle-card{background: var(--color-surface);border: 1px solid var(--color-border);border-radius: 18px;overflow: hidden;height: 100%;display: flex;flex-direction: column;transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease}
.s-veh .vehicle-card:hover{transform: translateY(-5px);border-color: transparent;box-shadow: 0 16px 32px -12px var(--color-primary-tint), 0 4px 10px rgba(16, 22, 43, 0.06)}
.s-veh .vehicle-card:hover .accent-bar{transform: scaleX(1)}
.s-veh .vehicle-card:hover .card-img-top{transform: scale(1.04)}
.s-veh .image-container{position: relative;width: 100%;height: 210px;overflow: hidden;background: linear-gradient(135deg, #eef0f6, #e4e7f0)}
.s-veh .card-img-top{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)}
.s-veh .accent-bar{position: absolute;left: 0;bottom: 0;width: 100%;height: 4px;background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));transform: scaleX(0);transform-origin: left center;transition: transform 0.35s ease;z-index: 3}
.s-veh .badges-container{position: absolute;top: 12px;left: 12px;z-index: 3;display: flex;flex-direction: column;gap: 6px;align-items: flex-start}
.s-veh .featured-badge, .s-veh .cash-special-badge, .s-veh .new-arrival-badge, .s-veh .sale-new-arrival-badge, .s-veh .uber-bolt-badge, .s-veh .low-mileage-badge, .s-veh .fuel-efficient-badge, .s-veh .auto-badge, .s-veh .seven-seater-badge{color: white;padding: 5px 12px;border-radius: 20px;font-family: 'Sora', sans-serif;font-size: 11px;font-weight: 700;letter-spacing: 0.6px;text-transform: uppercase}
.s-veh .featured-badge, .s-veh .cash-special-badge, .s-veh .new-arrival-badge, .s-veh .sale-new-arrival-badge{background: var(--color-secondary);box-shadow: 0 4px 10px rgba(255, 92, 92, 0.4)}
.s-veh .uber-bolt-badge{background: #00a859;box-shadow: 0 4px 10px rgba(0, 168, 89, 0.4)}
.s-veh .low-mileage-badge{background: #2563eb;box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4)}
.s-veh .fuel-efficient-badge{background: #0284c7;box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4)}
.s-veh .auto-badge{background: #ffcc00;color: #000000;box-shadow: 0 4px 10px rgba(255, 204, 0, 0.45)}
.s-veh .seven-seater-badge{background: #7c3aed;box-shadow: 0 4px 10px rgba(124, 58, 237, 0.4)}
.s-veh .card-img-top.img-sold{filter: grayscale(1) brightness(0.82)}
.s-veh .sold-stamp{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-10deg);z-index: 5;background: rgba(16, 22, 43, 0.78);color: #ffffff;padding: 6px 26px;border: 3px solid #ffffff;border-radius: 4px;font-family: 'Sora', sans-serif;font-size: 24px;font-weight: 800;letter-spacing: 4px;text-transform: uppercase;pointer-events: none;white-space: nowrap}
.s-veh .sale-progress-banner{position: absolute;left: 0;bottom: 0;width: 100%;z-index: 4;background: rgba(0, 36, 95, 0.88);color: #ffffff;text-align: center;padding: 7px 6px;font-family: 'Sora', sans-serif;font-size: 11.5px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;pointer-events: none}
.s-veh .image-dots{position: absolute;bottom: 34px;left: 50%;transform: translateX(-50%);z-index: 3;display: flex;gap: 5px}
.s-veh .dot{width: 5px;height: 5px;border-radius: 50%;background: rgba(255, 255, 255, 0.55);transition: width 0.25s ease, background 0.25s ease}
.s-veh .dot.active{width: 14px;border-radius: 3px;background: #ffffff}
.s-veh .arrow{position: absolute;top: 50%;transform: translateY(-50%);z-index: 4;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;background: rgba(16, 22, 43, 0.35);backdrop-filter: blur(2px);color: white;font-size: 13px;cursor: pointer;opacity: 0;transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease}
.s-veh .image-container:hover .arrow{opacity: 1}
.s-veh .left-arrow{left: 10px}
.s-veh .right-arrow{right: 10px}
.s-veh .arrow:hover{background: var(--color-primary);transform: translateY(-50%) scale(1.08)}
.s-veh .vehicle-card-body{padding: 16px 18px 18px;display: flex;flex-direction: column;flex: 1}
.s-veh .vehicle-name{color: var(--color-ink);font-size: 16px;font-weight: 600;line-height: 1.3;margin-bottom: 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.s-veh .vehicle-price{font-family: 'Sora', sans-serif;color: var(--color-primary);font-size: 22px;font-weight: 700;line-height: 1.2;letter-spacing: -0.2px;margin-bottom: 14px}
.s-veh .vehicle-details{display: flex;align-items: center;justify-content: space-between;gap: 6px;margin-bottom: 16px;padding-bottom: 16px;border-bottom: 1px dashed var(--color-border)}
.s-veh .vehicle-detail{display: flex;align-items: center;gap: 6px;color: var(--color-muted);font-size: 12.5px;font-weight: 500;white-space: nowrap}
.s-veh .vehicle-detail i{color: var(--color-primary);font-size: 13px;width: 14px;text-align: center}
.s-veh .detail-divider{width: 1px;height: 14px;background: var(--color-border);flex-shrink: 0}
.s-veh .btn-whatsapp{width: 100%;background: transparent;border: 1.5px solid var(--color-whatsapp);border-radius: 10px;color: var(--color-whatsapp);padding: 10px 12px;font-family: 'Inter', sans-serif;font-size: 14.5px;font-weight: 600;display: flex;align-items: center;justify-content: center;gap: 8px;cursor: pointer;margin-top: auto;transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease}
.s-veh .btn-whatsapp i{font-size: 17px}
.s-veh .btn-whatsapp:hover{background-color: var(--color-whatsapp);color: white;box-shadow: 0 8px 16px -6px rgba(37, 211, 102, 0.5);transform: translateY(-1px)}
.s-veh .btn-whatsapp:active{transform: translateY(0)}
.s-veh .pagination{gap: 4px}
.s-veh .pagination .page-item .page-link{color: var(--color-primary);border: 1px solid var(--color-border);border-radius: 10px;font-weight: 600;font-size: 14px;min-width: 38px;text-align: center;box-shadow: none}
.s-veh .pagination .page-item .page-link:hover{background: var(--color-primary-tint);border-color: var(--color-primary)}
.s-veh .pagination .page-item.active .page-link{background: var(--color-primary);border-color: var(--color-primary);color: white}
.s-veh .pagination .page-item.disabled .page-link{color: #b7bbc9;background: transparent;pointer-events: none}
.s-veh .btn-load-more{background-color: transparent;color: var(--color-primary);border: 1.5px solid var(--color-primary);border-radius: 24px;padding: 10px 28px;font-weight: 600;font-size: 14px;transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease}
.s-veh .btn-load-more:hover{background-color: var(--color-primary);color: white;box-shadow: 0 10px 20px -10px var(--color-primary)}
.s-veh .loading-icon{display: flex;justify-content: center;align-items: center;min-height: 50vh}
.s-veh .custom-spinner{width: 42px;height: 42px;border-radius: 50%;border: 4px solid var(--color-primary-tint);border-top-color: var(--color-primary);animation: spin 0.8s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}
.s-veh .no-Cars{margin-top: 5em;display: flex;flex-direction: column;align-items: center;gap: 14px}
.s-veh .no-Cars-Icon{font-size: 2.6em;color: var(--color-primary-tint);background: var(--color-bg);width: 1.8em;height: 1.8em;display: flex;align-items: center;justify-content: center;border-radius: 50%;color: var(--color-primary)}
.s-veh .no-Cars-Header{font-family: 'Sora', sans-serif;font-size: 1.6em;font-weight: 700;color: var(--color-ink);text-align: center}
@media (max-width: 576px){.s-veh .image-container{height: 260px}}
@media (max-width: 576px){.s-veh .vehicle-card-body{padding: 14px}}
@media (max-width: 576px){.s-veh .vehicle-name{font-size: 15px}}
@media (max-width: 576px){.s-veh .vehicle-price{font-size: 20px;margin-bottom: 10px}}
@media (max-width: 576px){.s-veh .vehicle-details{margin-bottom: 12px;padding-bottom: 12px}}
@media (max-width: 576px){.s-veh .vehicle-detail{font-size: 11.5px}}
@media (max-width: 576px){.s-veh .vehicle-detail i{font-size: 12px}}
@media (max-width: 576px){.s-veh .arrow{opacity: 1;width: 26px;height: 26px;font-size: 11px}}
@media (max-width: 576px){.s-veh .btn-whatsapp{font-size: 13.5px;padding: 9px 10px}}
/* ---- components/FilterSearch.vue ---- */
.s-filt .filter-component{position: relative;display: inline-block;z-index: 10 !important}
.s-filt .filter-icon{background-color: transparent;border: 1px solid rgb(0, 49, 128);color: rgb(0, 49, 128);padding: 6px 12px;border-radius: 4px;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;cursor: pointer;transform: translateY(0)}
.s-filt .filter-icon:hover, .s-filt .filter-icon:focus{color: white;background-color: rgb(0, 67, 175);box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);outline: none}
.s-filt .dropdown{position: absolute;top: 100%;right: 0;background-color: white;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);padding: 0.5em;max-height: 50em;max-width: 20em;width: 15em;z-index: 10px !important;border-radius: 5px;border: 1px solid #d3d3d3}
.s-filt .filter-group{margin-bottom: 1em;margin-top: 1em;z-index: 10px !important}
.s-filt .filter-title{display: flex;align-items: center;justify-content: space-between;cursor: pointer;font-size: 1em;font-weight: bold;margin-left: 2px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif}
.s-filt .dropdown-arrow{font-size: 12px;transition: transform 0.3s}
.s-filt .fa-chevron-up{transform: rotate(180deg)}
.s-filt .apply-filters-wrapper{display: flex;justify-content: flex-end}
.s-filt .btn-filter{background: transparent;color: rgb(0, 67, 175);border: 1px solid rgb(0, 67, 175);border-radius: 5px;padding: 7px 7px;font-size: 0.9em;margin-right: 0.5em;margin-top: -5px;transition: 0.2s ease}
.s-filt .btn-filter:hover, .s-filt .btn-filter:focus{color: rgb(0, 81, 212);box-shadow: 0px 0px 5px rgba(54, 133, 207, 0.7)}
/* ---- components/filters/PriceFilter.vue ---- */
.s-filt .price-filter{display: flex;gap: 1rem;align-items: center}
.s-filt .input-container{position: relative}
.s-filt .small-label{font-size: 0.8em;position: absolute;top: -12px;left: 5px;background: #fff}
.s-filt .form-control{padding-top: 0.5em}
.s-filt .price-filter{font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;font-size: large;margin-top: 10px}
/* ---- components/filters/MileageFilter.vue ---- */
.s-filt .input-container{position: relative}
.s-filt .small-label{font-size: 0.8em;position: absolute;top: -10px;left: 5px;background: #fff;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important}
.s-filt .form-control{padding-top: 0.5em;width: 100%}
.s-filt .form-mileage{margin-top: 10px}
/* ---- components/filters/ModelYearFilter.vue ---- */
.s-filt .input-container{position: relative}
.s-filt .small-label{font-size: 0.8em;position: absolute;top: -10px;left: 5px;background: #fff;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important}
.s-filt .form-control{padding-top: 0.5em;width: 100%}
.s-filt .form-model{margin-top: 10px}
/* ---- components/sortSearch.vue ---- */
.s-sort .sort-component{position: relative;display: inline-block;z-index: 2}
.s-sort .sort-icon{background-color: transparent;border: 1px solid rgb(0, 49, 128);color: rgb(0, 49, 128);padding: 0.4em 1em;border-radius: 4px;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;cursor: pointer;transform: translateY(0)}
.s-sort .sort-icon:hover, .s-sort .sort-icon:focus{color: white;background-color: rgb(0, 67, 175);box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);outline: none}
.s-sort .dropdown{position: absolute;top: 100%;right: 0;background-color: white;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);padding: 10px;max-height: 26em;max-width: 20em;width: 15em;z-index: 2;overflow-y: auto;scrollbar-width: thin;scrollbar-color: rgba(0, 0, 0, 0.2) transparent;border-radius: 5px;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;border: 1px solid #d3d3d3}
.s-sort .dropdown::-webkit-scrollbar{width: 4px}
.s-sort .dropdown::-webkit-scrollbar-thumb{background-color: rgba(0, 0, 0, 0.2);border-radius: 2px}
.s-sort .sort-group{margin-bottom: 1em;margin-left: -1em}
.s-sort .sort-title{font-size: 16px;font-weight: bold;margin-bottom: 0.5em;text-align: left;margin-left: 1.5em}
.s-sort .sort-options{display: flex;flex-direction: column}
.s-sort .form-check-label{margin-bottom: 0.3em;cursor: pointer}
.s-sort .form-check-input{margin-right: 0.5em}
.s-sort .apply-sort-wrapper{display: flex;justify-content: space-between}
.s-sort .apply-sort-wrapper-no-reset{display: flex;justify-content: flex-end}
.s-sort .btn-sort{background: transparent;color: rgb(0, 67, 175);border: 1px solid rgb(0, 67, 175);border-radius: 5px;padding: 7px 7px;font-size: 0.9em;margin-right: 0.5em;margin-top: -5px;transition: 0.3s ease;font-family:Arial, Helvetica, sans-serif}
.s-sort .btn-sort:hover{color: rgb(0, 81, 212);box-shadow: 0px 0px 5px rgba(54, 133, 207, 0.7)}
.s-sort .btn-sort-reset{background: transparent;color: rgb(95, 95, 95);border-radius: 5px;padding: 7px 7px;font-size: 0.9em;margin-left: 0.5em;margin-top: -5px;transition: 0.3s ease;font-family: Arial, Helvetica, sans-serif}
.s-sort .btn-sort-reset:hover{box-shadow: 0px 0px 5px rgba(95, 95, 95, 0.7)}
/* ---- components/Modal.vue ---- */
.s-modal .modal-overlay{position: fixed;inset: 0;z-index: 9999;display: flex;align-items: center;justify-content: center;padding: 20px;background: rgba(0, 0, 0, 0.6);animation: fadeIn 0.2s ease}
.s-modal .modal-container{position: relative;width: 100%;max-width: 550px;max-height: calc(100vh - 40px);overflow-y: auto;background: #fff;border-radius: 14px;padding: 32px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);animation: slideIn 0.25s ease}
.s-modal .modal-close{position: absolute;top: 12px;right: 14px;width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;border: none;background: transparent;color: #555;font-size: 20px;border-radius: 50%;cursor: pointer;transition:
    background-color 0.2s ease,
    color 0.2s ease}
.s-modal .modal-close:hover{background-color: #f0f0f0;color: #111}
.s-modal .modal-close:focus{outline: 2px solid rgb(0, 67, 175);outline-offset: 2px}
.s-modal .modal-header{width: 100%;margin: 0 0 22px 0;padding: 0 30px;color: rgb(0, 49, 128);font-size: 25px;font-weight: 700;line-height: 1.3;text-align: center;white-space: pre-line}
.s-modal .modal-description{width: 100%;color: #333;font-size: 16px;line-height: 1.7;white-space: pre-line;margin-bottom: 28px;padding-top: 22px;border-top: 1px solid #ddd;text-align: left}
.s-modal .modal-button{width: 100%;padding: 11px 20px;border: none;border-radius: 8px;background-color: rgb(0, 67, 175);color: white;font-size: 16px;font-weight: 600;cursor: pointer;transition:
    background-color 0.2s ease,
    transform 0.2s ease}
.s-modal .modal-button:hover{background-color: rgb(0, 49, 128);transform: translateY(-1px)}
.s-modal .modal-button:focus{outline: 2px solid rgb(0, 67, 175);outline-offset: 2px}
@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}
@keyframes slideIn{from{opacity: 0;transform: translateY(15px)}to{opacity: 1;transform: translateY(0)}}
@media (max-width: 576px){.s-modal .modal-overlay{padding: 12px}}
@media (max-width: 576px){.s-modal .modal-container{max-height: calc(100vh - 24px);padding: 28px 16px 18px;border-radius: 12px}}
@media (max-width: 576px){.s-modal .modal-close{top: 8px;right: 8px;width: 36px;height: 36px;font-size: 18px}}
@media (max-width: 576px){.s-modal .modal-header{padding: 0 25px;margin-bottom: 18px;font-size: 21px;line-height: 1.35}}
@media (max-width: 576px){.s-modal .modal-description{padding-top: 18px;font-size: 14px;line-height: 1.7;margin-bottom: 22px}}
@media (max-width: 576px){.s-modal .modal-button{padding: 12px 16px;font-size: 15px}}
/* ---- views/VehicleView.vue ---- */
.s-vview *{box-sizing: border-box}
.s-vview .page-container{display: flex;flex-direction: column;min-height: 100vh;margin-top: 120px;background: #f7f8fa}
.s-vview .content{flex: 1;padding-bottom: 40px}
.s-vview .container{max-width: 1200px}
.s-vview .vehicle-details{display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 18px;flex-wrap: wrap}
.s-vview .vehicle-title{font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-weight: 700;font-size: 2rem;color: #00245f;margin: 0;letter-spacing: -0.02em}
.s-vview .vehicle-title-mobile{font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-weight: 700;font-size: 1.35rem;color: #00245f;margin: 0 0 12px 0;letter-spacing: -0.01em}
.s-vview .btn-pill{display: inline-flex;align-items: center;gap: 8px;padding: 10px 22px;border-radius: 999px;font-weight: 600;font-size: 0.95rem;text-decoration: none;border: none;cursor: pointer;transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease}
.s-vview .btn-pill:hover{transform: translateY(-2px)}
.s-vview .btn-edit{background: #00245f;color: #fff;box-shadow: 0 4px 14px rgba(0, 36, 95, 0.25)}
.s-vview .btn-edit:hover{background: #001840;color: #fff}
.s-vview .btn-whatsapp{background: #ff5c5c;color: #fff;box-shadow: 0 4px 14px rgba(255, 92, 92, 0.3)}
.s-vview .btn-whatsapp:hover{background: #ff3d3d;color: #fff}
.s-vview .mobile-action-row{display: flex;gap: 10px;margin-top: 16px;justify-content: center}
.s-vview .mobile-action-row .btn-pill{flex: 1;justify-content: center}
.s-vview .my-col-md-8{padding-right: 0 !important;padding-left: 0 !important}
.s-vview .image-container{position: relative;border-radius: 16px;overflow: hidden;background-color: #fff;box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);transition: box-shadow 0.2s ease}
.s-vview .image-container:hover{box-shadow: 0 10px 30px rgba(0, 36, 95, 0.18)}
.s-vview .my-image{width: 100%;display: block;aspect-ratio: 4 / 3;object-fit: cover;cursor: zoom-in}
.s-vview .expand-btn{position: absolute;top: 14px;right: 14px;width: 38px;height: 38px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.35);backdrop-filter: blur(2px);color: #fff;cursor: pointer;font-size: 14px;transition: background-color 0.15s ease, transform 0.15s ease}
.s-vview .expand-btn:hover{background: #ff5c5c;transform: scale(1.08)}
.s-vview .nav-arrow{position: absolute;top: 50%;transform: translateY(-50%);width: 42px;height: 42px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.35);backdrop-filter: blur(2px);color: #fff;cursor: pointer;transition: background-color 0.15s ease, transform 0.15s ease;font-size: 16px}
.s-vview .nav-arrow:hover{background: #ff5c5c;transform: translateY(-50%) scale(1.08)}
.s-vview .nav-arrow-left{left: 14px}
.s-vview .nav-arrow-right{right: 14px}
.s-vview .image-counter{position: absolute;bottom: 12px;right: 12px;background: rgba(0, 36, 95, 0.75);color: #fff;font-size: 0.75rem;font-weight: 600;padding: 4px 10px;border-radius: 999px}
@media (max-width: 767px){.s-vview .nav-arrow{width: 34px;height: 34px;font-size: 14px}}
.s-vview .small-image-wrapper{margin-top: 14px}
.s-vview .small-image-container{width: 100%;overflow-x: auto;white-space: nowrap;scrollbar-width: thin;display: flex;padding: 4px 2px}
.s-vview .image-scroll{display: flex;gap: 10px}
.s-vview .small-image{min-width: 6.5em;height: 4.8em;object-fit: cover;cursor: pointer;border-radius: 10px;border: 2px solid transparent;opacity: 0.7;transition: 0.15s ease}
.s-vview .small-image:hover{opacity: 1;transform: translateY(-2px)}
.s-vview .small-image-selected{opacity: 1;border: 2px solid #ff5c5c;box-shadow: 0 2px 10px rgba(255, 92, 92, 0.35)}
.s-vview .hover-container{border-radius: 16px;overflow: hidden;box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);transition: box-shadow 0.2s ease;margin-top: 0}
.s-vview .hover-container:hover{box-shadow: 0 10px 30px rgba(0, 36, 95, 0.15)}
.s-vview .card-header{display: flex;justify-content: space-between;align-items: center;background: linear-gradient(135deg, #00245f, #003a8c);padding: 16px 20px}
.s-vview .vheader{margin: 0;font-size: 1.25rem;font-weight: 700;color: #fff}
.s-vview .share-button{position: relative;cursor: pointer;color: #fff;font-size: 1.1rem;padding: 6px}
.s-vview .share-dropdown{display: none;position: absolute;top: 130%;right: 0;background-color: #fff;border-radius: 10px;z-index: 10;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);overflow: hidden;min-width: 150px}
.s-vview .share-dropdown-mobile{display: none;position: absolute;top: 130%;right: 0;background-color: #fff;border-radius: 10px;z-index: 10;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);overflow: hidden;min-width: 150px}
.s-vview .share-dropdown a, .s-vview .share-dropdown-mobile a{display: flex;align-items: center;gap: 8px;padding: 12px 14px;text-decoration: none;color: #333;font-size: 0.9rem;transition: background-color 0.15s ease}
.s-vview .share-dropdown a:hover, .s-vview .share-dropdown-mobile a:hover{background-color: #f4f5f7}
.s-vview .share-button:hover .share-dropdown, .s-vview .share-button:hover .share-dropdown-mobile{display: block}
.s-vview .info-card{background: #fff;border-radius: 0;padding: 10px 20px !important}
.s-vview .info-row{display: flex;justify-content: space-between;align-items: center;padding: 12px 6px;border-bottom: 1px solid #eef0f3;border-radius: 8px;transition: background-color 0.15s ease}
.s-vview .info-row:last-of-type{border-bottom: none}
.s-vview .info-row:hover{background-color: #f4f7fc}
.s-vview .info-card-even-bg{background-color: #fafbfc}
.s-vview .info-key{color: #6b7280;font-size: 0.9rem;font-weight: 500}
.s-vview .info-value{color: #00245f;font-size: 0.9rem;font-weight: 700;text-align: right}
.s-vview .price-wrap{text-align: center;margin-top: 16px;padding-top: 16px;border-top: 2px dashed #e5e7eb}
.s-vview .price-label{display: block;font-size: 0.8rem;color: #9aa1ab;text-transform: uppercase;letter-spacing: 0.08em;margin-bottom: 4px}
.s-vview .vehicle-price{font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-weight: 800;font-size: 1.9rem;color: #ff5c5c;margin: 0;transition: 0.2s ease}
.s-vview ::-webkit-scrollbar{height: 6px !important}
.s-vview ::-webkit-scrollbar-thumb{background-color: #c7ccd4;border-radius: 4px}
.s-vview .lightbox-overlay{position: fixed;inset: 0;background: rgba(0, 0, 0, 0.92);z-index: 2000;display: flex;align-items: center;justify-content: center;padding: 40px;animation: fadeIn 0.15s ease}
@keyframes fadeIn{from{opacity: 0}to{opacity: 1}}
.s-vview .lightbox-image{max-width: 90vw;max-height: 85vh;object-fit: contain;border-radius: 8px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5)}
.s-vview .lightbox-close{position: fixed;top: 24px;right: 24px;width: 44px;height: 44px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.12);color: #fff;cursor: pointer;font-size: 18px;transition: background-color 0.15s ease, transform 0.15s ease}
.s-vview .lightbox-close:hover{background: #ff5c5c;transform: scale(1.08)}
.s-vview .lightbox-arrow{position: fixed;top: 50%;transform: translateY(-50%);width: 52px;height: 52px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.12);color: #fff;cursor: pointer;font-size: 20px;transition: background-color 0.15s ease, transform 0.15s ease}
.s-vview .lightbox-arrow:hover{background: #ff5c5c;transform: translateY(-50%) scale(1.08)}
.s-vview .lightbox-arrow-left{left: 24px}
.s-vview .lightbox-arrow-right{right: 24px}
.s-vview .lightbox-counter{position: fixed;bottom: 28px;left: 50%;transform: translateX(-50%);background: rgba(255, 255, 255, 0.12);color: #fff;font-size: 0.85rem;font-weight: 600;padding: 6px 16px;border-radius: 999px}
@media (max-width: 767px){.s-vview .lightbox-overlay{padding: 16px}}
@media (max-width: 767px){.s-vview .lightbox-arrow{width: 40px;height: 40px;font-size: 16px}}
@media (max-width: 767px){.s-vview .lightbox-arrow-left{left: 10px}}
@media (max-width: 767px){.s-vview .lightbox-arrow-right{right: 10px}}
@media (max-width: 767px){.s-vview .lightbox-close{top: 16px;right: 16px}}
.s-vview .loading-icon{display: flex;justify-content: center;align-items: center;min-height: 50vh}
@media (max-width: 767px){.s-vview .page-container{margin-top: 126px}}
@media (max-width: 767px){.s-vview .container{padding-left: 12px;padding-right: 12px}}
@media (max-width: 767px){.s-vview .col-md-4{margin-top: 18px}}
@media (max-width: 767px){.s-vview .card-header{padding: 14px 16px}}
@media (max-width: 767px){.s-vview .vheader{font-size: 1.1rem}}
@media (max-width: 767px){.s-vview .vehicle-price{font-size: 1.6rem}}
/* ---- views/ContactView.vue ---- */
.s-contact .page-container{margin-top: 100px;display: flex;flex-direction: column;min-height: 100vh;background: linear-gradient(180deg, #eef1f7 0%, #f7f8fa 40%)}
.s-contact .content{flex: 1;padding-bottom: 60px}
.s-contact .page-heading{background: linear-gradient(135deg, #00245f 0%, #1a3d7a 100%);border-radius: 16px;padding: 36px 32px;margin-bottom: 32px;box-shadow: 0 8px 24px rgba(0, 36, 95, 0.25)}
.s-contact .page-heading h1{font-size: 2.1em;font-weight: 700;color: #fff;margin-bottom: 6px}
.s-contact .page-heading p{color: rgba(255, 255, 255, 0.8);margin: 0}
.s-contact .modern-card{border: none;border-radius: 14px;overflow: hidden;box-shadow: 0 4px 16px rgba(0, 36, 95, 0.08);transition: box-shadow 0.2s ease}
.s-contact .modern-card:hover{box-shadow: 0 8px 24px rgba(0, 36, 95, 0.12)}
.s-contact .modern-header{background-color: #00245f;border-bottom: none;padding: 16px 20px;gap: 12px;flex-wrap: wrap}
.s-contact .header-text{font-size: 1.15em;font-weight: 600;color: #fff}
.s-contact .body-card{border-radius: 0;background-color: #fff}
.s-contact .address-line{display: flex;align-items: center;gap: 8px;padding: 14px 20px;font-size: 0.9em;color: #6b7280;border-top: 1px solid #e8e8ec;background-color: #fafbfd}
.s-contact .address-line svg{color: #ff5c5c;flex-shrink: 0}
.s-contact .btn-directions{display: inline-flex;align-items: center;gap: 8px;background-color: #ff5c5c;color: #fff;font-size: 0.85em;font-weight: 600;padding: 9px 16px;border-radius: 8px;text-decoration: none;white-space: nowrap;box-shadow: 0 2px 8px rgba(255, 92, 92, 0.35);transition: background-color 0.2s ease, transform 0.15s ease}
.s-contact .btn-directions:hover{background-color: #ff3333;color: #fff;transform: translateY(-1px)}
.s-contact .btn-submit{background: linear-gradient(135deg, #ff5c5c 0%, #ff3333 100%);color: #fff;font-weight: 600;padding: 11px 28px;border: none;border-radius: 8px;box-shadow: 0 4px 12px rgba(255, 92, 92, 0.3);transition: transform 0.15s ease, box-shadow 0.2s ease}
.s-contact .btn-submit:hover{transform: translateY(-1px);box-shadow: 0 6px 16px rgba(255, 92, 92, 0.4)}
.s-contact .form-label{font-size: 0.85em;font-weight: 600;color: #1a1a1a;margin-bottom: 6px}
.s-contact .modern-input{border: 1.5px solid #e8e8ec;border-radius: 8px;padding: 10px 14px;font-size: 0.95em;background-color: #fafbfd}
.s-contact .modern-input:focus{border-color: #ff5c5c;background-color: #fff;box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.12)}
.s-contact .info-list{list-style: none;padding: 0;margin: 0}
.s-contact .info-list li{display: flex;align-items: flex-start;gap: 12px;padding: 12px 0;border-bottom: 1px solid #e8e8ec}
.s-contact .info-list li:last-child{border-bottom: none}
.s-contact .info-icon{width: 36px;height: 36px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;border-radius: 10px;background: linear-gradient(135deg, #00245f 0%, #1a3d7a 100%);color: #fff}
.s-contact .info-label{display: block;font-size: 0.75em;color: #6b7280;text-transform: uppercase;letter-spacing: 0.03em;margin-bottom: 2px}
.s-contact .info-value{display: block;font-size: 0.92em;font-weight: 500;color: #1a1a1a;text-decoration: none;word-break: break-word}
.s-contact .info-value:hover{color: #ff5c5c}
.s-contact .hours-list{list-style: none;padding: 0;margin: 0}
.s-contact .hours-list li{display: flex;justify-content: space-between;padding: 10px 0;border-bottom: 1px solid #e8e8ec;font-size: 0.9em}
.s-contact .hours-list li:last-child{border-bottom: none}
.s-contact .hours-list li.today{background: linear-gradient(90deg, rgba(255, 92, 92, 0.08), transparent);margin: 0 -20px;padding: 10px 20px;border-radius: 6px}
.s-contact .hours-list li.today .day, .s-contact .hours-list li.today .time{color: #ff5c5c;font-weight: 700}
.s-contact .hours-list .day{font-weight: 600;color: #1a1a1a}
.s-contact .hours-list .time{color: #6b7280}
@media (max-width: 767px){.s-contact .page-container{margin-top: 112px}}
@media (max-width: 767px){.s-contact .page-heading{padding: 24px 20px}}
@media (max-width: 767px){.s-contact .modern-header{flex-direction: column;align-items: flex-start !important}}
@media (max-width: 767px){.s-contact .btn-directions{width: 100%;justify-content: center}}
/* ---- views/GalleryView.vue ---- */
.s-gallery .page-container{min-height: 100vh;background-color: #f5f6f8}
.s-gallery .gallery-hero{margin-top: 100px;background: linear-gradient(135deg, #00245f 0%, #001a45 100%);padding: 48px 24px;overflow: hidden}
.s-gallery .hero-inner{max-width: 1100px;margin: 0 auto}
.s-gallery .hero-title{display: inline-block;position: relative;color: #fff;font-size: 2.25rem;font-weight: 700;margin: 0 0 16px 0;padding-bottom: 12px;font-family: 'Sora', 'Inter', sans-serif}
.s-gallery .hero-title::after{content: '';position: absolute;bottom: 0;left: 0;width: 64px;height: 4px;background: #ff5c5c;border-radius: 2px}
.s-gallery .hero-subtitle{color: rgba(255, 255, 255, 0.75);font-size: 1rem;margin: 0;padding-bottom: 16px}
@media (max-width: 767px){.s-gallery .gallery-hero{margin-top: 120px}}
@media (min-width: 992px){.s-gallery .gallery-hero{margin-top: 105px}}
.s-gallery .content{max-width: 1100px;margin: 0 auto;padding: 32px 24px 64px}
.s-gallery .gallery-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 16px}
.s-gallery .gallery-item{position: relative;border: none;padding: 0;border-radius: 12px;overflow: hidden;cursor: pointer;aspect-ratio: 4 / 3;background: #e2e5ea;box-shadow: 0 2px 10px rgba(0, 36, 95, 0.08);transition: box-shadow 0.2s ease}
.s-gallery .gallery-item:hover, .s-gallery .gallery-item:focus-visible{box-shadow: 0 6px 20px rgba(0, 36, 95, 0.18)}
.s-gallery .gallery-item:focus-visible{outline: 2px solid #ff5c5c;outline-offset: 2px}
.s-gallery .gallery-item--feature{grid-column: span 2;aspect-ratio: 16 / 9}
.s-gallery .gallery-img{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 0.35s ease}
.s-gallery .gallery-item:hover .gallery-img{transform: scale(1.05)}
.s-gallery .gallery-item__overlay{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;background: rgba(0, 36, 95, 0);color: #fff;font-size: 1.25rem;opacity: 0;transition: background 0.2s ease, opacity 0.2s ease}
.s-gallery .gallery-item:hover .gallery-item__overlay, .s-gallery .gallery-item:focus-visible .gallery-item__overlay{background: rgba(0, 36, 95, 0.35);opacity: 1}
@media (max-width: 767px){.s-gallery .gallery-item--feature{grid-column: span 1;aspect-ratio: 4 / 3}}
@media (max-width: 767px){.s-gallery .gallery-grid{grid-template-columns: 1fr 1fr;gap: 10px}}
@media (max-width: 767px){.s-gallery .hero-title{font-size: 1.6rem}}
@media (max-width: 767px){.s-gallery .content{padding: 24px 16px 48px}}
.s-gallery .lightbox{position: fixed;inset: 0;background: rgba(0, 10, 30, 0.92);z-index: 1050;display: flex;align-items: center;justify-content: center}
.s-gallery .lightbox-img{max-width: 88vw;max-height: 82vh;object-fit: contain;border-radius: 6px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5)}
.s-gallery .lightbox-close{position: absolute;top: 20px;right: 24px;background: transparent;border: none;color: #fff;font-size: 1.75rem;cursor: pointer;z-index: 1}
.s-gallery .lightbox-nav{position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.1);border: none;color: #fff;width: 48px;height: 48px;border-radius: 50%;font-size: 1.25rem;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s ease}
.s-gallery .lightbox-nav:hover{background: #ff5c5c}
.s-gallery .lightbox-nav--prev{left: 16px}
.s-gallery .lightbox-nav--next{right: 16px}
.s-gallery .lightbox-counter{position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);color: rgba(255, 255, 255, 0.85);font-size: 0.9rem;letter-spacing: 0.02em}
@media (max-width: 767px){.s-gallery .lightbox-nav{width: 40px;height: 40px;font-size: 1rem}}
@media (max-width: 767px){.s-gallery .lightbox-close{top: 12px;right: 16px;font-size: 1.5rem}}
@media (max-width: 767px){.s-gallery .lightbox-counter{bottom: 14px;font-size: 0.8rem}}
.s-gallery .fade-enter-active, .s-gallery .fade-leave-active{transition: opacity 0.2s ease}
.s-gallery .fade-enter-from, .s-gallery .fade-leave-to{opacity: 0}
/* ---- components/Navbar.vue ---- */
.s-nav .site-header{position: fixed;top: 0;z-index: 1000;width: 100%;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)}
.s-nav .top-info-bar{background-color: #00245f;color: #d7deeb;font-size: 0.82em;line-height: 1.2;border-bottom: 1px solid rgba(255, 255, 255, 0.08)}
.s-nav .top-info-inner{display: flex;align-items: center;justify-content: space-between;gap: 1.25em;padding: 0.45em 1em;flex-wrap: wrap}
.s-nav .info-item{display: flex;align-items: center;gap: 0.5em;white-space: nowrap}
.s-nav .info-item i{color: #ff5c5c;font-size: 0.95em;width: 1em;text-align: center}
.s-nav .location-item{font-weight: 500;color: #f1f3f8}
.s-nav .hours-item{position: relative}
.s-nav .hours-toggle{display: flex;align-items: center;gap: 0.5em;color: #d7deeb;text-decoration: none;cursor: pointer;transition: color 0.2s ease}
.s-nav .hours-toggle .caret{font-size: 0.65em;margin-left: 0.1em;color: #d7deeb}
.s-nav .hours-toggle:hover, .s-nav .hours-toggle:hover .caret{color: #fff}
.s-nav .hours-dropdown{margin-top: 0.6em;padding: 0.75em 0.9em;border: none;border-radius: 0.5em;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);min-width: 15em}
.s-nav .hours-row{display: flex;justify-content: space-between;gap: 1.5em;padding: 0.3em 0;font-size: 0.95em;color: #333}
.s-nav .hours-row + .hours-row{border-top: 1px solid #eef0f4}
.s-nav .hours-day{font-weight: 600;color: #00245f}
.s-nav .hours-time{color: #626262}
.s-nav .contact-item{display: flex;align-items: center;gap: 1em}
.s-nav .contact-link{display: flex;align-items: center;gap: 0.5em;color: #d7deeb;text-decoration: none;transition: color 0.2s ease}
.s-nav .contact-link:hover{color: #ff5c5c}
.s-nav .contact-divider{width: 1px;height: 1em;background-color: rgba(255, 255, 255, 0.2)}
.s-nav .social-item{display: flex;align-items: center;gap: 0.5em}
.s-nav .social-link{display: flex;align-items: center;justify-content: center;width: 1.9em;height: 1.9em;border-radius: 50%;background-color: rgba(255, 255, 255, 0.08);color: #fff;text-decoration: none;transition: background-color 0.2s ease, transform 0.2s ease}
.s-nav .social-link i{color: #fff;font-size: 0.95em}
.s-nav .social-link:hover{background-color: #ff5c5c;transform: translateY(-2px)}
.s-nav .fj-motors-logo img{width: 13em;height: auto;display: block;margin-left: 10px;margin-right: 20px}
.s-nav .navbar-title{font-size: 1.5em;font-weight: bolder}
.s-nav .navbar{position: relative;width: 100%}
.s-nav .bg-blue{background-color: #063E88;transition: background-color 0.3s ease}
.s-nav .fj-motors-logo-font{font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: xx-large;text-decoration: none;color: rgb(212, 0, 0);font-weight: 500;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;line-height: 1.5;letter-spacing: 0.03em;padding-right: 1ex;padding-left: 0.5ex;transition: font-size 0.2s ease, transform 0.2s ease}
.s-nav .fj-motors-logo-font:hover{font-size: 33px;transform: translateY(-2px)}
.s-nav .my-nav-item{color: #dddddd !important;font-weight: 500 !important;transition: font-size 0.2s ease, transform 0.2s ease}
.s-nav .my-nav-item:hover{color: #fff !important;transform: translateY(-3px)}
.s-nav .active{color: #ff5c5c !important}
.s-nav .my-dropdown{padding: 5px !important;z-index: 10 !important}
.s-nav .user-logo{transition: font-size 0.3s ease, transform 0.2s ease}
.s-nav .dropdown-menu{background-color: #fff;text-align: center;position: absolute;top: 100%;right: 0;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);padding: 0.5em;max-height: 50em;max-width: 20em;width: 15em}
.s-nav .dropdown-item{transition: font-size 0.1s ease, transform 0.1s ease;color: #626262 !important}
.s-nav .dropdown-item:hover{background-color: #ceeaff;transform: translateY(-2px);color: #000 !important}
@media (max-width: 991.98px){.s-nav .top-info-inner{font-size: 0.9em;gap: 0.75em;padding: 0.4em 0.75em}}
@media (max-width: 991.98px){.s-nav .contact-item span{display: none}}
@media (max-width: 991.98px){.s-nav .contact-divider{display: none}}
@media (max-width: 991.98px){.s-nav .contact-link i{font-size: 1.05em}}
@media (max-width: 575.98px){.s-nav .top-info-bar{font-size: 0.72em}}
@media (max-width: 575.98px){.s-nav .top-info-inner{justify-content: space-between;align-items: center;row-gap: 0.5em;padding: 0.5em 0.5em}}
@media (max-width: 575.98px){.s-nav .location-item{order: 1;flex: 0 1 auto}}
@media (max-width: 575.98px){.s-nav .location-item span{display: inline}}
@media (max-width: 575.98px){.s-nav .hours-toggle span{display: none}}
@media (max-width: 575.98px){.s-nav .hours-toggle span{display: none}}
@media (max-width: 575.98px){.s-nav .contact-item{order: 3;flex: 0 1 auto;gap: 1.2em}}
@media (max-width: 575.98px){.s-nav .contact-item span{display: none}}
@media (max-width: 575.98px){.s-nav .contact-divider{display: none}}
@media (max-width: 575.98px){.s-nav .social-item{order: 4;width: 100%;justify-content: center;gap: 0.75em;padding-top: 0.25em;border-top: 1px solid rgba(255, 255, 255, 0.1)}}
@media (max-width: 575.98px){.s-nav .info-item{gap: 0.35em}}
@media (max-width: 575.98px){.s-nav .info-item i{font-size: 1.05em}}
@media (max-width: 575.98px){.s-nav .social-link{width: 1.8em;height: 1.8em}}
/* ---- components/Footer.vue ---- */
.s-foot .site-footer{--navy: #00245f;--navy-light: #103a7d;--navy-dark: #001638;--coral: #ff5c5c;--coral-dark: #e64545;--ink-50: rgba(255, 255, 255, 0.65);--ink-30: rgba(255, 255, 255, 0.35);--white: #ffffff;background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);color: #fff;font-size: 0.95rem}
.s-foot .container{max-width: 1140px;margin: 0 auto;padding: 0 1.5rem}
.s-foot .trust-strip{background: var(--coral)}
.s-foot .trust-strip__track{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;row-gap: 0.4rem;column-gap: 2.25rem;padding: 0.7rem 1.5rem}
.s-foot .trust-item{display: inline-flex;align-items: center;gap: 0.5rem;font-weight: 600;font-size: 0.78rem;letter-spacing: 0.02em;text-transform: uppercase;color: #fff;white-space: nowrap}
.s-foot .trust-item i{font-size: 0.85rem}
.s-foot .footer-main{display: grid;grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;gap: 2.5rem;padding: 3rem 1.5rem 2.5rem}
.s-foot .footer-col{min-width: 0;text-align: left}
.s-foot .footer-heading{display: inline-block;font-size: 0.95rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.06em;margin-bottom: 1.1rem;position: relative;padding-bottom: 0.6rem}
.s-foot .footer-heading::after{content: '';position: absolute;left: 0;bottom: 0;width: 28px;height: 3px;background: var(--coral);border-radius: 2px}
.s-foot .footer-brand{text-align: left}
.s-foot .brand-logo{display: block;width: auto;max-width: 220px;height: auto;margin: 0 0 0.75rem}
.s-foot .brand-tag{margin: 0 0 1rem;font-size: 0.85rem;font-weight: 600;color: var(--ink-50);text-align: left}
.s-foot .brand-copy{color: var(--ink-50);line-height: 1.6;margin-bottom: 1.4rem;text-align: left}
.s-foot .social-row{display: flex;gap: 0.6rem}
.s-foot .social-icon{display: inline-flex;align-items: center;justify-content: center;width: 38px;height: 38px;border-radius: 50%;background: rgba(255, 255, 255, 0.08);color: #fff;text-decoration: none;transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease}
.s-foot .social-icon:hover{background: var(--coral);color: #fff;transform: translateY(-3px)}
.s-foot .footer-list{list-style: none;margin: 0;padding: 0}
.s-foot .footer-list li{margin-bottom: 0.75rem}
.s-foot .footer-link{color: var(--ink-50);text-decoration: none;transition: color 0.2s ease, padding-left 0.2s ease}
.s-foot .footer-link:hover{color: var(--coral);padding-left: 3px}
.s-foot .footer-contact li{display: flex;align-items: flex-start;gap: 0.65rem;color: var(--ink-50);line-height: 1.5}
.s-foot .footer-contact i{color: var(--coral);margin-top: 0.2rem;width: 1rem;text-align: center;flex-shrink: 0}
.s-foot .hours-list{list-style: none;margin: 0;padding: 0}
.s-foot .hours-list li{display: flex;justify-content: space-between;gap: 0.75rem;padding: 0.4rem 0.5rem;border-radius: 6px;color: var(--ink-50);font-size: 0.85rem}
.s-foot .hours-list li.is-today{background: rgba(255, 92, 92, 0.15);color: #fff;font-weight: 700}
.s-foot .hours-day{flex-shrink: 0}
.s-foot .hours-time{text-align: right}
.s-foot .footer-bottom{border-top: 1px solid rgba(255, 255, 255, 0.12);background: rgba(0, 0, 0, 0.15)}
.s-foot .footer-bottom__inner{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.5rem;padding: 1rem 1.5rem;font-size: 0.8rem;color: var(--ink-50)}
.s-foot .footer-bottom__inner p{margin: 0}
.s-foot .footer-bottom__credit{color: var(--ink-50)}
.s-foot .footer-credit-link{color: var(--white);text-decoration: none;transition: color 0.2s ease}
.s-foot .footer-credit-link:hover{color: var(--coral)}
@media (max-width: 991px){.s-foot .footer-main{grid-template-columns: 1fr 1fr;row-gap: 2.5rem}}
@media (max-width: 991px){.s-foot .footer-brand{grid-column: 1 / -1}}
@media (max-width: 575px){.s-foot .trust-strip{display: none}}
@media (max-width: 575px){.s-foot .footer-main{grid-template-columns: 1fr;text-align: left;padding: 2.5rem 1.25rem 2rem}}
@media (max-width: 575px){.s-foot .footer-bottom__inner{flex-direction: column;text-align: center}}
@media (max-width: 768px){.s-foot .site-footer{padding-bottom: calc(65px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion: reduce){.s-foot .social-icon, .s-foot .footer-link{transition: none}}
/* ---- glue for the PHP version (pages are plain links instead of Vue buttons) ---- */
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}
@media(min-width:500px){.only-mob{display:none!important}}
@media(max-width:499.98px){.only-desk,.only-desk-inline{display:none!important}}
.s-home a.category-button,.s-home a.category-button-mobile,.s-home a.clear-button,.s-home a.bottom-nav-item,.s-veh a.btn-whatsapp,.s-veh a.btn-load-more,.s-vview a.btn-pill,.s-sort a.btn-sort-reset{text-decoration:none}
.s-home a.bottom-nav-item{color:inherit}

/* ---- Uber/Bolt badge picture, the extras list, the Sell Your Car page ---- */
.s-veh .uber-bolt-badge{display:inline-flex;align-items:center;gap:6px}
.s-veh .uber-bolt-badge img{height:14px;width:auto;display:block}
.s-vview .feature-card{margin-top:16px;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.08);background:#fff}
.s-vview .feature-card .vheader{padding:14px 18px;background:linear-gradient(135deg,#00245f,#0a3a8a)}
.s-vview .feature-list{list-style:none;margin:0;padding:12px 18px 14px}
.s-vview .feature-list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:.95rem;color:#1f2937;border-bottom:1px solid #eef1f6}
.s-vview .feature-list li:last-child{border-bottom:0}
.s-vview .feature-list i{color:#16a34a;margin-top:3px;flex:0 0 auto}
.s-sell .sell-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-sell .sell-opt{font-weight:400;color:#6b7280;font-size:.85em}
.s-sell .sell-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-weight:600}
.s-sell .sell-count{margin-top:6px;font-size:.9rem;color:#4b5563}
.s-sell .sell-file{padding:10px}
.s-sell .sell-done{text-align:center;padding:40px 20px}
.s-sell .sell-done i{font-size:56px;color:#16a34a;margin-bottom:12px}
.s-sell .sell-done h2{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.s-sell .sell-done p{color:#4b5563;margin-bottom:20px}
.s-sell .sell-done a.btn-submit{text-decoration:none;display:inline-block}
.s-home a.category-button span:only-child,.s-home a.category-button-mobile span:only-child{padding:10px 6px}