﻿/* ====== Toolbar container (avval yashirin) ====== */
.accessibility-toolbar {
    position: fixed;
    top: 80px;
    left: -280px; /* Yashirin bo‘lib turadi */
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 250px;
    max-width: 90%;
    z-index: 9999;
    font-family: sans-serif;
    transition: left 0.4s ease;
}

/* Toolbar ochilganda */
.accessibility-toolbar.active {
    left: 20px;
}

.toolbar-card {
    background: #f9fafb;
    padding: 10px;
    border-radius: 8px;
}

.toolbar-views {
    display: flex;
    gap: 10px;
}

.toolbar-views button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.3s ease;
}

/* Tugmalar ranglari va ikonkalari */
.toolbar-views .blue   { color: #0d6efd; background: #e7f1ff; }
.toolbar-views .gray   { color: #6b7280; background: #f3f4f6; }
.toolbar-views .black  { color: #fff; background: #111; }
.toolbar-views .none   { 
    color: #111; 
    background: #fff; 
    border: 1px solid #ddd; 
    background-image: url('../icons/no-photo.png'); 
    background-size: 20px 20px; 
    background-repeat: no-repeat; 
    background-position: center; 
}

.toolbar-views button:hover {
    transform: scale(1.15);
}

/* ====== Tema rejimlari ====== */

/* === Kulrang tema === */
body.theme-gray,
body.theme-gray header,
body.theme-gray footer,
body.theme-gray section,
body.theme-gray article,
body.theme-gray .card,
body.theme-gray .widget {
    background-color: #f3f4f6 !important;
    color: #111 !important;
}
body.theme-gray a,
body.theme-gray button,
body.theme-gray input,
body.theme-gray select,
body.theme-gray textarea {
    background-color: #e5e7eb !important;
    color: #111 !important;
}

/* === Qora tema === */
body.theme-black,
body.theme-black header,
body.theme-black footer,
body.theme-black section,
body.theme-black article,
body.theme-black .card,
body.theme-black .widget {
    background-color: #000 !important;
    color: #fff !important;
}
body.theme-black a,
body.theme-black button,
body.theme-black input,
body.theme-black select,
body.theme-black textarea {
    background-color: #111 !important;
    color: #fff !important;
}

/* === Rasmsiz tema === */
body.theme-none img { 
    display: none !important; 
}
