/*
 * TurnUpCity — Accessibility Widget Styles
 * Floating toolbar (Ally-style) injected on every page.
 */

/* ── CSS custom properties ──────────────────────────────────────────────── */
:root {
    --tuc-widget-color:  #7B341E;
    --tuc-widget-radius: 32px;
    --tuc-panel-width:   300px;
    --tuc-z:             99999;
}

/* ── Root container ─────────────────────────────────────────────────────── */
.tuc-a11y-widget-root {
    position: fixed;
    z-index: var(--tuc-z);
    /* position class sets the corner */
}

.tuc-widget-pos-bottomright { bottom: 16px; right: 16px; }
.tuc-widget-pos-bottomleft  { bottom: 16px; left:  16px; }
.tuc-widget-pos-topright    { top:    70px; right: 16px; }
.tuc-widget-pos-topleft     { top:    70px; left:  16px; }

/* ── Trigger button ─────────────────────────────────────────────────────── */
.tuc-widget-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         0 18px;
    height:          48px;
    min-width:       48px;
    background:      var(--tuc-widget-color);
    border-radius:   var(--tuc-widget-radius);
    border:          none;
    cursor:          pointer;
    color:           #fff;
    font-weight:     600;
    font-size:       14px;
    font-family:     inherit;
    box-shadow:      0 4px 12px rgba(0,0,0,.28);
    transition:      transform .15s, box-shadow .15s;
    outline-offset:  3px;
}

.tuc-widget-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.32); }
.tuc-widget-btn:focus-visible { outline: 3px solid #fff; }

.tuc-widget-btn .tuc-tri {
    width:  24px;
    height: 24px;
    fill:   #fff;
    flex-shrink: 0;
}
.tuc-btn-label { white-space: nowrap; }

/* size variants */
.tuc-widget-size-small  .tuc-widget-btn { height: 40px; padding: 0 14px; font-size: 13px; }
.tuc-widget-size-small  .tuc-widget-btn .tuc-tri { width: 20px; height: 20px; }
.tuc-widget-size-large  .tuc-widget-btn { height: 56px; padding: 0 22px; font-size: 15px; }
.tuc-widget-size-large  .tuc-widget-btn .tuc-tri { width: 28px; height: 28px; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.tuc-widget-panel {
    position:      absolute;
    bottom:        calc(100% + 10px);
    right:         0;
    width:         var(--tuc-panel-width);
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 8px 32px rgba(0,0,0,.22);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    max-height:    88vh;
    opacity:       0;
    transform:     translateY(8px) scale(.97);
    pointer-events: none;
    transition:    opacity .2s, transform .2s;
    z-index:       1;
}

.tuc-widget-pos-bottomleft  .tuc-widget-panel,
.tuc-widget-pos-topleft     .tuc-widget-panel { right: auto; left: 0; }
.tuc-widget-pos-topright    .tuc-widget-panel,
.tuc-widget-pos-topleft     .tuc-widget-panel { bottom: auto; top: calc(100% + 10px); transform: translateY(-8px) scale(.97); }

.tuc-widget-panel.tuc-panel-open {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: all;
}

/* Header */
.tuc-panel-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 14px 14px 16px;
    background:      var(--tuc-widget-color);
    color:           #fff;
    flex-shrink:     0;
}

.tuc-panel-title {
    font-size:   16px;
    font-weight: 700;
    letter-spacing: .02em;
}

.tuc-panel-hd-btns {
    display:    flex;
    gap:        4px;
    align-items: center;
}

.tuc-panel-reset-btn,
.tuc-panel-close-btn {
    background:    transparent;
    border:        none;
    cursor:        pointer;
    padding:       4px;
    border-radius: 50%;
    display:       flex;
    color:         #fff;
    opacity:       .85;
    transition:    opacity .15s, background .15s;
}

.tuc-panel-reset-btn:hover,
.tuc-panel-close-btn:hover { opacity: 1; background: rgba(255,255,255,.2); }
.tuc-panel-reset-btn:focus-visible,
.tuc-panel-close-btn:focus-visible { outline: 2px solid #fff; }

.tuc-panel-reset-btn svg,
.tuc-panel-close-btn svg { width: 20px; height: 20px; fill: #fff; }

/* Body / scrollable area */
.tuc-panel-body {
    overflow-y: auto;
    flex:       1;
    padding:    8px 0 4px;
    scroll-behavior: smooth;
}

/* Section */
.tuc-section { padding: 4px 12px 8px; }

.tuc-section-title {
    font-size:    12px;
    font-weight:  700;
    color:        #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin:       6px 0 8px;
}

/* Button grid */
.tuc-btn-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}

.tuc-feature-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    padding:        12px 8px;
    border:         1.5px solid #e5e7eb;
    border-radius:  10px;
    background:     #f9fafb;
    cursor:         pointer;
    font-size:      12px;
    font-weight:    500;
    font-family:    inherit;
    color:          #374151;
    transition:     border-color .15s, background .15s, color .15s;
    text-align:     center;
    line-height:    1.3;
}

.tuc-feature-btn:hover {
    border-color: var(--tuc-widget-color);
    background:   #fdf6f2;
}

.tuc-feature-btn.tuc-active,
.tuc-feature-btn[aria-pressed="true"] {
    border-color: var(--tuc-widget-color);
    background:   var(--tuc-widget-color);
    color:        #fff;
}

.tuc-feature-btn.tuc-active .tuc-feat-icon svg,
.tuc-feature-btn[aria-pressed="true"] .tuc-feat-icon svg { fill: #fff; }

.tuc-feature-btn:focus-visible { outline: 2px solid var(--tuc-widget-color); outline-offset: 2px; }

.tuc-feat-icon {
    width:  32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuc-feat-icon svg {
    width:  22px;
    height: 22px;
    fill:   #374151;
}

.tuc-feat-label {
    font-size: 12px;
    font-weight: 500;
}

/* Footer */
.tuc-panel-footer {
    background:    var(--tuc-widget-color);
    color:         #fff;
    padding:       8px 14px;
    text-align:    center;
    font-size:     11px;
    opacity:       .9;
    flex-shrink:   0;
}

/* ── Applied feature overrides ──────────────────────────────────────────── */

/* Highlight links */
body.tuc-highlight-links a {
    background: #ff0 !important;
    color:      #000 !important;
    outline:    2px solid #000 !important;
    text-decoration: underline !important;
}

/* Outline focus */
body.tuc-outline-focus *:focus {
    outline: 3px solid var(--tuc-widget-color) !important;
    outline-offset: 2px !important;
}

/* High contrast */
body.tuc-high-contrast {
    filter: contrast(150%) !important;
}

/* ── Reading mask ───────────────────────────────────────────────────────── */
.tuc-reading-mask-el {
    display:          none;
    position:         fixed;
    left:             0;
    right:            0;
    width:            100%;
    height:           60px;
    background:       rgba(0,0,0,.3);
    pointer-events:   none;
    z-index:          var(--tuc-z);
    border-top:       2px solid rgba(255,200,0,.7);
    border-bottom:    2px solid rgba(255,200,0,.7);
    border-radius:    4px;
}

/* ── Page structure overlay ─────────────────────────────────────────────── */
.tuc-page-structure-overlay {
    display:     none;
    position:    fixed;
    top:         70px;
    left:        16px;
    width:       280px;
    max-height:  80vh;
    background:  #fff;
    border:      2px solid var(--tuc-widget-color);
    border-radius: 10px;
    box-shadow:  0 6px 24px rgba(0,0,0,.2);
    overflow:    hidden;
    z-index:     var(--tuc-z);
    padding:     12px;
}

.tuc-structure-close {
    position:      absolute;
    top:           8px;
    right:         10px;
    background:    transparent;
    border:        none;
    font-size:     20px;
    cursor:        pointer;
    color:         #374151;
    line-height:   1;
    padding:       0;
}

.tuc-structure-content { overflow-y: auto; max-height: calc(80vh - 40px); margin-top: 6px; }

.tuc-structure-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tuc-structure-list li { padding: 4px 0; border-bottom: 1px solid #f3f4f6; }
.tuc-structure-list a  { color: #1d4ed8; text-decoration: none; font-size: 13px; }
.tuc-structure-list a:hover { text-decoration: underline; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tuc-widget-panel { width: calc(100vw - 24px); right: 12px; left: 12px; }
    .tuc-widget-pos-bottomleft .tuc-widget-panel { left: 12px; right: 12px; }
    .tuc-btn-label { display: none; }
    .tuc-widget-btn { padding: 0 14px; }
}

/* ── Forced colours ─────────────────────────────────────────────────────── */
@media (forced-colors: active) {
    .tuc-widget-btn        { border: 2px solid ButtonText; }
    .tuc-feature-btn       { border: 2px solid ButtonText; }
    .tuc-feature-btn.tuc-active { forced-color-adjust: none; }
}