/* === Brand Color Variables === */
:root {
    --brand-main: #014E2E;
    --brand-button: #74B42A;
    --brand-background: #F6CF2A;
    --brand-white: white;
    --brand-black: black;
    /* Unified body text color (all non-heading text) */
    --brand-text-body: #111827;
    --brand-font-bolder: 700;
    --brand-font-bold: 500;
    --brand-font-normal: 500;
    /* Unified typography scale: all text (body & headings) share same base size */
    --brand-font-size-normal: 20px; /* Base size for all body text and default elements */
    --brand-font-size-heading: 40px; /* Single heading size applied to h1-h3 and key numeric highlights */
    /* Site wide content maximum width */
    --site-max-width: 1200px;
    --space-between-section: 100px;
    /* Lighter placeholder color */
    --form-placeholder-color: #8d96a0;
}

.text-justify {
    text-align: justify !important;
}

/* Mobile typography scale: slightly smaller to improve fit and legibility on narrow screens */
@media (max-width: 575.98px) {
    :root {
    --brand-font-size-normal: 20px; /* Keep base readable on mobile */
    --brand-font-size-heading: 30px; /* Scaled down heading size on mobile */
        --space-between-section: 50px;
    }

    /* Optional: tighten hero headline spacing specifically on mobile */
    .hero-headline {
        line-height: 1.25;
    }

    .hero-subheadline {
        line-height: 1.5;
    }
}

/* Body background & global typography */
body {
    background-color: var(--brand-background);
    font-family: 'Poppins', Arial, sans-serif;
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
    color: var(--brand-text-body);
}

/* ===================== */
/* Quick Phone Contact Modal */
/* ===================== */
.contact-modal { position: fixed; inset: 0; z-index: 400; }
.contact-modal[aria-hidden="true"] { pointer-events: none; }
.contact-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(180%) blur(2px); }
.contact-modal__dialog { position:relative; max-width:420px; margin:clamp(2rem,6vh,4rem) auto; background:#fff; border-radius:18px; padding:1.75rem 1.5rem 1.75rem; box-shadow:0 10px 32px -4px rgba(0,0,0,.25); display:flex; flex-direction:column; animation:modalPop .35s cubic-bezier(.4,.8,.2,1); }
@keyframes modalPop { 0% { transform:translateY(24px) scale(.96); opacity:0;} 100% { transform:translateY(0) scale(1); opacity:1;} }
.contact-modal__title { margin:0 0 .75rem; font-size:1.4rem; line-height:1.25; }
.contact-modal__close { position:absolute; top:.4rem; right:.65rem; border:none; background:transparent; font-size:2rem; line-height:1; cursor:pointer; color:#444; padding:.25rem .5rem; }
.contact-modal__close:focus-visible { outline:2px solid #111; outline-offset:2px; border-radius:6px; }
.contact-modal__phone-label { margin:.25rem 0 .25rem; font-weight:600; font-size:.9rem; letter-spacing:.5px; text-transform:uppercase; color:#555; }
.contact-modal__phone-number { margin:.25rem 0 1rem; font-size:1.4rem; font-weight:700; }
.contact-modal__phone-number a { color: var(--brand-main); text-decoration:none; }
.contact-modal__phone-number a:hover { text-decoration:underline; }
.contact-modal__separator { margin:0 0 1rem; font-size:.9rem; color:#555; }
.contact-modal__form { display:flex; flex-direction:column; gap:1rem; }
.contact-modal__field { display:flex; flex-direction:column; gap:.35rem; }
.contact-modal__label { font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; color:#333; }
.contact-modal__field input, .contact-modal__field textarea { font:inherit; padding:.65rem .75rem; border:1px solid #d1d5db; border-radius:10px; background:#fff; resize:vertical; }
.contact-modal__field input:focus, .contact-modal__field textarea:focus { outline:none; border-color: var(--brand-button); box-shadow:0 0 0 2px rgba(116,180,42,.35); }
.contact-modal__actions { display:flex; justify-content:flex-end; }
.contact-modal__submit { background: var(--brand-button); border:none; color:#fff; font:inherit; font-weight:600; padding:.75rem 1.25rem; border-radius:100px; cursor:pointer; box-shadow:0 4px 14px -4px rgba(116,180,42,.45); transition:background .2s, transform .15s; }
.contact-modal__submit:hover { background:#5a8f1f; }
.contact-modal__submit:active { transform:translateY(1px); }
.contact-modal__submit:disabled { background:#9ec864; cursor:default; box-shadow:none; }
.contact-modal__result { min-height:1.25rem; font-size:.8rem; font-weight:600; color: var(--brand-main); }

/* Dismiss ("Nie teraz") button */
.contact-modal__actions { gap:.5rem; }
.contact-modal__dismiss { background:transparent; border:none; font:inherit; font-weight:500; color:#555; padding:.65rem .9rem; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.contact-modal__dismiss:hover { background:rgba(1,78,46,.08); color:var(--brand-main); }
.contact-modal__dismiss:focus-visible { outline:2px solid var(--brand-main); outline-offset:2px; }
.contact-modal__dismiss:active { background:rgba(1,78,46,.15); }

/* Desktop only open via JS; ensure mobile phones still use normal tel link */
@media (max-width: 991.98px) {
    .contact-modal__dialog { width:calc(100% - 2rem); margin:2rem 1rem; }
}

@media (max-width: 575.98px) {
    .contact-modal__dialog { padding:1.25rem 1rem 1.5rem; }
    .contact-modal__title { font-size:1.25rem; }
    .contact-modal__phone-number { font-size:1.25rem; }
}

html.modal-lock, html.modal-lock body { overflow:hidden; }

/* Global heading sizes per request */

/* === Tutor Cards === */
.tutor-card {
    background: var(--brand-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tutor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.tutor-image-wrapper {
    height: 100%;
    min-height: 150px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-main), var(--brand-button));
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tutor-content {
    padding: 0 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tutor-name {
    font-size: var(--brand-font-size-heading);
    font-weight: var(--brand-font-bolder);
    color: var(--brand-main);
    margin-bottom: 0.75rem;
}

.tutor-description {
    font-size: var(--brand-font-size-normal);
    line-height: 1.6;
    color: var(--brand-text-body);
    margin-bottom: 1rem;
    flex-grow: 1;
    text-align: justify;
}

.tutor-specialization {
    margin-top: auto;
}

/* Tutor specialization badges now use normal font size & weight for consistency */
.tutor-specialization .badge {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
    padding: 0.25rem 0.55rem;
    border-radius: 18px;
    line-height: 1.1;
}

.badge.bg-primary {
    background-color: var(--brand-button) !important;
}

/* === Wide Tutor Cards === */
.tutor-card-wide {
    background: var(--brand-white);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 2rem;
}

.tutor-card-wide:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.tutor-image-wrapper-wide {
    height: 300px;
    width: 300px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-main), var(--brand-button));
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutor-image-wide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Image + tags vertical block so tags center to image width */
.tutor-image-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tutor-image-block .tutor-specialization {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px; /* match image width so centering is relative to image */
    text-align: center;
}

.tutor-image-block .tutor-specialization .badge {
    margin: 0 0.35rem 0.5rem 0.35rem;
    text-wrap: auto;
}

.tutor-content-wide {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.tutor-content-wide .tutor-name {
    font-size: var(--brand-font-size-heading);
    font-weight: var(--brand-font-bolder);
    color: var(--brand-main);
    margin-bottom: 0.5rem;
}

.tutor-content-wide .tutor-description {
    font-size: var(--brand-font-size-normal);
    line-height: 1.7;
    color: var(--brand-text-body);
    margin-bottom: 1.5rem;
}

.tutor-content-wide .tutor-specialization {
    margin-top: 1rem;
}

/* Wide card badges also normalized */
.tutor-content-wide .tutor-specialization .badge {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
    padding: 0.25rem 0.65rem;
    border-radius: 25px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

/* Mobile responsiveness for wide cards */
@media (max-width: 991.98px) {
    .tutor-card-wide {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .tutor-content-wide {
        padding: 1.5rem 0 0 0;
        text-align: center;
    }
    
    .tutor-image-wrapper-wide {
        height: 200px;
        margin: 0 auto;
        max-width: 250px;
    }
    
    .tutor-content-wide .tutor-name {
        font-size: var(--brand-font-size-heading);
    }
    
    .tutor-content-wide .tutor-description {
        font-size: var(--brand-font-size-normal);
        text-align: left;
    }
}

/* === Alternative Pricing Styles === */

/* Option 1: Modern Cards */
.pricing-cards-container .pricing-card {
    background: var(--brand-white);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    height: 100%;
}

/* Ensure all pricing headers occupy equal vertical space so that pricing amounts align across cards
   Height chosen to fit tallest (two-line) heading + icon comfortably on desktop widths. */
.pricing-card .pricing-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 180px; /* adjust if headings change */
}

@media (max-width: 575.98px) {
    /* On narrow screens cards stack; allow natural height to reduce blank space */
    .pricing-card .pricing-header { min-height: unset; }
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    background: var(--brand-button);
}

.pricing-featured {
    transform: scale(1.05);
    border: 3px solid var(--brand-main);
}

.pricing-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-main);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75em; /* reduced badge size */
    font-weight: bold;
}

.pricing-header h3 {
    color: var(--brand-main);
    margin-bottom: 1rem;
    font-weight: var(--brand-font-bolder);
    font-size: var(--brand-font-size-normal); /* reduced per request */
}

.pricing-icon {
    font-size: var(--brand-font-size-heading);
    margin: 0 auto 1rem;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f1f2f4 0%, #e7e9ec 70%);
    transition: .4s;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .15);
}

.pricing-amount {
    margin: 0 0;
}

.pricing-amount .price {
    font-size: var(--brand-font-size-heading);
    font-weight: var(--brand-font-bolder);
    color: var(--brand-main);
}

.pricing-amount .currency {
    font-size: var(--brand-font-size-normal);
    color: var(--brand-text-body);
    margin-left: 0.2rem;
}

.pricing-features p {
    margin: 0.5rem 0;
    color: var(--brand-text-body);
}

.badge.bg-secondary {
    background-color: var(--brand-button) !important;
}

/* === Pricing Section === */
.pricing-table {
    background: var(--brand-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.pricing-item:last-child {
    border-bottom: none;
}

.pricing-level h3 {
    font-size: var(--brand-font-size-normal); /* reduced from heading */
    font-weight: var(--brand-font-bolder);
    color: var(--brand-main);
    margin-bottom: 0.25rem;
}

.pricing-level p {
    font-size: var(--brand-font-size-normal);
    color: var(--brand-text-body);
    margin: 0;
}

.pricing-price {
    text-align: right;
}

.price-amount {
    font-size: var(--brand-font-size-heading);
    font-weight: var(--brand-font-bolder);
    color: var(--brand-main);
}

.price-currency {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-bold);
    color: var(--brand-button);
    margin-left: 0.25rem;
}

.pricing-note {
    font-size: var(--brand-font-size-normal);
    color: var(--brand-text-body);
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Mobile adjustments for tutor cards */
@media (max-width: 575.98px) {
    .tutor-card .row {
        flex-direction: column;
    }
    
    .tutor-card .col-4,
    .tutor-card .col-8 {
        flex: 0 0 auto;
        width: 100%;
    }
    
    .tutor-image-wrapper {
        min-height: 200px;
        margin-bottom: 1rem;
    }
    
    .tutor-content {
        padding: 0;
    }
    
    .pricing-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .pricing-price {
        text-align: center;
    }
}
h1,
h2,
h3 {
    font-size: var(--brand-font-size-heading);
    line-height: 1.25;
    font-weight: var(--brand-font-bolder);
}

/* Explicit brand color for headings on yellow background (not used inside green contact form box) */
.brand-main-heading {
    color: var(--brand-main);
}

/* Ensure hero headline does not exceed mandated 30px */
.hero-headline {
    font-weight: var(--brand-font-bolder);
    font-size: var(--brand-font-size-heading);
    color: var(--brand-main);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

/* === Minimal retained custom CSS (explanations inline) === */

/* Navbar backdrop + translucency (Bootstrap doesn't provide blur utility) */
.navbar-blur {
    background: var(--brand-main);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    padding-bottom: 0px !important;
}

/* Navbar text colors */
.navbar-blur .navbar-brand,
.navbar-blur .nav-link {
    color: var(--brand-white) !important;
    padding-bottom: 0px;
}

.section-96-under-only {
    margin-bottom: calc(var(--space-between-section) / 2);
}

/* Section vertical spacing: original used 6rem (96px); Bootstrap py-5 = 3rem so we custom retain */
.section-96 {
    padding-bottom: calc(var(--space-between-section) / 2);
    padding-top: calc(var(--space-between-section) / 2);
}

/* Hero subheadline keeps lighter weight but inherits new base size */
.hero-subheadline {
    font-weight: var(--brand-font-bold);
    font-size: var(--brand-font-size-normal);
    color: var(--brand-main);
    line-height: 1.625;
    text-align: justify;
}

/* Counters styling retained */
.counter-item {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fbfbfb 60%, #f5f5f5 100%);
    border-radius: 1.25rem;
    padding: 2.25rem 1.75rem;
    text-align: center;
    transition: .4s;
    box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .05);
}

.counter-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .12);
    background: var(--brand-button);
}

/* Counter styling updated */
.counter-image-wrapper {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f1f2f4 0%, #e7e9ec 70%);
    transition: .4s;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .15);
}

.counter-item:hover .counter-image-wrapper {
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .35);
}

.counter-image{
    width: 40px;
    height: 40px;
}


.counter-heading {
    font-weight: 600;
    margin: 0 0 .35rem;
    color: var(--brand-text-body);
    letter-spacing: .25px;
    font-size: var(--brand-font-size-normal); /* lowered from heading */
}

.counter-value {
    font-weight: 700;
    color: var(--brand-main);
    margin: .15rem 0 .35rem;
    line-height: 1.15;
}

.counter-item:hover .counter-value {
    color: #fff;
}

/* already handled combined in earlier hover rule */

.counter-item:hover .counter-heading {
    color: #fff;
}

/* Contact icons */
.contact-icon {
    width: 24px;
    height: 24px;
}

.contact-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: auto;
}


/* Contact form container */
.contact-form-box {
    /* Reverted to previous narrower layout for better focus */
    width: 90%;
    max-width: 1160px;
    margin: 0 auto;
    background: var(--brand-main);
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    color: var(--brand-white);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .15);
}

/* Widened form: allow inner form to use full available width while maintaining readable line length */
.contact-form-box form#enrollment-form {
    width: 100%;
}

/* Space out direct child blocks consistently now that form spans full width */
.contact-form-box form#enrollment-form>#form>.mb-3,
.contact-form-box form#enrollment-form>#form>.row {
    margin-bottom: 1.25rem !important;
}

/* Ensure last block before button has standard spacing */
.contact-form-box form#enrollment-form>#form>.row.mb-3 {
    margin-bottom: 1.25rem !important;
}

.contact-form-box h2,
.contact-form-box h3,
.contact-form-box p,
.contact-form-box label,
.contact-form-box .form-label {
    color: var(--brand-white);
}

@media (max-width: 576px) {
    .contact-form-box {
        padding: 2rem 1.25rem;
    }
}

#kontakt {
    background: var(--brand-main);
    color: var(--brand-white);
    text-align: center;
}

/* Preserve footer brand heading sizing: keep main contact header large, allow brand name line to remain heading sized */
#kontakt h2 {
    font-size: var(--brand-font-size-heading);
    font-weight: var(--brand-font-bolder);
} 
#kontakt h3 {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-weight-normal);
}

/* Kontakt (footer) link styling */
#kontakt a {
    color: var(--brand-white);
    text-decoration: none;
    font-weight: 500;
}

/* (Removed older duplicate counter styles to avoid conflicts) */

/* Buttons (rounded pill with brand color) */
.btn-enroll {
    background: var(--brand-button);
    color: var(--brand-white);
    border: none;
    border-radius: 9999px;
    padding: 1rem 2rem;
    font-weight: var(--brand-font-normal);
    transition: .25s;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.form-select {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
}

.btn-enroll:hover {
    background: #5a8f1f;
    color: var(--brand-white);
}

/* Form controls rounded large with brand styling */
form#enrollment-form input,
form#enrollment-form select,
form#enrollment-form textarea {
    border-radius: .75rem !important;
    border: 2px solid #ddd;
    background: var(--brand-white);
}

/* Disabled select: gray background and text */
form#enrollment-form select:disabled {
    background: #e5e7eb !important;
    color: #888 !important;
    cursor: not-allowed;
    opacity: 1;
}

form#enrollment-form input:focus,
form#enrollment-form select:focus,
form#enrollment-form textarea:focus {
    border-color: var(--brand-button);
    box-shadow: 0 0 0 0.25rem rgba(116, 180, 42, 0.25);
}

/* Multiselect (preferowane terminy) improved styling */
/* Base wrapper replacing default gray block look */
form#enrollment-form .multiselect-dropdown {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    background: var(--brand-white);
    border: 2px solid #ddd;
    border-radius: .75rem;
    padding: .75rem 3rem .5rem 1rem;
    /* leave room for chevron */
    cursor: pointer;
    line-height: 1.3;
    position: relative;
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
    color: var(--brand-text-body);
    transition: border-color .2s, box-shadow .2s;
}

form#enrollment-form .multiselect-dropdown:focus-within,
form#enrollment-form .multiselect-dropdown.active {
    border-color: var(--brand-button);
    box-shadow: 0 0 0 0.25rem rgba(116, 180, 42, .25);
}

/* Override embedded background chevron to brand arrow */
form#enrollment-form .multiselect-dropdown {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23014E2E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* placeholder-select text */
form#enrollment-form .multiselect-dropdown span.placeholderSelect {
    background: transparent !important;
}

/* Selected option pills */
form#enrollment-form .multiselect-dropdown span.optext {
    background: var(--brand-main);
    color: var(--brand-white);
    padding: .25rem .75rem;
    border-radius: 999px;
    font-weight: 500;
    margin-right: .5rem;
    margin-bottom: .5rem;
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

form#enrollment-form .multiselect-dropdown span.optext .optdel {
    color: rgba(255, 255, 255, .85);
    margin: 0;
    margin-left: .25rem;
}

form#enrollment-form .multiselect-dropdown span.optext .optdel:hover {
    color: var(--brand-white);
}

/* Max selected indicator */
form#enrollment-form .multiselect-dropdown span.optext.maxselected {
    background: var(--brand-button);
}

/* Dropdown panel */
form#enrollment-form .multiselect-dropdown-list-wrapper {
    border: 2px solid var(--brand-button);
    border-radius: .75rem;
    padding: .75rem .5rem .5rem;
    top: calc(100% + 4px);
    background: var(--brand-white);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .25);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 15rem; /* default desktop height from config */
    overflow-y: auto;
}

/* Search input inside panel */
form#enrollment-form .multiselect-dropdown-search.form-control {
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.form-control {
    font-size: var(--brand-font-size-normal);
    font-weight: var(--brand-font-normal);
}

/* List items */
form#enrollment-form .multiselect-dropdown-list div {
    border-radius: .5rem;
    padding: .5rem .75rem;
    transition: background-color .15s, color .15s;
}

/* Ensure option text is visible (override white form label color) */
form#enrollment-form .multiselect-dropdown-list div label {
    color: var(--brand-main);
}

form#enrollment-form .multiselect-dropdown-list div:hover {
    background: rgba(1, 78, 46, .08);
}

form#enrollment-form .multiselect-dropdown-list div.checked {
    background: var(--brand-main);
    color: var(--brand-white);
}

form#enrollment-form .multiselect-dropdown-list div.checked label {
    color: var(--brand-white);
}

form#enrollment-form .multiselect-dropdown-list input[type=checkbox] {
    accent-color: var(--brand-main);
    margin-right: .5rem;
}

/* All selector row */
form#enrollment-form .multiselect-dropdown-all-selector {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: .25rem;
    padding-bottom: .5rem !important;
}


/* Hide selected pills when dropdown is open */
form#enrollment-form .multiselect-dropdown.active .optext,
form#enrollment-form .multiselect-dropdown[aria-expanded="true"] .optext {
    display: none;
}

/* Reduce original inline padding injected by script */
form#enrollment-form .multiselect-dropdown {
    padding-top: .75rem;
    padding-left: 1rem;
    padding-right: 3rem;
    padding-bottom: .25rem;
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
    form#enrollment-form .multiselect-dropdown {
        min-height: 3.5rem;
    }
    /* Expand panel to near full screen height on very small devices for better tap targets */
    form#enrollment-form .multiselect-dropdown-list-wrapper {
        max-height: 60vh;
        padding-bottom: 1rem;
    }
    /* Slightly larger option hit area */
    form#enrollment-form .multiselect-dropdown-list div {
        padding: .75rem .85rem;
    }
}

/* When dropdown open on mobile lock background scroll */
.msd-lock body, .msd-lock { overflow: hidden; }

/* Smooth inertial scrolling for iOS */
form#enrollment-form .multiselect-dropdown-list-wrapper { -webkit-overflow-scrolling: touch; }

form#enrollment-form label {
    color: var(--brand-white);
    font-weight: 500;
}

/* Placeholder styling (slightly lighter than normal text) */
form#enrollment-form input::placeholder,
form#enrollment-form textarea::placeholder,
form#enrollment-form select::placeholder {
    color: var(--form-placeholder-color);
    opacity: 1;
}

/* WebKit */
form#enrollment-form input::-webkit-input-placeholder,
form#enrollment-form textarea::-webkit-input-placeholder,
form#enrollment-form select::-webkit-input-placeholder {
    color: var(--form-placeholder-color);
}

/* Firefox */
form#enrollment-form input::-moz-placeholder,
form#enrollment-form textarea::-moz-placeholder,
form#enrollment-form select::-moz-placeholder {
    color: var(--form-placeholder-color);
}

/* IE / Edge Legacy */
form#enrollment-form input:-ms-input-placeholder,
form#enrollment-form textarea:-ms-input-placeholder,
form#enrollment-form select:-ms-input-placeholder {
    color: var(--form-placeholder-color);
}

form#enrollment-form input::-ms-input-placeholder,
form#enrollment-form textarea::-ms-input-placeholder,
form#enrollment-form select::-ms-input-placeholder {
    color: var(--form-placeholder-color);
}

/* Utility to constrain main containers (original max-width:80rem) */
.maxw-80 {
    width: 100%;
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Adjust images to be fluid */
img {
    max-width: 100%;
    height: auto;
}

/* Reviews widget styles */
.reviews-widget__reviews-container {
    margin-left: 40px;
    margin-right: 40px;
}

.reviews-widget__header {
    margin: 0px;
    padding: 0px !important;
}

#reviews-widget-439 {
    max-width: 100vw;
    margin-top: 2rem;
}

.reviews-widget__reviews-container {
    padding-top: 0px !important;
}

/* =============================================================
   Mobile-only spacing refinements (form & hero image separation)
   ============================================================= */
@media (max-width: 575.98px) {
    /* 1. Add separation above hero board image when stacked under text */
    .hero-section img[src*="tablica"] {
        margin-top: 1.5rem; /* creates visual breathing room */
    }

    /* 2. Education level dropdowns: add vertical gap when columns stack */
    #enrollment-form .row.g-3 > .col-12.col-md-6 + .col-12.col-md-6 select.form-select {
        margin-top: .75rem; /* gap between first and second select */
    }

    /* 3. Contact inputs (telefon / email) spacing when stacked */
    #enrollment-form .row.g-3.mb-3 > .col-12.col-md-6 + .col-12.col-md-6 input.form-control {
        margin-top: .75rem;
    }

    /* Ensure generic stacked columns inside the enrollment form have top spacing if they immediately follow a sibling */
    #enrollment-form .row.g-3 > [class*="col-12"] + [class*="col-12"] :is(select,input,textarea) {
        /* Fallback rule in case markup changes order */
        margin-top: .75rem;
    }
}

/* Promo block: first lesson free */
.promo-free-first .promo-inner {
    background: linear-gradient(135deg, var(--brand-main), var(--brand-button));
    color: var(--brand-white);
    border-radius: 1.25rem;
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.25);
}

.promo-free-first h3 {
    color: var(--brand-white);
    font-weight: var(--brand-font-bolder);
    font-size: var(--brand-font-size-heading);
}

.promo-free-first p { 
    font-size: var(--brand-font-size-normal); 
    line-height: 1.5; 
}

/* === Reasons List (Dla kogo) === */
.reasons-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    /* column-count: 2; */
    column-gap: 3rem;
    font-size: var(--brand-font-size-normal);
}

.reasons-list li {
    position: relative;
    margin: 0 0 0.85rem 0;
    padding-left: 2.1rem;
    break-inside: avoid;
}

.reasons-list li::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.55rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--brand-main), var(--brand-button));
    box-shadow: 0 0 0 3px #ffffff;
}

/* Last item ends with a kropka already (.) */
.reasons-list li:last-child {
    font-weight: 500;
}

@media (max-width: 900px) {
    .reasons-list {
        column-count: 1;
        font-size: var(--brand-font-size-normal);
    }
}

/* Optional subtle card feel for the section now scoped to inner card for alignment consistency */
.reasons-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 2.25rem 2.25rem;
    box-shadow: 0 6px 30px -12px rgba(0,0,0,0.14);
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .reasons-card {
        padding: 2rem 1.25rem 1.75rem;
        border-radius: 18px;
    }
}

#dla-kogo .reasons-card .brand-main-heading {
    margin-bottom: 1.25rem;
}



/* === Floating Contact Buttons === */
.floating-phone {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--brand-button);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.floating-phone:hover {
    transform: scale(1.1);
    text-decoration: none;
}

.floating-phone svg {
    width: 32px;
    height: 32px;
    fill: white;
}

.floating-messenger {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: var(--brand-button);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease;
    text-decoration: none;
}

.floating-messenger:hover {
    transform: scale(1.1);
    text-decoration: none;
}

.floating-messenger svg {
    width: 32px;
    height: 32px;
    fill: white;
}

@media (max-width: 575.98px) {
    .first-lesson-free-banner {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .first-lesson-free-banner h3 {
        font-size: 1.3rem;
    }
    
    .first-lesson-free-banner p {
        font-size: 1rem;
    }
    
    .floating-phone {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
    }
    
    .floating-phone svg {
        width: 28px;
        height: 28px;
    }
    
    .floating-messenger {
        bottom: 80px;
        right: 15px;
        width: 55px;
        height: 55px;
    }
    
    .floating-messenger svg {
        width: 28px;
        height: 28px;
    }
}