/** * Styles specifically for the Sidebar and Header Shortcodes */ /* SCOPED VARIABLES */ .avt-caqg-container { --avt-accent: #009966; --avt-accent-light: #E6F2EF; --avt-contrast: #222222; --avt-contrast-2: #555555; --avt-base: #F8F9FA; --avt-base-3: #ffffff; --avt-text: #333333; --avt-border: #DEE2E6; --avt-error: #D9534F; --avt-radius: 8px; /* Default height for Sidebar */ --avt-input-height: 40px; } /* Override height variable for Header Mode */ .avt-caqg-mode-header { --avt-input-height: 32px !important; /* Reduced from 40px */ } /* Visibility Utilities */ .avt-visible-desktop { display: block; } .avt-visible-mobile { display: none; } @media (max-width: 768px) { .avt-visible-desktop { display: none; } .avt-visible-mobile { display: block; } } /* Main Container */ .avt-caqg-container { background-color: var(--avt-base-3); padding: 30px 40px; border-radius: var(--avt-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); font-family: inherit; color: var(--avt-text); position: relative; overflow: visible; box-sizing: border-box; line-height: 1.5; } /* Select2 dropdowns are appended to via #avt-caqg-select2-host so they escape every parent stacking context. Tagged with .avt-caqg-select2-dropdown so we can style them globally without polluting other Select2 instances. */ .avt-caqg-select2-dropdown.select2-dropdown { border: 1px solid #009966; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-size: 0.9rem; background-color: #fff; z-index: 2147483647; /* max int — sit above any page chrome */ } .avt-caqg-select2-dropdown .select2-search--dropdown { padding: 8px; } .avt-caqg-select2-dropdown .select2-search--dropdown .select2-search__field { border: 1px solid #DEE2E6; border-radius: 4px; padding: 8px 10px; outline: none; height: auto; } .avt-caqg-select2-dropdown .select2-search--dropdown .select2-search__field:focus { border-color: #009966; box-shadow: 0 0 0 2px #E6F2EF; } .avt-caqg-select2-dropdown .select2-results__options { max-height: 400px !important; overflow-y: auto; } .avt-caqg-select2-dropdown .select2-results__option { padding: 8px 15px; color: #333; } .avt-caqg-select2-dropdown .select2-results__option--highlighted[aria-selected] { background-color: #009966; color: #fff; } .avt-caqg-select2-dropdown .select2-results__option[aria-selected=true] { background-color: #E6F2EF; color: #333; } /* The host wrapper itself must never affect layout */ #avt-caqg-select2-host { position: absolute; top: 0; left: 0; z-index: 2147483647; } /* --- THEME STYLES (Applies to both Header and Sidebar) --- */ /* 1. DARK THEME */ .avt-caqg-container.avt-caqg-theme-dark { background-color: #2c3e50; /* Dark Blue Background */ } .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-title { color: #ffffff !important; /* Forced White text */ opacity: 0.9; } /* Labels in Dark Theme (Sidebar specific) */ .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-input-group label { color: #ffffff; opacity: 0.9; } /* Separator in Dark Theme (Sidebar specific) */ .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-separator { color: rgba(255,255,255,0.8); } .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-separator::before, .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-separator::after { border-bottom-color: rgba(255,255,255,0.2); } /* Filter to make logos white in dark mode */ .avt-caqg-container.avt-caqg-theme-dark .avt-caqg-logo-row .avt-caqg-logo-img { filter: brightness(0) invert(1); opacity: 0.9; } /* --- HEADER MODE SPECIFIC OVERRIDES --- */ /* Base Header Structure */ .avt-caqg-mode-header { border-radius: 0px; padding: 20px 30px; /* Background color is now handled by theme classes above */ } /* 2. LIGHT THEME (Specific to Header mostly) */ .avt-caqg-mode-header.avt-caqg-theme-light { background-color: #b09e8ad4; border-bottom: 1px solid #e1e1e1; /* Optional separation line */ } .avt-caqg-mode-header.avt-caqg-theme-light .avt-caqg-title { color: #333333 !important; /* Dark text */ opacity: 1; } /* Logos show original colors in light mode */ .avt-caqg-mode-header.avt-caqg-theme-light .avt-caqg-logo-row .avt-caqg-logo-img { filter: none; opacity: 1; } /* Shared Header Elements */ .avt-caqg-mode-header .avt-caqg-title { font-weight: 700; margin: -4px 0px 16px 0px !important; white-space: nowrap; } /* Header Row Layout */ .avt-caqg-mode-header .avt-caqg-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; } /* Header Logo Row Overrides - FLUID SIZING */ .avt-caqg-mode-header .avt-caqg-logo-row { gap: 1.5%; flex-wrap: nowrap; margin-top: 15px; justify-content: space-between; } .avt-caqg-mode-header .avt-caqg-logo-row .avt-caqg-logo-img { height: auto; width: 18.5%; max-width: 100%; object-fit: contain; transition: opacity 0.2s; } .avt-caqg-mode-header .avt-caqg-logo-row .avt-caqg-logo-img:hover { opacity: 1; } /* Header Font Size Adjustments (Smaller inputs/buttons) */ .avt-caqg-mode-header .avt-caqg-input-group input, .avt-caqg-mode-header .avt-caqg-input-group select, .avt-caqg-mode-header .select2-selection__rendered, .avt-caqg-mode-header .avt-caqg-next-btn { font-size: 0.85rem !important; } /* --- END HEADER OVERRIDES --- */ /* Grid Layout Helpers */ .avt-caqg-col { flex: 1; min-width: 0; } .avt-caqg-col .avt-caqg-input-group { margin-bottom: 0; } .avt-caqg-col.avt-caqg-btn-col .avt-caqg-next-btn { width: 100%; height: var(--avt-input-height); margin-top: 0; } .avt-caqg-container select.avt-caqg-simple-year-select { color: #757575; } .avt-caqg-container * { box-sizing: border-box; } .avt-caqg-container .avt-caqg-title { font-size: min(5.6vw, 21px); font-weight: 700; margin: 0px 0px 20px 0px; color: var(--avt-contrast); text-align: center; line-height: 1.2; } /* Default Logo Row Styles (Sidebar) */ .avt-caqg-logo-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .avt-caqg-logo-row .avt-caqg-logo-img { height: 20px; width: auto; object-fit: contain; opacity: 0.8; transition: opacity 0.2s; } .avt-caqg-logo-row .avt-caqg-logo-img:hover { opacity: 1; } /* Inputs & Groups */ .avt-caqg-input-group { margin-bottom: 10px; position: relative; } .avt-caqg-input-group label { font-weight: 600; margin-bottom: 8px; font-size: 1rem; display: block; color: var(--avt-contrast); } /* SHARED STYLES for Inputs and Selects */ .avt-caqg-input-group input[type="text"], .avt-caqg-input-group select { width: 100%; height: var(--avt-input-height); padding: 0 15px; border: 1px solid var(--avt-border); border-radius: var(--avt-radius); font-size: 0.9rem; font-weight: 500; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: #fff; color: #444; margin: 0; line-height: calc(var(--avt-input-height) - 2px); padding-top: 0; padding-bottom: 0; } /* Native Arrow Replacement (SELECT ONLY) */ .avt-caqg-input-group select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0 L4 5 L8 0 Z' fill='%23333'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 8px 5px; } .avt-caqg-input-group input:focus, .avt-caqg-input-group select:focus { outline: none; border-color: var(--avt-accent); box-shadow: 0 0 0 3px var(--avt-accent-light); } .avt-caqg-input-group input:disabled, .avt-caqg-input-group select:disabled { background-color: #f3f3f3; cursor: not-allowed; opacity: 1; color: #999; } /* Separator */ .avt-caqg-separator { display: flex; align-items: center; text-align: center; color: var(--avt-contrast-2); font-size: 0.8rem; font-weight: 700; margin: 15px 0; } .avt-caqg-separator::before, .avt-caqg-separator::after { content: ''; flex: 1; border-bottom: 1px solid var(--avt-border); } .avt-caqg-separator span { padding: 0 10px; } /* VIN Specifics */ .avt-caqg-vin-input { text-transform: uppercase; letter-spacing: 0.075em; font-weight: 500; padding-right: 55px !important; } .avt-caqg-input-with-icon { position: relative; } .avt-caqg-char-counter { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 0.8rem; color: var(--avt-contrast-2); pointer-events: none; font-weight: normal; } /* Errors & Validation */ .avt-caqg-vin-meta { padding: 0 16px; } .avt-caqg-invalid-char-notice, .avt-caqg-error-text { color: var(--avt-error); font-size: 0.8rem; font-weight: 500; display: block; margin-top: 5px; } .avt-caqg-input-error { border-color: var(--avt-error) !important; } /* Buttons */ .avt-caqg-btn-group { margin-top: 20px; display: flex; } .avt-caqg-next-btn { background-color: var(--avt-accent); color: white; padding: 12px 24px; border: none; border-radius: var(--avt-radius); cursor: pointer; font-size: 1rem; font-weight: 700; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; line-height: 1.2; } .avt-caqg-next-btn::after { content: " \FFEB"; /* Halfwidth Rightwards Arrow */ font-weight: 900; display: inline-block; } .mobile-bar-button::after { content: " \FFEB"; /* Halfwidth Rightwards Arrow */ font-weight: 900; display: inline-block; margin-left: 5px; } .avt-caqg-next-btn.is-loading::after { content: none; display: none; } .avt-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 8px; vertical-align: middle; } .avt-caqg-next-btn:hover { background-color: #005C46; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .avt-caqg-next-btn:disabled { cursor: not-allowed; transform: none; box-shadow: none; } /* Loader */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .avt-caqg-input-loader { position: absolute; right: 45px; top: 50%; margin-top: -10px; border: 3px solid #f3f3f3; border-top: 3px solid var(--avt-accent); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: none; } /* Mobile Responsive Adjustments */ @media (max-width: 768px) { .avt-caqg-container { padding: 20px; } } /* --- SELECT2 CUSTOMIZATION TO MATCH ORIGINAL STYLING --- */ .avt-caqg-container .select2-container { display: block; width: 100% !important; text-align: left; height: var(--avt-input-height); box-sizing: border-box; } .avt-caqg-container .select2-container .select2-selection--single { height: var(--avt-input-height); border: 1px solid var(--avt-border); border-radius: var(--avt-radius); background-color: #fff; display: flex; align-items: center; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease; position: relative; } .avt-caqg-container .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 15px; padding-right: 30px; color: #444; font-size: 0.9rem; font-weight: 500; line-height: calc(var(--avt-input-height) - 2px); width: 100%; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avt-caqg-container .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; position: absolute !important; top: 0 !important; right: 10px !important; width: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .avt-caqg-container .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #333 transparent transparent transparent !important; border-style: solid !important; border-width: 5px 4px 0 4px !important; height: 0 !important; width: 0 !important; margin-left: 0 !important; margin-top: 0 !important; position: relative !important; left: auto !important; top: auto !important; display: inline-block !important; } .avt-caqg-container .select2-container--default.select2-container--open .select2-selection--single, .avt-caqg-container .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--avt-accent); box-shadow: 0 0 0 3px var(--avt-accent-light); outline: none; } .avt-caqg-container .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #757575; } .avt-caqg-container .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #f3f3f3; cursor: not-allowed; color: #999; border-color: var(--avt-border); } .avt-caqg-container .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered, .avt-caqg-container .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__placeholder { color: #999 !important; } .avt-caqg-container .select2-dropdown { border: 1px solid var(--avt-accent); border-radius: var(--avt-radius); box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-size: 0.9rem; z-index: 9999999; background-color: #fff; } .avt-caqg-container .select2-search--dropdown { padding: 8px; } .avt-caqg-container .select2-search--dropdown .select2-search__field { border: 1px solid var(--avt-border); border-radius: 4px; padding: 8px 10px; outline: none; height: auto; } .avt-caqg-container .select2-search--dropdown .select2-search__field:focus { border-color: var(--avt-accent); box-shadow: 0 0 0 2px var(--avt-accent-light); } .avt-caqg-container .select2-results__options { max-height: 400px !important; overflow-y: auto; } .avt-caqg-container .select2-results__option { padding: 8px 15px; color: var(--avt-text); } .avt-caqg-container .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--avt-accent); color: white; } .avt-caqg-container .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--avt-accent-light); color: var(--avt-text); } /* --- MOBILE BOTTOM BAR STYLES --- */ /* Initially hidden on all devices */ .mobile-bottom-bar { display: none; } @media (max-width: 768px) { /* Only show if display: flex is toggled via JS */ .mobile-bottom-bar { /* position: sticky; CHANGED TO FIXED for viewport docking */ position: fixed; bottom: 0; left: 0; /* Updated for Smoothness: Always display flex, hide via transform */ display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #2c3e50; color: var(--avt-base-3); /* Mapped to existing white variable */ padding: 15px 20px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); z-index: 99999; box-sizing: border-box; gap: 15px; /* Animation Properties */ transform: translateY(101%); /* Push off-screen to bottom */ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* Smooth slide effect */ will-change: transform; } /* Active Class for JS to toggle */ .mobile-bottom-bar.avt-bar-visible { transform: translateY(0); /* Slide into view */ } .mobile-bar-text { font-size: min(4.2vw, 16px); font-weight: 500; margin: 0; padding: 0; } .mobile-bar-button { background-color: var(--avt-accent); /* Mapped to existing accent variable */ color: var(--avt-base-3) !important; text-decoration: none; padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 16px; transition: background-color 0.3s ease; white-space: nowrap; } .mobile-bar-button:hover { background-color: #005C46; /* Darker accent hover */ } } /* --- SMALL SCREEN FIX FOR DARK THEME HEADER --- */ @media (max-width: 305px) { .avt-caqg-mode-header.avt-caqg-theme-dark .select2-container--default .select2-selection--single .select2-selection__placeholder { font-size: 11px !important; } }