/* Light-mode fixes for sections that use dark glass / dark panel styling */

html[data-theme="light"] .car-key-essentials {
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .car-key-essentials .sub,
html[data-theme="light"] .car-key-essentials .txt {
    color: var(--text-muted);
}

html[data-theme="light"] .car-key-essentials .card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px var(--shadow-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="light"] .car-key-essentials .card:hover {
    box-shadow: 0 6px 20px var(--shadow-color);
}

html[data-theme="light"] .car-key-essentials .media {
    background: var(--bg-surface);
}

html[data-theme="light"] .car-key-essentials::before {
    filter: saturate(110%) opacity(0.22);
}

/* Family */
html[data-theme="light"] .family-section {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="light"] .family-section .description {
    color: var(--text-secondary);
}

/* Vehicle select */
html[data-theme="light"] .vehicle-select-intro .subheading {
    color: var(--text-secondary);
}

html[data-theme="light"] .vehicle-select-trust li {
    color: var(--text-primary);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="light"] .vehicle-select-eyebrow {
    text-shadow: none;
}

html[data-theme="light"] .vehicle-select-form.vehicle-select-card {
    background: transparent;
    border: none;
    border-left: 4px solid #62be28;
    box-shadow: none;
}

html[data-theme="light"] .battery-options.selector-results-panel {
    background: linear-gradient(
        155deg,
        var(--bg-surface-elevated) 0%,
        var(--bg-surface) 55%,
        var(--bg-canvas) 100%
    );
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #62be28;
    box-shadow: 0 8px 24px var(--shadow-color);
}

html[data-theme="light"] .remote-battery-img {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .remote-battery-img:hover {
    box-shadow: none !important;
}

html[data-theme="light"] .vehicle-select-form .form-group input,
html[data-theme="light"] .vehicle-select-form .form-group select,
html[data-theme="light"] .vehicle-select-form .form-control,
html[data-theme="light"] .vehicle-search-input {
    color: var(--input-text) !important;
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .vehicle-search-input::placeholder {
    color: var(--text-muted);
}

html[data-theme="light"] .vehicle-select-form .form-group select,
html[data-theme="light"] .vehicle-select-form .form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
}

html[data-theme="light"] .vehicle-search-results,
html[data-theme="light"] .vehicle-search-results-mobile {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="light"] .vehicle-search-results .search-result-item,
html[data-theme="light"] .vehicle-search-results-mobile .search-result-item {
    color: var(--text-primary);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="light"] .battery-option {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .vehicle-select-help-links,
html[data-theme="light"] .vehicle-select-help-links a {
    color: var(--text-secondary);
}

/* Batteries page */
html[data-theme="light"] .batteries-sect {
    outline-color: var(--border-subtle);
    box-shadow: 0 4px 12px var(--shadow-color);
}

html[data-theme="light"] .battery-item {
    box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="light"] .battery-item:hover {
    background-color: var(--hover-color);
    color: #ffffff;
    box-shadow: 0 6px 16px var(--shadow-color);
}

html[data-theme="light"] .batteries-sect .battery-title {
    background-color: #000000;
    color: #ffffff;
}

/* Battery hero */
html[data-theme="light"] .battery-hero-section {
    background: color-mix(in srgb, var(--battery-accent, #333333) 14%, var(--bg-surface));
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px var(--shadow-color);
}

html[data-theme="light"] .battery-option-label {
    background: color-mix(in srgb, var(--bg-canvas) 80%, transparent);
    color: var(--text-primary);
}

html[data-theme="light"] .battery-breadcrumb-tight ::deep(.breadcrumb-nav__current) {
    color: var(--battery-accent, var(--text-primary));
}

html[data-theme="light"] .family-section h2,
html[data-theme="light"] .family-section .text-container h2 {
    color: var(--text-primary);
}

/* Power-up card + FAQ */
html[data-theme="light"] .content-container.power-up-card,
html[data-theme="light"] .battery-faq .faq-container.faq-panel {
    background: linear-gradient(
        145deg,
        var(--bg-surface-elevated) 0%,
        var(--bg-surface) 100%
    );
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--power-up-accent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 16px var(--shadow-color);
}

html[data-theme="light"] .power-up-card__heading,
html[data-theme="light"] .power-up-card__price,
html[data-theme="light"] .battery-faq .faq-heading {
    text-shadow: none;
}

html[data-theme="light"] .power-up-card__facts li,
html[data-theme="light"] .power-up-card__compat,
html[data-theme="light"] .battery-faq .faq-question {
    color: var(--text-primary);
}

html[data-theme="light"] .power-up-card__eyebrow,
html[data-theme="light"] .power-up-card__fact-icon,
html[data-theme="light"] .battery-faq .faq-toggle {
    background: color-mix(in srgb, var(--power-up-accent) 25%, var(--bg-surface-elevated));
    border: 1px solid var(--border-subtle);
    text-shadow: none;
}

html[data-theme="light"] .power-up-card__figure {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .battery-faq .faq-item {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="light"] .battery-faq .faq-answer {
    color: var(--text-secondary);
}

/* --- Checkout --- */
html[data-theme="light"] .checkout-section {
    background: var(--bg-surface-elevated);
    box-shadow: 0 4px 12px var(--shadow-color);
}

html[data-theme="light"] .checkout-section:hover {
    box-shadow: 0 6px 16px var(--shadow-color);
}

html[data-theme="light"] .checkout-section.payment-form-section,
html[data-theme="light"] .payment-form-section {
    background: var(--bg-surface-elevated) !important;
}

html[data-theme="light"] .checkout-section.payment-form-section:hover,
html[data-theme="light"] .payment-form-section:hover {
    background: var(--bg-surface-elevated) !important;
    background-color: var(--bg-surface-elevated) !important;
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: none;
}

html[data-theme="light"] .apple-pay-button {
    -apple-pay-button-style: black;
}

html[data-theme="light"] .checkout-section h3 {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="light"] .checkout-page-title {
    text-shadow: none;
}

html[data-theme="light"] .shipping-option {
    background-color: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

html[data-theme="light"] .shipping-option:hover {
    background-color: var(--bg-surface-medium);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .shipping-option.selected {
    background-color: var(--bg-surface-medium);
    box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="light"] .order-summary,
html[data-theme="light"] .product-summary,
html[data-theme="light"] .order-summary-enhanced,
html[data-theme="light"] .address-verifying-section,
html[data-theme="light"] .checkout-section.gpay-section {
    background: var(--bg-surface) !important;
}

html[data-theme="light"] .summary-row.total-row {
    border-top-color: var(--border-subtle);
}

/* --- Contact --- */
html[data-theme="light"] .contact-container .form {
    background: var(--bg-surface-elevated);
    box-shadow: 0 4px 12px var(--shadow-color);
}

html[data-theme="light"] .contact-container .form:hover,
html[data-theme="light"] .about-contact-details .form:hover {
    background-color: var(--bg-surface-elevated);
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: none;
}

/* --- Modals --- */
html[data-theme="light"] .policy-modal-container,
html[data-theme="light"] .authorizenet-modal-container {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 32px var(--shadow-color);
}

html[data-theme="light"] .policy-modal-close,
html[data-theme="light"] .authorizenet-modal-close {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .policy-modal-close:hover,
html[data-theme="light"] .authorizenet-modal-close:hover {
    background: var(--bg-surface-medium);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .policy-section p,
html[data-theme="light"] .authorizenet-modal-content p,
html[data-theme="light"] .authorizenet-modal-content li,
html[data-theme="light"] .seal-registration-text {
    color: var(--text-secondary);
}

html[data-theme="light"] .policy-modal-container::-webkit-scrollbar-track,
html[data-theme="light"] .authorizenet-modal-container::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

html[data-theme="light"] .policy-modal-container::-webkit-scrollbar-thumb,
html[data-theme="light"] .authorizenet-modal-container::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
}

/* --- Content pages: shared breadcrumb + intro text --- */
html[data-theme="light"] .breadcrumb ::deep(a.breadcrumb-link),
html[data-theme="light"] .breadcrumb ::deep(a.breadcrumb-link:visited) {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary);
}

html[data-theme="light"] .breadcrumb-separator {
    color: var(--text-muted);
}

html[data-theme="light"] .documents-intro,
html[data-theme="light"] .size-guide-intro,
html[data-theme="light"] .safety-intro,
html[data-theme="light"] .how-to-intro {
    color: var(--text-secondary);
}

html[data-theme="light"] .warning-box p,
html[data-theme="light"] .emergency-box p {
    color: var(--text-secondary);
}

html[data-theme="light"] .documents-section h2,
html[data-theme="light"] .size-guide-section h2,
html[data-theme="light"] .safety-section h2,
html[data-theme="light"] .how-to-section h2 {
    border-bottom-color: var(--border-subtle);
}

/* --- Documents --- */
html[data-theme="light"] .document-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #F58220;
    box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="light"] .document-card p {
    color: var(--text-secondary);
}

html[data-theme="light"] .document-card:hover {
    box-shadow: 0 6px 16px var(--shadow-color);
}

/* --- Size guide --- */
html[data-theme="light"] .table-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .size-comparison-table th {
    border-bottom-color: var(--border-subtle);
}

html[data-theme="light"] .size-comparison-table td {
    color: var(--text-secondary);
    border-bottom-color: var(--border-subtle);
}

html[data-theme="light"] .size-comparison-table tr:hover {
    background: var(--bg-surface-medium);
}

html[data-theme="light"] .battery-info-card {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #F58220;
}

html[data-theme="light"] .battery-info-card p,
html[data-theme="light"] .guide-list,
html[data-theme="light"] .guide-list li,
html[data-theme="light"] .note-item {
    color: var(--text-secondary);
}

html[data-theme="light"] .note-item {
    background: color-mix(in srgb, #F58220 12%, var(--bg-surface));
}

/* --- How-to --- */
html[data-theme="light"] .how-to-list li {
    color: var(--text-secondary);
}

/* --- Home guide links --- */
html[data-theme="light"] .home-guide-links {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

html[data-theme="light"] .home-guide-links-inner p {
    color: var(--text-secondary);
}

html[data-theme="light"] .home-guide-link {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: var(--bg-surface-elevated);
}

html[data-theme="light"] .home-guide-link:hover {
    border-color: #F58220;
    color: #F58220;
    background: color-mix(in srgb, #F58220 10%, var(--bg-surface-elevated));
}

html[data-theme="light"] .home-guide-link-primary {
    background: color-mix(in srgb, #F58220 20%, var(--bg-surface-elevated));
    color: var(--text-primary);
}

/* --- Updates newsletter --- */
html[data-theme="light"] .updates-section .email {
    color: var(--input-text);
    background-color: var(--input-bg);
    border-color: var(--border-subtle);
}

html[data-theme="light"] .updates-section .email::placeholder {
    color: var(--text-muted);
}

html[data-theme="light"] .updates-container h2 {
    color: var(--text-primary);
}

/* --- Essentials headings --- */
html[data-theme="light"] .home-guide-links-inner h2 {
    color: var(--text-primary);
}

/* --- Vehicle select labels + buttons --- */
html[data-theme="light"] .vehicle-select-form .form-group label {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .buy-now-btn {
    background: var(--bg-surface-medium);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .battery-option:hover .buy-now-btn {
    color: #ffffff !important;
}

/* --- Battery hero price/quantity --- */
html[data-theme="light"] .battery-price-div {
    color: var(--text-primary);
}

html[data-theme="light"] .quantity-label {
    color: var(--text-secondary);
}

html[data-theme="light"] .quantity-btn {
    background-color: #000000;
    color: #ffffff;
}

html[data-theme="light"] .quantity-btn:hover {
    background-color: #333333;
    color: #ffffff;
}

html[data-theme="light"] .quantity-input-wrapper {
    border-color: var(--border-subtle);
}

/* --- About body copy --- */
html[data-theme="light"] .about-container .margin-bottom-24px-3 {
    color: var(--text-secondary);
}

/* --- Vehicle make / SEO hub pages --- */
html[data-theme="light"] .vehicle-make-bc-list a,
html[data-theme="light"] .vehicle-make-bc-list li {
    color: var(--text-secondary);
}

html[data-theme="light"] .vehicle-make-bc-sep,
html[data-theme="light"] .vehicle-make-bc-current {
    color: var(--text-muted);
}

html[data-theme="light"] .vehicle-make-intro,
html[data-theme="light"] .section-description,
html[data-theme="light"] .model-description,
html[data-theme="light"] .model-link-secondary {
    color: var(--text-secondary);
}

html[data-theme="light"] .model-card,
html[data-theme="light"] .battery-card,
html[data-theme="light"] .vehicle-make-guide-section {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .documents-section-lead {
    color: var(--text-secondary);
}

html[data-theme="light"] .comparison-intro,
html[data-theme="light"] .comparison-table td,
html[data-theme="light"] .difference-item p,
html[data-theme="light"] .comparison-list li {
    color: var(--text-secondary);
}

html[data-theme="light"] .comparison-table {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

html[data-theme="light"] .difference-item {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid #F58220;
}

html[data-theme="light"] .problems-intro {
    color: var(--text-secondary);
}

/* --- Contact --- */
html[data-theme="light"] .contact-mailing-address {
    color: var(--text-secondary);
}

html[data-theme="light"] .contact-container .form label span {
    color: var(--text-primary);
}

/* --- Essentials headings --- */
html[data-theme="light"] .car-key-essentials .center h1,
html[data-theme="light"] .car-key-essentials .ttl {
    color: var(--text-primary);
}

/* --- Home video overlay (always on dark video) --- */
html[data-theme="light"] .overlay-content .make-model-title,
html[data-theme="light"] .overlay-content h2.make-model-title,
html[data-theme="light"] .overlay-content .instructions,
html[data-theme="light"] .overlay-content p.instructions,
html[data-theme="light"] .overlay-content .dropdown-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

/* --- Error & validation visibility (light mode) --- */
html[data-theme="light"] .validation-message,
html[data-theme="light"] .validation-message-email {
    color: var(--error-text) !important;
}

html[data-theme="light"] .payment-error-message-prominent,
html[data-theme="light"] .payment-error-message {
    color: var(--error-text);
}

html[data-theme="light"] .payment-error-message-prominent {
    color: var(--error-solid-text);
}

html[data-theme="light"] .cancel-status--error,
html[data-theme="light"] .load-error-message {
    color: var(--error-text);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    padding: 10px 12px;
}

html[data-theme="light"] .vmm-error,
html[data-theme="light"] .vmm-loading {
    color: var(--text-secondary);
}

html[data-theme="light"] .compat-checker__status--compatible {
    background: var(--success-bg);
    color: var(--success-text);
}

html[data-theme="light"] .compat-checker__status--compatible .compat-checker__icon {
    color: var(--success-border);
}

html[data-theme="light"] .compat-checker__status--warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

html[data-theme="light"] .compat-checker__status--warning .compat-checker__icon,
html[data-theme="light"] .compat-checker__status--warning p,
html[data-theme="light"] .compat-checker__status--warning strong {
    color: var(--warning-text);
}

html[data-theme="light"] .compat-checker__status--incompatible {
    background: var(--error-bg);
    color: var(--error-text);
}

html[data-theme="light"] .compat-checker__status--incompatible .compat-checker__icon,
html[data-theme="light"] .compat-checker__status--incompatible p {
    color: var(--error-text);
}

html[data-theme="light"] .address-verification-content {
    background: var(--bg-surface);
    color: var(--text-primary);
}

html[data-theme="light"] .address-warning p {
    color: var(--error-text);
}

html[data-theme="light"] .address-message p {
    color: var(--warning-text);
}

html[data-theme="light"] .toast .toast-message,
html[data-theme="light"] .toast .toast-close {
    color: #ffffff;
}

html[data-theme="light"] .support-section,
html[data-theme="light"] .support-section p {
    color: var(--text-muted);
}

/* --- Breadcrumbs: light mode overrides for forced-dark variant & guide-page crumbs --- */
html[data-theme="light"] .site-breadcrumb-bar .breadcrumb-nav--dark a.breadcrumb-nav__link,
html[data-theme="light"] .site-breadcrumb-bar .breadcrumb-nav--dark a.breadcrumb-nav__link:visited,
html[data-theme="light"] .site-breadcrumb-bar .breadcrumb-nav--dark a.breadcrumb-nav__link:active,
html[data-theme="light"] .breadcrumb-nav--dark a.breadcrumb-nav__link,
html[data-theme="light"] .breadcrumb-nav--dark a.breadcrumb-nav__link:visited,
html[data-theme="light"] .breadcrumb-nav--dark a.breadcrumb-nav__link:active {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary);
    text-decoration-color: currentColor !important;
}

html[data-theme="light"] .site-breadcrumb-bar .breadcrumb-nav--dark a.breadcrumb-nav__link:hover,
html[data-theme="light"] .breadcrumb-nav--dark a.breadcrumb-nav__link:hover {
    color: var(--primary-color, #f58220) !important;
    -webkit-text-fill-color: var(--primary-color, #f58220);
    text-decoration-color: currentColor !important;
}

html[data-theme="light"] .breadcrumb-nav--dark .breadcrumb-nav__current {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

html[data-theme="light"] .breadcrumb-nav--sep-white.breadcrumb-nav--dark .breadcrumb-nav__item + .breadcrumb-nav__item::before {
    color: var(--text-muted);
    opacity: 1;
}

html[data-theme="light"] .breadcrumb a.breadcrumb-link,
html[data-theme="light"] .breadcrumb a.breadcrumb-link:visited,
html[data-theme="light"] .breadcrumb a.breadcrumb-link.active {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary);
}

html[data-theme="light"] .breadcrumb a.breadcrumb-link:hover {
    color: var(--primary-color, #f58220) !important;
    -webkit-text-fill-color: var(--primary-color, #f58220);
}

html[data-theme="light"] .breadcrumb-separator {
    color: var(--text-muted) !important;
}

html[data-theme="light"] .breadcrumb-current {
    color: var(--primary-color, #f58220) !important;
}

/* --- Home + FAQ page accordions --- */
html[data-theme="light"] .faq-section {
    background-color: #f9f9f9;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}