/*

Theme Name: BMW Inchcape;
Text Domain: bmw
Version: 1.0

*/

/* BMW Accessibility Controls Dropdown */
.bmw-accessibility-panel {
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 9999;
}

.bmw-accessibility-toggle {
    color: white;
    font-size: 11px !important;
    cursor: pointer;
    font-family: inherit;
    text-transform: capitalize;
    transition: all 0.2s ease;
    white-space: nowrap;
    padding: 2px 4px;
    border-radius: 2px;
    background: transparent;
    border: none;
    text-decoration: underline;
    opacity: 0.9;
}

.bmw-accessibility-toggle:hover {
    opacity: 1;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.1);
}

.bmw-accessibility-toggle:focus {
    outline: 1px dotted white;
    outline-offset: 2px;
    opacity: 1;
}

.bmw-accessibility-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: none;
    border-radius: 8px;
    padding: 20px;
    min-width: 250px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bmw-accessibility-dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.bmw-font-controls {
    display: flex;
    gap: 5px;
}

.bmw-contrast-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bmw-contrast-btn {
    padding: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 4px;
    border: none !important;
}

/* Regular mode button - BMW blue background with white eye */
#contrast-regular {
    background: #007cba !important;
}
#contrast-regular .bmw-contrast-preview {
    fill: white;
}

/* Black on White mode button - white background with black eye */
#contrast-black-white {
    background: #fff !important;
    border: 1px solid #ccc !important;
}
#contrast-black-white .bmw-contrast-preview {
    fill: #000;
}

/* Black on Yellow mode button - yellow background with black eye */
#contrast-black-yellow {
    background: #ffff00 !important;
}
#contrast-black-yellow .bmw-contrast-preview {
    fill: #000;
}

/* Yellow on Black mode button - black background with yellow eye */
#contrast-yellow-black {
    background: #000 !important;
    border: 1px solid #333 !important;
}
#contrast-yellow-black .bmw-contrast-preview {
    fill: #ffff00;
}

.bmw-contrast-btn.active {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-width: 2px !important;
}

/* SVG Eye icon styling */
.bmw-contrast-preview {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Force button colors to override contrast modes - maximum specificity */
.bmw-contrast-black-white body #contrast-regular,
.bmw-contrast-black-yellow body #contrast-regular,
.bmw-contrast-yellow-black body #contrast-regular,
body.bmw-contrast-black-white #contrast-regular,
body.bmw-contrast-black-yellow #contrast-regular,
body.bmw-contrast-yellow-black #contrast-regular,
#contrast-regular {
    background: #007cba !important;
}

.bmw-contrast-black-white body #contrast-black-white,
.bmw-contrast-black-yellow body #contrast-black-white,
.bmw-contrast-yellow-black body #contrast-black-white,
body.bmw-contrast-black-white #contrast-black-white,
body.bmw-contrast-black-yellow #contrast-black-white,
body.bmw-contrast-yellow-black #contrast-black-white,
#contrast-black-white {
    background: #fff !important;
    border: 1px solid #ccc !important;
}

.bmw-contrast-black-white body #contrast-black-yellow,
.bmw-contrast-black-yellow body #contrast-black-yellow,
.bmw-contrast-yellow-black body #contrast-black-yellow,
body.bmw-contrast-black-white #contrast-black-yellow,
body.bmw-contrast-black-yellow #contrast-black-yellow,
body.bmw-contrast-yellow-black #contrast-black-yellow,
#contrast-black-yellow {
    background: #ffff00 !important;
}

.bmw-contrast-black-white body #contrast-yellow-black,
.bmw-contrast-black-yellow body #contrast-yellow-black,
.bmw-contrast-yellow-black body #contrast-yellow-black,
body.bmw-contrast-black-white #contrast-yellow-black,
body.bmw-contrast-black-yellow #contrast-yellow-black,
body.bmw-contrast-yellow-black #contrast-yellow-black,
#contrast-yellow-black {
    background: #000 !important;
    border: 1px solid #333 !important;
}

/* Force SVG fill colors */
.bmw-contrast-black-white .bmw-contrast-preview,
.bmw-contrast-black-yellow .bmw-contrast-preview,
.bmw-contrast-yellow-black .bmw-contrast-preview {
    /* Reset to original colors */
}

#contrast-regular .bmw-contrast-preview { fill: white !important; background: #007cba !important;  }
#contrast-black-white .bmw-contrast-preview { fill: #000 !important; background: #ffffff !important; }
#contrast-black-yellow .bmw-contrast-preview { fill: #000 !important; background: #ffff00 !important; }
#contrast-yellow-black .bmw-contrast-preview { fill: #ffff00 !important; background: #000000 !important; }

.bmw-accessibility-group {
    margin-bottom: 15px;
}

.bmw-accessibility-group:last-child {
    margin-bottom: 0;
}

.bmw-accessibility-group label {
    display: block;
    font-size: 13px !important;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bmw-accessibility-btn {
    background: #007cba;
    border: none;
    padding: 8px 14px;
    margin-right: 8px;
    cursor: pointer;
    border-radius: 0;
    font-size: 13px !important;
    transition: all 0.25s ease;
    font-weight: 500;
    color: white;
}

.bmw-accessibility-btn:hover {
    background: #005a8a;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.3);
}

.bmw-accessibility-btn:active {
    transform: translateY(0);
}

.bmw-accessibility-btn:last-child {
    margin-right: 0;
}

.bmw-full-width {
    width: 100%;
    margin-right: 0 !important;
}

#accessibility-reset.bmw-full-width {
    width: 100% !important;
    max-width: none;
}

/* BMW CSS Variable System for Scalable Fonts */

:root {
    --bmw-font-scale: 1; /* Default scale factor */
    
    /* Complete font size variables based on bmw-1.css analysis */
    --bmw-font-7: calc(7px * var(--bmw-font-scale));
    --bmw-font-9: calc(9px * var(--bmw-font-scale));
    --bmw-font-10: calc(10px * var(--bmw-font-scale));
    --bmw-font-11: calc(11px * var(--bmw-font-scale));
    --bmw-font-12: calc(12px * var(--bmw-font-scale));
    --bmw-font-14: calc(14px * var(--bmw-font-scale));
    --bmw-font-15: calc(15px * var(--bmw-font-scale));
    --bmw-font-16: calc(16px * var(--bmw-font-scale));
    --bmw-font-17: calc(17px * var(--bmw-font-scale));
    --bmw-font-18: calc(18px * var(--bmw-font-scale));
    --bmw-font-20: calc(20px * var(--bmw-font-scale));
    --bmw-font-23: calc(23px * var(--bmw-font-scale));
    --bmw-font-24: calc(24px * var(--bmw-font-scale));
    --bmw-font-25: calc(25px * var(--bmw-font-scale));
    --bmw-font-29: calc(29px * var(--bmw-font-scale));
    --bmw-font-30: calc(30px * var(--bmw-font-scale));
    --bmw-font-32: calc(32px * var(--bmw-font-scale));
    --bmw-font-35: calc(35px * var(--bmw-font-scale));
    --bmw-font-38: calc(38px * var(--bmw-font-scale));
    --bmw-font-40: calc(40px * var(--bmw-font-scale));
    --bmw-font-41: calc(41px * var(--bmw-font-scale));
    --bmw-font-42: calc(42px * var(--bmw-font-scale));
    --bmw-font-44: calc(44px * var(--bmw-font-scale));
    --bmw-font-45: calc(45px * var(--bmw-font-scale));
    --bmw-font-47: calc(47px * var(--bmw-font-scale));
    --bmw-font-48: calc(48px * var(--bmw-font-scale));
    --bmw-font-50: calc(50px * var(--bmw-font-scale));
    --bmw-font-57: calc(57px * var(--bmw-font-scale));
    --bmw-font-60: calc(60px * var(--bmw-font-scale));
    --bmw-font-61: calc(61px * var(--bmw-font-scale));
    --bmw-font-70: calc(70px * var(--bmw-font-scale));
    --bmw-font-76: calc(76px * var(--bmw-font-scale));
    --bmw-font-80: calc(80px * var(--bmw-font-scale));
    --bmw-font-90: calc(90px * var(--bmw-font-scale));
    --bmw-font-96: calc(96px * var(--bmw-font-scale));
    --bmw-font-97: calc(97px * var(--bmw-font-scale));
    --bmw-font-100: calc(100px * var(--bmw-font-scale));
    --bmw-font-105: calc(105px * var(--bmw-font-scale));
    --bmw-font-150: calc(150px * var(--bmw-font-scale));
    --bmw-font-220: calc(220px * var(--bmw-font-scale));
    --bmw-font-300: calc(300px * var(--bmw-font-scale));
    --bmw-font-378: calc(378px * var(--bmw-font-scale));
    --bmw-font-400: calc(400px * var(--bmw-font-scale));
}

/* BMW-2.css overrides */
.large-6 .ds2-basic-teaser--title.ds2-long-headline { font-size: var(--bmw-font-15) !important; }
@media only screen and (min-width:521px) and (max-width:980px) {
    .large-6 .ds2-basic-teaser--title.ds2-long-headline { font-size: var(--bmw-font-20) !important; }
}
@media only screen and (min-width:981px) {
    .large-6 .ds2-basic-teaser--title.ds2-long-headline { font-size: var(--bmw-font-25) !important; }
}
.large-3 .ds2-basic-teaser--title.ds2-long-headline { font-size: var(--bmw-font-15) !important; }
@media only screen and (min-width:521px) {
    .large-3 .ds2-basic-teaser--title.ds2-long-headline { font-size: var(--bmw-font-20) !important; }
}

/* BMW-3.css overrides */
.ds2-model-navigation .discover { font-size: var(--bmw-font-35) !important; }
.ds2-model-navigation .model-nav-holder .model-nav ul li button { font-size: var(--bmw-font-15) !important; }
.ds2-model-navigation .ds2-model-car .ds2-model-card .ds2-model-card--title { font-size: var(--bmw-font-20) !important; }
.ds2-model-navigation .ds2-model-car .ds2-model-card .ds2-model-card--price { font-size: var(--bmw-font-15) !important; }
.ds2-model-navigation .all-content .all-content--text { font-size: var(--bmw-font-45) !important; }
@media only screen and (min-width:521px) {
    .ds2-model-navigation .all-content .all-content--text { font-size: var(--bmw-font-60) !important; }
}
@media only screen and (min-width:981px) {
    .ds2-model-navigation .all-content .all-content--text { font-size: var(--bmw-font-96) !important; }
}
.ds2-model-navigation .all-content .all-models-button { font-size: var(--bmw-font-14) !important; }

/* BMW-5.css overrides */
.ds2-model-card .ds2-model-card--fuel-type { font-size: var(--bmw-font-12) !important; }
.ds2-model-card .ds2-model-card--new-model-label { font-size: var(--bmw-font-12) !important; }
.ds2-model-card .ds2-model-card--fuel-type--dot { font-size: var(--bmw-font-10) !important; }

/* BMW-6.css overrides */
.ds2-stage-teaser .ds2-slider--video-container button { font-size: var(--bmw-font-40) !important; }
.ds2-stage-teaser .ds2-slider .ds2-slider--stage .slick-next,
.ds2-stage-teaser .ds2-slider .ds2-slider--stage .slick-prev { font-size: var(--bmw-font-40) !important; }

/* BMW-9.css overrides */
.ds2-action-bar-content .ds2-action-bar-header { font-size: var(--bmw-font-25) !important; }
.ds2-action-bar-content .ds2-action-bar-links { font-size: var(--bmw-font-15) !important; }
.ds2-action-bar-content .ds2-action-bar-links .ds2-action-bar-icon { font-size: var(--bmw-font-61) !important; }

/* BMW-10.css overrides */
.ds2-typo--title-container h4 { font-size: var(--bmw-font-50) !important; }

/* Font size adjustment classes - comprehensive targeting */


/* Accessibility Contrast Modes */

/* Mode 1: Regular (default - no changes needed) */

/* Mode 2: Black on White */
.bmw-contrast-black-white {
    background: #fff !important;
    color: #000 !important;
}

.bmw-contrast-black-white * {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}

.bmw-contrast-black-white a,
.bmw-contrast-black-white button {
    color: #000 !important;
    text-decoration: underline !important;
    background: #fff !important;
}

/* Mode 3: Black on Yellow */
.bmw-contrast-black-yellow {
    background: #ffff00 !important;
    color: #000 !important;
}

.bmw-contrast-black-yellow * {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #000 !important;
}

.bmw-contrast-black-yellow a,
.bmw-contrast-black-yellow button {
    color: #000 !important;
    text-decoration: underline !important;
    background: #ffff00 !important;
}

/* Mode 4: Yellow on Black */
.bmw-contrast-yellow-black {
    background: #000 !important;
    color: #ffff00 !important;
}

.bmw-contrast-yellow-black * {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

.bmw-contrast-yellow-black a,
.bmw-contrast-yellow-black button {
    color: #ffff00 !important;
    text-decoration: underline !important;
    background: #000 !important;
}

/* Special handling for banner images in all contrast modes */
.bmw-contrast-black-white .ds2-slider--img-outer img,
.bmw-contrast-black-yellow .ds2-slider--img-outer img,
.bmw-contrast-yellow-black .ds2-slider--img-outer img {
    filter: brightness(0) !important;
}

.bmw-contrast-black-white .ds2-stage-teaser-item,
.bmw-contrast-black-white .partial-img-txt,
.bmw-contrast-black-white .ds2-slider--img-outer,
.bmw-contrast-black-yellow .ds2-stage-teaser-item,
.bmw-contrast-black-yellow .partial-img-txt,
.bmw-contrast-black-yellow .ds2-slider--img-outer,
.bmw-contrast-yellow-black .ds2-stage-teaser-item,
.bmw-contrast-yellow-black .partial-img-txt,
.bmw-contrast-yellow-black .ds2-slider--img-outer {
    background-image: none !important;
}

/* BMW Logo handling for contrast modes */

/* Regular mode - hide grey logo, show white logo */
.ds2_grey_logo {
    display: none;
}
.ds2_white_logo {
    display: block;
}

/* Black on White mode - hide white logo, show grey logo */
.bmw-contrast-black-white .ds2_white_logo {
    display: none !important;
}
.bmw-contrast-black-white .ds2_grey_logo {
    display: block !important;
}

/* Black on Yellow mode - hide white logo, show grey logo */
.bmw-contrast-black-yellow .ds2_white_logo {
    display: none !important;
}
.bmw-contrast-black-yellow .ds2_grey_logo {
    display: block !important;
}

/* Yellow on Black mode - keep white logo, hide grey logo */
.bmw-contrast-yellow-black .ds2_white_logo {
    display: block !important;
}
.bmw-contrast-yellow-black .ds2_grey_logo {
    display: none !important;
}

/* Accessibility controls styling for each mode */
.bmw-contrast-black-white .bmw-accessibility-controls {
    background: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}

.bmw-contrast-black-white .bmw-accessibility-btn {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.bmw-contrast-black-white .bmw-accessibility-btn:hover {
    background: #333 !important;
    color: #fff !important;
}

.bmw-contrast-black-yellow .bmw-accessibility-controls {
    background: #ffff00 !important;
    border-color: #000 !important;
    color: #000 !important;
}

.bmw-contrast-black-yellow .bmw-accessibility-btn {
    background: #000 !important;
    color: #ffff00 !important;
    border-color: #000 !important;
}

.bmw-contrast-black-yellow .bmw-accessibility-btn:hover {
    background: #333 !important;
    color: #ffff00 !important;
}

.bmw-contrast-yellow-black .bmw-accessibility-controls {
    background: #000 !important;
    border-color: #ffff00 !important;
    color: #ffff00 !important;
}

.bmw-contrast-yellow-black .bmw-accessibility-btn {
    background: #ffff00 !important;
    color: #000 !important;
    border-color: #ffff00 !important;
}

.bmw-contrast-yellow-black .bmw-accessibility-btn:hover {
    background: #cccc00 !important;
    color: #000 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bmw-accessibility-panel {
        float: none;
        display: block;
        margin: 10px 20px;
    }
    
    .bmw-accessibility-controls {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: 5px;
    }
}