/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
html { margin-top: 0 !important; }
.clearfix:before, .clearfix:after, .table-scroll:before, .table-scroll:after { content: ""; display: table; }
.clearfix:after, .table-scroll:after { clear: both; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.text-left th, .text-left td { text-align: left; }
.right-txt { text-align: right !important; }
.jus { text-align: justify !important; }
/* Set core root defaults */
html:focus-within { scroll-behavior: smooth; }
/* A elements that don't have a class get default styles */
a:not([class]) { text-decoration-skip-ink: auto; }
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (print), (prefers-reduced-motion:reduce) {
html:focus-within { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:root { --font-size-h3:clamp(0.75rem, calc(0.49rem + 1.29vw), 1.25rem); --primary: #446084; --secondary: #d26e4b; --success: #7a9c59; --success-dark: #4d7128; --danger: #b20000; --warning: #ffc107; --light: #f8f9fa; --dark: #212529; --gray: #6c757d; --border: #dee2e6; --border2:#cccccc69;     /*--shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); --shadow2:0 4px 6px rgba(0, 0, 0, 0.2);*/ --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow2:0 6px 20px rgba(0, 0, 0, 0.15); --shadow3:0 4px 6px rgba(0, 0, 0, 0.1); --radius: 8px; --transition: all 0.3s ease; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.6; color: var(--dark); background: linear-gradient(135deg, #f5f7f9 0%, #e8ecf1 100%); padding: 20px !important; min-height: 100svh; text-rendering: optimizeSpeed; }
.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a { font-family: system-ui, sans-serif; }
.cboxIframe html, html { background-color: #fff !important; }
.h2, h2 { font-size: clamp(1em, 1.5vw, 1.6em) !important; line-height: clamp(1.25em, 1.5vw, 1.6em) !important; }
h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a { font-family: system-ui, sans-serif; text-wrap: balance; }
.gss-container button { font-size: initial; font-weight: initial; letter-spacing: initial; line-height: initial; margin-right: initial; margin-top: initial; max-width: initial; min-height: initial; padding: initial; text-decoration: none; text-shadow: none; text-transform: initial; }
.gss-container { max-width: 1200px !important; margin: 0 auto; padding: 0 !important; background: white; border-radius: var(--radius); box-shadow: var(--shadow2); overflow: hidden; animation: slideUp 0.5s ease-out; }
.gss-header { background: linear-gradient(135deg, var(--primary), #2c3e50); color: white; padding: 35px 30px; text-align: center; position: relative; overflow: hidden; }
.gss-header::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 200%; background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); transform: rotate(45deg); animation: shimmer 3s ease-in-out infinite; }
.gss-header h1 { font-size: 32px; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.5px; color: white; position: relative; }
.gss-header h4 { font-size: 17px; opacity: 0.95; font-weight: 400; color: white; position: relative; }
.gss-content { padding: 30px; }
.gss-info-section { background: var(--light); padding: 20px; border-radius: var(--radius); margin-bottom: 30px; box-shadow: var(--shadow); border: 1px solid var(--border2); border-left: 4px solid var(--primary); }
.gss-info-section p { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.gss-info-section p strong { min-width: 140px; color: var(--primary); }
.table-pest-info { border-collapse: collapse; margin-bottom: 25px; margin-top: 10px; }
.table-pest-info td, .table-pest-info th { border: 1px solid #fff; padding: 5px 10px; color: #373636 !important; }
.table-pest-info th { background-color: #f2f0f0; width: 25%; font-size: 13px; }
.table-pest-info-tr td.bold.center { font-weight: bolder; font-size: 12px; }
.table-pest-info-th.center:nth-child(2), .table-pest-info-tr td:nth-child(2) { background-color: #ccffff; }
.table-pest-info-th.center:nth-child(3), .table-pest-info-tr td:nth-child(3) { background-color: #fff2cc; }
.table-pest-info-th.center:nth-child(4), .table-pest-info-tr td:nth-child(4) { background-color: #d5dce4; }
.table-pest-info.table-pest-info-tbl2 { margin-bottom: 15px; margin-top: 10px; }
.table-pest-info-tbl2 th { font-weight: 500; font-size: 18px; padding: 15px; border: 1px solid #fff2cc; background-color: #fff2ccad; width: 50%; color: #000 !important; }
.table-pest-info-tbl-tr td { font-size: 13px; border: 1px solid #d5dce4; }
.table-pest-info-tbl-tr td.bold.center { font-weight: bolder; font-size: 12px; padding: 7px 10px; background-color: #f2f0f0; }
.gss-obj-block { margin-bottom: 30px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.gss-obj-block-vert { padding: 0 0 0 60px; margin-bottom: 15px; }
.gss-obj-ttl { background: linear-gradient(135deg, var(--primary), #2c3e50); color: white; padding: 15px 20px; font-weight: 600; font-size: 22px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; }
.gss-obj-ttl::before { content: ''; position: absolute; top: -50%; left: -50%; width: 100%; height: 200%; background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); transform: rotate(45deg); animation: shimmer 3s ease-in-out infinite; }
.gss-obj-ttl-icon { background: rgba(255, 255, 255, 0.2); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.gss-obj-tbl { width: 100%; border-collapse: collapse; background: white; margin-bottom: 0; margin-top: 0; }
.gss-obj-tbl tr:last-child td { border-bottom: 0 !important; }
.gss-obj-tbl th { background: #f8f9fa; padding: 15px; text-align: left; font-weight: 600; color: var(--dark); border-bottom: 2px solid var(--border); }
.gss-obj-tbl td { padding: 15px; border-bottom: 1px solid var(--border); transition: var(--transition); font-size: 1em; }
.gss-obj-tbl tr:hover td { background: #f8f9fa; }
.gss-obj-tbl td:first-child, .gss-obj-tbl th:first-child { padding: 15px 15px 15px 4%; }
.gss-obj-tbl th.gss-obj-tbl-th { text-align: center; width: 17%; }
.gss-obj-tbl-btn { display: inline-block; width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--border); background: white; color: var(--gray); font-weight: bold; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.gss-obj-tbl-td-good.active .gss-obj-tbl-btn { background: var(--success); color: white; border-color: var(--success); }
.gss-obj-tbl-td-bad.active .gss-obj-tbl-btn { background: var(--danger); color: white; border-color: var(--danger); }
.gss-obj-tbl-btn:hover { transform: scale(1.1); }
/* Photo Gallery */
.gss-photos-section { margin: 30px 0; }
.gss-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
.gss-photo-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow2); cursor: pointer; transition: var(--transition); }
.gss-photo-item:hover { transform: scale(1.05); box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3); }
.gss-photo-item img { width: 100%; height: 150px; object-fit: cover; display: block; }
/* Увеличиваем курсор на фото */
.gss-photo-remove { position: absolute; top: 5px; right: 5px; background: var(--danger); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 !important; min-height: auto !important; font-size: 12px !important; line-height: 24px !important; }
.gss-photo-remove::after { content: '✖'; margin: 0 auto; position: relative; display: flex; width: 10px; height: 10px; align-items: center; }
.gss-photo-upload .gss-upload-btn { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: var(--radius); cursor: pointer; font-weight: 600; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.gss-photo-upload .gss-upload-btn:hover { background: #3a5273; transform: translateY(-2px); }
.gss-progress-bar { background: var(--success); border-radius: var(--radius); margin-top: 10px; height: 20px; box-shadow: var(--shadow); }
/* Recommendation Section */
.recommendation-section { background: white; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin: 30px 0; }
.recommendation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width:768px) {
.recommendation-grid { grid-template-columns: 1fr; }
}
.recommendation-title { gap: 10px; background: var(--primary); color: white; padding: 15px 20px; font-weight: 600; font-size: 22px; display: flex; align-items: center; justify-content: space-between; border-radius: 0 var(--radius) 0 0; }
.recommendation-column:first-child .recommendation-title { border-radius: var(--radius) 0 0 0; }
.recommendation-column:first-child .option-group { border-right: 1px solid var(--border); }
.option-group { padding: 0 20px 10px; }
.option-group:last-child { padding: 0 20px 25px; }
.option-title { font-weight: 600; margin-bottom: 5px; color: var(--dark); display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.option-toggle { display: flex; gap: 10px; }
.toggle-btn { padding: 5px 15px 7px; border: 2px solid var(--border); border-radius: var(--radius); background: white; cursor: pointer; transition: var(--transition); flex: 1; text-align: center; font-weight: 600; }
.toggle-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.option-checkboxes { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.recommendation-section-vertical .option-checkboxes { display: flex; gap: 10px; font-size: 14px; flex-wrap: wrap; flex-direction: row; }
.checkbox-btn { padding: 8px 15px; border: 2px solid var(--border); border-radius: var(--radius); background: white; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 10px; }
.checkbox-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.checkbox-btn:not(.active):hover { border-color: var(--primary); background: var(--light); box-shadow: var(--shadow); }
.select-all-btn { background: none; border: none; color: var(--primary); cursor: pointer; font-weight: 600; padding: 5px; margin: 0; }
.recommendation-section-vertical .checkbox-btn, .recommendation-section-vertical .toggle-btn { cursor: default }
.recommendation-section-vertical .toggle-btn { display: initial; flex: initial; width: 50%; }
.recommendation-section-vertical .option-toggle { justify-content: center; }
.gss-obj-submit { text-align: center; }
.gss-obj-submit-btm { display: inline-block; position: relative; text-decoration: none; color: #fff !important; font-size: 16px; line-height: 28px; padding: 5px 15px 8px; background: linear-gradient(180deg, rgb(13, 193, 33) 0%, rgb(70, 125, 32) 100%); margin: 0; border-radius: 5px; outline: 0; border: 0; vertical-align: top; font-weight: normal; min-height: 2.5em; cursor: pointer; }
.gss-obj-submit-btm.print-page { background: #aaa; }
/* Submit Buttons */
.submit-section { display: flex; gap: 15px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.submit-section .submit-btn { padding: 15px 30px; border: none; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 10px; color: white; }
.submit-section .submit-btn.primary { background: var(--primary); }
.submit-section .submit-btn.install { background: var(--success); }
.submit-section .submit-btn.secondary { background: var(--light); color: var(--dark); border: 1px solid var(--border); }
.submit-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.submit-btn.primary:hover { background: var(--dark); }
.submit-btn.install:hover { background: var(--success-dark); }
.submit-btn.secondary:hover { background: var(--border); }
/* Стили для модального окна */
.gss-modal { position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; }
.gss-modal-content { position: relative; max-width: 90%; max-height: 90%; text-align: center; }
.gss-modal-content img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.gss-modal-close { position: absolute; top: 10px; right: 20px; color: #fff; font-size: 20px; font-weight: bold !important; cursor: pointer; background: rgba(0, 0, 0, 0.75); width: 30px; height: 30px; border-radius: 50%; display: block; line-height: 1; margin: 0 !important; padding: 0 !important; min-height: initial; border: 1px solid rgba(0, 0, 0, 0.5); text-align: center; box-shadow: var(--shadow3); }
.gss-modal-close::after { content: '✖'; margin: 0 auto; position: relative; display: inline; line-height: 1; vertical-align: top; top: -1px; }
.gss-modal-close:hover { background: rgba(0, 0, 0, 0.8); }
.gss-modal-nav { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 20px; color: white; }
.gss-modal-prev, .gss-modal-next { background: rgba(255, 255, 255, 0.2); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px; margin: 0; }
.gss-modal-prev:hover, .gss-modal-next:hover { background: rgba(255, 255, 255, 0.3); }
.gss-modal-content.loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }
#gss-modal-counter { color: white; font-size: 16px; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.gss-modal-content.loading img { opacity: 0.3; }
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gss-obj-block { animation: fadeIn 0.5s ease-out; }
.gss-obj-report { }
.gss-obj-report-tbl { border-collapse: collapse; margin-bottom: 15px; margin-top: 10px; }
.gss-obj-report-td1 { padding: 0 10px 20px 0; vertical-align: top; width: 50%; }
.gss-obj-report-td2 { padding: 0 0 20px 10px; vertical-align: top; width: 50%; }
.gss-obj-report-h3 { font-size: var(--font-size-h3); }
.gss-obj-report-h3-bg { background-color: #f2f0f0; }
.gss-obj-report-tbl-info { border-collapse: collapse; margin: 0; width: 100%; }
.gss-obj-report-tbl-info td { border: 1px solid #fff; padding: 5px 10px; color: #373636 !important; }
.gss-obj-report-tbl-info td:first-child { text-align: right !important; width: 40%; }
.gss-obj-report-tbl-info-td { background-color: #ccffff; font-weight: bolder; text-align: center; font-size: 12px; }
.gss-obj-report-tbl-info-td-empty { width: 25%; }
/* Modern Report Tables */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 35px; }
@media (max-width:768px) {
.report-grid { grid-template-columns: 1fr; }
}
.report-card { background: white; border-radius: var(--radius); padding: 25px; box-shadow: var(--shadow); border: 1px solid var(--border2); transition: var(--transition); }
.report-card:hover { transform: translateY(-3px); box-shadow: var(--shadow2); }
.report-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid var(--light); }
.report-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #3a5273); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
.report-title { font-size: 20px; font-weight: 600; color: var(--primary); margin: 0; width: auto; }
.report-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.report-table tr { transition: var(--transition); }
.report-table tr:hover { background: #f8f9fa; }
.report-table td { padding: 15px 12px; border-bottom: 1px solid var(--border); }
.report-table td:first-child { font-weight: 500; color: var(--dark); width: 75%; }
.report-table td:last-child { text-align: center; font-weight: 600; }
.status-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.status-good { background: rgba(122, 156, 89, 0.15); color: var(--success); border: 1px solid #7a9c59; }
.status-bad { background: rgba(178, 0, 0, 0.1); color: var(--danger); border: 1px solid rgba(178, 0, 0, 0.3); }
/* Main Comparison Tables */
.comparison-section { margin: 35px 0; }
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 15px 20px; background: linear-gradient(135deg, var(--primary), #3a5273); color: white; border-radius: var(--radius); }
.section-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.section-title { font-size: 22px; font-weight: 600; margin: 0; color: white; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.comparison-table th { background: #f8f9fa; padding: 18px 15px; text-align: center; font-weight: 600; color: var(--dark); border-bottom: 2px solid var(--border); }
.comparison-table th:first-child { text-align: right; padding-right: 25px; background: #f8f9fa; }
.comparison-table td { padding: 15px; text-align: center; border-bottom: 1px solid var(--border); transition: var(--transition); }
.comparison-table td:first-child { text-align: right; font-weight: 500; padding-right: 25px; background: #f8f9fa; }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: #f8f9fa; }
/* Room-specific colors */
.room-loca_01 { background: rgba(204, 255, 255, 0.3); }
.room-loca_02 { background: rgba(255, 242, 204, 0.3); }
.room-loca_03 { background: rgba(213, 220, 228, 0.3); }
/* Signature Section */
.signature-section { margin-top: 40px; padding: 25px; background: var(--light); border-radius: var(--radius); border-left: 5px solid var(--secondary); }
.signature-section p { margin-bottom: 20px; padding-bottom: 15px; position: relative; text-align: right; }
.signature-section p:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.signature-section strong { color: var(--secondary); display: inline-block; background-color: #fff; position: relative; z-index: 1; padding: 0 10px 0 0; }
.signature-section strong:not(:first-child) { padding: 0 10px 0 5px; }
.signature-section p::after { display: block; content: ''; background-color: var(--gray); position: absolute; height: 1px; width: 100%; top: 21px; }
.signature-section strong:first-child { float: left; }
.signature-section-date { margin-right: 100px; }
.signature-section-signature { margin-left: 165px }
/* Animations */
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
0% { transform: rotate(45deg) translateX(-100%); }
100% { transform: rotate(45deg) translateX(200%); }
}
/* Responsive Design */
@media (max-width:1024px) {
.gss-content { padding: 25px; }
.gss-header { padding: 25px 20px; }
.gss-header h1 { font-size: 28px; }
}
/* Responsive */
@media (max-width:768px) {
.gss-content { padding: 15px 10px; }
.gss-info-section p { margin-bottom: 10px; }
.gss-obj-tbl { font-size: 14px; }
.gss-obj-tbl th, .gss-obj-tbl td { padding: 10px; }
.gss-obj-tbl-btn { width: 30px; height: 30px; }
.gss-photos-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.recommendation-title { border-radius: 0; }
.recommendation-column:first-child .recommendation-title { border-radius: var(--radius) var(--radius) 0 0; }
.option-group { padding: 0 20px 15px; }
.option-title { padding: 10px 20px; margin: 0 -20px 15px; background: var(--light); }
body { padding: 15px !important; }
.gss-header { padding: 20px 15px; }
.gss-header h1 { font-size: 24px; }
.gss-header h4 { font-size: 15px; }
.gss-info-section { padding: 20px; }
.report-card { padding: 20px; }
.report-table td { padding: 12px 10px; }
.comparison-table th, .comparison-table td { padding: 12px 10px; font-size: 14px; }
.section-header { padding: 12px 15px; }
.section-title { font-size: 18px; }
.signature-section { margin-top: 30px; padding: 15px; }
.signature-section-signature { margin-left: 65px }
}
@media (max-width:480px) {
body { padding: 10px !important; }
.comparison-table th, .comparison-table td { padding: 10px 5px; font-size: 13px; }
.status-badge { padding: 4px 10px; font-size: 12px; }
.gss-info-section p { flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1.1; }
.recommendation-title { padding: 15px 15px; }
.option-group { padding: 0 15px 15px; }
.option-title { padding: 10px 15px; }
.option-group:last-child { padding: 0 15px 15px; }
.comparison-table th:first-child, .comparison-table td:first-child { padding-right: 15px; width: 40%; }
.signature-section { padding: 15px 10px; }
.signature-section p { font-size: 12px; }
.signature-section-signature { margin-left: 0 }
.signature-section p::after { top: 15px; }
}
/* Print Styles */
@media print {
body { background: white; padding: 0 !important; }
.gss-container { box-shadow: none; border-radius: 0; }
.gss-header { background: var(--primary) !important; -webkit-print-color-adjust: exact; color-adjust: exact; }
.report-card { break-inside: avoid; }
.comparison-table { break-inside: avoid; }
}
/* Добавьте в client_surveys.css или основной CSS */
.install-btn { background: linear-gradient(135deg, #27ae60, #229954); color: white; border: none; padding: 15px 25px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin: 20px 0; box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); transition: all 0.3s ease; display:inline-block; }
.install-btn:hover { background: linear-gradient(135deg, #229954, #1e7e34); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4); }
.install-btn:active { transform: translateY(0); }