/* ==========================================
   1. BLOKADA SCROLLA I TŁO OVERLAY
   ========================================== */
body.modal-open {
    overflow: hidden !important;
}

.kako-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: all 0.4s ease;
}

.kako-modal-overlay.show { opacity: 1; visibility: visible; }

/* ==========================================
   2. NAPIS SVG
   ========================================== */
.kako-title-wrapper {
    width: 100%; display: flex; justify-content: center; align-items: center;
    margin-bottom: -35px; /* Mocniej nachodzi, żeby było zwięźlej */
    z-index: 100000; pointer-events: none;
    transform: scale(0.95); /* Lekko zmniejszony napis */
}

.kako-curved-title {
    width: 100%; max-width: 650px; height: 130px;
    overflow: visible; flex-shrink: 0;
    animation: svgEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kako-curved-title text {
    font-family: 'Poppins', sans-serif; font-size: 65px; font-weight: 900; letter-spacing: 5px;
}

.text-red { fill: #E60000; filter: drop-shadow(0 0 20px rgba(230, 0, 0, 0.8)); }
.text-white { fill: #FFFFFF; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }

@keyframes svgEnter {
    0% { opacity: 0; transform: translateY(-50px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================
   3. GŁÓWNE OKNO - WYWAŻONE
   ========================================== */
.kako-modal {
    background-color: #121212;
    border: 1px solid #2C2C2C;
    width: 90%;
    /* ZWIĘKSZONA SZEROKOŚĆ DLA BALANSU */
    max-width: 460px; 
    border-radius: 24px;
    /* ZWIĘKSZONY PADDING */
    padding: 1.8rem; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    position: relative;
    display: flex; flex-direction: column;
    gap: 1.2rem; 
    z-index: 99990;
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kako-modal-overlay.show .kako-modal { transform: translateY(0); }

/* PRZYCISK ZAMKNIĘCIA "X" */
.modal-close-x {
    position: absolute; top: 15px; right: 15px;
    background: transparent; border: none; color: #666;
    font-size: 1.3rem; cursor: pointer; transition: all 0.3s ease;
    z-index: 10; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.modal-close-x:hover { color: #E60000; background-color: rgba(230, 0, 0, 0.1); transform: rotate(90deg); }

.kako-modal__header { text-align: center; margin-bottom: 0; }

.kako-modal__icon {
    width: 54px; height: 54px; 
    background: linear-gradient(135deg, #1e1e1e, #000);
    border: 1px solid #2C2C2C; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.8rem auto; font-size: 1.3rem; color: #E60000;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.15);
}

.kako-modal__header p { color: #808080; font-size: 0.9rem; margin: 0; font-family: 'Poppins', sans-serif;}

.kako-label {
    display: block; color: #808080; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 0.6rem; font-weight: 600; font-family: 'Poppins', sans-serif;
}

/* ==========================================
   4. SIATKI I PRZYCISKI
   ========================================== */
.kako-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* WALUTY W JEDNEJ LINII - WYMUSZENIE */
.currency-grid {
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 równe kolumny */
}

.kako-option {
    background-color: #1E1E1E; border: 1px solid #2C2C2C; color: white;
    padding: 12px; 
    border-radius: 12px; cursor: pointer; font-family: 'Poppins', sans-serif;
    font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center;
    justify-content: center; gap: 8px; font-size: 0.95rem;
}

.kako-option:hover { background-color: #2C2C2C; }
.kako-option.active {
    background-color: rgba(230, 0, 0, 0.1); border-color: #E60000; color: #E60000;
    box-shadow: 0 0 10px rgba(230, 0, 0, 0.15);
}

/* Języki */
.lang-btn { justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
.lang-badge {
    background-color: #2C2C2C; color: #808080; font-size: 0.85rem; font-weight: 700;
    padding: 7px 11px; border-radius: 7px;
}
.kako-option.active.lang-btn .lang-badge { background-color: #E60000; color: white; }
.lang-text { display: flex; flex-direction: column; }
.lang-text .lang-main { font-size: 1rem; font-weight: 600; color: white; line-height: 1.2; }
.lang-text .lang-sub { font-size: 0.75rem; color: #808080; }

/* Agenci - Lista */
.kako-agents-scroll {
    display: flex; flex-direction: column; gap: 8px; 
    /* ZWIĘKSZONA WYSOKOŚĆ SCROLLA */
    max-height: 220px; 
    overflow-y: auto; padding-right: 4px;
}
.kako-agents-scroll::-webkit-scrollbar { width: 4px; }
.kako-agents-scroll::-webkit-scrollbar-thumb { background-color: #2C2C2C; border-radius: 10px; }
.kako-agents-scroll::-webkit-scrollbar-track { background-color: #121212; }

/* Karta Agenta */
.kako-agent-card {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #1E1E1E; border: 1px solid #2C2C2C; border-radius: 12px;
    padding: 10px 14px; 
    cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box;
}

.agent-info { display: flex; align-items: center; gap: 12px; }

.kako-agent-card .agent-icon {
    width: 34px; height: 34px; 
    background-color: #050505; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; color: #808080;
    flex-shrink: 0; overflow: hidden; border: 1px solid #333;
}
.kako-agent-card .agent-icon img { width: 100%; height: 100%; object-fit: contain; }

.kako-agent-card span { font-size: 0.95rem; color: #cccccc; font-weight: 500; font-family: 'Poppins', sans-serif;}

.kako-agent-card:hover { background-color: #252525; border-color: #404040; }
.kako-agent-card.active { background-color: rgba(230, 0, 0, 0.08); border-color: #E60000; }
.kako-agent-card.active span { color: white; font-weight: 600; }

/* Przycisk Rejestracji wewnątrz agenta */
.agent-register-btn {
    background-color: #E60000; color: white; text-decoration: none;
    font-size: 0.75rem; font-weight: 700; padding: 6px 12px;
    border-radius: 7px; opacity: 1; visibility: visible; transform: none;
    transition: all 0.2s ease; display: flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.agent-register-btn:hover { background-color: #ff1a1a; transform: translateY(-1px); }

/* Przycisk Zapisz */
.kako-modal__save-btn {
    background-color: #E60000; color: white; border: none; padding: 16px; width: 100%;
    border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; 
    transition: background 0.3s, transform 0.2s; font-family: 'Poppins', sans-serif;
    margin-top: 10px;
}
.kako-modal__save-btn:hover { background-color: #FF1A1A; transform: translateY(-2px);}

/* Drobne animacje */
.spin-icon { animation: slowSpin 8s linear infinite; display: inline-block; }
@keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fade-up { opacity: 0; transform: translateY(15px); animation: fadeUpAnim 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
@keyframes fadeUpAnim { to { opacity: 1; transform: translateY(0); } }


/* ==========================================
   5. RESPONSYWNOŚĆ (MOBILE)
   ========================================== */

@media (max-width: 480px) {
    /* Dopasowanie kontenera modala */
    .kako-modal {
        width: 92%;
        padding: 1.2rem; /* Mniejszy padding na boki */
        gap: 1rem;
        max-height: 85vh; /* Zabezpieczenie przed ucięciem na małych ekranach */
        overflow-y: auto;
    }

    /* Skalowanie napisu SVG - kluczowe dla mobile */
    .kako-title-wrapper {
        transform: scale(0.7); /* Zmniejszenie całości */
        margin-bottom: -50px; /* Większe nachodzenie przy mniejszej skali */
        margin-top: -20px;
    }

    .kako-curved-title {
        height: 100px;
    }

    /* Układ walut - 3 kolumny mogą być za ciasne na bardzo małych telefonach */
    .currency-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px;
    }

    .kako-option {
        padding: 10px 5px;
        font-size: 0.85rem;
    }

    /* Układ języków - zmiana na 1 kolumnę dla czytelności lub mniejsze przyciski */
    .kako-options-grid:not(.currency-grid) {
        grid-template-columns: 1fr; /* Języki jeden pod drugim */
        gap: 8px;
    }

    /* Poprawki karty agenta */
    .kako-agent-card {
        padding: 8px 10px;
    }

    .agent-info {
        gap: 8px;
    }

    .kako-agent-card span {
        font-size: 0.85rem;
    }

    .agent-register-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    /* Ikona nagłówka */
    .kako-modal__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    /* Przycisk zapisu */
    .kako-modal__save-btn {
        padding: 14px;
        font-size: 0.95rem;
    }
}

/* Obsługa bardzo krótkich ekranów (np. iPhone SE w poziomie lub małe modele) */
@media (max-height: 700px) {
    .kako-title-wrapper {
        display: none; /* Ukrywamy ozdobny napis, by starczyło miejsca na formularz */
    }
    .kako-modal {
        margin-top: 20px;
    }
    .kako-agents-scroll {
        max-height: 140px;
    }
}