/* ===== CSS VARIABLES ===== */
:root {
/* Color palette */
--primary: #000;
--secondary: #333;
--light: #f8f9fa;
--dark: #212529;
--gray: #6c757d;
--light-gray: #e9ecef;
--primary-color: #4361ee;
--dark-bg: #1e293b;
--dark-card: #334155;

/* Effects and shadows */
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--box-shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.2);
--transition: all 0.3s ease;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 5px 15px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.15);

/* Border radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
}

/* ===== BASE STYLES ===== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', system-ui, sans-serif;
color: var(--dark);
background-color: #fff;
line-height: 1.7;
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}

p {
margin-bottom: 1rem;
}

a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}

a:hover {
color: var(--primary);
text-decoration: none;
}

img {
max-width: 100%;
height: auto;
}

/* ===================== */
/* НАВИГАЦИЯ */
/* ===================== */
.navbar {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 0.8rem 0;
transition: all 0.3s ease;
}

.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.navbar-brand {
font-weight: 800;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.3s ease;
color: var(--dark);
font-size: 1.5rem;
text-decoration: none;
}

.navbar-brand:hover {
transform: translateY(-2px);
}

/* Анимированное подчёркивание ссылок в навбаре */
.navbar .nav-link {
position: relative;
overflow: hidden;
}

.navbar .nav-link::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: width 0.3s ease;
opacity: 0;
}

.navbar .nav-link:hover::after {
width: 100%;
opacity: 1;
}

/* Исключение подчёркивания для кнопки */
.navbar .btn-outline-dark {
transition: none;
}

/* ===================== */
/* ГАМБУРЕР МЕНЮ */
/* ===================== */
/* Скрываем стандартную иконку бургера */
.navbar-toggler .navbar-toggler-icon {
display: none;
}

/* Убираем обводку у гамбургера */
.navbar-toggler {
border: none;
background: transparent;
padding: 0;
outline: none;
box-shadow: none !important;
}

/* Кастомный бургер */
.hamburger {
width: 24px;
height: 18px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.hamburger span {
display: block;
width: 100%;
height: 2.5px;
background-color: var(--primary);
border-radius: 1px;
transition: all 0.3s ease;
transform-origin: center;
}

/* Анимация: бургер → крестик */
.hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

/* ===================== */
/* OFF-CANVAS МЕНЮ */
/* ===================== */
.offcanvas {
max-width: 80%;
width: 280px;
}

.offcanvas .nav-link {
padding: 12px 0;
font-size: 1.1rem;
color: var(--secondary);
}

.offcanvas .nav-link.active {
color: var(--primary);
font-weight: 600;
}

.offcanvas .btn-outline-dark {
border-radius: 3px;
}

/* ===== BUTTONS ===== */
.btn {
display: inline-block;
font-weight: 500;
text-align: center;
text-decoration: none;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: var(--radius-sm);
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn:hover {
text-decoration: none;
}

.btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
}

.btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}

/* Ripple effect on click */
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}

.btn:hover::before {
left: 100%;
}

/* Убрать обводку у кнопок */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark) {
box-shadow: none !important; 
}

/* Main button styles */
.btn-primary {
color: #fff;
font-weight: 600;
padding: 0.5rem 1.2rem!important; 
background: linear-gradient(135deg, #4361ee, #3a56d8);
border-color: #4361ee;
box-shadow: none !important;
}

.btn-primary:hover {
background: linear-gradient(135deg, #3a56d8, #2e4bc7);
border-color: #3a56d8;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.4);
}

.btn-secondary {
color: #fff;
background: linear-gradient(135deg, #6c757d, #5a6268);
border-color: #6c757d;
}

.btn-secondary:hover {
background: linear-gradient(135deg, #5a6268, #495057);
border-color: #5a6268;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(108, 117, 125, 0.4);
}

.btn-danger {
color: #fff;
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-color: #e74c3c;
}

.btn-danger:hover {
background: linear-gradient(135deg, #c0392b, #a93226);
border-color: #c0392b;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(231, 76, 60, 0.4);
}

/* Outline buttons */
.btn-outline-primary {
color: #4361ee;
border-color: #4361ee;
}

.btn-outline-primary:hover {
color: #fff;
background-color: #4361ee;
border-color: #4361ee;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(67, 97, 238, 0.2);
}

.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}

.btn-outline-secondary:hover {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(108, 117, 125, 0.2);
}

.btn-outline-danger {
color: #e74c3c;
border-color: #e74c3c;
}

.btn-outline-danger:hover {
color: #fff;
background-color: #e74c3c;
border-color: #e74c3c;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
}


/* Ripple effect on click */
.btn-outline-primary::before,
.btn-outline-secondary::before,
.btn-outline-danger::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}

.btn-outline-primary:hover:before,
.btn-outline-secondary:hover:before,
.btn-outline-danger:hover:before{
left: 100%;
}
        
/* Undo button special styling */
.btn-undo {
color: #6c757d;
border-color: #6c757d;
background-color: transparent;
}

.btn-undo:hover:not(:disabled) {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.btn-undo:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.btn-pulse {
animation: pulseUndo 0.6s ease-in-out;
}

@keyframes pulseUndo {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

/* Button sizes */
.btn-lg {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: var(--radius-md);
}

.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: var(--radius-sm);
}

/* Button groups */
.btn-group {
position: relative;
display: inline-flex;
vertical-align: middle;
}

.btn-group > .btn {
position: relative;
flex: 1 1 auto;
}

.btn-group > .btn:not(:last-child) {
margin-right: 5px;
}

/* Смещение для якорных ссылок из-за фиксированного навбара */
section[id]:not(.hero-section) {
  scroll-margin-top: 40px; /* Отступ сверху при прокрутке по якорю */
}

/* ===== HERO SECTION ===== */
.hero-section {
background: linear-gradient(to bottom, #fff 0%, #f8f9fa 100%);
padding: 100px 0 70px;
border-bottom: 1px solid var(--light-gray);
text-align: center;
}

.hero-title {
font-size: 3.2rem;
font-weight: 800;
margin-bottom: 25px;
color: var(--primary);
text-align: center;
position: relative;
z-index: 1;
}

.hero-subtitle {
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 35px;
max-width: 950px;
color: var(--secondary);
text-align: center;
margin-left: auto;
margin-right: auto;
}

.hero-cta {
margin-top: 30px;
}

.hero-cta .btn {
margin: 0 10px 10px 0;
}

/* ===== CARDS ===== */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: var(--radius-md);
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
font-weight: 600;
}

.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}

.feature-card {
background: #fff;
border-radius: 0;
border: 1px solid var(--light-gray);
transition: var(--transition);
height: 100%;
padding: 30px;
text-align: center;
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0,0,0,0.08);
border-color: var(--primary);
}

.feature-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 20px;
}

/* ===== HOW IT WORKS SECTION ===== */
.how-to-step {
display: flex;
margin-bottom: 20px;
align-items: flex-start;
position: relative;
}

.step-number {
min-width: 40px;
height: 40px;
background-color: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
margin-right: 30px;
flex-shrink: 0;
border-radius: 50%;
}

/* ===== FOOTER ===== */
.footer {
background: #1e1e2d;
color: #fff;
position: relative;
padding: 20px 0 10px;
}

.footer a {
color: #adb5bd;
text-decoration: none;
transition: color 0.2s;
}

.footer a:hover {
text-decoration: underline;
color: #fff;
}

.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 10px;
}

.footer p {
font-size: 1rem;
margin-bottom: 0.25rem;
}

/* ===== BACK TO TOP BUTTON ===== */
.progress-wrap {
position: fixed;
right: 22px;
bottom: 39px;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 .1rem rgba(128, 130, 134, .25);
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 200ms linear;
}

.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.progress-wrap::after {
position: absolute;
font-family: 'Unicode';
font-weight: 900;
content: '\25B3';
text-align: center;
line-height: 46px;
font-size: 24px;
color: #3f78e0;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 1;
transition: all 200ms linear;
}

.progress-wrap:hover::after {
opacity: 0;
}

.progress-wrap::before {
position: absolute;
font-family: 'Unicode';
font-weight: 900;
content: '\25B3';
text-align: center;
line-height: 46px;
font-size: 24px;
opacity: 0;
background-image: linear-gradient(298deg, #3f78e0, #193059);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
left: 0;
top: 0;
height: 46px;
width: 46px;
cursor: pointer;
display: block;
z-index: 2;
transition: all 200ms linear;
}

.progress-wrap:hover::before {
opacity: 1;
}

.progress-wrap svg path {
fill: none;
}

.progress-wrap svg.progress-circle path {
stroke: #3f78e0;
stroke-width: 4;
box-sizing: border-box;
transition: all 200ms linear;
}

/* ===== HELPER ELEMENTS ===== */
.divider {
height: 1px;
background-color: var(--light-gray);
margin: 50px 0;
}

.code-block {
background-color: var(--light);
padding: 15px;
border-left: 3px solid var(--primary);
font-family: monospace;
font-size: 0.9rem;
margin: 15px 0;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.section-title {
position: relative;
padding-bottom: 15px;
margin-bottom: 50px;
text-align: center;
color: var(--primary);
}

.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: var(--primary);
}

/* ===== TEXTAREA ANIMATIONS ===== */
.text-area-container {
position: relative;
margin-bottom: 1rem;
transition: all 0.3s ease;
}

.text-area-container.animate-pulse {
animation: textareaPulse 0.6s ease-in-out;
}

.text-area-container.animate-success {
animation: textareaSuccess 0.8s ease-in-out;
}

.text-area-container.animate-warning {
animation: textareaWarning 0.8s ease-in-out;
}

.text-area-container.animate-error {
animation: textareaError 0.8s ease-in-out;
}

.text-area-container.animate-highlight {
animation: textareaHighlight 1.2s ease-in-out;
}

.text-area-container.animate-shake {
animation: textareaShake 0.5s ease-in-out;
}

.text-area-container.animate-bounce {
animation: textareaBounce 0.8s ease-in-out;
}

.text-area-container.animate-slide-in {
animation: textareaSlideIn 0.6s ease-out;
}

.text-area-container.animate-copy {
animation: textareaCopy 0.8s ease-in-out;
}

@keyframes textareaPulse {
0% { transform: scale(1); }
50% { transform: scale(1.01); }
100% { transform: scale(1); }
}

@keyframes textareaSuccess {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
border-color: #28a745;
}
70% {
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
border-color: #28a745;
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
border-color: #ced4da;
}
}

@keyframes textareaWarning {
0% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
border-color: #ffc107;
}
70% {
box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
border-color: #ffc107;
}
100% {
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
border-color: #ced4da;
}
}

@keyframes textareaError {
0% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
border-color: #dc3545;
}
70% {
box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
border-color: #dc3545;
}
100% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
border-color: #ced4da;
}
}

@keyframes textareaHighlight {
0% {
background-color: transparent;
}
20% {
background-color: rgba(67, 97, 238, 0.1);
}
40% {
background-color: rgba(67, 97, 238, 0.05);
}
60% {
background-color: rgba(67, 97, 238, 0.1);
}
80% {
background-color: rgba(67, 97, 238, 0.05);
}
100% {
background-color: transparent;
}
}

@keyframes textareaShake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes textareaBounce {
0%, 20%, 53%, 80%, 100% {
transform: translateY(0);
}
40%, 43% {
transform: translateY(-8px);
}
70% {
transform: translateY(-4px);
}
}

@keyframes textareaSlideIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes textareaCopy {
0% {
box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.4);
border-color: #4361ee;
background-color: rgba(67, 97, 238, 0.05);
}
50% {
box-shadow: 0 0 0 8px rgba(67, 97, 238, 0.2);
border-color: #4361ee;
background-color: rgba(67, 97, 238, 0.1);
}
100% {
box-shadow: 0 0 0 15px rgba(67, 97, 238, 0);
border-color: #ced4da;
background-color: transparent;
}
}

.text-area-container textarea {
height: 300px;
resize: none;
width: 100%;
padding: 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
}

.text-area-container textarea:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ===== SEO SECTION ===== */
.seo-section {
background-color: #f8f9fa;
padding: 80px 0;
border-bottom: 1px solid #e9ecef;
border-top: 1px solid #e9ecef;
}

.seo-section h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 40px;
text-align: center;
color: #000;
}

.seo-section h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #212529;
}

.seo-section ul {
padding-left: 20px;
margin-bottom: 25px;
}

.seo-section ul li {
margin-bottom: 10px;
}

.seo-feature-box {
background: #fff;
border: 1px solid #e9ecef;
padding: 25px;
margin-bottom: 25px;
transition: var(--transition);
border-radius: var(--radius-md);
}

.seo-feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.seo-feature-box .icon {
font-size: 2rem;
margin-bottom: 15px;
color: #000;
}

.seo-feature-box h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 10px;
}

.seo-feature-box p {
margin-bottom: 0;
}

/* ===== SETTINGS ===== */
.settings-group {
padding: .25rem;
margin-bottom: 1rem;
}

.settings-group1 {
background-color: #fff;
border-radius: var(--radius-sm);
padding: 1.25rem;
margin-bottom: 1rem;
transition: var(--transition);
}

.settings-group2 {
background-color: white;
border-radius: var(--radius-md);
padding: 1.25rem;
box-shadow: var(--box-shadow);
height: 100%;
}

.settings-group h5 {
font-weight: 600;
margin-bottom: 1rem;
color: #212529;
display: flex;
align-items: center;
}

.settings-group h5 i {
margin-right: 0.5rem;
color: #4361ee;
}

.settings-group .form-label {
font-weight: 500;
margin-bottom: 0.5rem;
color: #495057;
}

.settings-group .form-check {
margin-bottom: 0.75rem;
}

.settings-group .form-check-label {
display: flex;
align-items: center;
}

.settings-group .form-check-label svg {
margin-right: 0.5rem;
}

.settings-group .btn-group {
margin-bottom: 1rem;
}

.settings-group .input-group {
margin-bottom: 1rem;
}

.settings-group .d-flex {
flex-wrap: wrap;
gap: 0.5rem;
}

.settings-group .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}

.settings-group small.text-muted {
display: block;
margin-top: -0.5rem;
margin-bottom: 0.75rem;
margin-left: 1.5rem;
}

.settings-group .border-top {
margin-top: 1rem;
padding-top: 1rem;
}

.settings-group .d-grid {
margin-top: 1rem;
}

.settings-group .d-grid .btn {
display: flex;
align-items: center;
justify-content: center;
}

.settings-group .d-grid .btn svg {
margin-right: 0.5rem;
}

.settings-group .btn-outline-dark {
width: 235px;
border-radius: 3px;
padding: 12px 30px;
font-weight: 600;
margin-left: 15px;
border: 2px solid #212529;
}

.settings-group .btn-outline-dark:hover {
background-color: #212529;
color: #fff;
}

.settings-group .btn-outline-dark:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.25);
}

/* ===== DARK THEME ===== */
body.dark {
background-color: var(--dark-bg);
color: #e2e8f0;
}

body.dark .card,
body.dark .dropdown-menu,
body.dark .accordion-button,
body.dark .accordion-body,
body.dark .list-group-item {
background-color: var(--dark-card);
color: #e2e8f0;
}

body.dark .btn-outline-primary {
color: #e2e8f0;
border-color: #64748b;
}

body.dark .form-control,
body.dark .form-select,
body.dark .accordion-button {
background-color: #1e293b;
color: #e2e8f0;
border-color: #64748b;
}

/* ===== APP STYLES ===== */
.action-buttons {
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}

.url-counter {
position: absolute;
right: 15px;
bottom: 10px;
font-size: 0.8rem;
color: #6c757d;
background-color: rgba(255,255,255,0.9);
padding: 0 5px;
border-radius: 3px;
pointer-events: none;
transition: all 0.3s ease;
}

.url-counter.animate {
animation: counterPulse 0.6s ease-in-out;
}

@keyframes counterPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.url-counter.warning {
color: #dc3545;
font-weight: bold;
}

.progress-container {
transition: opacity 0.5s ease;
}

.search-panel {
background-color: #f8f9fa;
border-radius: 0.375rem;
padding: 1rem;
margin-bottom: 1rem;
}

.search-panel .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
}

.font-monospace {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#urls {
min-height: 200px;
}

.accordion-button::after {
margin-left: 0.5rem !important;
}



/* ===================== */
/* SVG ИКОНКИ */
/* ===================== */
.icon {
display: inline-block;
flex-shrink: 0;
}

.icon {
width: 1em;
height: 1em;
vertical-align: middle;
margin-right: 0.3rem;
fill: currentColor;
}


/* Навигация */
.navbar-brand .icon {
margin-right: -8px;
}

.nav-link .icon {
margin-right: 1px;
vertical-align: -0.15em;
}

/* Кнопки с иконками */
.btn .icon {
margin-right: 6px;
vertical-align: -0.15em;
}

/* Гамбургер меню */
.hamburger {
position: relative;
z-index: 1;
}

/* Иконки в hero-секции */
.hero-icon {
width: 48px;
height: 48px;
margin-bottom: 15px;
fill: var(--primary);
}

/* Иконки в секциях */
.section-icon {
width: 36px;
height: 36px;
margin-right: 15px;
fill: var(--primary);
vertical-align: middle;
}

/* Иконки социальных сетей */
.social-icon {
width: 24px;
height: 24px;
fill: #adb5bd;
transition: fill 0.2s;
}

.social-icon:hover {
fill: #fff;
}

/* ===== ENHANCED TOAST NOTIFICATIONS ===== */
.toast-container-center {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 15px;
pointer-events: none;
max-width: 90%;
width: 450px;
}

.toast-center {
max-width: 100%;
width: 100%;
pointer-events: auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: none;
overflow: hidden;
animation: toastSlideInBottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
margin-bottom: 15px;
display: flex;
align-items: center;
padding: 0;
position: relative;
transform-origin: bottom center;
}

.toast-center:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.toast-center.hiding {
animation: toastSlideOutBottom 0.3s ease-in forwards;
}

@keyframes toastSlideInBottom {
0% {
opacity: 0;
transform: translateY(100%) scale(0.8);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes toastSlideOutBottom {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(100%) scale(0.8);
}
}

/* Toast icon section */
.toast-icon-section {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
position: relative;
}

.toast-icon-section::after {
content: '';
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 10px solid #f8f9fa;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

/* Toast content section */
.toast-content-section {
flex: 1;
padding: 18px 20px 18px 25px;
display: flex;
align-items: center;
justify-content: space-between;
}

.toast-content {
flex: 1;
}

.toast-title {
font-weight: 600;
font-size: 16px;
margin: 0 0 4px 0;
color: #2c3e50;
}

.toast-message {
font-size: 14px;
margin: 0;
color: #7f8c8d;
line-height: 1.4;
}

/* Toast close button */
.toast-close {
background: none;
border: none;
font-size: 20px;
color: #95a5a6;
cursor: pointer;
padding: 0;
margin-left: 15px;
transition: color 0.2s ease;
line-height: 1;
}

.toast-close:hover {
color: #7f8c8d;
}

/* Toast icons - Unicode symbols */
.toast-icon {
font-size: 28px;
line-height: 1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Progress bar for toasts - FIXED */
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 100%;
transform-origin: left;
background: linear-gradient(90deg, #4361ee, #3a56d8);
z-index: 10;
transition: width 0.3s ease;
}

@keyframes toastProgress {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}

/* Toast types with colored icons */
.toast-success .toast-icon-section {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
}

.toast-success .toast-icon-section::after {
border-left-color: #d4edda;
}

.toast-success .toast-progress {
background: #28a745;
}

.toast-error .toast-icon-section {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
}

.toast-error .toast-icon-section::after {
border-left-color: #f8d7da;
}

.toast-error .toast-progress {
background: #dc3545;
}

.toast-warning .toast-icon-section {
background: linear-gradient(135deg, #fff3cd, #ffeeba);
color: #856404;
}

.toast-warning .toast-icon-section::after {
border-left-color: #fff3cd;
}

.toast-warning .toast-progress {
background: #ffc107;
}

.toast-info .toast-icon-section {
background: linear-gradient(135deg, #d1ecf1, #bee5eb);
color: #0c5460;
}

.toast-info .toast-icon-section::after {
border-left-color: #d1ecf1;
}

.toast-info .toast-progress {
background: #17a2b8;
}

.toast-primary .toast-icon-section {
background: linear-gradient(135deg, #e7f3ff, #cce5ff);
color: #004085;
}

.toast-primary .toast-icon-section::after {
border-left-color: #e7f3ff;
}

.toast-primary .toast-progress {
background: #4361ee;
}

/* Dark theme support */
body.dark .toast-center {
background: var(--dark-card);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

body.dark .toast-icon-section {
background: rgba(255, 255, 255, 0.1);
}

body.dark .toast-icon-section::after {
border-left-color: rgba(255, 255, 255, 0.1);
}

body.dark .toast-title {
color: #e5e7eb;
}

body.dark .toast-message {
color: #9ca3af;
}

body.dark .toast-close {
color: #9ca3af;
}

body.dark .toast-close:hover {
color: #e5e7eb;
}

/* Responsive adjustments for mobile */
@media (max-width: 576px) {
.toast-container-center {
width: 95%;
bottom: 20px;
gap: 10px;
}

.toast-center {
width: 100%;
margin-bottom: 10px;
}

.toast-icon-section {
width: 50px;
padding: 15px 0;
}

.toast-icon {
font-size: 20px;
}

.toast-content-section {
padding: 12px 15px 12px 20px;
}

.toast-title {
font-size: 14px;
}

.toast-message {
font-size: 13px;
}
}

/* Animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
.toast-center {
animation: none;
transition: none;
}

.toast-center.hiding {
animation: none;
}

.toast-progress {
animation: none;
}

.text-area-container.animate-pulse,
.text-area-container.animate-success,
.text-area-container.animate-warning,
.text-area-container.animate-error,
.text-area-container.animate-highlight,
.text-area-container.animate-shake,
.text-area-container.animate-bounce,
.text-area-container.animate-slide-in,
.text-area-container.animate-copy {
animation: none;
}

.url-counter.animate {
animation: none;
}
}

/* ===== MODAL STYLES FOR POPUP BLOCKING ===== */
.modal-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}

.modal-title {
color: #212529;
font-weight: 600;
}

.nav-tabs .nav-link {
font-weight: 500;
color: #495057;
}

.nav-tabs .nav-link.active {
font-weight: 600;
color: #4361ee;
border-color: #dee2e6 #dee2e6 #fff;
}

.card {
border: 1px solid #e9ecef;
border-radius: 0.375rem;
}

.card-title {
color: #4361ee;
font-weight: 600;
margin-bottom: 1rem;
}

.card-body ol {
padding-left: 1.5rem;
}

.card-body li {
margin-bottom: 0.5rem;
}

.alert {
border-radius: 0.375rem;
}

.alert-info {
background-color: #e7f3ff;
border-color: #b8daff;
color: #0c5460;
}

.alert-warning {
background-color: #fff3cd;
border-color: #ffeeba;
color: #856404;
}

.badge {
font-size: 0.75em;
vertical-align: middle;
}

/* Animation for modal */
.modal.fade .modal-dialog {
transition: transform 0.3s ease-out;
transform: translate(0, -50px);
}

.modal.show .modal-dialog {
transform: translate(0, 0);
}

/* ===== BROWSER UNBLOCK INSTRUCTIONS ===== */
.browser-card {
background: white;
border: 2px solid #e9ecef;
border-radius: var(--radius-lg);
padding: 1rem;
text-align: center;
cursor: pointer;
transition: var(--transition);
position: relative;
height: 100%;
}

.browser-card:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}

.browser-card.active {
border-color: var(--primary-color);
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

.browser-card.active .browser-indicator {
opacity: 1;
transform: scale(1);
}

.browser-indicator {
position: absolute;
top: -8px;
right: -8px;
width: 16px;
height: 16px;
background: var(--primary-color);
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition: var(--transition);
}

.browser-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

.browser-card[data-browser="chrome"] .browser-icon { color: #4285f4; }
.browser-card[data-browser="firefox"] .browser-icon { color: #ff7139; }
.browser-card[data-browser="safari"] .browser-icon { color: #4285f4; }
.browser-card[data-browser="edge"] .browser-icon { color: #0078d7; }
.browser-card[data-browser="opera"] .browser-icon { color: #ff1b2d; }
.browser-card[data-browser="yandex"] .browser-icon { color: #ff0000; }
.browser-card[data-browser="chrome-mobile"] .browser-icon,
.browser-card[data-browser="safari-mobile"] .browser-icon,
.browser-card[data-browser="samsung"] .browser-icon,
.browser-card[data-browser="firefox-mobile"] .browser-icon,
.browser-card[data-browser="ucbrowser"] .browser-icon,
.browser-card[data-browser="opera-mobile"] .browser-icon {
color: #6c757d;
}

.browser-instruction {
display: none;
animation: fadeIn 0.5s ease-in;
}

.browser-instruction.active {
display: block;
}

.instruction-steps {
max-width: 100%;
}

.step {
display: flex;
margin-bottom: 2rem;
align-items: flex-start;
}

.step-number {
min-width: 40px;
height: 40px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 1.5rem;
flex-shrink: 0;
}

.step-content h5 {
color: var(--dark);
margin-bottom: 0.5rem;
}

.step-content p {
color: var(--gray);
margin-bottom: 0;
}

.browser-address-bar {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 24px;
padding: 8px 16px;
font-family: monospace;
max-width: 500px;
}

.address-bar-content {
display: flex;
align-items: center;
gap: 8px;
}

.security-icon {
font-size: 14px;
}

.url {
flex: 1;
color: var(--dark);
}

.popup-blocked {
color: #dc3545;
font-weight: 500;
font-size: 0.9em;
}

.instruction-image {
background: white;
border: 1px solid #e9ecef;
border-radius: var(--radius-md);
padding: 1rem;
max-width: 500px;
}

.browser-popup {
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
}

.popup-header {
background: #f8f9fa;
padding: 8px 12px;
font-weight: 500;
border-bottom: 1px solid #dee2e6;
}

.popup-content {
padding: 8px 0;
}

.popup-option {
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
}

.popup-option:hover {
background: #f8f9fa;
}

.popup-option.selected {
background: #e7f3ff;
}

.instruction-sidebar {
position: sticky;
top: 2rem;
}

.sidebar-card {
background: white;
border: 1px solid #e9ecef;
border-radius: var(--radius-md);
padding: 1.25rem;
margin-bottom: 1rem;
}

.sidebar-card h6 {
color: var(--dark);
margin-bottom: 0.5rem;
}

.sidebar-card p {
color: var(--gray);
font-size: 0.9rem;
margin-bottom: 0;
}

#check-settings {
border-top: 1px solid #e9ecef;
padding-top: 4rem;
}

#testResult {
min-height: 24px;
}

.troubleshooting-section {
margin-top: 2rem;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Custom icons for additional browsers */
.bi-browser-opera::before {
content: "O";
font-weight: bold;
color: #ff1b2d;
}

.bi-browser-yandex::before {
content: "Я";
font-weight: bold;
color: #ff0000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.step {
flex-direction: column;
text-align: center;
}

.step-number {
margin-right: 0;
margin-bottom: 1rem;
}

.browser-address-bar {
max-width: 100%;
}

.browser-card {
padding: 0.75rem;
}

.browser-icon {
font-size: 2rem;
}
}

/* ===== MEDIA QUERIES ===== */
/* Desktop */
@media (min-width: 992px) {
.footer .col-md-6 {
margin-bottom: 0.25rem;
}
}

/* Tablets */
@media (max-width: 768px) {
.navbar.scrolled {
padding: 0.5rem 0;
}

.navbar.scrolled .navbar-brand {
font-size: 1.2rem;
}

.hero-section {
padding: 60px 0 40px;
text-align: center;
}

.hero-title {
font-size: 2rem;
margin-bottom: 20px;
}

.hero-subtitle {
font-size: 1rem;
margin-bottom: 25px;
margin-left: auto;
margin-right: auto;
}

.how-to-step {
flex-direction: column;
}

.step-number {
margin-right: 0;
margin-bottom: 20px;
}

.d-flex.flex-wrap {
justify-content: center;
gap: 10px;
}

.btn-dark, .btn-outline-dark {
width: 180px;
margin-left: 0;
margin-top: 0;
}

.section-title {
margin-bottom: 30px;
}

section {
padding: 40px 0;
}

.footer .row {
flex-direction: column;
align-items: center;
text-align: center;
}

.footer .col-md-6 {
width: 100%;
text-align: center !important;
margin-bottom: 0.5rem;
}

.footer-links {
justify-content: center;
margin-top: 0.5rem;
gap: 0.5rem;
}

.footer-links a {
display: block;
margin: 5px 0;
}

.progress-wrap {
right: 15px;
bottom: 25px;
width: 40px;
height: 40px;
}

.progress-wrap::after,
.progress-wrap::before {
line-height: 40px;
font-size: 20px;
height: 40px;
width: 40px;
}

.text-area-container textarea {
height: 250px;
}

.preset-btn {
width: 100%;
}

.settings-group {
margin-bottom: 1.5rem;
}

.settings-group h5 {
font-size: 1.1rem;
}

.settings-group .btn-group {
flex-direction: column;
}

.settings-group .btn-group .btn {
margin-bottom: 0.5rem;
}
}

/* Mobile devices */
@media (max-width: 576px) {
.hero-title {
font-size: 1.8rem;
}

.hero-subtitle {
font-size: 0.95rem;
}

.btn-dark, .btn-outline-dark {
padding: 10px 20px;
font-size: 0.9rem;
width: 170px;
}

h3 {
font-size: 1rem;
}

.section-title {
font-size: 1.5rem;
}

.footer {
padding: 15px 0;
}

.footer-links {
flex-direction: column;
gap: 5px;
}

.text-area-container textarea {
height: 200px;
}

.hero-cta .btn {
display: block;
width: 100%;
margin: 0 0 15px 0;
}

.toast-center {
max-width: 90vw;
width: 90vw;
}
}

/* Special media queries */
@media (min-width: 576px) {
.progress-wrap.active-progress {
opacity: 1;
}
}

@media (prefers-reduced-motion: reduce) {
.progress-wrap,
.progress-wrap:after {
transition: none;
}

.toast-center {
animation: none;
}

.toast-progress {
animation: none;
}
}