/* ==========================================================================
   BPH Accessibility — Public Stylesheet
   Version: 1.0.0
   ========================================================================== */

/* ── SVG reset inside widget ─────────────────────────────────────────────── */
#bpha-widget svg {
    display:   inline-block !important;
    overflow:  visible      !important;
    flex-shrink: 0          !important;
}

/* ── Trigger button ──────────────────────────────────────────────────────── */
#bpha-trigger {
    position:         fixed;
    bottom:           80px;
    z-index:          99990;
    width:            52px;
    height:           52px;
    border-radius:    50%;
    border:           none;
    cursor:           pointer;
    background:       linear-gradient(135deg, #6C3FC5, #2176d2);
    color:            #fff;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 4px 16px rgba(108, 63, 197, 0.35);
    transition:       transform 0.18s ease, box-shadow 0.18s ease;
    padding:          0;
    line-height:      1;
}

#bpha-trigger svg {
    width:      26px !important;
    height:     26px !important;
    max-width:  26px !important;
    max-height: 26px !important;
}

#bpha-trigger:hover,
#bpha-trigger:focus-visible {
    transform:  scale(1.07);
    box-shadow: 0 6px 22px rgba(108, 63, 197, 0.45);
    outline:    3px solid #fff;
    outline-offset: 2px;
}

/* ── Trigger: horizontal side ────────────────────────────────────────────── */
.bpha-pos-right-top    #bpha-trigger,
.bpha-pos-right-middle #bpha-trigger,
.bpha-pos-right-bottom #bpha-trigger { right: 20px; }

.bpha-pos-left-top    #bpha-trigger,
.bpha-pos-left-middle #bpha-trigger,
.bpha-pos-left-bottom #bpha-trigger  { left: 20px; }

/* ── Trigger: vertical placement ─────────────────────────────────────────── */
.bpha-pos-right-top    #bpha-trigger,
.bpha-pos-left-top     #bpha-trigger  { top: 72px;   bottom: auto; }

.bpha-pos-right-middle #bpha-trigger,
.bpha-pos-left-middle  #bpha-trigger  { top: 50%;    bottom: auto; transform: translateY(-50%); }

.bpha-pos-right-middle #bpha-trigger:hover,
.bpha-pos-left-middle  #bpha-trigger:hover,
.bpha-pos-right-middle #bpha-trigger:focus-visible,
.bpha-pos-left-middle  #bpha-trigger:focus-visible  { transform: translateY(-50%) scale(1.07); }

.bpha-pos-right-bottom #bpha-trigger,
.bpha-pos-left-bottom  #bpha-trigger  { bottom: 28px; top: auto; }

/* ── Panel ───────────────────────────────────────────────────────────────── */
#bpha-panel {
    position:       fixed;
    width:          min(300px, 92vw);
    background:     #fff;
    border-radius:  16px;
    box-shadow:     0 8px 40px rgba(0, 0, 0, 0.18);
    z-index:        99991;
    display:        none;
    flex-direction: column;
    overflow:       hidden;
    font-family:    'League Spartan', Arial, sans-serif;
    max-height:     85vh;
    overflow-y:     auto;
}

/* Panel: horizontal side */
.bpha-pos-right-top    #bpha-panel,
.bpha-pos-right-middle #bpha-panel,
.bpha-pos-right-bottom #bpha-panel { right: 80px; left: auto; }

.bpha-pos-left-top    #bpha-panel,
.bpha-pos-left-middle #bpha-panel,
.bpha-pos-left-bottom #bpha-panel  { left: 80px; right: auto; }

/* Panel: vertical placement — open upward from bottom, downward from top, centred from middle */
.bpha-pos-right-bottom #bpha-panel,
.bpha-pos-left-bottom  #bpha-panel  { bottom: 28px; top: auto; }

.bpha-pos-right-top #bpha-panel,
.bpha-pos-left-top  #bpha-panel     { top: 72px; bottom: auto; }

.bpha-pos-right-middle #bpha-panel,
.bpha-pos-left-middle  #bpha-panel  { top: 50%; transform: translateY(-50%); bottom: auto; }

#bpha-panel.open {
    display: flex;
}

/* ── Panel header ────────────────────────────────────────────────────────── */
.bpha-panel-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         13px 14px 12px;
    background:      linear-gradient(135deg, #6C3FC5, #2176d2);
    border-radius:   16px 16px 0 0;
}

.bpha-panel-title {
    color:       #fff;
    font-family: 'League Spartan', Arial, sans-serif;
    font-size:   15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.bpha-panel-close {
    background:  transparent;
    border:      none;
    color:       #fff;
    cursor:      pointer;
    padding:     2px;
    display:     flex;
    align-items: center;
    border-radius: 50%;
    transition:  background 0.15s;
    line-height: 1;
}

.bpha-panel-close svg {
    width:  18px !important;
    height: 18px !important;
}

.bpha-panel-close:hover,
.bpha-panel-close:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    outline:    none;
}

/* ── Panel body ──────────────────────────────────────────────────────────── */
.bpha-panel-body {
    padding:        12px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ── Option buttons ──────────────────────────────────────────────────────── */
.bpha-opt-btn {
    width:          100%;
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        11px 14px;
    border-radius:  10px;
    background:     #f6f7f7;
    border:         2px solid transparent;
    cursor:         pointer;
    font-family:    'League Spartan', Arial, sans-serif;
    font-size:      13px;
    font-weight:    600;
    color:          #333;
    text-align:     left;
    transition:     background 0.15s, border-color 0.15s, color 0.15s;
    line-height:    1.3;
}

.bpha-opt-btn svg {
    width:      22px !important;
    height:     22px !important;
    max-width:  22px !important;
    max-height: 22px !important;
    flex-shrink: 0;
}

.bpha-opt-btn:hover,
.bpha-opt-btn:focus-visible {
    background: #ede9f8;
    outline:    none;
}

.bpha-opt-btn.bpha-active {
    background:   #f0ebff;
    border-color: #6C3FC5;
    color:        #6C3FC5;
}

.bpha-opt-label {
    flex: 1;
}

/* ── Text size row ───────────────────────────────────────────────────────── */
.bpha-text-row {
    padding:       11px 14px;
    border-radius: 10px;
    background:    #f6f7f7;
    display:       flex;
    flex-direction: column;
    gap:           8px;
}

.bpha-opt-label-static {
    font-family: 'League Spartan', Arial, sans-serif;
    font-size:   13px;
    font-weight: 600;
    color:       #333;
}

.bpha-text-controls {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.bpha-text-btn {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    border:        none;
    cursor:        pointer;
    background:    linear-gradient(135deg, #6C3FC5, #2176d2);
    color:         #fff;
    font-size:     13px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    opacity 0.15s, transform 0.15s;
    flex-shrink:   0;
    line-height:   1;
    padding:       0;
}

.bpha-text-btn:hover:not(:disabled),
.bpha-text-btn:focus-visible:not(:disabled) {
    opacity:   0.85;
    transform: scale(1.08);
    outline:   2px solid #6C3FC5;
    outline-offset: 2px;
}

.bpha-text-btn:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.bpha-text-indicator {
    flex:        1;
    min-width:   60px;
    text-align:  center;
    font-family: 'League Spartan', Arial, sans-serif;
    font-size:   13px;
    font-weight: 600;
    color:       #555;
}

/* ── Reset button ────────────────────────────────────────────────────────── */
.bpha-reset-btn {
    width:         100%;
    padding:       9px;
    border-radius: 10px;
    border:        2px solid #e0e0e0;
    background:    #fff;
    color:         #888;
    font-family:   'League Spartan', Arial, sans-serif;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    border-color 0.15s, color 0.15s;
    line-height:   1.3;
}

.bpha-reset-btn:hover,
.bpha-reset-btn:focus-visible {
    border-color: #dc3232;
    color:        #dc3232;
    outline:      none;
}

/* ==========================================================================
   Accessibility feature classes applied to the page
   ========================================================================== */

/* ── Contrast ────────────────────────────────────────────────────────────── */
body.bpha-contrast,
body.bpha-contrast * {
    background-color: #000 !important;
    color:            #fff !important;
    border-color:     #fff !important;
}

body.bpha-contrast a {
    color: #ff0 !important;
}

body.bpha-contrast img {
    filter: invert(100%) !important;
}

/* Reset widget itself under contrast mode */
body.bpha-contrast #bpha-trigger {
    background: linear-gradient(135deg, #6C3FC5, #2176d2) !important;
    color:      #fff !important;
    border:     2px solid #fff !important;
}

body.bpha-contrast #bpha-panel {
    background:   #111 !important;
    border-color: #fff !important;
    box-shadow:   0 8px 40px rgba(255, 255, 255, 0.1) !important;
}

body.bpha-contrast .bpha-panel-head {
    background: linear-gradient(135deg, #6C3FC5, #2176d2) !important;
}

body.bpha-contrast .bpha-panel-title,
body.bpha-contrast .bpha-panel-close {
    color: #fff !important;
}

body.bpha-contrast .bpha-opt-btn {
    background:   #1a1a1a !important;
    color:        #fff    !important;
    border-color: #555    !important;
}

body.bpha-contrast .bpha-opt-btn.bpha-active {
    background:   #2a1a4a !important;
    border-color: #9b6df5 !important;
    color:        #c8a8ff !important;
}

body.bpha-contrast .bpha-opt-btn:hover {
    background: #2a2a2a !important;
}

body.bpha-contrast .bpha-text-row {
    background:   #1a1a1a !important;
    border-color: #555    !important;
}

body.bpha-contrast .bpha-opt-label-static,
body.bpha-contrast .bpha-text-indicator {
    color: #fff !important;
}

body.bpha-contrast .bpha-text-btn {
    background: linear-gradient(135deg, #6C3FC5, #2176d2) !important;
    color:      #fff !important;
    border:     none !important;
}

body.bpha-contrast .bpha-reset-btn {
    background:   #1a1a1a !important;
    color:        #ccc    !important;
    border-color: #555    !important;
}

body.bpha-contrast .bpha-reset-btn:hover {
    border-color: #dc3232 !important;
    color:        #ff6b6b !important;
}

/* ── Text Size ───────────────────────────────────────────────────────────── */
html.bpha-text-sm2 { font-size: 12px !important; }
html.bpha-text-sm1 { font-size: 14px !important; }
/* level 0 = default, no class */
html.bpha-text-lg1 { font-size: 18px !important; }
html.bpha-text-lg2 { font-size: 20px !important; }

/* ── Readable Font ───────────────────────────────────────────────────────── */
body.bpha-readable-font,
body.bpha-readable-font * {
    font-family:    Arial, Verdana, sans-serif !important;
    letter-spacing: 0.03em !important;
    word-spacing:   0.1em  !important;
}

/* Keep widget font unaffected */
body.bpha-readable-font #bpha-widget,
body.bpha-readable-font #bpha-widget * {
    font-family: 'League Spartan', Arial, sans-serif !important;
}

/* ── Mark Titles ─────────────────────────────────────────────────────────── */
body.bpha-mark-titles h1,
body.bpha-mark-titles h2,
body.bpha-mark-titles h3,
body.bpha-mark-titles h4,
body.bpha-mark-titles h5,
body.bpha-mark-titles h6 {
    text-decoration:       underline         !important;
    text-underline-offset: 4px               !important;
    background:            rgba(108, 63, 197, 0.08) !important;
    padding:               2px 4px           !important;
    border-radius:         3px               !important;
}

/* ── Highlight Links ─────────────────────────────────────────────────────── */
body.bpha-highlight-links a,
body.bpha-highlight-links button:not(#bpha-trigger):not(.bpha-opt-btn):not(.bpha-text-btn):not(.bpha-reset-btn):not(.bpha-panel-close) {
    outline:        2px solid #6C3FC5 !important;
    outline-offset: 2px               !important;
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    #bpha-widget { display: none !important; }
}