/* ========================================
   НОВИЙ CSS СТИЛЬ ДЛЯ ФОРУМУ "Форум про сонячні панелі"
   ======================================== */

/* ===== SVG ФОНОВИЙ МАЛЮНОК В BASE64 ===== */
/* Динамічний SVG фон з мотивами сонячних панелей, сонця та екологічної енергії */

/* ===== ОСНОВНІ СТИЛІ BODY ===== */
body {
    background-color: #e8f4f8;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900"><defs><radialGradient id="sunGrad" cx="35%%" cy="35%%"><stop offset="0%%" style="stop-color:%23ffeb3b;stop-opacity:0.4" /><stop offset="100%%" style="stop-color:%23ffc107;stop-opacity:0.1" /></radialGradient><linearGradient id="skyGrad" x1="0%%" y1="0%%" x2="0%%" y2="100%%"><stop offset="0%%" style="stop-color:%23e3f2fd;stop-opacity:1" /><stop offset="100%%" style="stop-color:%23e8f4f8;stop-opacity:1" /></linearGradient></defs><rect width="1400" height="900" fill="url(%23skyGrad)"/><circle cx="200" cy="150" r="90" fill="url(%23sunGrad)" opacity="0.6"/><circle cx="1200" cy="200" r="70" fill="url(%23sunGrad)" opacity="0.4"/><g opacity="0.12"><rect x="150" y="350" width="200" height="120" fill="%230277bd" stroke="%231976d2" stroke-width="2"/><line x1="160" y1="370" x2="340" y2="370" stroke="%23ffc107" stroke-width="2"/><line x1="160" y1="395" x2="340" y2="395" stroke="%23ffc107" stroke-width="2"/><line x1="160" y1="420" x2="340" y2="420" stroke="%23ffc107" stroke-width="2"/><line x1="160" y1="445" x2="340" y2="445" stroke="%23ffc107" stroke-width="2"/><rect x="1050" y="480" width="220" height="140" fill="%230277bd" stroke="%231976d2" stroke-width="2"/><line x1="1065" y1="510" x2="1255" y2="510" stroke="%23ffc107" stroke-width="2"/><line x1="1065" y1="540" x2="1255" y2="540" stroke="%23ffc107" stroke-width="2"/><line x1="1065" y1="570" x2="1255" y2="570" stroke="%23ffc107" stroke-width="2"/><line x1="1065" y1="600" x2="1255" y2="600" stroke="%23ffc107" stroke-width="2"/></g><g opacity="0.15"><path d="M 300 700 L 320 750 L 340 700 Z" fill="%2366bb6a" stroke="%23388e3c" stroke-width="1.5"/><path d="M 500 680 L 520 740 L 540 680 Z" fill="%2366bb6a" stroke="%23388e3c" stroke-width="1.5"/><path d="M 1100 720 L 1120 770 L 1140 720 Z" fill="%2366bb6a" stroke="%23388e3c" stroke-width="1.5"/></g><g opacity="0.08"><path d="M 400 250 Q 450 200 500 250" fill="none" stroke="%23ffc107" stroke-width="3"/><path d="M 800 300 Q 850 250 900 300" fill="none" stroke="%23ffc107" stroke-width="2.5"/><path d="M 1150 150 Q 1200 100 1250 150" fill="none" stroke="%23ffeb3b" stroke-width="2"/></g></svg>');
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    scrollbar-arrow-color: #0277bd;
    scrollbar-face-color: #e3f2fd;
    scrollbar-track-color: #e8f4f8;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #b3e5fc;
    scrollbar-shadow-color: #81d4fa;
    scrollbar-darkshadow-color: #4fc3f7;
}

/* ===== ОСНОВНІ ЕЛЕМЕНТИ ===== */
font, th, td, p {
    font-family: 'Segoe UI', 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    letter-spacing: 0.2px;
}

/* ===== ПОСИЛАННЯ ===== */
a {
    text-decoration: none;
    color: #0277bd;
    font-weight: 500;
    transition: all 0.3s ease;
}

a:visited {
    text-decoration: none;
    color: #01579b;
}

a:hover, a:active {
    text-decoration: underline;
    color: #ffc107;
    font-weight: 600;
}

/* ===== ГОРИЗОНТАЛЬНА ЛІНІЯ ===== */
hr {
    height: 0px;
    border: solid 2px #81d4fa;
    border-top-width: 2px;
    margin: 12px 0;
    opacity: 0.7;
}

/* ===== ЗОБРАЖЕННЯ ===== */
img {
    border: 0px;
    max-width: 100%;
    height: auto;
}

/* ===== ФОРМИ ===== */
form {
    display: inline;
    margin: 0;
}

/* ========== ТАБЛИЦІ ========== */

/* Основна таблиця форуму */
table.forumSignal-x7 {
    background-color: #ffffff;
    border: 2px solid #81d4fa;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(2, 119, 189, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

table.forumSignal-x7:hover {
    box-shadow: 0 6px 16px rgba(2, 119, 189, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    border-color: #4fc3f7;
}

/* Навігаційна таблиця */
table.navHeader {
    background-color: #e3f2fd;
    background-image: none;
    border: 2px solid #81d4fa;
    border-radius: 6px;
    height: 28px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(2, 119, 189, 0.1);
}

table.navHeader:hover {
    border: 2px solid #4fc3f7;
    background-color: #b3e5fc;
}

/* ===== РЯДКИ ТАБЛИЦІ ===== */
.row, .partOne, .partTwo {
    background-color: #ffffff;
    border-bottom: 1px solid #e1f5fe;
    transition: background-color 0.2s ease;
}

.row:hover, .partOne:hover, .partTwo:hover {
    background-color: #f5fbff;
}

.row_band3 {
    background-color: #e3f2fd;
    border-bottom: 1px solid #bbdefb;
}

.row_band3:hover {
    background-color: #bbdefb;
}

/* ===== ЗАГОЛОВКИ ТАБЛИЦІ ===== */
th, td.th {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    background-color: #0277bd;
    background-image: linear-gradient(to bottom, #0288d1, #01579b);
    height: 28px;
    padding: 6px 12px;
    border: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* ===== КАТЕГОРІЙНІ ЗАГОЛОВКИ ===== */
td.cat, td.catCaption, td.sectionLeftCorner, td.rowpic, td.catSides, td.groupRightContainer, td.catBottom {
    color: #01579b;
    font-size: 13px;
    font-weight: bold;
    background-color: #b3e5fc;
    background-image: linear-gradient(to bottom, #e1f5fe, #b3e5fc);
    height: 26px;
    padding: 6px 12px;
    border: 2px solid #81d4fa;
    border-radius: 3px;
}

/* ===== РОЗМІРИ ШРИФТУ ===== */
.gen {
    font-size: 14px;
    color: #333333;
}

.textRegular {
    font-size: 13px;
    color: #555555;
}

.textFine {
    font-size: 12px;
    color: #777777;
}

/* ===== НАВІГАЦІЙНІ СТИЛІ ===== */
.navHeader {
    font-weight: bold;
    font-size: 13px;
    color: #0277bd;
}

.navHeader a, .navHeader a:visited {
    text-decoration: none;
    color: #0277bd;
    font-weight: 500;
}

.navHeader a:hover, .navHeader a:active {
    text-decoration: underline;
    color: #ffc107;
}

/* ===== ПОСИЛАННЯ ФОРУМУ ===== */
.forum_href {
    font-weight: bold;
    font-size: 14px;
    color: #01579b;
}

a.forum_href, a.forum_href:visited {
    text-decoration: none;
    color: #01579b;
    transition: all 0.3s ease;
}

a.forum_href:hover, a.forum_href:active {
    text-decoration: underline;
    color: #ffc107;
    font-size: 14.3px;
}

/* ===== ФОРМИ ВВОДУ ===== */
input {
    text-indent: 2px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

input, textarea, select {
    color: #333333;
    font: normal 14px 'Segoe UI', Verdana, Arial, sans-serif;
}

input.post, textarea.post, select {
    background-color: #ffffff;
    border: 2px solid #81d4fa;
    color: #333333;
    padding: 6px 8px;
}

input.post:focus, textarea.post:focus, select:focus {
    border-color: #0277bd;
    background-color: #e3f2fd;
    box-shadow: 0 0 6px rgba(2, 119, 189, 0.3);
}

input.post {
    height: 24px;
}

/* ===== КНОПКИ ===== */
input.buttonActionLink {
    background-color: #0277bd;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    border: none;
    border-radius: 4px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(2, 119, 189, 0.25);
}

input.buttonActionLink:hover {
    background-color: #01579b;
    box-shadow: 0 4px 10px rgba(2, 119, 189, 0.35);
    transform: translateY(-1px);
}

input.buttonActionLink:active {
    transform: translateY(0px);
    box-shadow: 0 1px 4px rgba(2, 119, 189, 0.2);
}

/* ===== ОСНОВНІ І ЛЕГШІ ОПЦІЇ ===== */
input.main_optionbar {
    background-color: #ffffff;
    font-weight: bold;
    border: 2px solid #0277bd;
    color: #0277bd;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input.main_optionbar:hover {
    background-color: #e3f2fd;
    border-color: #01579b;
}

input.liteoption {
    background-color: #ffffff;
    font-weight: normal;
    border: 1px solid #81d4fa;
    color: #555555;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input.liteoption:hover {
    background-color: #e3f2fd;
    border-color: #0277bd;
}

/* ===== SELECT ОПЦІЇ ===== */
select optgroup {
    background-color: #b3e5fc;
    color: #01579b;
    font-weight: bold;
}

select option, select optgroup option {
    background-color: #ffffff;
    color: #333333;
}

select option:checked {
    background-color: #0277bd;
    color: #ffffff;
}

/* ===== КОД ===== */
.code_bannerbox {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #01579b;
    background-color: #e3f2fd;
    border: 2px solid #81d4fa;
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
    line-height: 1.5;
}

/* ===== ЦИТАТИ ===== */
.quote_matrixbox {
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    font-size: 13px;
    color: #1565c0;
    line-height: 1.6;
    background-color: #e3f2fd;
    border-left: 4px solid #ffc107;
    border: 2px solid #81d4fa;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 12px;
    margin: 8px 0;
    font-style: italic;
}

/* ===== ТІЛО ПОСТУ ===== */
.commentBodyMain {
    font-size: 14px;
    color: #333333;
    line-height: 1.6;
}

.commentBodyMain a, .commentBodyMain a:visited {
    text-decoration: underline;
    color: #0277bd;
}

.commentBodyMain a:hover, .commentBodyMain a:active {
    text-decoration: underline;
    color: #ffc107;
}

/* ===== ІМЯ КОРИСТУВАЧА ===== */
.member_label {
    font-weight: bold;
    font-size: 13px;
    color: #01579b;
}

.member_label a, .member_label a:visited {
    text-decoration: none;
    color: #01579b;
}

.member_label a:hover, .member_label a:active {
    text-decoration: underline;
    color: #ffc107;
}

/* ===== ДЕТАЛІ ПОСТУ ===== */
.post_attributes {
    color: #888888;
    font-size: 11px;
    line-height: 1.5;
}

/* ===== РЯДОК ПРОСТОРУ ===== */
td.spacerow {
    background-color: #e3f2fd;
    background-image: none;
    height: 4px;
    padding: 0px;
    border: none;
}

/* ===== ЗАГОЛОВКИ КАТЕГОРІЙ ===== */
.catCaptionText {
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #01579b;
    text-transform: uppercase;
}

a.catCaptionText {
    text-decoration: none;
    color: #01579b;
}

a.catCaptionText:hover {
    text-decoration: underline;
    color: #ffc107;
}

/* ===== ОСНОВНІ ЗАГОЛОВКИ ===== */
.maintitle, h1, h2 {
    font-weight: bold;
    font-size: 24px;
    font-family: 'Segoe UI', 'Roboto', Verdana, Arial, sans-serif;
    text-decoration: none;
    line-height: 120%;
    color: #01579b;
    margin: 10px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
}

/* ===== СПЕЦІАЛЬНІ СТИЛІ ДЛЯ WR-FORUM ===== */

/* Кнопки навігації */
.pager_stepbtn a {
    font-family: 'Segoe UI', Verdana, sans-serif;
    padding: 6px 14px;
    text-decoration: none;
    border: 2px solid #0277bd;
    background: linear-gradient(to bottom, #e3f2fd, #b3e5fc);
    color: #01579b;
    font-weight: 600;
    margin: 5px 3px 0 0;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(2, 119, 189, 0.15);
}

.pager_stepbtn a:hover {
    background: linear-gradient(to bottom, #0277bd, #01579b);
    color: #ffffff;
    border-color: #01579b;
    box-shadow: 0 4px 8px rgba(2, 119, 189, 0.25);
    transform: translateY(-2px);
}

/* Фальшива кнопка */
.fakebut {
    border: 2px solid #0277bd;
    font-size: 13px;
    font-weight: bold;
    background-color: #e3f2fd;
    color: #01579b;
    padding: 6px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fakebut:hover {
    background-color: #0277bd;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 119, 189, 0.2);
}

/* QR-CODE */
#qr img {
    width: 35px;
    height: 35px;
    position: fixed;
    right: 15px;
    top: 15px;
    border: 3px solid #0277bd;
    padding: 3px;
    background-color: white;
    border-radius: 6px;
    transition: all 0.4s ease;
    z-index: 99;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(2, 119, 189, 0.2);
}

#qr img:hover {
    width: 240px;
    height: 240px;
    z-index: 100;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(2, 119, 189, 0.3);
    border-color: #ffc107;
}

/* Аватар за замовчуванням */
.guestavatar {
    width: 120px;
    height: 120px;
    text-align: center;
    background: linear-gradient(135deg, #ffeb3b, #ffc107);
    color: #f57f17;
    font-size: 48px;
    font-weight: bold;
    display: table-cell;
    border-radius: 12px;
    position: relative;
    vertical-align: middle;
    border: 3px solid #0277bd;
    box-shadow: 0 6px 12px rgba(2, 119, 189, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Навігаційне МЕНЮ В АДМИНЦІ */
#navHeader8, #navHeader8 ul, #navHeader8 li {
    margin: 0;
    padding: 0;
    border: 0;
}

#navHeader8, #navHeader8 ul {
    background: #e3f2fd;
}

#navHeader8 {
    border-spacing: 0 0;
    position: relative;
    z-index: 50;
    width: 100%;
    border-radius: 6px;
    border: 2px solid #81d4fa;
}

#navHeader8 ul {
    position: absolute;
    display: none;
    border: 2px solid #81d4fa;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(2, 119, 189, 0.2);
}

#navHeader8 td:hover ul {
    display: block;
}

#navHeader8 ul li {
    list-style: none;
}

#navHeader8 .right {
    direction: rtl;
}

#navHeader8 .right ul {
    right: 0;
}

#navHeader8 .right li {
    direction: ltr;
}

#navHeader8 a {
    display: block;
    padding: 8px 0;
    text-align: center;
    text-decoration: none;
    color: #01579b;
    transition: all 0.3s ease;
}

#navHeader8 ul a {
    padding: 8px 18px;
    text-align: left;
}

#navHeader8 td:hover, #navHeader8 li:hover {
    background: #b3e5fc;
    border-radius: 6px;
}

#navHeader8 td {
    text-align: center;
}

#navHeader8 a:hover {
    color: #ffc107;
    font-weight: bold;
}

/* Стиль для блока завантаження */
#cssbar-wrapper {
    width: 300px;
    height: 22px;
    position: absolute;
    left: 50%;
}

#cssbar-border {
    border: 3px solid #0277bd;
    height: 100%;
    width: 100%;
    position: relative;
    left: -50%;
    top: -50%;
    padding: 4px 3px;
    border-radius: 5px;
    background-color: #e3f2fd;
}

#cssbar-whitespace {
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    position: relative;
    border-radius: 3px;
}

#cssbar-line {
    background: linear-gradient(to right, #0277bd, #ffc107, #0277bd);
    position: absolute;
    height: 100%;
    width: 100%;
    animation: cssbar-slide 4s steps(40) infinite;
    border-radius: 3px;
    -o-animation: cssbar-slide 4s steps(40) infinite;
    -ms-animation: cssbar-slide 4s steps(40) infinite;
    -webkit-animation: cssbar-slide 4s steps(40) infinite;
    -moz-animation: cssbar-slide 4s steps(40) infinite;
}

@keyframes cssbar-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

@-o-keyframes cssbar-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

@-ms-keyframes cssbar-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

@-webkit-keyframes cssbar-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

@-moz-keyframes cssbar-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== АДАПТИВНІСТЬ ===== */
@media (max-width: 768px) {
    font, th, td, p {
        font-size: 13px;
    }

    .maintitle, h1, h2 {
        font-size: 20px;
    }

    th, td.th {
        font-size: 12px;
        height: 24px;
        padding: 5px 8px;
    }

    .commentBodyMain {
        font-size: 13px;
    }

    input, textarea, select {
        font-size: 13px;
    }

    input.buttonActionLink {
        padding: 6px 12px;
        font-size: 12px;
    }

    .guestavatar {
        width: 100px;
        height: 100px;
        font-size: 40px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 12px;
    }

    .maintitle, h1, h2 {
        font-size: 18px;
    }

    table.forumSignal-x7 {
        border-radius: 4px;
        border-width: 2px;
    }

    th, td.th {
        font-size: 11px;
        padding: 4px 6px;
    }

    .commentBodyMain {
        font-size: 12px;
    }

    input.buttonActionLink {
        padding: 5px 10px;
        font-size: 11px;
    }

    .guestavatar {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }

    #qr img:hover {
        width: 180px;
        height: 180px;
    }
}