/* =========================================================
   ALUMINIUMGLASS.CO.IN
   ACCESSIBILITY THEME
   ---------------------------------------------------------
   Purpose:
   - WCAG-oriented accessibility improvements
   - Keyboard navigation
   - Focus visibility
   - High contrast
   - Reduced motion
   - Larger text
   - Better form readability
   - Screen-reader helpers
   - Touch target improvements
   - No marketplace/demo/fake data
   ========================================================= */


/* =========================================================
   1. ACCESSIBILITY THEME VARIABLES
   ========================================================= */

:root {
    --a11y-focus-color: #005fcc;
    --a11y-focus-width: 3px;
    --a11y-focus-offset: 3px;

    --a11y-text-color: #111111;
    --a11y-background-color: #ffffff;
    --a11y-surface-color: #ffffff;
    --a11y-border-color: #333333;

    --a11y-link-color: #0047ab;
    --a11y-link-hover-color: #002f73;

    --a11y-danger-color: #b00020;
    --a11y-success-color: #075e2b;
    --a11y-warning-color: #7a4b00;

    --a11y-font-scale: 1;
    --a11y-line-height: 1.6;

    --a11y-touch-size: 44px;
}


/* =========================================================
   2. BASE ACCESSIBILITY MODE
   ========================================================= */

html.a11y-enabled {
    font-size: calc(16px * var(--a11y-font-scale));
}

html.a11y-enabled body {
    color: var(--a11y-text-color);
    background: var(--a11y-background-color);
    line-height: var(--a11y-line-height);
}


/* =========================================================
   3. STRONG FOCUS INDICATOR
   ========================================================= */

html.a11y-enabled
button:focus,
html.a11y-enabled
a:focus,
html.a11y-enabled
input:focus,
html.a11y-enabled
select:focus,
html.a11y-enabled
textarea:focus,
html.a11y-enabled
[tabindex]:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
    outline-offset: var(--a11y-focus-offset);
    box-shadow: none;
}


/* Modern focus-visible support */

html.a11y-enabled
button:focus-visible,
html.a11y-enabled
a:focus-visible,
html.a11y-enabled
input:focus-visible,
html.a11y-enabled
select:focus-visible,
html.a11y-enabled
textarea:focus-visible,
html.a11y-enabled
[tabindex]:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
    outline-offset: var(--a11y-focus-offset);
}


/* =========================================================
   4. REMOVE LOW-VISIBILITY FOCUS
   ========================================================= */

html.a11y-enabled
:focus {
    opacity: 1;
}


/* =========================================================
   5. LINKS
   ========================================================= */

html.a11y-enabled a {
    color: var(--a11y-link-color);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

html.a11y-enabled a:hover {
    color: var(--a11y-link-hover-color);
    text-decoration-thickness: 2px;
}

html.a11y-enabled a:visited {
    text-decoration-thickness: 2px;
}


/* =========================================================
   6. HEADINGS
   ========================================================= */

html.a11y-enabled
h1,
html.a11y-enabled
h2,
html.a11y-enabled
h3,
html.a11y-enabled
h4,
html.a11y-enabled
h5,
html.a11y-enabled
h6 {
    color: var(--a11y-text-color);
    line-height: 1.3;
    font-weight: 700;
}


/* =========================================================
   7. PARAGRAPHS / TEXT
   ========================================================= */

html.a11y-enabled p,
html.a11y-enabled li,
html.a11y-enabled label,
html.a11y-enabled
.form-label {
    line-height: var(--a11y-line-height);
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

html.a11y-enabled
button,
html.a11y-enabled
.btn,
html.a11y-enabled
input[type="button"],
html.a11y-enabled
input[type="submit"],
html.a11y-enabled
input[type="reset"] {
    min-height: var(--a11y-touch-size);
    min-width: var(--a11y-touch-size);

    font-weight: 600;

    border-width: 2px;
}


/* =========================================================
   9. FORM CONTROLS
   ========================================================= */

html.a11y-enabled
input,
html.a11y-enabled
select,
html.a11y-enabled
textarea {
    min-height: var(--a11y-touch-size);

    color: var(--a11y-text-color);
    background: var(--a11y-background-color);

    border: 2px solid var(--a11y-border-color);

    line-height: 1.5;
}


/* Textarea should not have forced touch height only */

html.a11y-enabled textarea {
    min-height: 100px;
}


/* =========================================================
   10. PLACEHOLDER TEXT
   ========================================================= */

html.a11y-enabled
input::placeholder,
html.a11y-enabled
textarea::placeholder {
    color: #444444;
    opacity: 1;
}


/* =========================================================
   11. DISABLED CONTROLS
   ========================================================= */

html.a11y-enabled
button:disabled,
html.a11y-enabled
input:disabled,
html.a11y-enabled
select:disabled,
html.a11y-enabled
textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}


/* =========================================================
   12. CHECKBOX / RADIO
   ========================================================= */

html.a11y-enabled
input[type="checkbox"],
html.a11y-enabled
input[type="radio"] {
    width: 22px;
    height: 22px;

    min-width: 22px;
    min-height: 22px;

    accent-color: var(--a11y-focus-color);
}


/* =========================================================
   13. REQUIRED FIELDS
   ========================================================= */

html.a11y-enabled
[aria-required="true"],
html.a11y-enabled
.required {
    border-left: 4px solid var(--a11y-focus-color);
}


/* =========================================================
   14. ERROR STATES
   ========================================================= */

html.a11y-enabled
.is-invalid,
html.a11y-enabled
.has-error,
html.a11y-enabled
[aria-invalid="true"] {
    border-color: var(--a11y-danger-color) !important;
    border-width: 2px !important;
}


/* Error text */

html.a11y-enabled
.form-error,
html.a11y-enabled
.error-message,
html.a11y-enabled
[role="alert"] {
    color: var(--a11y-danger-color);
    font-weight: 700;
}


/* =========================================================
   15. SUCCESS STATES
   ========================================================= */

html.a11y-enabled
.is-valid,
html.a11y-enabled
.has-success {
    border-color: var(--a11y-success-color);
    border-width: 2px;
}

html.a11y-enabled
.success-message {
    color: var(--a11y-success-color);
    font-weight: 700;
}


/* =========================================================
   16. WARNING STATES
   ========================================================= */

html.a11y-enabled
.warning-message,
html.a11y-enabled
.alert-warning {
    color: var(--a11y-warning-color);
    font-weight: 700;
}


/* =========================================================
   17. HIGH CONTRAST MODE
   ---------------------------------------------------------
   Activate:
   <html class="a11y-enabled a11y-high-contrast">
   ========================================================= */

html.a11y-high-contrast {
    --a11y-text-color: #000000;
    --a11y-background-color: #ffffff;
    --a11y-surface-color: #ffffff;
    --a11y-border-color: #000000;

    --a11y-link-color: #0000ee;
    --a11y-link-hover-color: #0000aa;

    --a11y-focus-color: #ff0000;
}


html.a11y-high-contrast body {
    color: #000000;
    background: #ffffff;
}


html.a11y-high-contrast
* {
    border-color: #000000;
}


html.a11y-high-contrast
a {
    color: #0000ee;
    text-decoration: underline;
}


html.a11y-high-contrast
button,
html.a11y-high-contrast
.btn {
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
}


html.a11y-high-contrast
input,
html.a11y-high-contrast
select,
html.a11y-high-contrast
textarea {
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
}


/* =========================================================
   18. BLACK CONTRAST MODE
   ---------------------------------------------------------
   Activate:
   <html class="a11y-enabled a11y-black">
   ========================================================= */

html.a11y-black {
    --a11y-text-color: #ffffff;
    --a11y-background-color: #000000;
    --a11y-surface-color: #000000;
    --a11y-border-color: #ffffff;

    --a11y-link-color: #ffff00;
    --a11y-link-hover-color: #00ffff;

    --a11y-focus-color: #00ffff;
}


html.a11y-black body {
    color: #ffffff;
    background: #000000;
}


html.a11y-black
header,
html.a11y-black
footer,
html.a11y-black
nav,
html.a11y-black
section,
html.a11y-black
article,
html.a11y-black
main,
html.a11y-black
aside,
html.a11y-black
.card,
html.a11y-black
.panel,
html.a11y-black
.modal-content {
    color: #ffffff;
    background: #000000;
    border-color: #ffffff;
}


html.a11y-black
a {
    color: #ffff00;
}


html.a11y-black
button,
html.a11y-black
.btn {
    color: #ffffff;
    background: #000000;
    border: 2px solid #ffffff;
}


html.a11y-black
input,
html.a11y-black
select,
html.a11y-black
textarea {
    color: #ffffff;
    background: #000000;
    border: 2px solid #ffffff;
}


html.a11y-black
input::placeholder,
html.a11y-black
textarea::placeholder {
    color: #dddddd;
}


/* =========================================================
   19. LARGE TEXT MODE
   ---------------------------------------------------------
   Activate:
   <html class="a11y-enabled a11y-large-text">
   ========================================================= */

html.a11y-large-text {
    --a11y-font-scale: 1.2;
}


html.a11y-large-text body {
    line-height: 1.7;
}


html.a11y-large-text
p,
html.a11y-large-text
li,
html.a11y-large-text
label,
html.a11y-large-text
button,
html.a11y-large-text
input,
html.a11y-large-text
select,
html.a11y-large-text
textarea {
    line-height: 1.7;
}


/* =========================================================
   20. EXTRA LARGE TEXT MODE
   ========================================================= */

html.a11y-extra-large-text {
    --a11y-font-scale: 1.35;
}


html.a11y-extra-large-text body {
    line-height: 1.8;
}


/* =========================================================
   21. LETTER SPACING
   ========================================================= */

html.a11y-readable-text
body {
    letter-spacing: 0.015em;
}


html.a11y-readable-text
p,
html.a11y-readable-text
li {
    letter-spacing: 0.02em;
}


/* =========================================================
   22. WORD SPACING
   ========================================================= */

html.a11y-readable-text
p,
html.a11y-readable-text
li,
html.a11y-readable-text
label {
    word-spacing: 0.08em;
}


/* =========================================================
   23. LINE SPACING MODE
   ========================================================= */

html.a11y-extra-line-spacing
body {
    line-height: 1.8;
}


html.a11y-extra-line-spacing
p,
html.a11y-extra-line-spacing
li {
    margin-bottom: 0.8em;
}


/* =========================================================
   24. REDUCED MOTION
   ---------------------------------------------------------
   Activate:
   <html class="a11y-reduced-motion">
   ========================================================= */

html.a11y-reduced-motion *,
html.a11y-reduced-motion *::before,
html.a11y-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}


/* Also respect OS setting */

@media (prefers-reduced-motion: reduce) {

    html.a11y-auto-motion-reduction *,
    html.a11y-auto-motion-reduction *::before,
    html.a11y-auto-motion-reduction *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* =========================================================
   25. HIDE ANIMATIONS MODE
   ========================================================= */

html.a11y-no-animation *,
html.a11y-no-animation *::before,
html.a11y-no-animation *::after {
    animation: none !important;
    transition: none !important;
}


/* =========================================================
   26. SCREEN READER ONLY
   ========================================================= */

.sr-only,
.visually-hidden,
html.a11y-enabled
.screen-reader-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   27. SCREEN READER ONLY - FOCUSABLE
   ========================================================= */

.sr-only-focusable:focus,
.sr-only-focusable:active,
html.a11y-enabled
.skip-link:focus {
    position: fixed !important;

    top: 10px;
    left: 10px;

    z-index: 999999;

    width: auto !important;
    height: auto !important;

    padding: 12px 18px !important;
    margin: 0 !important;

    overflow: visible !important;

    clip: auto !important;
    white-space: normal !important;

    color: #ffffff;
    background: #000000;

    border: 3px solid #ffffff;
}


/* =========================================================
   28. SKIP NAVIGATION LINK
   ========================================================= */

html.a11y-enabled
.skip-to-content {
    position: absolute;

    top: -100px;
    left: 10px;

    z-index: 999999;

    padding: 12px 18px;

    color: #ffffff;
    background: #000000;

    border: 3px solid #ffffff;

    text-decoration: none;

    transition: top 0.15s ease;
}


html.a11y-enabled
.skip-to-content:focus {
    top: 10px;
}


/* =========================================================
   29. LANDMARKS
   ========================================================= */

html.a11y-enabled
main:focus,
html.a11y-enabled
[role="main"]:focus,
html.a11y-enabled
nav:focus,
html.a11y-enabled
header:focus,
html.a11y-enabled
footer:focus {
    outline: none;
}


/* =========================================================
   30. IMAGES
   ========================================================= */

html.a11y-enabled
img {
    max-width: 100%;
}


html.a11y-enabled
img[alt=""] {
    /* Decorative images remain available but don't interfere
       with screen reader semantics. */
}


/* =========================================================
   31. MARKETPLACE CARDS
   ========================================================= */

html.a11y-enabled
.vendor-card,
html.a11y-enabled
.business-card,
html.a11y-enabled
.service-card,
html.a11y-enabled
.product-card,
html.a11y-enabled
.category-card,
html.a11y-enabled
.review-card {
    border-width: 2px;
}


html.a11y-enabled
.vendor-card:focus-within,
html.a11y-enabled
.business-card:focus-within,
html.a11y-enabled
.service-card:focus-within,
html.a11y-enabled
.product-card:focus-within {
    outline: 3px solid var(--a11y-focus-color);
    outline-offset: 3px;
}


/* =========================================================
   32. SEARCH RESULTS
   ========================================================= */

html.a11y-enabled
.search-result,
html.a11y-enabled
.search-results,
html.a11y-enabled
.search-panel {
    line-height: 1.6;
}


html.a11y-enabled
.search-result a {
    font-weight: 600;
}


/* =========================================================
   33. AUTOCOMPLETE
   ========================================================= */

html.a11y-enabled
.autocomplete-item,
html.a11y-enabled
.search-autocomplete-item,
html.a11y-enabled
.location-autocomplete-item {
    min-height: var(--a11y-touch-size);

    padding: 10px 12px;

    border-bottom: 1px solid var(--a11y-border-color);
}


html.a11y-enabled
.autocomplete-item:hover,
html.a11y-enabled
.autocomplete-item:focus,
html.a11y-enabled
.search-autocomplete-item:hover,
html.a11y-enabled
.search-autocomplete-item:focus {
    outline: 3px solid var(--a11y-focus-color);
    outline-offset: -3px;
}


/* =========================================================
   34. FILTERS
   ========================================================= */

html.a11y-enabled
.filter-panel,
html.a11y-enabled
.sort-panel {
    border-width: 2px;
}


html.a11y-enabled
.filter-option,
html.a11y-enabled
.sort-option {
    min-height: var(--a11y-touch-size);
}


/* =========================================================
   35. PAGINATION
   ========================================================= */

html.a11y-enabled
.pagination a,
html.a11y-enabled
.pagination button {
    min-width: var(--a11y-touch-size);
    min-height: var(--a11y-touch-size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid transparent;
}


html.a11y-enabled
.pagination a:focus,
html.a11y-enabled
.pagination button:focus {
    border-color: var(--a11y-focus-color);
}


/* =========================================================
   36. MODALS
   ========================================================= */

html.a11y-enabled
.modal,
html.a11y-enabled
.dialog {
    isolation: isolate;
}


html.a11y-enabled
.modal-content,
html.a11y-enabled
.dialog-content {
    border: 2px solid var(--a11y-border-color);
}


html.a11y-enabled
.modal-close,
html.a11y-enabled
.dialog-close {
    min-width: var(--a11y-touch-size);
    min-height: var(--a11y-touch-size);
}


/* =========================================================
   37. ALERTS
   ========================================================= */

html.a11y-enabled
[role="alert"],
html.a11y-enabled
[role="status"],
html.a11y-enabled
.alert {
    border-width: 2px;
    font-weight: 600;
}


/* =========================================================
   38. TABLES
   ========================================================= */

html.a11y-enabled
table {
    border-collapse: collapse;
}


html.a11y-enabled
th,
html.a11y-enabled
td {
    border: 2px solid var(--a11y-border-color);
    padding: 10px;
}


html.a11y-enabled
th {
    font-weight: 700;
}


/* =========================================================
   39. TABS
   ========================================================= */

html.a11y-enabled
[role="tab"] {
    min-height: var(--a11y-touch-size);
    padding: 10px 16px;
}


html.a11y-enabled
[role="tab"][aria-selected="true"] {
    font-weight: 700;
    border-bottom: 3px solid var(--a11y-focus-color);
}


/* =========================================================
   40. ACCORDION
   ========================================================= */

html.a11y-enabled
[aria-expanded] {
    cursor: pointer;
}


html.a11y-enabled
.accordion-button {
    min-height: var(--a11y-touch-size);
    text-align: left;
}


/* =========================================================
   41. TOOLTIP
   ========================================================= */

html.a11y-enabled
[role="tooltip"] {
    max-width: 320px;

    padding: 8px 12px;

    color: #ffffff;
    background: #000000;

    border: 2px solid #ffffff;

    line-height: 1.5;
}


/* =========================================================
   42. BREADCRUMBS
   ========================================================= */

html.a11y-enabled
.breadcrumb a {
    text-decoration: underline;
}


/* =========================================================
   43. VERIFICATION BADGES
   ========================================================= */

html.a11y-enabled
.verification-badge {
    border: 2px solid currentColor;
    font-weight: 700;
}


/* =========================================================
   44. STATUS BADGES
   ========================================================= */

html.a11y-enabled
.badge,
html.a11y-enabled
.status-badge {
    border: 1px solid currentColor;
    font-weight: 700;
}


/* =========================================================
   45. LOADER / LOADING STATE
   ========================================================= */

html.a11y-enabled
.loading,
html.a11y-enabled
.loader {
    position: relative;
}


/* Screen-reader loading message */

html.a11y-enabled
[aria-busy="true"] {
    cursor: progress;
}


/* =========================================================
   46. EMPTY STATE
   ========================================================= */

html.a11y-enabled
.empty-state {
    border: 2px dashed var(--a11y-border-color);
    padding: 24px;
}


/* =========================================================
   47. ERROR STATE
   ========================================================= */

html.a11y-enabled
.error-state {
    border: 2px solid var(--a11y-danger-color);
    padding: 20px;
}


/* =========================================================
   48. COOKIE / CONSENT
   ========================================================= */

html.a11y-enabled
.cookie-banner,
html.a11y-enabled
.consent-panel {
    border: 2px solid var(--a11y-border-color);
}


html.a11y-enabled
.cookie-banner button,
html.a11y-enabled
.consent-panel button {
    min-height: var(--a11y-touch-size);
}


/* =========================================================
   49. CHAT
   ========================================================= */

html.a11y-enabled
.chat-widget,
html.a11y-enabled
.chat-panel {
    border-width: 2px;
}


html.a11y-enabled
.chat-send,
html.a11y-enabled
.chat-close {
    min-width: var(--a11y-touch-size);
    min-height: var(--a11y-touch-size);
}


/* =========================================================
   50. MOBILE TOUCH TARGETS
   ========================================================= */

@media (max-width: 767px) {

    html.a11y-enabled
    button,
    html.a11y-enabled
    a.button,
    html.a11y-enabled
    .btn,
    html.a11y-enabled
    input[type="button"],
    html.a11y-enabled
    input[type="submit"] {
        min-height: 48px;
    }

    html.a11y-enabled
    input,
    html.a11y-enabled
    select {
        min-height: 48px;
    }

}


/* =========================================================
   51. KEYBOARD NAVIGATION
   ========================================================= */

html.a11y-enabled
.keyboard-user button:focus,
html.a11y-enabled
.keyboard-user a:focus,
html.a11y-enabled
.keyboard-user input:focus,
html.a11y-enabled
.keyboard-user select:focus,
html.a11y-enabled
.keyboard-user textarea:focus {
    outline: 4px solid var(--a11y-focus-color);
    outline-offset: 4px;
}


/* =========================================================
   52. DO NOT USE COLOR ALONE FOR STATUS
   ========================================================= */

html.a11y-enabled
.status-success::before {
    content: "✓ ";
}


html.a11y-enabled
.status-error::before {
    content: "Error: ";
}


html.a11y-enabled
.status-warning::before {
    content: "Warning: ";
}


/* =========================================================
   53. VISUAL SEPARATION
   ========================================================= */

html.a11y-enabled
section,
html.a11y-enabled
article {
    scroll-margin-top: 80px;
}


/* =========================================================
   54. ANCHOR TARGET
   ========================================================= */

html.a11y-enabled
[id] {
    scroll-margin-top: 80px;
}


/* =========================================================
   55. TEXT SELECTION
   ========================================================= */

html.a11y-enabled
::selection {
    color: #ffffff;
    background: #005fcc;
}


/* =========================================================
   56. PRINT ACCESSIBILITY
   ========================================================= */

@media print {

    html.a11y-enabled
    a {
        color: #000000;
        text-decoration: underline;
    }

    html.a11y-enabled
    button,
    html.a11y-enabled
    .no-print {
        display: none !important;
    }

    html.a11y-enabled
    body {
        color: #000000;
        background: #ffffff;
        line-height: 1.6;
    }

}


/* =========================================================
   57. FORCED COLORS / WINDOWS HIGH CONTRAST
   ========================================================= */

@media (forced-colors: active) {

    html.a11y-enabled
    button,
    html.a11y-enabled
    input,
    html.a11y-enabled
    select,
    html.a11y-enabled
    textarea,
    html.a11y-enabled
    a {
        forced-color-adjust: auto;
    }

    html.a11y-enabled
    :focus {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }

}


/* =========================================================
   58. DARK THEME + ACCESSIBILITY
   ========================================================= */

html.dark-theme.a11y-enabled {
    --a11y-focus-color: #66b3ff;
}


html.dark-theme.a11y-enabled
:focus-visible {
    outline-color: #66b3ff;
}


/* =========================================================
   59. DARK + HIGH CONTRAST
   ========================================================= */

html.dark-theme.a11y-high-contrast {
    --a11y-text-color: #ffffff;
    --a11y-background-color: #000000;
    --a11y-surface-color: #000000;
    --a11y-border-color: #ffffff;

    --a11y-link-color: #ffff00;
    --a11y-focus-color: #00ffff;
}


html.dark-theme.a11y-high-contrast
body {
    color: #ffffff;
    background: #000000;
}


/* =========================================================
   60. ACCESSIBILITY CONTROL PANEL
   ========================================================= */

html.a11y-enabled
.accessibility-panel {
    border: 2px solid var(--a11y-border-color);
}


html.a11y-enabled
.accessibility-panel button {
    min-height: var(--a11y-touch-size);
    min-width: var(--a11y-touch-size);
}


/* =========================================================
   END
   ========================================================= */