/* ===================================
   KARTY OBIEKTÓW
   =================================== */

.object-card {

    border-radius: 12px;
    transition: all 0.3s ease;
}

.object-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-300);
    transform: translateY(-4px);
}

.object-rating {
    color: var(--accent-500);
}

.object-location {
    color: var(--text-secondary);
}

/* ===================================
   FORMULARZE
   =================================== */

input,
textarea {
    border: 2px solid var(--border-color);
}

input:focus,
textarea:focus {
    border-color: var(--primary-400);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
fieldset {
    border: none
}

.wpforms-field-container ul {
    list-style: none;

}

input[type="checkbox"] {
    margin-right: 10px;
}

/* Reset domyślnych stylów select */
select,
.object-meta-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 40px 10px 15px;
    font-size: 16px;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

select:hover,
.object-meta-field select:hover {
    border-color: #999;
}

select:focus,
.object-meta-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

select::-ms-expand {
    display: none;
}

/* ===================================
   ALERTY
   =================================== */

.alert-success {
    background: var(--secondary-50);
    border-left: 4px solid var(--secondary-500);
    color: var(--secondary-700);
}

.alert-warning {
    background: var(--accent-50);
    border-left: 4px solid var(--accent-500);
    color: var(--accent-700);
}

/* ===================================
   COOKIE BANNER
   =================================== */

   @media (max-width: 490px) {
.cookie-buttons {
  
    flex-direction: column;
}


   }


   /* Domyślny kontener */
   .container {
       width: 100%;
       max-width: var(--container-max);
       margin-left: auto;
       margin-right: auto;
       padding-left: var(--container-padding);
       padding-right: var(--container-padding);
   }

   /* Wąski - blog, artykuły */
   .container--narrow {
       max-width: var(--container-narrow);
   }

   /* Szeroki - galerie, portfolio */
   .container--wide {
       max-width: var(--container-wide);
   }

   /* Pełna szerokość - hero, banery */
   .container--full {
       max-width: 100%;
       padding-left: 0;
       padding-right: 0;
   }

   .object-thumb {
       width: 100%;
       height: 200px;
       overflow: hidden;
       border-radius: 8px 8px 0 0;
   }

   .object-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .object-thumb--empty {
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f0f0f0;
       color: #999;
       font-size: 40px;
   }

   #nearby-results-map {
       height: 500px;
       /* Wysokość kontenera */
       min-height: 300px;
   }

   .leaflet-container {
       background-color: #f8f9fa;
       /* Tło mapy */
   }

   .nearby-results h3{
    margin-bottom: 20px;
    margin-top: 50px;
   }


   /* Panel informacyjny o trasie */
   #route-info-panel {
       position: absolute;
       top: 10px;
       left: 50%;
       transform: translateX(-50%);
       z-index: 1000;
       background: white;
       padding: 15px 20px;
       border-radius: 10px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       display: none;
   }

   .route-info-content h4 {
       margin: 0 0 10px 0;
       color: #333;
   }

   .route-info-content p {
       margin: 0 0 10px 0;
       color: #666;
   }

   /* Przyciski w popup */
   .btn-show-route {
       display: block;
       width: 100%;
       padding: 8px 12px;
       margin: 5px 0;
       background: #3388ff;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 14px;
   }

   .btn-show-route:hover {
       background: #2577e8;
   }

   .btn-external-route {
       display: block;
       text-align: center;
       padding: 8px 12px;
       margin: 5px 0;
       background: #4CAF50;
       color: white;
       text-decoration: none;
       border-radius: 5px;
       font-size: 14px;
   }

   .btn-external-route:hover {
       background: #45a049;
   }

   .btn-clear-route {
       padding: 8px 15px;
       background: #dc3545;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
   }

   .btn-clear-route:hover {
       background: #c82333;
   }

   .leaflet-routing-container {
       display: none;
   }

   /* Kontener mapy - musi mieć position relative */
   #nearby-results-map {
       position: relative;
   }


   /* Style dla panelu instrukcji */
   .leaflet-routing-container {
       background: white;
       padding: 10px;
       border-radius: 8px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       max-height: 300px;
       overflow-y: auto;
   }

   .leaflet-routing-alt {
       max-width: 250px;
   }

   /* Przyciski wyboru transportu - POWIĘKSZONE */
   .route-buttons {
       display: flex;
       gap: 10px;
       justify-content: center;
       margin-top: 10px;
   }

   .route-buttons a {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 50px;
       height: 50px;
       background: #f5f5f5;
       border-radius: 10px;
       text-decoration: none;
       font-size: 28px;
       /* Większa ikona */
       transition: all 0.2s;
   }

   .route-buttons a:hover {
       background: #4285F4;
       transform: scale(1.15);
   }
   /* --- PROFIL AUTORA (author.php) --- */

   .author-profile-header {
       background: #fff;
       border-radius: 12px;
       padding: 30px;
       display: flex;
       align-items: center;
       gap: 30px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
       border: 1px solid #eee;
       margin-bottom: 40px;
       position: relative;
       overflow: hidden;
   }

   /* Opcjonalnie: Niebieski pasek na górze */
   .author-profile-header::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 6px;
       background: #3498db;
   }

   .profile-avatar img {
       border-radius: 50%;
       border: 4px solid #fff;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       display: block;
   }

   .profile-info {
       flex-grow: 1;
   }

   .profile-info h1 {
       margin: 0 0 5px 0;
       font-size: 1.8rem;
       color: #2c3e50;
   }

   .join-date {
       color: #999;
       font-size: 0.9rem;
       margin: 0 0 10px 0;
   }

   .author-bio {
       font-size: 1rem;
       color: #555;
       line-height: 1.5;
       max-width: 600px;
   }

   /* Statystyki */
   .profile-stats {
       display: flex;
       gap: 20px;
       border-left: 1px solid #eee;
       padding-left: 30px;
   }

   .stat-item {
       text-align: center;
   }

   .stat-item .count {
       display: block;
       font-size: 1.5rem;
       font-weight: 700;
       color: #3498db;
   }

   .stat-item .label {
       font-size: 0.8rem;
       color: #7f8c8d;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   /* Mały przycisk edycji na feedzie autora */
   .btn-edit-small {
       color: #999;
       font-size: 1rem;
       transition: color 0.2s;
   }

   .btn-edit-small:hover {
       color: #3498db;
   }

   /* Responsywność */
   @media (max-width: 768px) {
       .author-profile-header {
           flex-direction: column;
           text-align: center;
       }

       .profile-stats {
           border-left: none;
           border-top: 1px solid #eee;
           padding-left: 0;
           padding-top: 20px;
           width: 100%;
           justify-content: center;
       }
   }
/* --- UKŁAD SPOŁECZNOŚCI --- */
.community-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start;
}

@media (max-width: 900px) {
.community-layout {
    grid-template-columns: 1fr;
}

.comm-sidebar {
    order: -1;
    margin-bottom: 30px;
}

/* Sidebar nad wpisami na mobile */
}

.sticky-sidebar-content {
position: sticky;
top: 40px;
}

/* --- KARTA POSTA (FEED) --- */
.feed-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
border: 1px solid #eee;
margin-bottom: 25px;
overflow: hidden;
}

.feed-header {
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
}

.feed-avatar img {
border-radius: 50%;
display: block;
}

.feed-meta {
display: flex;
flex-direction: column;
}

.author-name {
font-weight: 700;
color: #2c3e50;
font-size: 1rem;
}

.post-info {
font-size: 0.8rem;
color: #999;
}

.post-location {
color: #3498db;
margin-left: 8px;
}

.feed-content {
padding: 0 15px 15px 15px;
color: #333;
font-size: 1rem;
line-height: 1.5;
}

/* Zdjęcia */
.feed-photos {
display: grid;
gap: 2px;
margin-bottom: 10px;
}

.feed-photos img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}

.feed-photos.count-1 {
grid-template-columns: 1fr;
}

.feed-photos.count-2 {
grid-template-columns: 1fr 1fr;
}

.feed-photos.count-2 img {
height: 250px;
}

.feed-photos.count-3 {
grid-template-columns: 2fr 1fr;
grid-template-rows: 150px 150px;
}

.feed-photos.count-3 a:first-child {
grid-row: 1 / 3;
}

.feed-photos.count-3 img {
height: 100%;
}

/* Footer Posta */
.feed-footer {
padding: 10px 15px;
border-top: 1px solid #f0f0f0;
display: flex;
gap: 20px;
background: #fbfbfb;
}

.action-btn {
background: none;
border: none;
color: #666;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-family: inherit;
}

.action-btn:hover {
color: #3498db;
}

/* --- SEKCJA ROZWIJANYCH KOMENTARZY --- */
.feed-comments-drawer {
background: #fcfcfc;
border-top: 1px solid #eee;
padding: 15px;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

.drawer-comments-list {
margin-bottom: 15px;
max-height: 400px;
overflow-y: auto;
}

.drawer-comment-item {
display: flex;
gap: 10px;
margin-bottom: 12px;
}

.drawer-avatar img {
border-radius: 50%;
display: block;
}

.drawer-bubble {
background: #f0f2f5;
padding: 8px 12px;
border-radius: 18px;
font-size: 0.9rem;
}

.drawer-author {
font-weight: 700;
color: #2c3e50;
font-size: 0.85rem;
display: block;
}

.drawer-text p {
margin: 0;
line-height: 1.4;
color: #333;
}

/* Formularz w szufladzie */
.drawer-form .comment-form {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.drawer-form .comment-notes,
.drawer-form .logged-in-as,
.drawer-form label {
display: none;
}

.drawer-form .comment-form-comment {
flex-grow: 1;
margin: 0;
}

.drawer-form textarea {
width: 100%;
border: 1px solid #ddd;
border-radius: 20px;
padding: 8px 15px;
height: 38px;
resize: none;
transition: height 0.2s;
}

.drawer-form textarea:focus {
height: 70px;
outline: none;
border-color: #3498db;
}

.drawer-submit-btn {
background: #3498db;
color: #fff;
border: none;
padding: 0 15px;
height: 38px;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
}

.drawer-submit-btn:hover {
background: #2980b9;
}

/* --- FORMULARZ GŁÓWNY (DODAWANIA) --- */
.community-form-box {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
}

.form-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.form-header img {
border-radius: 50%;
}

.community-form-box textarea {
width: 100%;
border: none;
background: #f0f2f5;
padding: 15px;
border-radius: 10px;
resize: none;
height: 80px;
margin-bottom: 10px;
}

.community-form-box textarea:focus {
background: #e4e6eb;
outline: none;
}

.form-tools {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid #eee;
padding-top: 10px;
flex-wrap: wrap;
}

.city-input {
border: 1px solid #ddd;
border-radius: 20px;
padding: 5px 15px;
}

.tool-btn {
background: #eef5f9;
border: none;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
color: #3498db;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}

.submit-btn {
background: #3498db;
color: #fff;
border: none;
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
margin-left: auto;
cursor: pointer;
}

/* --- SIDEBAR --- */
.sidebar-box {
background: #fff;
border-radius: 12px;
padding: 25px;
border: 1px solid #eee;
margin-bottom: 20px;
text-align: center;
}

.user-widget-header img {
border-radius: 50%;
margin-bottom: 10px;
border: 3px solid #f0f2f5;
}

.user-widget-header h4 {
margin: 0;
font-size: 1.2rem;
}

.user-widget-actions {
display: flex;
flex-direction: column;
gap: 10px;
}

.btn-action {
display: block;
padding: 10px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
text-align: center;
}

.btn-action.primary {
background: #3498db;
color: #fff;
}

.btn-action.secondary {
background: #eef5f9;
color: #3498db;
}

.btn-logout {
font-size: 0.85rem;
color: #e74c3c;
margin-top: 10px;
display: inline-block;
}

.login-prompt-box {
text-align: center;
padding: 30px;
background: #fff;
border: 2px dashed #ddd;
border-radius: 12px;
color: #777;
}

/* Przycisk Facebook w feedzie */
.share-fb-btn:hover {
color: #1877f2 !important;
/* Facebook Blue */
}

.share-fb-btn:hover i {
color: #1877f2;
}

/* Przycisk rozwijania tekstu */
.read-more-trigger {
display: inline-block;
margin-top: 8px;
font-weight: 600;
color: #3498db;
cursor: pointer;
font-size: 0.9rem;
transition: color 0.2s;
}

.read-more-trigger:hover {
color: #2980b9;
text-decoration: underline;
}

.text-full {
animation: fadeIn 0.3s ease;
}

/* --- MENU ZARZĄDZANIA WPISEM --- */

/* Kontener przycisku "zębatki" */
.feed-options {
position: relative;
margin-left: auto;
/* Pycha ikonkę na prawą stronę */
}

/* Przycisk otwierający (Zębatka) */
.options-btn {
background: transparent;
border: none;
font-size: 1.1rem;
color: #95a5a6;
/* Szary */
cursor: pointer;
padding: 0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.options-btn:hover {
background-color: #f0f2f5;
/* Szare tło kółeczka */
color: #3498db;
/* Niebieska zębatka */
transform: rotate(90deg);
/* Efekt obrotu */
}

/* Rozwijane Menu (Pudełko) */
.options-menu {
display: none;
/* Domyślnie ukryte */
position: absolute;
top: 100%;
right: 0;
width: 160px;
background: #fff;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
/* Mocniejszy cień */
border: 1px solid #eee;
z-index: 100;
overflow: hidden;
margin-top: 5px;
animation: fadeInMenu 0.2s ease-out;
}

@keyframes fadeInMenu {
from {
    opacity: 0;
    transform: translateY(-5px);
}

to {
    opacity: 1;
    transform: translateY(0);
}
}

/* Styl linków (Opcji) */
.opt-link {
display: flex;
align-items: center;
padding: 12px 15px;
text-decoration: none;
color: #2c3e50;
font-size: 0.9rem;
font-weight: 500;
transition: background 0.2s, color 0.2s;
border-bottom: 1px solid #f9f9f9;
}

.opt-link:last-child {
border-bottom: none;
}

/* Ikony w menu */
.opt-link i {
margin-right: 12px;
font-size: 1rem;
width: 20px;
/* Stała szerokość, żeby tekst był równo */
text-align: center;
color: #95a5a6;
transition: color 0.2s;
}

/* --- STYL DLA PRZYCISKU EDYTUJ --- */
.opt-link:hover {
background-color: #f8f9fa;
color: #3498db;
/* Niebieski tekst */
}

.opt-link:hover i {
color: #3498db;
/* Niebieska ikona */
}

/* --- STYL DLA PRZYCISKU USUŃ (Specjalny - Czerwony) --- */
.opt-link.delete {
color: #e74c3c;
/* Czerwony tekst */
}

.opt-link.delete i {
color: #e74c3c;
/* Czerwona ikona */
}

.opt-link.delete:hover {
background-color: #fdedec;
/* Jasnoczerwone tło ostrzegawcze */
color: #c0392b;
/* Ciemniejszy czerwony */
}

.opt-link.delete:hover i {
color: #c0392b;
}
    /* --- KARTA PROFILU W SIDEBARZE --- */
    .author-profile-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #eee;
        overflow: hidden;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    /* Kolorowy pasek na górze */
    .profile-cover {
        height: 80px;
        background: linear-gradient(135deg, #3498db, #2c3e50);
    }

    .profile-content {
        padding: 0 20px 25px 20px;
        margin-top: -50px;
        /* Wsuwamy avatar na pasek */
    }

    .profile-avatar-large img {
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        background: #fff;
        width: 100px;
        height: 100px;
    }

    .profile-name {
        margin: 10px 0 5px 0;
        font-size: 1.4rem;
        color: #2c3e50;
    }

    .author-bio {
        font-size: 0.9rem;
        color: #666;
        margin-top: 15px;
        font-style: italic;
    }

    /* Statystyki */
    .profile-stats-grid {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    .stat-box strong {
        display: block;
        font-size: 1.2rem;
        color: #3498db;
    }

    .stat-box span {
        font-size: 0.8rem;
        color: #999;
        text-transform: uppercase;
    }

/* --- NAGŁÓWEK PROFILU (SZEROKI) --- */
.author-profile-header {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.author-profile-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #3498db, #2c3e50);
}

.profile-avatar img {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: block;
    width: 120px;
    height: 120px;
}

.profile-info {
    flex-grow: 1;
}

.profile-info h1 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    color: #2c3e50;
}

.join-date {
    color: #999;
    font-size: 0.9rem;
    margin: 0 0 10px 0;
}

.author-bio {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    max-width: 600px;
}

/* Statystyki */
.profile-stats {
    display: flex;
    gap: 30px;
    border-left: 1px solid #eee;
    padding-left: 30px;
}

.stat-item {
    text-align: center;
}

.stat-item .count {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #3498db;
}

.stat-item .label {
    font-size: 0.8rem;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- SIATKA WPISÓW (GRID) --- */
.author-grid-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: start;

}

/* Karta w siatce (modyfikacje) */
.feed-card.grid-item {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Żeby przyciski były na dole, jeśli użyjemy flex stretch */
}

/* Na telefonie 1 kolumna */
@media (max-width: 768px) {
    .author-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-stats {
        border-left: none;
        border-top: 1px solid #eee;
        padding-left: 0;
        padding-top: 20px;
        width: 100%;
        justify-content: center;
    }

    .author-grid-feed {
        grid-template-columns: 1fr;
        /* Jedna kolumna */
    }
}
/* --- GŁÓWNY KONTENER SEKCJI --- */
#comments {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    background-color: #fff;
}

/* Nagłówek "X Komentarzy" */
#comments h3,
.comments-title {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 30px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- LISTA KOMENTARZY --- */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Pojedynczy wiersz komentarza */
.comment-list li.comment {
    margin-bottom: 20px;
    position: relative;
}

/* Ciało komentarza (Flexbox: Avatar + Treść) */
.comment-body {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

/* Avatar */
.comment-body .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f2f5;
    flex-shrink: 0;
    /* Nie zgniataj avatara */
}

/* Kontener treści (Dymek) */
.comment-author,
.comment-meta,
.comment-content {
    /* WordPress czasem rozbija to na różne divy,
       więc stylujemy ogólny wrapper lub sekcję treści */
}


/* Treść komentarza (Dymek) */
.comment-content {
    background-color: #f0f2f5;
    color: #333;
    padding: 12px 18px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    max-width: 100%;
}

.fn {
    font-style: normal;
    font-weight: 700;
    color: #2c3e50;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 2px;
}

.fn a {
    color: #2c3e50;
    text-decoration: none;
}

/* Data i Czas */
.comment-metadata {
    font-size: 0.75rem;
    color: #999;
    margin-left: 10px;
    /* Przesuwamy pod dymek */
    margin-top: 5px;
    display: inline-block;
}

.comment-metadata a {
    color: #999;
    text-decoration: none;
}

/* Przycisk "Odpowiedz" */
.reply {
    font-size: 0.8rem;
    margin-left: 10px;
    display: inline-block;
}

.comment-reply-link {
    color: #3498db;
    font-weight: 600;
    text-decoration: none;
}

.comment-reply-link:hover {
    text-decoration: underline;
}

/* --- ODPOWIEDZI (ZAGNIEŻDŻONE) --- */
.children {
    list-style: none;
    margin: 0;
    padding-left: 60px;
    /* Wcięcie */
    margin-top: 15px;
    position: relative;
}

/* Linia łącząca odpowiedzi (drzewko) */
.children::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    height: 100%;
    width: 2px;
    background: #f0f2f5;
    border-radius: 2px;
}

/* --- FORMULARZ DODAWANIA (RESPOND) --- */
#respond {
    background: #fdfdfd;
    padding: 25px;
    border-radius: 12px;
    margin-top: 40px;
    border: 1px dashed #ddd;
}

#reply-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    display: block;
}

.comment-form {
    display: grid;
    gap: 15px;
}

/* Ukrywamy etykiety, jeśli używamy placeholderów, 
   ale dla dostępności lepiej je zostawić lub ukryć wizualnie */
.comment-form label {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    transition: border-color 0.2s;
}

.comment-form textarea:focus,
.comment-form input:focus {
    outline: none;
    border-color: #3498db;
}

/* Przycisk Wyślij */
.form-submit .submit {
    background-color: #3498db;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    /* Pastylka */
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.form-submit .submit:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
}

/* Ukrycie sekcji "Strona WWW" i checkboxa RODO (opcjonalnie, dla czystszego wyglądu) */
.comment-form-url,
.comment-form-cookies-consent {
    /* display: none; */
    /* Odkomentuj, jeśli chcesz ukryć */
}


.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list li.comment {
    margin-bottom: 25px;
}

/* GŁÓWNA SIATKA KOMENTARZA */
.comment-body {
    display: grid;
    /* Kolumna 1: 60px (Avatar), Kolumna 2: Reszta */
    grid-template-columns: 60px 1fr;
    /* Wiersz 1: Treść, Wiersz 2: Data i Przycisk */
    grid-template-rows: auto auto;
    column-gap: 15px;
    row-gap: 5px;
    align-items: start;
}

/* MAGICZNA LINIA: Rozpakowuje kontener meta, żebyśmy mogli przesuwać jego dzieci */
.comment-meta {
    display: contents;
}

/* 1. LEWA STRONA (Avatar + Nazwa pod spodem) */
.comment-author {
    grid-column: 1;
    /* Pierwsza kolumna */
    grid-row: 1 / 3;
    /* Rozciągnij na całą wysokość */

    display: flex;
    flex-direction: column;
    /* Układ pionowy */
    align-items: center;
    /* Wyśrodkowanie */
    text-align: center;
}

/* Avatar */
.comment-author .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
    border: 2px solid #f0f2f5;
}

/* Nazwa użytkownika (pod avatarem) */
.comment-author .fn {
    font-size: 0.75rem;
    /* Mniejsza czcionka, żeby się mieściło */
    line-height: 1.2;
    font-weight: 700;
    color: #2c3e50;
    word-wrap: break-word;
    /* Łamanie długich nazw */
    font-style: normal;
}

.comment-author .fn a {
    color: inherit;
    text-decoration: none;
}

.comment-author .says {
    display: none;
}

/* Ukrywamy "mówi:" */


/* 2. PRAWA STRONA - GÓRA (Treść w dymku) */
.comment-content {
    grid-column: 2;
    /* Druga kolumna */
    grid-row: 1;
    /* Pierwszy wiersz */

    background-color: #f0f2f5;
    padding: 12px 18px;
    border-radius: 18px;
    /* Zaokrąglony dymek */
    border-top-left-radius: 4px;
    /* "Ogonek" dymka w stronę avatara */

    font-size: 0.95rem;
    line-height: 1.5;
    color: #050505;
    position: relative;
}

.comment-content p {
    margin: 0;
}


/* 3. PRAWA STRONA - DÓŁ (Data + Przycisk obok siebie) */

/* Kontener na dolną linię (tworzymy go wirtualnie za pomocą grid) */
/* Data */
.comment-metadata {
    grid-column: 2;
    /* Druga kolumna */
    grid-row: 2;
    /* Drugi wiersz (pod dymkiem) */

    font-size: 0.75rem;
    color: #65676b;
    margin-left: 5px;
    align-self: center;
    /* Wyrównanie w pionie */

    /* Ustawiamy datę na początku linii */
    justify-self: start;
    display: flex;
    /* Żeby ułożyć datę i przycisk w jednej linii, jeśli grid pozwoli */
}

.comment-metadata a {
    color: #65676b;
    text-decoration: none;
    margin-right: 15px;
    /* Odstęp od przycisku */
}

/* Przycisk (Odpowiedz / Zaloguj) */
.reply {
    grid-column: 2;
    /* Druga kolumna */
    grid-row: 2;
    /* Drugi wiersz */

    font-size: 0.8rem;
    font-weight: 600;
    align-self: center;

    /* Przesuwamy go obok daty */
    margin-left: 120px;
    /* Ręczne przesunięcie, bo są w tej samej komórce */
    /* LUB LEPIEJ: */
    /* Jeśli data i reply są w osobnych divach, to będą się nakładać w Gridzie.
       Musimy użyć Flexboxa na wrapperze, ale go nie ma.
       Dlatego używamy tricku z float lub inline-block. */
}

/* POPRAWKA DLA LINII DATY I PRZYCISKU */
/* Wymuszamy, by data i przycisk były w jednej linii pod tekstem */
.comment-metadata,
.reply {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    display: inline-block;
}

/* Ustawienie Daty */
.comment-metadata {
    float: left;
    /* Do lewej */
}

/* Ustawienie Przycisku */
.reply {
    float: left;
    margin-left: 15px;
    /* Odstęp od daty */
    margin-top: 1px;
    /* Drobna korekta */
}

.comment-reply-link,
.comment-reply-login {
    /* Klasa przycisku logowania */
    color: #3498db;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.comment-reply-link:hover {
    text-decoration: underline;
}


/* --- ZAGNIEŻDŻONE ODPOWIEDZI --- */
.children {
    list-style: none;
    margin: 0;
    padding-left: 60px;
    /* Wcięcie */
    margin-top: 15px;
    grid-column: 1 / -1;
    /* Na całą szerokość */
    width: 100%;
}

/* --- NOWY UKŁAD KOMENTARZY (STRUKTURA WŁASNA) --- */

.drawer-comments-list {
    margin-bottom: 20px;
    /* Opcjonalnie: scroll jeśli długa lista */
    /* max-height: 500px; overflow-y: auto; */
}

/* Kontener główny (Grid) */
.custom-comm-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    /* Lewa: 60px na sztywno, Prawa: reszta */
    gap: 10px;
    margin-bottom: 20px;
    align-items: start;
}

/* --- LEWA KOLUMNA (Avatar + Nazwa) --- */
.comm-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.comm-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f2f5;
    margin-bottom: 4px;
    display: block;
}

.comm-author-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

/* --- PRAWA KOLUMNA (Dymek + Meta) --- */
.comm-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Dymek z tekstem */
.comm-bubble {
    background-color: #f0f2f5;
    color: #050505;
    padding: 8px 14px;
    border-radius: 18px;
    border-top-left-radius: 2px;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 100%;
}

.comm-bubble p {
    margin: 0;
}

/* Stopka komentarza (Data + Przycisk) */
.comm-footer-meta {
    margin-top: 4px;
    padding-left: 5px;
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    color: #65676b;
}

.comm-reply-btn {
    background: none;
    border: none;
    padding: 0;
    color: #65676b;
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
}

.comm-reply-btn:hover {
    text-decoration: underline;
    color: #3498db;
}

.commentlist {
    margin-left: 30px;
}

.cancel-edit-link,
.cancel-btn {
    font-size: 0.85rem;
    color: #999;
    text-decoration: none;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: transparent;
    border: 1px solid transparent;
}

/* Po najechaniu (Hover) */
.cancel-edit-link:hover,
.cancel-btn:hover {
    color: #e74c3c;
    background-color: #fdedec;
    border-color: #f5c6cb;
}

/* Ikona "X" (opcjonalnie dodawana przez CSS, jeśli nie ma w HTML) */
.cancel-edit-link::before,
.cancel-btn::before {
    font-family: "Font Awesome 6 Free";
    content: "\f00d";
    font-weight: 900;
    font-size: 0.8em;
}

.edit-mode-notice .cancel-edit-link {
    margin-left: auto;
    background-color: #fff;
    border: 1px solid #d6eaf8;
    color: #3498db;
}

.edit-mode-notice .cancel-edit-link:hover {
    background-color: #3498db;
    color: #fff;
    border-color: #3498db;
}
  /* --- STYLIZACJA KOMENTARZY (SOCIAL STYLE) --- */

  .comments-section-wrapper {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #eee;
      margin-top: 20px;
  }

  .comments-heading {
      font-size: 1.2rem;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 20px;
  }

  /* Lista komentarzy */
  .comment-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .comment-list li.comment {
      margin-bottom: 20px;
  }

  .comment-body {
      display: flex;
      gap: 15px;
  }

  /* Avatar autora komentarza */
  .comment-body .avatar {
      border-radius: 50%;
      width: 40px;
      height: 40px;
  }

  /* Dymek z treścią */
  .comment-meta {

      background: #f0f2f5;
      padding: 10px 15px;
      border-radius: 18px;
      position: relative;
      font-size: 0.95rem;
  }

  .fn {
      font-weight: bold;
      color: #2c3e50;
      font-style: normal;
  }

  .comment-metadata {
      font-size: 0.75rem;
      color: #999;
      margin-bottom: 5px;
  }

  .comment-metadata a {
      color: #999;
      text-decoration: none;
  }

  .comment-content p {
      margin: 5px 0 0 0;
      color: #333;
  }

  .comment-respond {
      margin-top: 30px;
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
  }

  .comment-reply-title {
      font-size: 1rem;
      margin-bottom: 15px;
      display: block;
  }

  .comment-form-url {
      display: none;
  }

  /* Pole tekstowe */
  .comment-form-comment textarea {
      width: 100%;
      border: 1px solid #ddd;
      border-radius: 20px;
      padding: 10px 15px;
      height: 50px;
      /* Małe na start */
      transition: height 0.2s;
  }

  .comment-form-comment textarea:focus {
      height: 100px;
      outline: none;
      border-color: #3498db;
  }

  /* Przycisk wyślij */
  .form-submit input[type="submit"] {
      background: #3498db;
      color: #fff;
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
  }

  /* Przycisk powrotu w nagłówku posta */
  .btn-back {
      margin-left: auto;
      color: #ccc;
      font-size: 1rem;
  }

  .btn-back:hover {
      color: #333;
  }