/* ---- Konwerter: kontener i przełącznik układu ---- */
.converter-wrap {
    --copy-bar-height: 2.5rem;
    --copy-bar-gap: 0.5rem;
    --input-border: 1px solid var(--bs-border-color);
    --input-radius: 6px;
}

.converter-layout-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

/* Ikony układu: minimalistyczne kwadraciki – pionowo (2 w kolumnie) vs obok siebie (2×2) */
.layout-icon {
    display: flex;
    gap: 2px;
    width: 1.25rem;
    height: 1.25rem;
}

.layout-icon span {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: currentColor;
    border-radius: 1px;
}

.layout-icon--stack {
    flex-direction: column;
}

.layout-icon--stack span {
    flex: 1 1 0;
}

.layout-icon--side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.converter-layout-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.converter-layout-toggle__btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.converter-layout-toggle__btn.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.converter-layout-toggle__btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ---- Panele: układ pionowo (kontrolki na środku) / obok siebie (kontrolki u góry) ---- */
.converter-panels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.converter-wrap.layout-side .converter-panels {
    flex-direction: row;
    flex-wrap: wrap;
}

.converter-wrap.layout-side .converter-controls {
    order: 0;
    flex-basis: 100%;
    width: 100%;
}

.converter-wrap.layout-side .converter-panel {
    order: 1;
    flex: 1 1 280px;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .converter-wrap.layout-side .converter-panels {
        flex-direction: column;
    }
    .converter-wrap.layout-side .converter-controls {
        order: 0;
    }
    .converter-wrap.layout-side .converter-panel {
        order: 0;
    }
}

/* ---- Blok kontrolek (dropdown, checkboxy, przycisk Konwertuj) ---- */
.converter-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--input-radius);
    border: var(--input-border);
    background: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
}

.layout-stack .converter-controls {
    align-items: stretch; /* Umożliwia rozciągnięcie elementów na całą szerokość */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.layout-stack .converter-controls .inputs {
    width: 100%;
}

.converter-controls .inputs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Zmniejszono odstęp by checkboxy były bliżej siebie */
    margin: 0;
}

/* Dropdown (select) – w stylu przycisków */
.converter-select.form-select {
    display: block;
    width: 100%; /* Na całą szerokość */
    padding: 0.45rem 0.75rem;
    font-family: inherit; /* Ujednolicenie czcionki */
    font-size: 0.9rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.converter-select.form-select:hover {
    border-color: var(--bs-primary-border-subtle);
}

.converter-select.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
    outline: none;
}

.converter-controls .options {
    position: relative;
}

.converter-controls .inputs select {
    margin-bottom: 0;
}

/* Checkboxy */
.converter-controls .form-check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0; /* Usunięty padding dla zgrupowania checkboxów */
}

.converter-controls .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin: 0;
    margin-right: 0.35rem;
    border: var(--input-border);
    border-radius: 3px;
    background: var(--bs-body-bg);
    cursor: pointer;
    flex-shrink: 0;
}

.converter-controls .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.35);
    outline: none;
}

.converter-controls .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Wymuszenie tej samej czcionki na każdym labelu */
.converter-controls label,
.converter-controls .form-check-label {
    font-family: inherit;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

/* Blok "Dodaj wyróżnienie" z polem liczbowym */
#convertToFeaturedBlock {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

#convertToFeaturedBlock .converter-input-number {
    width: 4ch;
    padding: 0.25rem 0.4rem;
    font-family: inherit; /* Ujednolicenie czcionki */
    font-size: 0.9rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#convertToFeaturedBlock .converter-input-number::-webkit-inner-spin-button,
#convertToFeaturedBlock .converter-input-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

#convertToFeaturedBlock label[for="featuredNumber"] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* Przycisk Konwertuj – domyślnie na środku (mobile), wyrównanie do lewej na desktopie */
.converter-actions {
    margin-top: 0.25rem;
    display: flex; 
    justify-content: center;
}

@media (min-width: 768px) {
    .converter-actions {
        justify-content: flex-start;
    }
}

.converter-btn {
    padding: 0.45rem 1.5rem; /* Większy padding po bokach */
    font-family: inherit; /* Ujednolicenie czcionki */
    font-size: 0.9rem;
    font-weight: 500;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.converter-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary);
}

.converter-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.converter-btn:active {
    transform: scale(0.98);
}

/* ---- Pojedynczy panel (wejście / wyjście) ---- */
.converter-panel {
    position: relative;
    min-height: 12rem;
    border-radius: 8px;
    border: var(--input-border);
    background: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
    overflow: hidden;
}

.converter-panel__body {
    padding: var(--copy-bar-height) var(--copy-bar-gap) var(--copy-bar-gap) var(--copy-bar-gap);
    min-height: 100%;
    box-sizing: border-box;
}

.converter-panel__copy-bar.converter-panel__copy-bar--bottom ~ .converter-panel__body {
    padding: var(--copy-bar-gap) var(--copy-bar-gap) var(--copy-bar-height) var(--copy-bar-gap);
}

/* ---- Pasek z przyciskiem Kopiuj ---- */
.converter-panel__copy-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--copy-bar-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--copy-bar-gap);
    background: rgba(var(--bs-secondary-bg-rgb), 0.85);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    z-index: 2;
    cursor: pointer; /* Kursor sugerujący, że można kliknąć pasek */
}

.converter-panel__copy-bar--bottom {
    top: auto;
    bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--bs-border-color);
}

/* Symulacja najechania na sam przycisk Kopiuj podczas przebywania na całym pasku */
.converter-panel__copy-bar:hover .copy-bar-btn {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--bs-border-color);
    color: var(--bs-primary);
}

.copy-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Rozciągnięcie "szkła" nad całym nadrzędnym paskiem ułatwiające skopiowanie */
.copy-bar-btn::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.copy-bar-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--bs-border-color);
    color: var(--bs-primary);
}

.copy-bar-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.copy-bar-btn:active {
    /* Zamiast transform (które psuło stretched-link) przycisk tylko subtelnie przyciemni się przy wciśnięciu */
    background: rgba(var(--bs-primary-rgb), 0.2);
}

.copy-bar-feedback {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--bs-success);
    position: relative; /* Pozwala unieść tekst ponad ::after stretched-linka i umożliwić jego bezkolizyjny odczyt/klik */
    z-index: 2;
}

/* ---- Zawartość paneli ---- */
.converter-panel__body textarea,
.converter-panel__body [contenteditable="true"] {
    width: 100%;
    min-height: 10rem;
    padding: 0.75rem;
    border-radius: var(--input-radius);
    border: var(--input-border);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    box-sizing: border-box;
}

/* Włączenie resize dla diva i upewnienie się, że nie wyjedzie za układ */
.converter-panel__body [contenteditable="true"] {
    resize: vertical;
    overflow-y: auto;
    outline: none;
}

.converter-panel__body textarea:focus,
.converter-panel__body [contenteditable="true"]:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

.converter-panel__body textarea::placeholder {
    color: var(--bs-secondary-color);
}

/* Symulacja placeholdera dla pola contenteditable */
.converter-panel__body[contenteditable="true"]:empty::before {
    content: attr(aria-placeholder);
    color: var(--bs-secondary-color);
    pointer-events: none;
    display: block;
}

.converter-panel__output-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--bs-heading-color);
}

.converter-panel__code {
    display: block;
    margin: 0;
    padding: 0;
    background: transparent;
}

.converter-panel__code textarea {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* ---- Tooltips przy select (Zmodernizowane) ---- */
.converter-controls .tooltips {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Pozwala na swobodne klikanie i najeżdżanie na sam select */
    z-index: 10;
}

.options :where(.html-tooltip, .line-breaker-tooltip, .unordered-list-tooltip, .ordered-list-tooltip, .paragraphs-tooltip, .table-tooltip) {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 100%;
    padding: 0.85rem 1.15rem;
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg); /* Odwrócone kolory zależnie od motywu */
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left; /* Zmienione na równe do lewej dla lepszej czytelności bloku tekstu */
    border-radius: var(--input-radius);
    box-shadow: var(--bs-box-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.options :where(.html-tooltip, .line-breaker-tooltip, .unordered-list-tooltip, .ordered-list-tooltip, .paragraphs-tooltip, .table-tooltip)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 1.5rem; /* Zmiana na estetyczną strzałeczkę po lewej zamiast idealnie na środku */
    border-width: 7px;
    border-style: solid;
    border-color: var(--bs-body-color) transparent transparent transparent;
}

.options:hover:has(option[value="table"]:checked) .table-tooltip,
.options:hover:has(option[value="p"]:checked) .paragraphs-tooltip,
.options:hover:has(option[value="ol"]:checked) .ordered-list-tooltip,
.options:hover:has(option[value="ul"]:checked) .unordered-list-tooltip,
.options:hover:has(option[value="line-breaker"]:checked) .line-breaker-tooltip,
.options:hover:has(option[value="html"]:checked) .html-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
    transition-delay: 0.3s; /* Mniejsze opóźnienie */
}

/* ---- Dodatki dla Modułu Kolorów ---- */
.color-tool-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--bs-heading-color);
}
.color-input-wrapper {
    margin-bottom: 1rem;
}
.color-input-wrapper input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: ui-monospace, monospace;
    font-size: 0.95rem;
}
.color-input-wrapper input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

/* Wyniki konwersji kolorów */
.color-result-row {
    display: flex;
    align-items: stretch;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.color-swatch {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--input-radius);
    border: var(--input-border);
    box-shadow: var(--bs-box-shadow-sm);
    flex-shrink: 0;
}
.color-values {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    flex-grow: 1;
}
.color-value-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.color-value-box span {
    width: 35px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.color-value-box input {
    flex-grow: 1;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: rgba(var(--bs-tertiary-bg-rgb), 0.5);
    color: var(--bs-body-color);
}
.copy-inline-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border: var(--input-border);
    border-radius: 4px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: 0.15s;
}
.copy-inline-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Slidery do modyfikacji koloru na żywo */
.color-slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}
.color-slider-row label {
    width: 6rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin: 0;
    text-align: left;
    cursor: help;
    border-bottom: 1px dotted var(--bs-secondary-color); /* Podpowiedź wizualna, że można najechać */
}
.color-slider-row input[type="range"] {
    flex-grow: 1;
    cursor: pointer;
    height: 1.2rem;
    accent-color: var(--bs-primary);
}
.color-slider-val {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 4.5rem;
}
.color-slider-val input[type="number"] {
    width: 100%;
    padding: 0.25rem;
    font-family: inherit;
    font-size: 0.85rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: center;
}
.color-slider-val span {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    width: 1.2ch;
}

/* ---- Dodatki dla Modułu SEO Cleaner ---- */
.seo-input-wrapper .contenteditable-box:empty::before {
    content: attr(aria-placeholder);
    color: var(--bs-secondary-color);
    pointer-events: none;
    display: block;
}
.seo-input-wrapper .contenteditable-box:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}

/* Układ w jednej linii dla inputów i ich kontrolek */
.seo-input-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.seo-input-label {
    width: 65px; /* Stała szerokość dla równego wyrównania w kolumnie */
    text-align: right;
    flex-shrink: 0;
    margin-top: 0.5rem; /* Wyśrodkowanie względem jednowierszowego inputa */
}

.seo-remove-btn {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Ujednolicony wygląd jednowierszowego paska (Input & Output) */
/* Specyficzność zwiększona, aby nadpisać min-height: 10rem z globalnego kodu */
.converter-panel__body div.seo-input-field[contenteditable="true"], 
.converter-panel__body div#seoOutputHtml[contenteditable="true"] {
    height: 2.5rem; /* Wymuszona wysokość na dokładnie jedną linię + padding */
    min-height: 2.5rem;
    padding: 0.45rem 0.75rem;
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    overflow-y: auto;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    resize: vertical; /* Pozwala na ręczne rozciąganie w pionie */
    max-height: 400px;
    line-height: 1.5;
    white-space: pre-wrap; /* Aby zawijanie wierszy działało natywnie */
    box-sizing: border-box;
}

.converter-panel__body div.seo-input-field[contenteditable="true"]:focus, 
.converter-panel__body div#seoOutputHtml[contenteditable="true"]:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.2);
}