/* Accessibility Mode Styles */

body.accessibility-mode {
    --text-color: #000;
    background-color: #f5f5dc;
}

/* Accessibility Mode Indicator */
body.accessibility-mode::before {
    content: "🔵 ACCESSIBILITY MODE ENABLED";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #1291de;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    z-index: 10001;
    border-bottom: 3px solid #000;
}

body.accessibility-mode {
    font-size: 18px !important;
    padding-top: 45px;
}

body.accessibility-mode h1 {
    font-size: 36px !important;
}

body.accessibility-mode h2 {
    font-size: 28px !important;
}

body.accessibility-mode h3 {
    font-size: 24px !important;
}

body.accessibility-mode label {
    font-size: 16px !important;
}

body.accessibility-mode button,
body.accessibility-mode input,
body.accessibility-mode select,
body.accessibility-mode textarea {
    font-size: 16px !important;
    padding: 12px !important;
}

body.accessibility-mode {
    background-color: #f5f5dc;
    color: #000 !important;
}

body.accessibility-mode header {
    background-color: #333 !important;
    color: #fff !important;
    border-bottom: 5px solid #1291de !important;
}

body.accessibility-mode .navbar,
body.accessibility-mode .nav-container {
    background-color: #333 !important;
    border-bottom: 3px solid #1291de !important;
}

body.accessibility-mode .logo {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: bold !important;
}

body.accessibility-mode .nav-link,
body.accessibility-mode .nav-item a {
    color: #fff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
    padding: 12px 15px !important;
    border: 2px solid transparent !important;
}

body.accessibility-mode a {
    color: #0066cc !important;
    text-decoration: underline !important;
}

body.accessibility-mode .accessibility-toggle {
    background-color: #1291de !important;
    color: #fff !important;
    border: 3px solid #000 !important;
    font-weight: bold !important;
    padding: 12px 16px !important;
    font-size: 18px !important;
}

body.accessibility-mode a:visited {
    color: #660099 !important;
}

body.accessibility-mode a:focus,
body.accessibility-mode button:focus,
body.accessibility-mode input:focus,
body.accessibility-mode select:focus,
body.accessibility-mode textarea:focus {
    outline: 3px solid #ff0000 !important;
    outline-offset: 2px !important;
}

body.accessibility-mode button,
body.accessibility-mode input[type="submit"],
body.accessibility-mode input[type="button"] {
    background-color: #0066cc !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    cursor: pointer !important;
}

body.accessibility-mode .accessibility-toggle {
    background-color: #003d82 !important;
    color: #fff !important;
    border: 4px solid #000 !important;
    padding: 16px 20px !important;
    font-size: 20px !important;
    outline: 4px solid #ffcc00 !important;
    outline-offset: 3px !important;
}

body.accessibility-mode .btn-primary {
    background-color: #0066cc !important;
}

body.accessibility-mode .btn-secondary {
    background-color: #666 !important;
}

body.accessibility-mode input[type="text"],
body.accessibility-mode input[type="email"],
body.accessibility-mode input[type="tel"],
body.accessibility-mode input[type="password"],
body.accessibility-mode select,
body.accessibility-mode textarea {
    border: 2px solid #000 !important;
    background-color: #fff !important;
    color: #000 !important;
}

body.accessibility-mode table {
    border-collapse: collapse !important;
}

body.accessibility-mode table th,
body.accessibility-mode table td {
    border: 2px solid #000 !important;
    padding: 12px !important;
}

body.accessibility-mode table th {
    background-color: #333 !important;
    color: #fff !important;
}

body.accessibility-mode .product-card {
    border: 2px solid #000 !important;
}

body.accessibility-mode .product-card:focus-within {
    outline: 3px solid #ff0000 !important;
}

body.accessibility-mode .nav-item {
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color 0.2s;
}

body.accessibility-mode .nav-item:focus {
    outline-color: #ff0000;
}

body.accessibility-mode .product-name,
body.accessibility-mode .product-price {
    font-weight: bold !important;
}

body.accessibility-mode .price {
    font-size: 24px !important;
    font-weight: bold !important;
}

body.accessibility-mode .availability {
    font-weight: bold !important;
    border: 2px solid #000 !important;
}

body.accessibility-mode footer {
    background-color: #333 !important;
    color: #fff !important;
    border-top: 5px solid #1291de !important;
}

body.accessibility-mode .search-input {
    min-height: 40px !important;
    font-size: 16px !important;
    border: 3px solid #000 !important;
    padding: 10px !important;
}

body.accessibility-mode .search-btn {
    min-height: 40px !important;
    font-weight: bold !important;
    background-color: #1291de !important;
    color: #fff !important;
    border: 3px solid #000 !important;
}

body.accessibility-mode code,
body.accessibility-mode pre {
    font-family: "Courier New", monospace !important;
    font-size: 16px !important;
}

/* High Contrast Mode */
body.accessibility-mode {
    background-color: #f5f5dc !important;
    font-size: 18px !important;
    color: #000 !important;
}

body.accessibility-mode .product-card {
    background-color: #fff !important;
    box-shadow: 0 0 0 4px #000 !important;
    border: 4px solid #000 !important;
}

body.accessibility-mode .btn {
    font-weight: bold !important;
    text-decoration: none;
}

body.accessibility-mode .btn:hover,
body.accessibility-mode .btn:focus {
    outline: 3px solid #ff0000 !important;
    outline-offset: 2px !important;
}

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Keyboard focus indicators */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

body.accessibility-mode button:focus-visible,
body.accessibility-mode a:focus-visible,
body.accessibility-mode input:focus-visible,
body.accessibility-mode select:focus-visible,
body.accessibility-mode textarea:focus-visible {
    outline: 3px solid #ff0000;
    outline-offset: 2px;
}

/* Link focus state */
body.accessibility-mode .nav-link:focus {
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

/* Product card focus */
body.accessibility-mode .product-card:focus,
body.accessibility-mode .product-card:focus-within {
    outline: 3px solid #ff0000;
    outline-offset: 2px;
}

/* Form input labels */
body.accessibility-mode label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
    font-size: 16px !important;
}

body.accessibility-mode input[type="text"],
body.accessibility-mode input[type="email"],
body.accessibility-mode input[type="password"],
body.accessibility-mode input[type="search"],
body.accessibility-mode textarea,
body.accessibility-mode select {
    border: 3px solid #000 !important;
    padding: 10px !important;
    font-size: 16px !important;
    background-color: #fff !important;
    color: #000 !important;
}

/* Readable fonts for accessibility */
body.accessibility-mode {
    font-family: Georgia, "Times New Roman", serif !important;
}

body.accessibility-mode h1,
body.accessibility-mode h2,
body.accessibility-mode h3,
body.accessibility-mode strong,
body.accessibility-mode b {
    font-family: Arial, sans-serif !important;
    font-weight: bold;
}

/* Better spacing for accessibility */
body.accessibility-mode p {
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
}

body.accessibility-mode li {
    margin-bottom: 10px !important;
    line-height: 1.8 !important;
}

/* Better button appearance */
body.accessibility-mode button,
body.accessibility-mode input[type="button"],
body.accessibility-mode input[type="submit"] {
    min-height: 50px !important;
    min-width: 100px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    background-color: #1291de !important;
    color: #fff !important;
    border: 3px solid #000 !important;
    font-size: 16px !important;
}

body.accessibility-mode button:hover,
body.accessibility-mode input[type="button"]:hover,
body.accessibility-mode input[type="submit"]:hover {
    background-color: #0d7ac7 !important;
    outline: 3px solid #ff0000 !important;
}

/* Better link appearance */
body.accessibility-mode a {
    font-weight: normal !important;
    color: #0066cc !important;
    text-decoration: underline !important;
}

/* Focus visible for all interactive elements */
body.accessibility-mode *:focus-visible {
    outline: 3px solid #ff0000 !important;
    outline-offset: 2px !important;
}

/* Improved table contrast */
body.accessibility-mode .cart-table thead {
    background-color: #000 !important;
    color: #fff !important;
}

body.accessibility-mode .cart-table tbody tr {
    background-color: #fff !important;
}

body.accessibility-mode .cart-table tbody tr:hover {
    background-color: #f0f0f0 !important;
}

/* Dropdown menu accessibility */
body.accessibility-mode .dropdown-menu {
    background-color: #fff !important;
    border: 2px solid #000 !important;
}

body.accessibility-mode .dropdown-item {
    padding: 15px !important;
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
}

body.accessibility-mode .dropdown-item:hover,
body.accessibility-mode .dropdown-item:focus {
    background-color: #e6f2ff !important;
    outline: 2px solid #0066cc !important;
}

/* Search form accessibility */
body.accessibility-mode .search-input {
    min-height: 40px !important;
    font-size: 16px !important;
}

body.accessibility-mode .search-btn {
    min-height: 40px !important;
    font-weight: bold !important;
}

/* Product detail carousel accessibility */
body.accessibility-mode .product-thumbnail {
    border: 2px solid #000 !important;
    cursor: pointer !important;
    transition: all 0.2s;
}

body.accessibility-mode .product-thumbnail:focus,
body.accessibility-mode .product-thumbnail:hover {
    outline: 3px solid #ff0000 !important;
    outline-offset: 2px !important;
    border-color: #ff0000 !important;
}

/* Better color contrast for status badges */
body.accessibility-mode .availability.in-stock {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
}

body.accessibility-mode .availability.out-of-stock {
    background-color: #000 !important;
    color: #ffff00 !important;
    border: 2px solid #000 !important;
}

body.accessibility-mode .sale-badge {
    background-color: #ff0000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    font-weight: bold !important;
}