/* =====================================================================

Car Search Tree — standalone widget styles



Paste into the store's Custom CSS (Theme > Custom CSS), or host it and



Every class is prefixed volt-standalone- so nothing here can collide

with the host store's own stylesheet.



Colours: the JS sets --volt-standalone-primary / -accent / -radius from

its CONFIG. The fallbacks below are used when CONFIG leaves them blank,

so the widget picks up the store's own theme variables.

===================================================================== */

.volt-standalone-root {
--volt-standalone-primary: var(--color-primary, #21636d);
--volt-standalone-accent: var(--color-scandary, #ff6b00);
--volt-standalone-radius: var(--border-radius, 12px);

--volt-standalone-text: #1f2937;
--volt-standalone-muted: #6b7280;
--volt-standalone-surface: #ffffff;
--volt-standalone-bg: #ffffff;
--volt-standalone-border: rgba(0, 0, 0, .12);
--volt-standalone-tint: rgba(0, 0, 0, .03);

box-sizing: border-box;
padding: 2.5rem 0;
background: var(--volt-standalone-bg);
border-top: 1px solid var(--volt-standalone-border);
border-bottom: 1px solid var(--volt-standalone-border);
color: var(--volt-standalone-text);

}

.volt-standalone-root *,
.volt-standalone-root *::before,
.volt-standalone-root *::after {
box-sizing: border-box;
}

/* ---------------------------------------------------------------------

Dark palette

The JS stamps a scheme class on the root from CONFIG.color_scheme:

'auto'   -> no class; follows the STORE's dark mode (html.dark etc.)

'dark'   -> .volt-standalone-scheme-dark   (always dark)

'light'  -> .volt-standalone-scheme-light  (always light, wins over all)

'system' -> .volt-standalone-scheme-system (follows the visitor's OS)

------------------------------------------------------------------- */
html.dark .volt-standalone-root,
html[data-theme="dark"] .volt-standalone-root,
.dark .volt-standalone-root,
.volt-standalone-root.volt-standalone-scheme-dark {
--volt-standalone-text: #e5e7eb;
--volt-standalone-muted: #9ca3af;
--volt-standalone-surface: #1f1f1f;
--volt-standalone-bg: #171717;
--volt-standalone-border: rgba(255, 255, 255, .14);
--volt-standalone-tint: rgba(255, 255, 255, .05);
}

@media (prefers-color-scheme: dark) {
.volt-standalone-root.volt-standalone-scheme-system {
--volt-standalone-text: #e5e7eb;
--volt-standalone-muted: #9ca3af;
--volt-standalone-surface: #1f1f1f;
--volt-standalone-bg: #171717;
--volt-standalone-border: rgba(255, 255, 255, .14);
--volt-standalone-tint: rgba(255, 255, 255, .05);
}
}

/* Forced light always wins, even inside a dark store */
.volt-standalone-root.volt-standalone-scheme-light {
--volt-standalone-text: #1f2937;
--volt-standalone-muted: #6b7280;
--volt-standalone-surface: #ffffff;
--volt-standalone-bg: #f6f7f8;
--volt-standalone-border: rgba(0, 0, 0, .12);
--volt-standalone-tint: rgba(0, 0, 0, .03);
}

.volt-standalone-inner {
max-width: 1280px;
margin: 0 auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
}

/* ---------------------------------------------------------------------

Header

------------------------------------------------------------------- */
.volt-standalone-header {
display: flex;
flex-direction: column;
gap: 1rem;
}

@media (min-width: 1024px) {
.volt-standalone-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

.volt-standalone-eyebrow {
margin: 0 0 .75rem;
text-transform: uppercase;
font-size: .75rem;
color: var(--volt-standalone-primary);
letter-spacing: 0;
}
.volt-standalone-title {
margin: 0 0 .5rem;
font-weight: 700;
line-height: 1.2;
color: var(--volt-standalone-text);
letter-spacing: 0 !important;
word-spacing: normal !important;
}

.volt-standalone-underline {
display: block;
width: 60px;
height: 3px;
border-radius: 3px;
margin-bottom: .75rem;
background: linear-gradient(to right, var(--volt-standalone-primary), var(--volt-standalone-accent));
}

.volt-standalone-subtitle {
margin: 0;
color: var(--volt-standalone-muted);
}

.volt-standalone-selection {
display: flex;
flex-direction: column;
gap: .25rem;
padding: .75rem 1rem;
border-radius: var(--volt-standalone-radius);
background: var(--volt-standalone-tint);
font-size: .875rem;
flex-shrink: 0;
}

.volt-standalone-selection-label {
text-transform: uppercase;
letter-spacing: .05em;
color: var(--volt-standalone-primary);
}

.volt-standalone-selection-value {
font-weight: 600;
color: var(--volt-standalone-text);
}

/* ---------------------------------------------------------------------

Empty state

------------------------------------------------------------------- */
.volt-standalone-empty {
border: 1px dashed var(--volt-standalone-border);
border-radius: var(--volt-standalone-radius);
padding: 2.5rem 1.5rem;
text-align: center;
background: var(--volt-standalone-surface);
}

.volt-standalone-empty strong {
display: block;
font-size: 1.25rem;
margin-bottom: .5rem;
color: var(--volt-standalone-text);
}

.volt-standalone-empty p {
margin: 0;
font-size: .875rem;
color: var(--volt-standalone-muted);
}

/* ---------------------------------------------------------------------

Tiles (image mode)

------------------------------------------------------------------- */
.volt-standalone-rows {
display: flex;
flex-direction: column;
gap: .5rem;
}

.volt-standalone-row {
display: flex;
flex-wrap: nowrap;
gap: 1rem;

overflow-x: auto;
overflow-y: hidden;

scroll-behavior: smooth;
scroll-snap-type: x mandatory;

padding: .5rem;

direction: rtl;
}

@media (min-width: 768px) {
.volt-standalone-row {
justify-content: center;
flex-wrap: wrap;
}
}

.volt-standalone-row::-webkit-scrollbar {
height: 6px;
}

.volt-standalone-row::-webkit-scrollbar-thumb {
border-radius: 999px;
background: var(--volt-standalone-border);
}

.volt-standalone-option {
width: 165px;
min-width: 165px;
max-width: 165px;
aspect-ratio: 1 / 1;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 1rem;

padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 18px;
background: #fff;

cursor: pointer;
transition: .25s ease;

text-align: center;

scroll-snap-align: start;
flex-shrink: 0;
}

.volt-standalone-option{
transform: translateY(-5px);
border-color: var(--volt-standalone-primary);
box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Prefixed rather than a bare is-active, which most themes already use */
.volt-standalone-option.volt-standalone-is-active {
border-color: var(--volt-standalone-primary);
box-shadow: 0 0 0 1px var(--volt-standalone-primary);
}

.volt-standalone-option--no-label {
gap: 0;
padding: 1rem;
}

.volt-standalone-thumb {
width: 145px;
height: 145px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.volt-standalone-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transform: scale(1.3);
}

/* تعديل الجوال فقط */
@media (max-width: 640px) {
.volt-standalone-thumb img {
transform: scale(1);
}
}

.volt-standalone-thumb--fallback {
background: var(--volt-standalone-tint);
font-size: 1.5rem;
font-weight: 700;
color: var(--volt-standalone-primary);
}

.volt-standalone-thumb--year {
background: var(--volt-standalone-tint);
font-size: 1.25rem;
font-weight: 700;
color: var(--volt-standalone-primary);
}

.volt-standalone-thumb--year span {
line-height: 1;
}

.volt-standalone-option-label {

font-size:1rem;
font-weight:700;
line-height:1.4;
color:var(--volt-standalone-text);

display:flex;
align-items:center;
justify-content:center;
flex-direction:column;

white-space:normal;
overflow:visible;

text-align:center;

word-break:break-word;

}

/* ---------------------------------------------------------------------

Dropdowns

------------------------------------------------------------------- */
.volt-standalone-selects {
display: grid;
gap: 1rem;
}

@media (min-width: 768px) {
.volt-standalone-selects {
grid-template-columns: repeat(3, 1fr);
}
}

.volt-standalone-select {
display: flex;
flex-direction: column;
gap: .5rem;
}

.volt-standalone-select label {
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--volt-standalone-muted);
}

.volt-standalone-select select {
width: 100%;
padding: .75rem 1rem;
font-size: .875rem;
font-weight: 500;
font-family: inherit;
color: var(--volt-standalone-text);
background: var(--volt-standalone-surface);
border: 1px solid var(--volt-standalone-border);
border-radius: var(--volt-standalone-radius);
appearance: none;
cursor: pointer;
}

.volt-standalone-select select {
outline: none;
box-shadow: 0 0 0 2px var(--volt-standalone-primary);
}

.volt-standalone-select select {
opacity: .6;
cursor: not-allowed;
}

.volt-standalone-select--disabled {
opacity: .5;
}

.volt-standalone-select--disabled select {
pointer-events: none;
}

/* ---------------------------------------------------------------------

Submit button

------------------------------------------------------------------- */
.volt-standalone-submit {
display: flex;
justify-content: center;
}

.volt-standalone-submit-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .75rem 2rem;
font-size: 1rem;
font-weight: 600;
font-family: inherit;
color: #fff;
background: var(--volt-standalone-primary);
border: 0;
border-radius: var(--volt-standalone-radius);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}

.volt-standalone-submit-btn:hover {
background: var(--volt-standalone-accent);
transform: translateY(-1px);
}

.volt-standalone-submit-btn {
opacity: .5;
cursor: not-allowed;
}

/* ---------------------------------------------------------------------

Products

------------------------------------------------------------------- */
.volt-standalone-products {
border-top: 1px solid var(--volt-standalone-border);
padding-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.volt-standalone-products-header h3 {
margin: 0 0 .25rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--volt-standalone-text);
}

.volt-standalone-products-header p {
margin: 0;
font-size: .875rem;
color: var(--volt-standalone-muted);
}

.volt-standalone-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 2rem 1rem;
font-size: .875rem;
color: var(--volt-standalone-muted);
text-align: center;
}

.volt-standalone-spinner {
width: 32px;
height: 32px;
border: 3px solid var(--volt-standalone-border);
border-top-color: var(--volt-standalone-primary);
border-radius: 50%;
animation: volt-standalone-spin .8s linear infinite;
}

@keyframes volt-standalone-spin {
to { transform: rotate(1turn); }
}

.volt-standalone-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 768px) {
.volt-standalone-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}

/* Built-in product card — used only when the store has no salla-product-card */
.volt-standalone-card {
display: flex;
flex-direction: column;
border: 1px solid var(--volt-standalone-border);
border-radius: var(--volt-standalone-radius);
background: var(--volt-standalone-surface);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .2s ease, box-shadow .2s ease;
}

.volt-standalone-card {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

.volt-standalone-card-img {
aspect-ratio: 1 / 1;
background: var(--volt-standalone-tint);
}

.volt-standalone-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.volt-standalone-card-body {
padding: .75rem;
display: flex;
flex-direction: column;
gap: .375rem;
flex: 1;
}

.volt-standalone-card-name {
margin: 0;
font-size: .875rem;
font-weight: 600;
color: var(--volt-standalone-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.volt-standalone-card-price {
font-size: .875rem;
font-weight: 700;
color: var(--volt-standalone-primary);
margin-top: auto;
}

.volt-standalone-card-price del {
font-weight: 400;
opacity: .6;
margin-inline-start: .375rem;
font-size: .8125rem;
color: var(--volt-standalone-muted);
}

/* ---------------------------------------------------------------------

Utility

------------------------------------------------------------------- */
.volt-standalone-hidden {
display: none !important;
}

/* ---------------------------------------------------------------------

Small screens

------------------------------------------------------------------- */
@media (max-width:640px){

.volt-standalone-row{
grid-template-columns: repeat(2, 1fr);
gap:.75rem;
}

.volt-standalone-option{
aspect-ratio:1/1;
padding:1rem;
}

.volt-standalone-thumb{
width:70px;
height:70px;
}

}

.volt-standalone-option-label { font-size: .75rem; }

.volt-standalone-selects { gap: .5rem; }

}

@media (max-width: 400px) {
.volt-standalone-option {
min-width: 3.75rem;
max-width: 5rem;
padding: .5rem .375rem;
}
}
@media (min-width:641px){

.volt-standalone-row{

    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:20px;
    padding-bottom:12px;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

}

.volt-standalone-option{

    flex:0 0 220px;
    scroll-snap-align:start;

}

.volt-standalone-row::-webkit-scrollbar{

    height:8px;

}

.volt-standalone-row::-webkit-scrollbar-thumb{

    background:#01a8b8;
    border-radius:20px;

}

}
.volt-standalone-year-option .volt-standalone-option-label {
color: #01A8B8;
font-weight: 700;
}
.volt-year-title{
display: block;
color:#111111;
font-weight:700;
line-height:1.35;

}
.volt-year-subtitle{
display: block;
margin-top:4px;
font-size:.82rem;
font-weight:600;
color:#01A8B8;
line-height:1.3;
white-space: nowrap;
}
/* ===== Smooth Transition ===== */

.volt-standalone-row{
opacity:1;
transform: translateX(0);
transition:
opacity .28s ease,
transform .28s ease;
}

.volt-standalone-row.leaving{
opacity:0;
transform: translateX(-20px);
}

.volt-standalone-row.entering{
opacity:0;
transform: translateX(20px);
}

/* =====================================================================
   Custom mobile horizontal scrollbar
   ===================================================================== */
@media (max-width: 767px){
    .volt-standalone-mobile-scroll-wrap{
        position: relative;
    }

    .volt-standalone-mobile-scroll-wrap > .volt-standalone-row{
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .volt-standalone-mobile-scroll-wrap > .volt-standalone-row::-webkit-scrollbar{
        display: none;
        width: 0;
        height: 0;
    }

    .volt-standalone-mobile-scrollbar{
        display: none;
        position: relative;
        width: 100%;
        height: 4px;
        margin-top: 8px;
        border-radius: 999px;
        background: rgba(1, 168, 184, .12);
        overflow: hidden;
        direction: ltr;
    }

    .volt-standalone-mobile-scroll-thumb{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        width: 34px;
        border-radius: 999px;
        background: #01a8b8;
        will-change: transform, width;
    }
}