/* public_html/assets/css/style.css */

/* --- 1. GŁÓWNE USTAWIENIA (TYPOGRAFIA) --- */
body {
    background-color: #f8f9fa;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #212529;
    /* Wygładzanie czcionek dla lepszej czytelności */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Nowoczesne, zwarte nagłówki */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em; /* Lekkie ścieśnienie liter */
}

/* --- 2. KOMPONENTY BOOTSTRAP (MODYFIKACJE) --- */
/* Karty z delikatnym cieniem zamiast obramowania */
.card {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Bardziej subtelny cień */
    transition: transform 0.2s ease-in-out;
}

/* --- 3. IKONY (PHOSPHOR) --- */
/* Wyrównanie ikon względem tekstu */
i.ph, i.ph-duotone {
    vertical-align: middle;
    font-size: 1.3em; /* Troszkę większe od tekstu */
    position: relative;
    top: -1px; /* Mikrokorekta optyczna */
    margin-right: 6px;
}

/* --- 4. ELEMENTY NAWIGACJI --- */
/* Okrągły awatar w menu */
.nav-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2); /* Delikatna ramka */
}

/* --- 5. INNE POMOCNICZE --- */
/* Styl dla głównej ikony na Landing Page */
.hero-icon {
    width: 120px;
    height: auto;
    margin-bottom: 1.5rem;
}

/* --- ZAAWANSOWANA ANIMACJA AVATARA (STYLE PREMIUM) --- */
.avatar-ring {
    position: relative;
    border-radius: 50%;
    display: inline-flex;
    padding: 3px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

/* Zmienne kolorystyczne dla planów */
.ring-standard { --c1: #adb5bd; --c2: #e9ecef; }
.ring-plus     { --c1: #0dcaf0; --c2: #0d6efd; }
.ring-premium  { --c1: #d63384; --c2: #6f42c1; }

/* WARSTWA 1: Szybki, kręcący się "ogon" na start */
.avatar-ring::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background: conic-gradient(transparent 60%, var(--c1), var(--c2));
    animation: 
        spin-ring 1s cubic-bezier(0.4, 0, 0.2, 1) 2, 
        hide-layer 2s forwards;
}

/* WARSTWA 2: Pełna, subtelnie falująca ramka */
.avatar-ring::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    opacity: 0;
    background: conic-gradient(var(--c1), var(--c2), var(--c1), var(--c2), var(--c1));
    animation: 
        show-layer 1s ease-in 1.5s forwards, 
        spin-ring 6s linear infinite; 
}

/* Ochrona obrazka wewnątrz ramki */
.avatar-ring > img, 
.avatar-ring > .avatar-icon {
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #fff;
    position: relative;
    z-index: 1;
    display: block;
}

/* --- KLATKI KLUCZOWE ANIMACJI --- */
@keyframes spin-ring {
    100% { transform: rotate(360deg); }
}
@keyframes hide-layer {
    0%, 75% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes show-layer {
    0% { opacity: 0; }
    100% { opacity: 1; }
}