/* --- Global Widget & Typography --- */
:root {
    --vh-primary-color: #002366; /* Darker Hyundai Blue from screenshot */
    --vh-secondary-color: #007bff; /* Lighter Accent Blue */
    --vh-text-color: #2d2d2d;
    --vh-text-light: #5f5f5f;
    --vh-text-lighter: #888; /* For counts etc. */
    --vh-border-color: #e4e4e4;
    --vh-background-light: #f7f8f9; /* Light grey for variant dropdown */
    --vh-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.volantris-hyundai-widget-container {
    font-family: var(--vh-font-family);
    max-width: 1100px; 
    margin: 0 auto;
    padding: 0 15px; 
    color: var(--vh-text-color);
    line-height: 1.5;
}

/* --- Top Bar: Category Nav + Help Button --- */
.vh-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 1px solid var(--vh-border-color);
}
.vh-category-navigation { flex-grow: 1; }
.vh-help-choose-button {
    padding: 9px 22px; border: 1.5px solid var(--vh-primary-color); color: var(--vh-primary-color);
    text-decoration: none; border-radius: 25px; font-weight: 500; font-size: 0.85em;
    white-space: nowrap; transition: background-color 0.2s, color 0.2s; margin-left: 20px;
}
.vh-help-choose-button:hover { background-color: var(--vh-primary-color); color: #fff; }

/* Desktop Category Tabs */
.vh-category-tabs-desktop { display: none; } 
.vh-category-tabs-desktop .vh-tab {
    display: inline-block; padding: 8px 15px; margin: 0 5px; text-decoration: none;
    color: var(--vh-text-light); font-weight: 500; font-size: 0.9em; border-radius: 4px;
    transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; 
}
.vh-category-tabs-desktop .vh-tab .vh-count { font-size: 0.9em; color: inherit; margin-left: 3px; }
.vh-category-tabs-desktop .vh-tab.active {
    background-color: var(--vh-primary-color);
    color: #fff;
    border-color: var(--vh-primary-color);
}
.vh-category-tabs-desktop .vh-tab.active .vh-count { color: #fff; opacity: 0.8; }
.vh-category-tabs-desktop .vh-tab:not(.active):hover { color: var(--vh-primary-color); }
.vh-category-tabs-desktop .vh-tab:first-child { margin-left: 0; }

/* Mobile Category Dropdown */
.vh-category-dropdown-mobile { display: block; position: relative; text-align: left; }
.vh-category-dropdown-toggle {
    background: none; border: none; font-size: 1.1em; font-weight: bold; color: var(--vh-primary-color);
    cursor: pointer; padding: 10px 0; display: inline-flex; align-items: center;
}
.vh-category-dropdown-toggle .vh-current-category-name { margin-right: 3px;}
.vh-category-dropdown-toggle .vh-count { font-weight: normal; font-size: 0.9em; color: var(--vh-text-light); }
.vh-category-dropdown-toggle .vh-arrow-down { margin-left: 8px; font-size: 0.8em; transition: transform 0.2s; }
.vh-category-dropdown-toggle.open .vh-arrow-down { transform: rotate(180deg); }
.vh-category-dropdown-list {
    position: absolute; top: calc(100% + 3px); left: 0; background: white;
    border: 1px solid var(--vh-border-color); border-radius: 5px; padding: 5px 0; z-index: 1010;
    min-width: 220px; text-align: left; box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.vh-category-dropdown-list a { display: block; padding: 9px 14px; text-decoration: none; color: var(--vh-text-color); font-size: 0.9em; }
.vh-category-dropdown-list a .vh-count { font-size: 0.9em; color: var(--vh-text-lighter); margin-left: 3px; }
.vh-category-dropdown-list a:hover, .vh-category-dropdown-list a.active { background-color: var(--vh-background-light); color: var(--vh-primary-color); }


/* --- Main Carousel Structure & Navigation --- */
.volantris-hyundai-carousel-main-container { position: relative; margin: 0; padding: 0; }
.vh-carousel-arrow {
    position: absolute; top: 40%; transform: translateY(-50%);
    background: rgba(240, 240, 240, 0.8);
    border: none; color: var(--vh-primary-color); font-size: 1.2em;
    width: 40px; height: 40px; line-height: 40px; text-align: center;
    border-radius: 50%; cursor: pointer; z-index: 20;
    transition: background-color 0.2s, opacity 0.2s;
}
.vh-carousel-arrow:hover { background: rgba(220, 220, 220, 0.9); }
.vh-carousel-arrow.vh-disabled { opacity: 0.3; cursor: default; background: rgba(240, 240, 240, 0.5); }
.vh-carousel-prev { left: 10px; }
.vh-carousel-next { right: 10px; }

.vh-carousel-viewport { 
    overflow: hidden; /* This is key for standard carousel */
    position: relative; 
    width: 100%; 
    margin: 0 auto; 
}
.vh-carousel-track { 
    display: flex; 
    position: relative; 
    /* transition for transform will be set by JS if needed, or CSS if preferred */
    /* transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); */
}
.vh-carousel-track.vh-no-transition {
    transition: none !important;
}
.vh-carousel-slide {
    flex-shrink: 0; 
    width: 100%; /* Each slide takes full width of viewport */
    box-sizing: border-box;
    padding: 0; /* Padding is now on vh-slide-inner */
    opacity: 0; /* Start all slides as hidden/transparent */
    transform: scale(1); /* No scaling by default */
    transition: opacity 0.4s ease-out; /* Fade in/out active slide */
    display: flex; /* Keep for vh-slide-inner */
    flex-direction: column; /* Keep for vh-slide-inner */
    align-items: center; /* Keep for vh-slide-inner */
    position: absolute; /* All slides stack, JS controls visibility */
    top: 0;
    left: 0;
    pointer-events: none; /* Non-active slides not interactive */
}

.vh-carousel-slide.is-active { 
    opacity: 1; 
    position: relative; /* Bring active slide into normal flow for height calculation */
    pointer-events: auto; 
    /* transform: scale(1); */ /* Ensure active is full scale if others were scaled down */
}


/* Slide Inner Content Wrapper */
.vh-slide-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 10px 15px;
}


/* Slide Content */
.vh-slide-image-wrapper { width: 100%; margin-bottom: 25px; text-align: center; padding-top: 10px; }
.vh-model-image { max-width: 100%; height: auto; max-height: 300px; object-fit: contain; display: block; margin:0 auto; }

.vh-slide-details-wrapper { width: 100%; text-align: left; }
.vh-model-primary-info { margin-bottom: 20px; }
.vh-model-year { display: block; font-size: 0.8em; color: #888; margin-bottom: 3px; }
.vh-model-title { margin: 0; font-size: 2em; font-weight: 700; color: var(--vh-primary-color); line-height: 1.15; }
.vh-model-title a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.vh-model-title .vh-title-arrow { font-size: 0.8em; margin-left: 10px; color: var(--vh-secondary-color); }
.vh-model-subtitle { font-size: 0.95em; color: var(--vh-text-light); margin-top: 5px; }

.vh-model-key-specs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 20px; margin-bottom: 25px;
}
.vh-model-key-specs div { text-align: left; }
.vh-model-key-specs small { display: block; font-size: 0.75em; color: #999; margin-bottom: 2px; text-transform: uppercase; }
.vh-model-key-specs span { font-size: 1.05em; font-weight: 500; color: var(--vh-text-color); display: flex; align-items: flex-start;}
.vh-spec-info-icon { font-size: 0.8em; color: #ccc; margin-left: 5px; line-height: inherit; }

/* Inline Variant Selector */
.vh-variant-section-inline { margin: 20px 0; position: relative; max-width: 400px; }
.vh-variant-toggle-inline {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: 12px 15px; background-color: var(--vh-background-light); border: 1px solid var(--vh-border-color);
    border-radius: 5px; text-align: left; font-size: 0.9em; cursor: pointer; color: var(--vh-text-light);
}
.vh-variant-toggle-inline .vh-variant-label-text { margin-right: 5px; font-weight: normal; }
.vh-variant-toggle-inline .vh-variant-selected-name-inline { font-weight: 600; color: var(--vh-text-color); flex-grow: 1; }
.vh-variant-toggle-inline .vh-arrow-toggle-inline { font-size: 0.9em; transition: transform 0.2s; }
.vh-variant-toggle-inline.open .vh-arrow-toggle-inline { transform: rotate(180deg); }

.vh-variant-list-inline {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    border: 1px solid var(--vh-border-color); border-top: none; border-radius: 0 0 5px 5px;
    z-index: 50; box-shadow: 0 3px 8px rgba(0,0,0,0.1); max-height: 200px; overflow-y: auto;
}
.vh-variant-item-inline {
    padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
    font-size: 0.9em; color: var(--vh-text-color);
}
.vh-variant-item-inline:last-child { border-bottom: none; }
.vh-variant-item-inline:hover, .vh-variant-item-inline.selected { background-color: #e9ecef; }


/* --- Bottom Controls: Actions, Indicator, Dots --- */
.vh-carousel-bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5px 10px;
    margin-top: 10px;
    border-top: 1px solid var(--vh-border-color);
}
.vh-bottom-actions { display: flex; gap: 10px; }
.vh-action-pill {
    padding: 8px 18px; border-radius: 20px; font-size: 0.85em; font-weight: 500;
    text-decoration: none; display: inline-flex; align-items: center;
    border: 1px solid #ccc; transition: all 0.2s; background-color: #fff; color: var(--vh-text-color);
}
.vh-action-pill:hover { border-color: var(--vh-secondary-color); background-color: var(--vh-secondary-color); color: #fff; }
.vh-action-pill:hover i { color: #fff !important; }
.vh-action-pill i { margin-right: 7px; font-size: 1em; }
.vh-brochure-button i { color: #d9534f; }
.vh-whatsapp-button i { color: #25D366; }

.vh-bottom-nav { display: flex; align-items: center; }
.vh-slide-indicator { font-size: 0.9em; color: var(--vh-text-light); margin-right: 15px; font-weight: 500; }
.vh-carousel-dots { text-align: center; display: none; }
.vh-dot {
    display: inline-block; width: 20px; height: 5px; 
    background-color: #d0d0d0;
    border-radius: 3px; 
    margin: 0 3px; cursor: pointer; transition: all 0.2s;
    border: none;
}
.vh-dot.active { background-color: var(--vh-primary-color); }

/* AJAX Loading/Error */
.vh-carousel-ajax-target { position: relative; min-height: 400px; }
.vh-loading-spinner {
    display: flex; flex-direction:column; align-items: center; justify-content: center;
    position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(255,255,255,0.85);
    font-size: 1em; color: var(--vh-text-light); z-index: 30;
}
.vh-loading-spinner i { font-size: 1.8em; margin-bottom: 8px; color: var(--vh-primary-color); }
.vh-ajax-error, .vh-no-models-found { text-align: center; padding: 40px 15px; color: var(--vh-text-light); font-size: 1em; }

/* Desktop Media Queries */
@media (min-width: 768px) {
    .volantris-hyundai-widget-container { padding: 0 20px; }
    .vh-top-bar { padding: 15px 0; }
    .vh-category-tabs-desktop { display: block; }
    .vh-category-dropdown-mobile { display: none; }

    .volantris-hyundai-carousel-main-container { padding: 0 50px; } /* Space for arrows */
    .vh-carousel-arrow { font-size: 1.4em; width: 45px; height: 45px; line-height: 45px; }
    .vh-carousel-prev { left: 0px; } /* Arrows outside viewport */
    .vh-carousel-next { right: 0px; }

    .vh-slide-inner { flex-direction: row; align-items: center; padding: 20px 0; }
    .vh-slide-image-wrapper { flex: 0 0 50%; max-width: 50%; padding-right: 30px; margin-bottom: 0; text-align: left; }
    .vh-model-image { max-height: 380px; }
    .vh-slide-details-wrapper { flex: 1 1 50%; text-align: left; padding: 0; padding-left: 20px; }
    .vh-model-title { font-size: 2.4em; }
    .vh-model-subtitle { font-size: 1em; }
    .vh-model-key-specs { grid-template-columns: repeat(2, 1fr); max-width: none; margin-left: 0; }
    .vh-variant-section-inline { margin: 25px 0; max-width: 350px; }
    .vh-carousel-dots { display: block;}
}

@media (min-width: 1024px) {
    .vh-model-image { max-height: 420px; }
    .vh-slide-image-wrapper { flex-basis: 55%; max-width: 55%; padding-right: 40px; }
    .vh-slide-details-wrapper { flex-basis: 45%; max-width: 45%; padding-left: 30px; }
    .vh-model-key-specs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .vh-carousel-dots { display: none;}
}