/* Główne zmienne */
.gsq-learning-wrapper { background-color: var(--gsq-bg-color); color: var(--gsq-txt-color); padding: 30px; border-radius: 12px; box-sizing: border-box; font-family: inherit; }

/* Grid Desktop */
.gsq-top-grid { display: flex; gap: 30px; margin-bottom: 40px; align-items: flex-start; }
.gsq-left-col { flex: 7; order: 1; }
.gsq-right-col { flex: 3; order: 2; } 

.gsq-card { background: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 25px; }

/* Teksty */
.gsq-title { margin-top: 0; font-size: 2.4em; font-weight: 800; color: var(--gsq-txt-color); line-height: 1.2; }
.gsq-subtitle { color: var(--gsq-btn-color); font-weight: 600; font-size: 1.3em; margin-bottom: 20px; }
.gsq-section-title.video-title { color: var(--gsq-vid-title); font-size: 1.6em; border-bottom: 2px solid var(--gsq-vid-title); padding-bottom: 8px; display: inline-block; margin-bottom: 20px;}

/* Prawa kolumna - Obrazek Sticky Desktop */
.gsq-sticky-image { position: sticky; top: 100px; }
.gsq-sticky-image img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

/* Formatowanie Edytora */
.gsq-formatted-content { word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
.gsq-formatted-content img, .gsq-formatted-content iframe, .gsq-formatted-content video { max-width: 100%; height: auto; border-radius: 8px; }
.gsq-formatted-content p { line-height: 1.7; font-size: 1.1em; margin-bottom: 15px; }
.gsq-formatted-content table { width: 100%; border-collapse: collapse; margin-bottom: 15px; overflow-x: auto; display: block; }
.gsq-formatted-content table th, .gsq-formatted-content table td { border: 1px solid #ddd; padding: 10px; }

/* ZAKŁADKI (4 sztuki) */
.gsq-tabs-nav { display: flex; gap: 10px; margin-bottom: 20px; }
.gsq-tab-btn { flex: 1; background-color: #f4f6f9; color: var(--gsq-txt-color); border: 2px solid transparent; padding: 15px 10px; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gsq-tab-btn:hover { background-color: #e2e6eb; }
.gsq-tab-btn.active { background-color: var(--gsq-btn-color); color: #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.gsq-tab-emoji { font-size: 24px; margin-bottom: 5px; }
.gsq-tabs-content-area { border-top: 1px solid #eee; padding-top: 20px; width: 100%; }
.gsq-tab-pane { display: none; animation: fadeIn 0.4s ease-in-out; }
.gsq-tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Filmy */
.gsq-video-buttons { display: flex; flex-wrap: wrap; gap: 15px; }
.gsq-btn-video { background-color: var(--gsq-btn-color); color: #fff; border: none; padding: 14px 28px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s; }
.gsq-btn-video:hover { transform: translateY(-3px); }

/* Przycisk UCZ SIĘ */
.gsq-bottom-section { text-align: center; margin-top: 30px; }
.gsq-learn-btn { background-color: var(--gsq-btn-color); color: #fff; border: none; padding: 18px 60px; font-size: 22px; font-weight: bold; border-radius: 10px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.15); transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; gap: 12px; }
.gsq-learn-btn:hover { transform: scale(1.03); }
.gsq-learn-btn span { transition: transform 0.3s; }
.gsq-learn-btn.active span { transform: rotate(180deg); }
.gsq-learn-content-box { max-height: 0; overflow: hidden; transition: max-height 0.8s ease; background: #ffffff; border-radius: 12px; margin-top: 25px; text-align: left; box-shadow: 0 10px 40px rgba(0,0,0,0.08); width: 100%; }
.gsq-learn-inner { padding: 45px; }

/* ------------------------------------- */
/* LISTY ROZWIJANE (Wiele w kolumnach)   */
/* ------------------------------------- */
.gsq-learn-dropdowns-container {
    background-color: #f8f9fa;
    padding: 25px 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-left: 4px solid var(--gsq-btn-color);
}
.gsq-learn-dropdown-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ddd;
}
.gsq-learn-dropdown-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.gsq-learn-dropdown-label-col {
    flex: 1; /* Lewa kolumna z pytaniem */
}
.gsq-learn-dropdown-select-col {
    flex: 1; /* Prawa kolumna z listą wyboru */
}
.gsq-learn-dropdown-label {
    display: block;
    font-weight: 600;
    font-size: 1.15em;
    color: var(--gsq-txt-color); /* Kolor zgodny z tekstem strony */
}
.gsq-learn-dropdown {
    width: 100%;
    padding: 12px 15px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    color: var(--gsq-txt-color);
    cursor: pointer;
    outline: none;
    transition: 0.2s;
}
.gsq-learn-dropdown:focus {
    border-color: var(--gsq-btn-color);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* MODAL WIDEO - idealnie na środku */
.gsq-modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); }
.gsq-modal-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
.gsq-modal-content { position: relative; width: 100%; max-width: 1000px; }
.gsq-close { position: absolute; top: -50px; right: 0; color: white; font-size: 45px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 2; }
.gsq-close:hover { color: var(--gsq-btn-color); }
.gsq-video-container { position: relative; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.8);}
.gsq-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}

/* RESPONSYWNOŚĆ */
@media(max-width: 1024px) {
    .gsq-top-grid { flex-direction: column; }
    .gsq-right-col { order: 1; width: 100%; margin-bottom: -15px; } 
    .gsq-left-col { order: 2; width: 100%; }
    .gsq-sticky-image { position: static; }
    .gsq-tabs-nav { flex-wrap: wrap; }
    .gsq-tab-btn { flex: 1 1 45%; }
}

@media(max-width: 600px) {
    .gsq-learning-wrapper { padding: 15px; }
    .gsq-card { padding: 20px; }
    .gsq-tab-btn { flex: 1 1 100%; } 
    .gsq-learn-inner { padding: 20px; }
    .gsq-learn-dropdowns-container { padding: 20px 15px; }
    
    /* Na telefonach Pytanie i Lista układają się pod sobą */
    .gsq-learn-dropdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .gsq-learn-dropdown-label-col, .gsq-learn-dropdown-select-col { width: 100%; }

    .gsq-close { top: -40px; right: 0; font-size: 35px; } 
}