/* ══════════════════════════════════════════════════════════════
   Генератор ЧПУ — стили в теме web-seo.by
   Raleway | --main-color:#31B939 | фон #F5F5F5
   ══════════════════════════════════════════════════════════════ */

/* ── Секция ──────────────────────────────────────────────────── */

.slg-section {
    padding-bottom: 4.167vw;
}

.slg-page-title {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: 2.604vw;
    color: var(--text-main-color, #1C1C1C);
    margin: 2.5vw 0 0.5vw;
    line-height: 1.2;
}

.slg-page-sub {
    font-family: "Raleway", sans-serif;
    font-size: 0.938vw;
    color: #6B7280;
    margin: 0 0 2vw;
    line-height: 1.6;
    max-width: 600px;
}

/* ── Двухколоночный layout ───────────────────────────────────── */

.slg-layout {
    display: grid;
    grid-template-columns: 1fr 22vw;
    gap: 1.563vw;
    align-items: start;
}

/* ══ ЛЕВАЯ КОЛОНКА ══════════════════════════════════════════════ */

.slg-main {
    display: flex;
    flex-direction: column;
}

/* ── Табы ────────────────────────────────────────────────────── */

.slg-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1.5px solid #E5E7EB;
    margin-bottom: 1.563vw;
}

.slg-tab {
    font-family: "Raleway", sans-serif;
    font-size: 0.833vw;
    font-weight: 700;
    color: #9CA3AF;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 0.729vw 1.25vw;
    cursor: pointer;
    margin-bottom: -1.5px;
    transition: color .15s, border-color .15s;
}

.slg-tab:hover { color: #374151; }

.slg-tab--active {
    color: var(--text-main-color, #1C1C1C);
    border-bottom-color: var(--main-color, #31B939);
}

/* ── Панели ──────────────────────────────────────────────────── */

.slg-panel { display: none; }
.slg-panel--active { display: block; }

/* ── Метки полей ─────────────────────────────────────────────── */

.slg-label {
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    font-weight: 700;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.521vw;
}

.slg-label--mt { margin-top: 1.25vw; }

.slg-label--inline {
    display: inline;
    margin-bottom: 0;
    margin-top: 0;
}

/* ── Инпуты ──────────────────────────────────────────────────── */

.slg-input {
    width: 100%;
    height: 3.125vw;
    padding: 0 1.042vw;
    font-family: "Raleway", sans-serif;
    font-size: 0.938vw;
    border: 1.5px solid rgba(28,28,28,.15);
    border-radius: 0.781vw;
    background: #fff;
    color: var(--text-main-color, #1C1C1C);
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s;
}

.slg-input:focus { border-color: var(--main-color, #31B939); }
.slg-input::placeholder { color: #C0C3C8; }

.slg-textarea {
    width: 100%;
    padding: 0.833vw 1.042vw;
    font-family: "Raleway", sans-serif;
    font-size: 0.833vw;
    line-height: 1.7;
    border: 1.5px solid rgba(28,28,28,.15);
    border-radius: 0.781vw;
    background: #fff;
    color: var(--text-main-color, #1C1C1C);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    min-height: 9vw;
    transition: border-color .2s;
}

.slg-textarea:focus { border-color: var(--main-color, #31B939); }
.slg-textarea::placeholder { color: #C0C3C8; }

/* ── Одиночный результат ─────────────────────────────────────── */

.slg-result-wrap {
    position: relative;
}

.slg-result {
    font-family: 'Courier New', monospace;
    font-size: 1.146vw;
    font-weight: 700;
    background: #fff;
    border: 1.5px solid rgba(28,28,28,.1);
    border-radius: 0.781vw;
    padding: 0.938vw 3.333vw 0.938vw 1.25vw;
    min-height: 3.125vw;
    word-break: break-all;
    line-height: 1.5;
    color: var(--text-main-color, #1C1C1C);
    transition: border-color .2s;
}

.slg-result--empty {
    font-family: "Raleway", sans-serif;
    font-size: 0.833vw;
    font-weight: 400;
    color: #C0C3C8;
    border-style: dashed;
}

.slg-copy-btn {
    position: absolute;
    top: 50%;
    right: 0.729vw;
    transform: translateY(-50%);
    width: 1.875vw;
    height: 1.875vw;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.417vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9CA3AF;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}

.slg-copy-btn:hover:not(:disabled) {
    background: #fff;
    border-color: var(--main-color, #31B939);
    color: var(--main-color, #31B939);
}

.slg-copy-btn:disabled { opacity: .35; cursor: default; }

.slg-copy-btn--done {
    background: #DCFCE7 !important;
    border-color: var(--main-color, #31B939) !important;
    color: var(--main-color, #31B939) !important;
}

.slg-copy-btn svg { pointer-events: none; }

.slg-copy-hint {
    font-family: "Raleway", sans-serif;
    font-size: 0.625vw;
    color: var(--main-color, #31B939);
    font-weight: 600;
    margin-top: 0.313vw;
    min-height: 1em;
    transition: opacity .2s;
}

/* ── Пакетный режим ──────────────────────────────────────────── */

.slg-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.25vw 0 0.521vw;
}

.slg-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.417vw;
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    font-weight: 700;
    color: var(--main-color, #31B939);
    background: none;
    border: 1px solid rgba(49,185,57,.35);
    border-radius: 0.417vw;
    padding: 0.313vw 0.729vw;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.slg-copy-all-btn:hover { background: rgba(49,185,57,.07); }

.slg-copy-all-btn--done {
    color: #166534 !important;
    background: #DCFCE7 !important;
    border-color: var(--main-color, #31B939) !important;
}

.slg-bulk-out {
    background: #fff;
    border: 1.5px solid rgba(28,28,28,.1);
    border-radius: 0.781vw;
    overflow: hidden;
    min-height: 4vw;
}

.slg-bulk-empty {
    font-family: "Raleway", sans-serif;
    font-size: 0.729vw;
    color: #C0C3C8;
    padding: 1.25vw;
    display: block;
}

.slg-bulk-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 0.625vw;
    align-items: center;
    padding: 0.625vw 0.938vw;
    border-bottom: 1px solid #F9FAFB;
    transition: background .1s;
}

.slg-bulk-row:last-child { border-bottom: none; }
.slg-bulk-row:hover { background: #FAFAFA; }

.slg-bulk-src {
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slg-bulk-arrow {
    font-size: 0.729vw;
    color: #D1D5DB;
    flex-shrink: 0;
}

.slg-bulk-slug {
    font-family: 'Courier New', monospace;
    font-size: 0.729vw;
    font-weight: 700;
    color: var(--text-main-color, #1C1C1C);
    word-break: break-all;
}

.slg-bulk-copy {
    background: none;
    border: none;
    cursor: pointer;
    color: #D1D5DB;
    padding: 0.208vw;
    border-radius: 0.313vw;
    display: flex;
    align-items: center;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

.slg-bulk-copy:hover { color: var(--main-color, #31B939); background: rgba(49,185,57,.07); }
.slg-bulk-copy--done { color: var(--main-color, #31B939) !important; }

/* ══ ПРАВАЯ КОЛОНКА — НАСТРОЙКИ ════════════════════════════════ */

.slg-sidebar {
    position: sticky;
    top: 1.563vw;
}

.slg-settings-card {
    background: #fff;
    border-radius: 1.25vw;
    padding: 1.563vw;
}

.slg-settings-title {
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9CA3AF;
    margin-bottom: 1.25vw;
}

.slg-setting-group {
    margin-bottom: 1.25vw;
    padding-bottom: 1.25vw;
    border-bottom: 1px solid #F3F4F6;
}

.slg-setting-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.slg-setting-label {
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    font-weight: 700;
    color: var(--text-main-color, #1C1C1C);
    display: block;
    margin-bottom: 0.625vw;
}

/* ── Кнопки выбора разделителя / регистра ────────────────────── */

.slg-sep-btns {
    display: flex;
    flex-direction: column;
    gap: 0.417vw;
}

.slg-sep-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    font-weight: 600;
    color: #6B7280;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.521vw;
    padding: 0.521vw 0.729vw;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, color .15s;
}

.slg-sep-btn:hover {
    background: #F3F4F6;
    color: var(--text-main-color, #1C1C1C);
}

.slg-sep-btn--active {
    background: rgba(49,185,57,.08) !important;
    border-color: var(--main-color, #31B939) !important;
    color: var(--text-main-color, #1C1C1C) !important;
}

.slg-sep-example {
    font-family: 'Courier New', monospace;
    font-size: 0.625vw;
    color: #9CA3AF;
    font-weight: 400;
    flex-shrink: 0;
    margin-left: 0.417vw;
}

.slg-sep-btn--active .slg-sep-example {
    color: var(--main-color, #31B939);
}

/* ── Чекбоксы ────────────────────────────────────────────────── */

.slg-checks {
    display: flex;
    flex-direction: column;
    gap: 0.521vw;
}

.slg-check {
    display: flex;
    align-items: center;
    gap: 0.521vw;
    cursor: pointer;
    font-family: "Raleway", sans-serif;
    font-size: 0.677vw;
    color: #374151;
    line-height: 1.3;
}

.slg-check input[type="checkbox"] {
    accent-color: var(--main-color, #31B939);
    width: 0.833vw;
    height: 0.833vw;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

/* ── Превью URL ──────────────────────────────────────────────── */

.slg-setting-group--preview { margin-bottom: 0; }

.slg-preview-url {
    font-family: 'Courier New', monospace;
    font-size: 0.625vw;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 0.521vw;
    padding: 0.625vw 0.729vw;
    word-break: break-all;
    line-height: 1.6;
}

.slg-preview-base { color: #9CA3AF; }

.slg-preview-slug {
    color: var(--main-color, #31B939);
    font-weight: 700;
}

/* ══ АДАПТИВ ════════════════════════════════════════════════════ */

@media (max-width: 992px) {
    .slg-layout               { grid-template-columns: 1fr; gap: 3vw; }
    .slg-sidebar              { position: static; }
    .slg-settings-card        { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vw 3vw; }
    .slg-settings-title       { grid-column: 1 / -1; font-size: 1.4vw; margin-bottom: 0.5vw; }
    .slg-page-title           { font-size: 4vw; margin: 4vw 0 1vw; }
    .slg-page-sub             { font-size: 1.8vw; margin-bottom: 3vw; }
    .slg-tabs                 { margin-bottom: 2.5vw; }
    .slg-tab                  { font-size: 1.6vw; padding: 1.4vw 2vw; }
    .slg-label                { font-size: 1.3vw; margin-bottom: 1vw; }
    .slg-input                { height: 5.5vw; font-size: 1.8vw; border-radius: 1.5vw; padding: 0 2vw; }
    .slg-textarea             { font-size: 1.6vw; padding: 1.5vw 2vw; border-radius: 1.5vw; min-height: 16vw; }
    .slg-result               { font-size: 2vw; border-radius: 1.5vw; padding: 1.5vw 4.5vw 1.5vw 2vw; }
    .slg-result--empty        { font-size: 1.5vw; }
    .slg-copy-btn             { width: 3.5vw; height: 3.5vw; border-radius: 0.8vw; right: 1.2vw; }
    .slg-copy-hint            { font-size: 1.2vw; margin-top: 0.5vw; }
    .slg-bulk-actions         { margin: 2vw 0 1vw; }
    .slg-copy-all-btn         { font-size: 1.3vw; padding: 0.7vw 1.5vw; border-radius: 0.8vw; }
    .slg-bulk-row             { padding: 1vw 1.5vw; gap: 1vw; }
    .slg-bulk-src             { font-size: 1.3vw; }
    .slg-bulk-slug            { font-size: 1.4vw; }
    .slg-bulk-arrow           { font-size: 1.4vw; }
    .slg-settings-card        { border-radius: 2.5vw; padding: 2.5vw; }
    .slg-settings-title       { font-size: 1.4vw; }
    .slg-setting-label        { font-size: 1.3vw; margin-bottom: 1vw; }
    .slg-sep-btn              { font-size: 1.3vw; padding: 1vw 1.5vw; border-radius: 1vw; }
    .slg-sep-example          { font-size: 1.2vw; }
    .slg-check                { font-size: 1.3vw; gap: 1vw; }
    .slg-check input          { width: 1.6vw; height: 1.6vw; }
    .slg-preview-url          { font-size: 1.2vw; padding: 1vw 1.5vw; border-radius: 1vw; }
}

@media (max-width: 768px) {
    .slg-section              { padding-bottom: 10vw; }
    .slg-page-title           { font-size: 6.5vw; margin: 6vw 0 2vw; }
    .slg-page-sub             { font-size: 3.2vw; margin-bottom: 4vw; }
    .slg-tabs                 { margin-bottom: 4vw; }
    .slg-tab                  { font-size: 3vw; padding: 2.5vw 3.5vw; }
    .slg-label                { font-size: 2.5vw; margin-bottom: 1.5vw; }
    .slg-label--mt            { margin-top: 3.5vw; }
    .slg-input                { height: 11vw; font-size: 3.5vw; border-radius: 2.5vw; padding: 0 3.5vw; }
    .slg-textarea             { font-size: 3.2vw; padding: 3vw 3.5vw; border-radius: 2.5vw; min-height: 30vw; }
    .slg-result               { font-size: 3.8vw; border-radius: 2.5vw; padding: 3vw 10vw 3vw 3.5vw; }
    .slg-result--empty        { font-size: 3vw; }
    .slg-copy-btn             { width: 7vw; height: 7vw; border-radius: 1.5vw; right: 2vw; }
    .slg-copy-hint            { font-size: 2.5vw; }
    .slg-bulk-actions         { margin: 3.5vw 0 1.5vw; flex-wrap: wrap; gap: 1.5vw; }
    .slg-copy-all-btn         { font-size: 2.8vw; padding: 1.5vw 3vw; border-radius: 1.5vw; }
    .slg-bulk-row             { grid-template-columns: 1fr auto; gap: 1.5vw; padding: 2vw 3vw; }
    .slg-bulk-arrow           { display: none; }
    .slg-bulk-src             { font-size: 2.5vw; grid-column: 1; color: #9CA3AF; }
    .slg-bulk-slug            { font-size: 3vw; grid-column: 1; }
    .slg-bulk-copy            { grid-row: 1 / 3; grid-column: 2; align-self: center; }
    .slg-settings-card        { display: block; border-radius: 4vw; padding: 4vw; }
    .slg-settings-title       { font-size: 2.8vw; margin-bottom: 3vw; }
    .slg-setting-group        { margin-bottom: 3vw; padding-bottom: 3vw; }
    .slg-setting-label        { font-size: 2.8vw; margin-bottom: 2vw; }
    .slg-sep-btn              { font-size: 2.8vw; padding: 2vw 3vw; border-radius: 2vw; }
    .slg-sep-example          { font-size: 2.5vw; }
    .slg-check                { font-size: 2.8vw; gap: 2vw; }
    .slg-check input          { width: 4vw; height: 4vw; }
    .slg-preview-url          { font-size: 2.5vw; padding: 2vw 3vw; border-radius: 2vw; }
}