/*
NEVERBOTS - Widget de Accesibilitate
Design Modern și Profesional
*/

/* Reset & Container */
#neverbots-accessibility-widget {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: fixed;
    z-index: 999999;
    top: 20%;
    right: 0;
}

/* Trigger Button */
#neverbots-trigger {
    background: #0073aa;
    /* WordPress default blue, can be changed */
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    transition: all 0.3s ease;
    border: none;
}

#neverbots-trigger:hover,
#neverbots-trigger:focus {
    width: 60px;
    background: #005177;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* Main Panel */
#neverbots-panel {
    position: fixed;
    top: 20px;
    right: -350px;
    /* Hidden via CSStransform usually better but right works */
    width: 340px;
    height: calc(100vh - 40px);
    background: #fff;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px 0 0 12px;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#neverbots-panel.open {
    right: 0;
}

/* Header */
.nb-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nb-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 700;
}

.nb-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

/* Content Area */
.nb-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Feature Sections */
.nb-section {
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.nb-section:last-child {
    border-bottom: none;
}

.nb-section-title {
    font-size: 14px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Grid for buttons */
.nb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columns */
    gap: 10px;
}

.nb-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Feature Buttons */
.nb-btn {
    background: #f4f6f8;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 12px 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 13px;
    min-height: 80px;
}

.nb-btn:hover {
    background: #eef1f5;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.nb-btn.active {
    background: #e6f7ff;
    /* Light blue */
    border-color: #1890ff;
    color: #0050b3;
}

.nb-btn svg,
.nb-btn i {
    font-size: 24px;
    margin-bottom: 8px;
    color: #595959;
}

.nb-btn.active svg,
.nb-btn.active i {
    color: #1890ff;
}

/* Reset Button */
.nb-reset {
    width: 100%;
    padding: 12px;
    background: #ff4d4f;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}

.nb-reset:hover {
    background: #ff7875;
}

/* Footer branding */
.nb-footer {
    padding: 10px;
    text-align: center;
    font-size: 11px;
    color: #aaa;
    border-top: 1px solid #eee;
    background: #fcfcfc;
}

/* --- Accessibility Modifications Styles --- */

/* 1. Contrast & Color Schemes */
html.nb-contrast-dark {
    filter: invert(100%) hue-rotate(180deg) !important;
}

html.nb-contrast-dark img,
html.nb-contrast-dark video {
    filter: invert(100%) hue-rotate(180deg) !important;
}

html.nb-contrast-light {
    filter: brightness(1.2) !important;
}

html.nb-contrast-high {
    filter: contrast(150%) !important;
}

html.nb-saturation-high {
    filter: saturate(200%) !important;
}

html.nb-saturation-low {
    filter: saturate(50%) !important;
}

html.nb-monochrome {
    filter: grayscale(100%) !important;
}

/* 2. Text Adjustments */
html.nb-fontsize-large {
    font-size: 120% !important;
}

html.nb-fontsize-large body,
html.nb-fontsize-large p,
html.nb-fontsize-large a,
html.nb-fontsize-large li,
html.nb-fontsize-large span {
    font-size: 1.1em !important;
    /* Compounded slightly with html scaling, keeps hierarchy mostly intact */
    line-height: 1.5 !important;
}

html.nb-fontsize-xlarge {
    font-size: 150% !important;
}

html.nb-fontsize-xlarge body,
html.nb-fontsize-xlarge p,
html.nb-fontsize-xlarge a,
html.nb-fontsize-xlarge li,
html.nb-fontsize-large span {
    font-size: 1.3em !important;
    line-height: 1.5 !important;
}

/* Prevent recursive explosion in complex layouts but enforce minimums */
html.nb-fontsize-large h1,
html.nb-fontsize-large h2,
html.nb-fontsize-large h3 {
    font-size: 1.2em;
}

html.nb-fontsize-xlarge h1,
html.nb-fontsize-xlarge h2,
html.nb-fontsize-xlarge h3 {
    font-size: 1.5em;
}

html.nb-dyslexia * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Arial', sans-serif !important;
}

html.nb-spacing-medium * {
    letter-spacing: 2px !important;
    word-spacing: 4px !important;
}

html.nb-lineheight-medium * {
    line-height: 2 !important;
}

html.nb-align-left * {
    text-align: left !important;
}

html.nb-links-underline a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: bold;
}

html.nb-headers-highlight h1,
html.nb-headers-highlight h2,
html.nb-headers-highlight h3,
html.nb-headers-highlight h4,
html.nb-headers-highlight h5,
html.nb-headers-highlight h6 {
    background: #ffeb3b !important;
    /* Yellow highlight */
    color: #000 !important;
    padding: 2px 5px;
    width: fit-content;
}

/* 3. Cursor & Guides */
html.nb-cursor-big,
html.nb-cursor-big * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 100 100" style="fill:black;font-size:24px;"><text y="50%">👆</text></svg>') 16 0, auto !important;
    /* Simple inline big cursor or use a real image */
}

#nb-reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 300px;
    /* Height of the highlight strip */
    pointer-events: none;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.5);
    /* We want a clear strip in the middle. We can use a border or giant box shadow. */
    /* Alternative: A bar that follows mouse, or a screen overlay with a transparent hole. */
    /* Let's implement a Reading Bar (Ruler) */
    height: 10px;
    background: rgba(255, 255, 0, 0.5);
    border-bottom: 2px solid red;
    display: none;
    transform: translateY(-50%);
}

html.nb-reading-guide-active #nb-reading-guide {
    display: block;
}

/* OpenDyslexic Font Face - Using a CDN or local if possible. For now assuming system fallback or we need to add @font-face */
/* Ideally we would download the font. Using Comic Sans MS as safe fallback for "Dyslexia-like" readability in some contexts */