.aw-widget-container {
    --aw-primary-color: #757575;     /* Основний колір: середньо-сірий */
    --aw-primary-hover: #616161;     /* Основний колір при наведенні: трохи темніше сірий */
    --aw-primary-text: #ffffff;     /* Текст на основному кольорі: білий */
    --aw-panel-bg: #e0e0e0;         /* Фон панелі: світло-сірий */
    --aw-card-bg: #f5f5f5;          /* Фон картки: дуже світло-сірий */
    --aw-card-bg-active: #c5c5c5;   /* Фон активної картки: трохи темніше сірий для виділення */
    --aw-card-border: #bdbdbd;      /* Межа картки: сірий */
    --aw-text-color: #424242;       /* Основний колір тексту: темно-сірий */
    --aw-subtle-text-color: #757575; /* Ненав'язливий колір тексту: середньо-сірий */
    --aw-title-color: #212121;      /* Колір заголовка: дуже темно-сірий, майже чорний */
}

.aw-widget-container, .aw-widget-container * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal !important; line-height: normal !important; }

.aw-widget-button { 
    position: fixed !important; 
    bottom: 70px !important; 
    left: 20px !important; 
    width: 55px !important; 
    height: 55px !important; 
    border-radius: 50% !important; 
    border: 2px solid var(--aw-primary-text) !important; 
    cursor: pointer !important; 
    z-index: 2147483647 !important; 
    transition: all 0.3s ease !important; 
    background-color: var(--aw-primary-color) !important; 
    background-image: url('https://ahent.ua/accessibility/icons/toggle-eye.svg') !important; 
    background-size: 55% !important; 
    background-position: center !important; 
    background-repeat: no-repeat !important; 
    box-shadow: 0 0 0 4px rgba(136, 136, 136, 0.5) !important;
    display: block !important;
}
.aw-widget-button.is-hidden { opacity: 0 !important; transform: scale(0.7) !important; pointer-events: none !important; }

.aw-panel { 
    position: fixed !important; 
    left: 20px !important; 
    bottom: 20px !important; 
    width: 420px !important; 
    max-height: 90vh !important; 
    overflow-y: auto !important; 
    overflow-x: hidden !important; 
    background-color: var(--aw-panel-bg) !important; 
    border-radius: 12px !important; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; 
    z-index: 2147483647 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    opacity: 0 !important; 
    transform: translateX(-120%) !important; 
    transition: all 0.3s ease !important; 
    pointer-events: none !important;
}
.aw-panel.aw-active { opacity: 1 !important; transform: translateX(0) !important; pointer-events: auto !important; }
.aw-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #ddd; flex-shrink: 0; }
.aw-panel-header h3 { margin: 0; font-size: 18px; color: var(--aw-title-color); font-weight: 600; }
.aw-panel-close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--aw-subtle-text-color); padding: 0 5px; }
.aw-panel-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; flex-grow: 1; }
.aw-control-group-title { font-size: 13px; color: #666; margin: 0 0 10px; font-weight: bold; text-transform: uppercase; }
.aw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aw-card { background: var(--aw-card-bg); border: 1px solid var(--aw-card-border); border-radius: 8px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; transition: all 0.2s ease; text-align: center; padding: 8px; }
.aw-card.aw-active { border-color: var(--aw-primary-color); background-color: var(--aw-card-bg-active); }
.aw-card.aw-active::before { content: ''; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--aw-primary-color); }
.aw-card:hover { background-color: var(--aw-primary-color); border-color: var(--aw-primary-color); color: var(--aw-primary-text); }
.aw-card:hover .aw-card-label, .aw-card:hover .aw-card-stepper-label { color: var(--aw-primary-text); }
.aw-card:hover .aw-card-icon { filter: brightness(0) saturate(100%) invert(100%); }
.aw-card-icon { width: 28px; height: 28px; margin-bottom: 8px; transition: filter 0.2s ease; opacity: 0.85; object-fit: contain; }
.aw-card-stepper .aw-card-icon { width: 36px; height: 36px; margin-bottom: 4px; }
.aw-card-label { font-size: 12px; color: var(--aw-text-color); font-weight: 500; }
.aw-card-stepper { justify-content: space-between; padding: 8px; }
.aw-card-stepper-label { font-size: 12px; color: var(--aw-text-color); font-weight: 500; margin-top: 4px; }
.aw-stepper-controls { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
.aw-stepper-controls button { background: #e0e0e0; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; font-weight: bold; cursor: pointer; color: var(--aw-text-color); line-height: 30px; transition: all 0.2s ease; }
.aw-card:hover .aw-stepper-controls button { background: var(--aw-primary-hover); color: var(--aw-primary-text); }
.aw-stepper-controls button:active { transform: scale(0.95); }
.aw-panel-footer { padding: 20px; border-top: 1px solid #ddd; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.aw-footer-btn { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid var(--aw-card-border); background: var(--aw-card-bg); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; }
.aw-footer-btn.primary { background-color: var(--aw-primary-color); color: var(--aw-primary-text); border-color: var(--aw-primary-color); }

/* Мобільна версія */
@media (max-width: 768px) { 
    .aw-panel { 
        width: 100%; 
        max-width: 100%;
        height: auto;
        max-height: 85vh;
        left: 0;
        bottom: 0;
        transform: translateY(100%); 
        border-radius: 16px 16px 0 0; 
    } 
    .aw-panel.aw-active { 
        transform: translateY(0); 
    } 
    .aw-widget-button { 
        left: auto; 
        right: 20px; 
    }
    
    /* 2 колонки на мобільних */
    .aw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* Менше padding для мобільних */
    .aw-panel-body {
        padding: 15px;
        gap: 15px;
    }
    
    .aw-panel-header {
        padding: 12px 15px;
    }
    
    .aw-panel-footer {
        padding: 15px;
    }
    
    /* Логотип та заголовок на мобільних */
    .aw-logo {
        width: 35px;
        height: 35px;
    }
    
    .aw-header-text h3 {
        font-size: 16px;
    }
    
    .aw-header-text p {
        font-size: 12px;
    }
    
    .aw-logo-container {
        gap: 10px;
    }
    
    /* Кнопка закриття знизу на мобільних */
    .aw-panel-close-mobile {
        display: block !important;
        width: 100%;
        padding: 14px;
        background: var(--aw-primary-color);
        color: var(--aw-primary-text);
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 5px;
    }
    
    /* Кнопки stepper ближче одна до одної на мобільних */
    .aw-stepper-controls {
        gap: 6px;
    }
}

/* Кнопка закриття для десктопу - сховати */
.aw-panel-close-mobile {
    display: none;
}

@media (max-width: 768px) {
    .aw-panel-close-mobile {
        display: block !important;
    }
}

html.aw-high-contrast, html.aw-high-contrast body { background-color: #000 !important; }
html.aw-high-contrast body *:not(.aw-widget-container):not(.aw-widget-container *) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; }
html.aw-night-mode, html.aw-night-mode body { background-color: #121212 !important; }
html.aw-night-mode body *:not(.aw-widget-container):not(.aw-widget-container *) { background-color: transparent !important; color: #E0E0E0 !important; border-color: #555 !important; }
html.aw-negative-contrast { filter: invert(1); }
html.aw-negative-contrast .aw-widget-container, 
html.aw-negative-contrast .aw-widget-button,
html.aw-negative-contrast .aw-panel { filter: invert(1); }
html.aw-negative-contrast .aw-panel,
html.aw-negative-contrast .aw-widget-button {
    position: fixed !important;
}
html.aw-desaturate { filter: saturate(50%); }
html.aw-desaturate .aw-widget-container { filter: saturate(200%); }
html.aw-links-highlight a:not(.aw-widget-container *) { outline: 2px solid orange !important; background-color: rgba(255, 255, 0, 0.3) !important; text-decoration: none !important; }
html.aw-hide-images img:not(.aw-widget-container *), html.aw-hide-images video:not(.aw-widget-container *), html.aw-hide-images svg:not(.aw-widget-container *), html.aw-hide-images [style*="background-image"]:not(.aw-widget-container *) { opacity: 0 !important; visibility: hidden !important; }
html.aw-big-cursor, html.aw-big-cursor body, html.aw-big-cursor a, html.aw-big-cursor button { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="rgba(0,0,0,0.2)" stroke="white" stroke-width="2"/><circle cx="16" cy="16" r="14" fill="none" stroke="black" stroke-width="1"/></svg>') 16 16, auto !important; }
html.aw-readable-font body *:not(.aw-widget-container):not(.aw-widget-container *) { font-family: Verdana, sans-serif !important; }
html.aw-stop-animations body *:not(.aw-widget-container):not(.aw-widget-container *) { animation: none !important; transition: none !important; }
html.aw-visible-focus body *:focus:not(.aw-widget-container *) { outline: 3px solid var(--aw-primary-color) !important; }
html.aw-headers-highlight h1:not(.aw-widget-container *), html.aw-headers-highlight h2:not(.aw-widget-container *), html.aw-headers-highlight h3:not(.aw-widget-container *){ background-color: rgba(255, 255, 0, 0.3) !important; border-left: 3px solid orange !important; }
html.aw-font-size-active body { font-size: calc(1em + var(--aw-font-size-mod, 0px)) !important; } 
html.aw-spacing-active body *:not(.aw-widget-container):not(.aw-widget-container *) { letter-spacing: var(--aw-letter-spacing-mod, inherit) !important; line-height: calc(1.5 + var(--aw-line-height-mod, 0)) !important; }

/* Додані стилі для логотипу та заголовка */
.aw-logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.aw-logo {
    width: 45px;
    height: 45px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.aw-header-text h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.aw-header-text p {
    margin: 0;
    font-size: 14px;
    color: var(--aw-subtle-text-color);
}

html.aw-hide-images * {
    background-image: none !important;
}