/**
 * Vakaro Istorijos - Custom Styles
 * Dark theme landing page
 */

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero glow effect */
.hero-glow {
    box-shadow: 0 0 80px rgba(59, 130, 246, 0.15),
                0 0 160px rgba(147, 51, 234, 0.1);
}

/* Pulse animation delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
}

/* Button styles */
.btn {
    transition: all 0.2s ease;
    border-radius: 9999px; /* Fully rounded pill shape */
}

.btn:hover {
    transform: translateY(-1px);
}

/* Primary button - reusable brand color */
.btn-primary {
    --btn-color: #135BEC;
    background-color: var(--btn-color);
    border-color: var(--btn-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0f4fd0;
    border-color: #0f4fd0;
}

/* Create story CTA button - gradient + glow */
.btn-create {
    background: linear-gradient(135deg, #135BEC 0%, #3b82f6 50%, #60a5fa 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(19, 91, 236, 0.5),
                0 0 40px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.btn-create:hover {
    background: linear-gradient(135deg, #0f4fd0 0%, #2563eb 50%, #3b82f6 100%);
    box-shadow: 0 0 25px rgba(19, 91, 236, 0.7),
                0 0 50px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

/* Outline button - fix DaisyUI hover for dark theme */
.btn.btn-outline {
    background-color: transparent;
    color: #d1d5db;
}

.btn.btn-outline:hover {
    background-color: rgba(31, 41, 55, 0.8);
    border-color: #6b7280;
    color: #ffffff;
}

/* Secondary button - neutral gray style */
.btn-secondary {
    background-color: #374151;
    border-color: #374151;
    color: #e5e7eb;
}

.btn-secondary:hover {
    background-color: #4b5563;
    border-color: #4b5563;
    color: #ffffff;
}

/* Story page styles */
.story-content {
    font-size: 1.125rem;
    line-height: 1.8;
}

.story-content p {
    margin-bottom: 1.5rem;
}

/* Blurred page preview for sample stories */
.blurred-page {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* Image loading placeholder - dark theme */
.image-placeholder {
    background: linear-gradient(90deg, #1a1a24 25%, #12121a 50%, #1a1a24 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Glow effects for interactive elements */
.glow-blue {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}

/* Background patterns */
.bg-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
    background: #2a2a3a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a4a;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    .story-content {
        font-size: 12pt;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-glow {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.1);
    }
}

/* ===== Story Creation Wizard ===== */

/* Selection card base */
.wizard-card {
    background: rgba(31, 41, 55, 0.5);
    border: 2px solid rgba(75, 85, 99, 0.6);
    cursor: pointer;
}

.wizard-card:hover {
    background: rgba(55, 65, 81, 0.5);
    border-color: rgba(107, 114, 128, 1);
}

.wizard-card.selected {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.25);
}

/* Tone icons - gray by default, blue when selected */
.tone-icon {
    filter: brightness(0) invert(0.5);
    transition: filter 0.2s ease;
}

.wizard-card.selected .tone-icon {
    filter: brightness(0) saturate(100%) invert(45%) sepia(98%) saturate(2000%) hue-rotate(210deg) brightness(95%) contrast(95%);
}

/* Color picker circles */
.color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-circle:hover {
    transform: scale(1.1);
}

.color-circle.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Large color circles for step 2 */
.color-circle-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-circle-lg:hover {
    transform: scale(1.1);
}

.color-circle-lg.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Setting cards with gradient backgrounds */
.setting-card {
    border: 2px solid transparent;
    cursor: pointer;
}

.setting-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}

.setting-card.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), 0 0 30px rgba(59, 130, 246, 0.25), inset 0 0 15px rgba(59, 130, 246, 0.15);
}

/* Lesson pills */
.lesson-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.5);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lesson-pill:hover {
    background: rgba(55, 65, 81, 0.5);
    border-color: rgba(107, 114, 128, 0.5);
}

.lesson-pill.selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #93c5fd;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.15);
}

/* Sparkle animation for loading */
@keyframes sparkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.1) rotate(5deg);
        opacity: 0.9;
    }
    50% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
        opacity: 0.9;
    }
}

.animate-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

/* Range slider custom styles */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #374151;
    border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    transition: transform 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #374151;
    border-radius: 4px;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Age slider with filled track */
input.age-slider {
    --value: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--value), #374151 var(--value), #374151 100%) !important;
    cursor: pointer;
    outline: none;
}

input.age-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: transparent !important;
}

input.age-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input.age-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.6);
}

input.age-slider::-moz-range-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #374151;
}

input.age-slider::-moz-range-progress {
    height: 8px;
    border-radius: 4px 0 0 4px;
    background: #3b82f6;
}

input.age-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #3b82f6;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* Icon checkmark using background-image */
.icon-check {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z" fill="%23135BEC"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Icon checkmark using background-image */
.icon-story {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" height="64px" width="64px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve" stroke="%23135BEC"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M12,17c0.8-4.2,1.9-5.3,6.1-6.1c0.5-0.1,0.8-0.5,0.8-1s-0.3-0.9-0.8-1C13.9,8.1,12.8,7,12,2.8C11.9,2.3,11.5,2,11,2 c-0.5,0-0.9,0.3-1,0.8C9.2,7,8.1,8.1,3.9,8.9C3.5,9,3.1,9.4,3.1,9.9s0.3,0.9,0.8,1c4.2,0.8,5.3,1.9,6.1,6.1c0.1,0.5,0.5,0.8,1,0.8 S11.9,17.4,12,17z"></path><path d="M22,24c-2.8-0.6-3.4-1.2-4-4c-0.1-0.5-0.5-0.8-1-0.8s-0.9,0.3-1,0.8c-0.6,2.8-1.2,3.4-4,4c-0.5,0.1-0.8,0.5-0.8,1 s0.3,0.9,0.8,1c2.8,0.6,3.4,1.2,4,4c0.1,0.5,0.5,0.8,1,0.8s0.9-0.3,1-0.8c0.6-2.8,1.2-3.4,4-4c0.5-0.1,0.8-0.5,0.8-1 S22.4,24.1,22,24z"></path><path d="M29.2,14c-2.2-0.4-2.7-0.9-3.1-3.1c-0.1-0.5-0.5-0.8-1-0.8c-0.5,0-0.9,0.3-1,0.8c-0.4,2.2-0.9,2.7-3.1,3.1 c-0.5,0.1-0.8,0.5-0.8,1s0.3,0.9,0.8,1c2.2,0.4,2.7,0.9,3.1,3.1c0.1,0.5,0.5,0.8,1,0.8c0.5,0,0.9-0.3,1-0.8 c0.4-2.2,0.9-2.7,3.1-3.1c0.5-0.1,0.8-0.5,0.8-1S29.7,14.1,29.2,14z"></path><path d="M5.7,22.3C5.4,22,5,21.9,4.6,22.1c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.2,0.2-0.2,0.3C4,22.7,4,22.9,4,23s0,0.3,0.1,0.4 c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.1,0.2,0.2,0.3,0.2C4.7,24,4.9,24,5,24c0.1,0,0.3,0,0.4-0.1s0.2-0.1,0.3-0.2 c0.1-0.1,0.2-0.2,0.2-0.3C6,23.3,6,23.1,6,23s0-0.3-0.1-0.4C5.9,22.5,5.8,22.4,5.7,22.3z"></path><path d="M28,7c0.3,0,0.5-0.1,0.7-0.3C28.9,6.5,29,6.3,29,6s-0.1-0.5-0.3-0.7c-0.1-0.1-0.2-0.2-0.3-0.2c-0.2-0.1-0.5-0.1-0.8,0 c-0.1,0-0.2,0.1-0.3,0.2C27.1,5.5,27,5.7,27,6c0,0.3,0.1,0.5,0.3,0.7C27.5,6.9,27.7,7,28,7z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-pdf {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 43.917 43.916" xml:space="preserve" stroke="%23135BEC"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M12.745,10.14h-1.563V7.397h1.524c0.987,0,1.603,0.474,1.603,1.358V8.78C14.309,9.55,13.73,10.14,12.745,10.14z M23.976,10.126v-0.025c0-1.59-1.088-2.704-2.703-2.704h-1.525v5.408h1.525C22.888,12.805,23.976,11.716,23.976,10.126z M39.394,5 v33.916c0,2.761-2.237,5-5,5H9.522c-2.762,0-5-2.239-5-5V5c0-2.761,2.238-5,5-5h24.871C37.154,0,39.394,2.239,39.394,5z M17.772,13.6c0,0.551,0.437,0.987,0.987,0.987h2.512c2.819,0,4.769-1.961,4.769-4.486v-0.025c0-2.525-1.947-4.46-4.769-4.46 h-2.512c-0.551,0-0.987,0.436-0.987,0.987V13.6z M9.208,13.676c0,0.552,0.436,0.987,0.987,0.987c0.551,0,0.986-0.436,0.986-0.987 v-1.78h1.5c2.012,0,3.626-1.076,3.626-3.152V8.717c0-1.832-1.294-3.101-3.435-3.101h-2.678c-0.552,0-0.987,0.436-0.987,0.987 L9.208,13.676L9.208,13.676z M34.708,36.301c0-1.104-0.896-2-2-2h-21.5c-1.104,0-2,0.896-2,2c0,1.104,0.896,2,2,2h21.5 C33.812,38.301,34.708,37.405,34.708,36.301z M34.708,28.801c0-1.104-0.896-2-2-2h-21.5c-1.104,0-2,0.896-2,2c0,1.104,0.896,2,2,2 h21.5C33.812,30.801,34.708,29.905,34.708,28.801z M34.708,21.301c0-1.104-0.896-2-2-2h-14c-1.104,0-2,0.896-2,2 c0,1.104,0.896,2,2,2h14C33.812,23.301,34.708,22.405,34.708,21.301z M34.708,6.513c0-0.5-0.396-0.897-0.896-0.897h-5.024 c-0.552,0-0.985,0.436-0.985,0.987v7.073c0,0.552,0.436,0.987,0.985,0.987c0.551,0,0.986-0.436,0.986-0.987v-2.562h3.46 c0.5,0,0.897-0.397,0.897-0.897S33.734,9.32,33.234,9.32h-3.46V7.41h4.037C34.311,7.409,34.708,7.013,34.708,6.513z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-audio {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22.935 22.935" xml:space="preserve" fill="" stroke=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path style="fill:%23135BEC;" d="M20.836,21.205V0.785C20.836,0.159,20.049,0,20.049,0H4.458c-2.359,0-2.36,1.954-2.36,1.954v20.143 c0,0.461,0.374,0.838,0.839,0.838h15.105c0.462,0,0.838-0.377,0.838-0.838l1.115-0.002C20.899,22.095,20.836,21.205,20.836,21.205z M5.578,13.994c-0.313-0.104-0.567-0.244-0.567-0.426c0-0.472,0-1.649,0-2.321c0-0.259,0.254-0.441,0.567-0.57V13.994z M10.587,16.635c0,0.517-0.597,0.017-0.597,0.017l-3.255-2.414c0,0-0.311-0.035-0.668-0.113V10.52 c0.357-0.087,0.668-0.12,0.668-0.12l3.327-2.483c0,0,0.525-0.396,0.525,0.009C10.587,8.397,10.587,16.116,10.587,16.635z M12.497,15.222c-0.183,0-0.366-0.07-0.503-0.214c-0.272-0.276-0.267-0.721,0.011-0.994c0.594-0.581,0.885-1.171,0.864-1.755 c-0.033-0.927-0.82-1.619-0.827-1.627c-0.297-0.25-0.333-0.694-0.083-0.991c0.251-0.296,0.697-0.333,0.992-0.082 c0.052,0.043,1.27,1.095,1.325,2.648c0.036,0.999-0.398,1.946-1.288,2.815C12.852,15.155,12.675,15.222,12.497,15.222z M15.278,16.243c-0.137,0.132-0.315,0.199-0.493,0.199c-0.184,0-0.366-0.071-0.503-0.213c-0.271-0.276-0.266-0.724,0.011-0.995 c1.004-0.979,1.495-1.993,1.458-3.015c-0.057-1.606-1.407-2.797-1.421-2.807c-0.297-0.252-0.333-0.695-0.082-0.993 c0.252-0.296,0.696-0.332,0.993-0.081c0.074,0.062,1.838,1.583,1.917,3.831C17.208,13.603,16.576,14.973,15.278,16.243z M19.747,20.788c0,0-0.149,0.547-0.867,0.547v-6.543V2.828c0-0.462-0.375-0.838-0.838-0.838L3.749,1.984 c0-0.577,0.866-0.869,0.866-0.869H18.88c0.893,0,0.867,0.786,0.867,0.786V20.788z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-fast {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" height="64px" width="64px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.002 512.002" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512.002 512.002"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m411.992,208.486c-5.641-10.172-16.359-16.485-27.992-16.485h-77.219l13.109-157.343c1.211-14.547-7.57-28.062-21.352-32.875-13.766-4.797-29.07,0.328-37.164,12.469l-160,240c-6.547,9.82-7.156,22.445-1.586,32.851 5.563,10.406 16.406,16.898 28.211,16.898h77.445l-13.352,173.547c-1.133,14.688 7.914,28.25 21.914,32.852 3.289,1.086 6.664,1.602 9.992,1.602 10.797,0 21.164-5.492 27.133-15.039l160-256c6.174-9.868 6.494-22.298 0.861-32.477z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}
.icon-safety {
    display: inline-flex;
    align-items: center;
    padding-left: 1.5rem;
    background-position: left center;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="%230d3991"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16L4.35009 13.3929C2.24773 11.8912 1 9.46667 1 6.88306V3L8 0L15 3V6.88306C15 9.46667 13.7523 11.8912 11.6499 13.3929L8 16ZM12.2071 5.70711L10.7929 4.29289L7 8.08579L5.20711 6.29289L3.79289 7.70711L7 10.9142L12.2071 5.70711Z" fill="%23135BEC"></path></g></svg>');
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
}
.icon-user {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9999 6C9.79077 6 7.99991 7.79086 7.99991 10C7.99991 12.2091 9.79077 14 11.9999 14C14.209 14 15.9999 12.2091 15.9999 10C15.9999 7.79086 14.209 6 11.9999 6ZM17.1115 15.9974C17.8693 16.4854 17.8323 17.5491 17.1422 18.1288C15.7517 19.2966 13.9581 20 12.0001 20C10.0551 20 8.27215 19.3059 6.88556 18.1518C6.18931 17.5723 6.15242 16.5032 6.91351 16.012C7.15044 15.8591 7.40846 15.7251 7.68849 15.6097C8.81516 15.1452 10.2542 15 12 15C13.7546 15 15.2018 15.1359 16.3314 15.5954C16.6136 15.7102 16.8734 15.8441 17.1115 15.9974Z" fill="%23135BEC"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}
.icon-human {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 489.946 489.946" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M334.457,380.978c-56.519,26.61-122.448,26.61-178.967,0c-31.454,25.86-51.517,65.07-51.517,108.968h282 C385.973,446.048,365.911,406.838,334.457,380.978z"></path><path d="M244.973,381c105.21,0,190.5-85.289,190.5-190.5c0-105.21-85.29-190.5-190.5-190.5s-190.5,85.29-190.5,190.5 C54.473,295.711,139.763,381,244.973,381z M74.728,181.21c85.848,16.661,171.467-10.333,231.766-66.733 c19.949,47.023,57.801,85.53,106.374,105.857C398.758,300.274,328.958,361,244.973,361c-94.164,0-170.5-76.335-170.5-170.5 C74.473,187.383,74.562,184.287,74.728,181.21z"></path><circle cx="167.841" cy="213.466" r="20.132"></circle><circle cx="322.105" cy="213.466" r="20.132"></circle><path d="M244.973,327.446c18.023,0,34.246-7.589,41.331-19.335c2.852-4.729,1.33-10.875-3.398-13.728 c-4.73-2.852-10.876-1.332-13.729,3.398c-2.807,4.655-11.579,9.665-24.204,9.665s-21.397-5.01-24.204-9.665 c-2.853-4.729-8.997-6.253-13.729-3.398c-4.728,2.853-6.25,8.999-3.398,13.728C210.727,319.857,226.95,327.446,244.973,327.446z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-animal {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" width="64px" height="64px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title>ionicons-v5-n</title><path d="M490.39,182.75c-5.55-13.19-14.77-22.7-26.67-27.49l-.16-.06a46.46,46.46,0,0,0-17-3.2h-.64c-27.24.41-55.05,23.56-69.19,57.61-10.37,24.9-11.56,51.68-3.18,71.64,5.54,13.2,14.78,22.71,26.73,27.5l.13.05a46.53,46.53,0,0,0,17,3.2c27.5,0,55.6-23.15,70-57.65C497.65,229.48,498.78,202.72,490.39,182.75Z"></path><path d="M381.55,329.61c-15.71-9.44-30.56-18.37-40.26-34.41C314.53,250.8,298.37,224,256,224s-58.57,26.8-85.39,71.2c-9.72,16.06-24.6,25-40.36,34.48-18.07,10.86-36.74,22.08-44.8,44.16a66.93,66.93,0,0,0-4.65,25c0,35.95,28,65.2,62.4,65.2,17.75,0,36.64-6.15,56.63-12.66,19.22-6.26,39.09-12.73,56.27-12.73s37,6.47,56.15,12.73C332.2,457.85,351,464,368.8,464c34.35,0,62.3-29.25,62.3-65.2a67,67,0,0,0-4.75-25C418.29,351.7,399.61,340.47,381.55,329.61Z"></path><path d="M150,188.85c11.9,14.93,27,23.15,42.52,23.15a42.88,42.88,0,0,0,6.33-.47c32.37-4.76,52.54-44.26,45.92-90C242,102.3,234.6,84.39,224,71.11,212.12,56.21,197,48,181.49,48a42.88,42.88,0,0,0-6.33.47c-32.37,4.76-52.54,44.26-45.92,90C132,157.67,139.4,175.56,150,188.85Z"></path><path d="M313.16,211.53a42.88,42.88,0,0,0,6.33.47c15.53,0,30.62-8.22,42.52-23.15,10.59-13.29,17.95-31.18,20.75-50.4h0c6.62-45.72-13.55-85.22-45.92-90a42.88,42.88,0,0,0-6.33-.47C315,48,299.88,56.21,288,71.11c-10.6,13.28-18,31.19-20.76,50.44C260.62,167.27,280.79,206.77,313.16,211.53Z"></path><path d="M111.59,308.8l.14-.05c11.93-4.79,21.16-14.29,26.69-27.48,8.38-20,7.2-46.75-3.15-71.65C120.94,175.16,92.85,152,65.38,152a46.4,46.4,0,0,0-17,3.2l-.14.05C36.34,160,27.11,169.54,21.58,182.73c-8.38,20-7.2,46.75,3.15,71.65C39.06,288.84,67.15,312,94.62,312A46.4,46.4,0,0,0,111.59,308.8Z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}
.icon-unicorn {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%23135BEC" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 361.742 361.742" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g id="XMLID_89_"><path id="XMLID_90_" d="M282.179,155.987l75.852-99.244c4.161-5.444,4.878-12.604,1.871-18.688 c-3.023-6.117-9.298-10.069-15.985-10.069c-2.668,0-5.281,0.601-7.767,1.786L223.278,83.6c-0.315-0.052-0.612-0.202-0.84-0.43 l-0.437-0.437l-61.808-48.174c-4.851-3.834-10.638-5.861-16.737-5.861c-13.822,0-25.425,10.336-26.991,24.044l-5.294,46.353 L8.801,192.628l-0.219,0.207c-10.639,10.325-11.497,27.299-1.954,38.644l68.77,81.755c5.407,6.428,13.327,10.114,21.73,10.114 c7.206,0,14.042-2.689,19.31-7.586l33.388-26.42l0.739-0.646c1.924-1.855,4.886-2.39,7.344-1.303l98.754,43.659 c4.058,1.794,8.345,2.704,12.742,2.704c3.228,0,6.41-0.501,9.458-1.49c13.021-4.222,25.442-14.812,36.919-31.477 c10.132-14.713,12.522-33.56,6.394-50.415l-0.109-0.301l-40.478-92.428c-0.118-0.486,0.008-1.002,0.345-1.381L282.179,155.987z M303.481,257.491c3.794,10.717,2.244,22.64-4.171,31.955c-8.797,12.774-18.001,21.002-26.617,23.796 c-2.515,0.814-5.411,0.638-7.943-0.481l-98.754-43.659c-3.42-1.512-7.049-2.279-10.786-2.279c-6.768,0-13.187,2.52-18.136,7.107 l-33.391,26.422l-0.739,0.646c-1.572,1.517-3.637,2.352-5.816,2.352c-2.486,0-4.828-1.089-6.425-2.988l-68.77-81.755 c-2.793-3.321-2.57-8.274,0.49-11.333l102.436-93.592l0.219-0.207c2.3-2.232,4.102-5.002,5.21-8.01l0.415-1.127l5.634-49.326 c0.473-4.145,3.94-6.313,7.12-6.313c1.574,0,3.032,0.521,4.388,1.593l51.515,40.153l64.302,76.126L303.481,257.491z M268.358,141.135l-34.246-40.544l102.647-48.952L268.358,141.135z"></path><circle id="XMLID_102_" cx="217.252" cy="180.434" r="20.57"></circle></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Hero icon size for wizard cards */
.hero-icon {
    display: block;
    width: 2rem;
    height: 2rem;
}

/* Trait icon size for special traits */
.trait-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Trait icons for "Ypatingos savybės" */
.icon-wings {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="%239CA3AF" d="M92.438 28.97C75.263 47.722 60.826 69.69 49.593 94L167.5 204.656l-12.78 13.625L41.905 112.407c-9.19 24.257-15.377 50.455-18.156 77.844l116.156 58.72-8.437 16.686L22.312 210.47c-.963 24.45.777 49.666 5.437 75.155l100.53 8.313-1.53 18.625-94.97-7.844c.743 3.09 1.515 6.185 2.345 9.28 4.43 16.51 9.94 32.34 16.375 47.438 8.757-1.615 17.808-3.274 27.813-5.157 26.754-5.033 53.093-10.06 53.093-10.06l3.5 18.342s-26.368 5.054-53.156 10.094c-8.012 1.508-15.797 2.97-23.188 4.344 8.65 17.507 18.62 33.887 29.657 49l60.843-34.28L158.22 410l-58.407 32.938c12.202 14.79 25.482 28.186 39.624 40l17.157-20.344c1.38-20.537 4.963-37.725 14.375-51.72 6.338-9.425 15.44-16.826 27.155-21.937C189.86 376.115 183.3 361.62 179 345.594c-14.526-54.15.58-108.49 36.406-138.094L92.436 28.97zm330.843 0L300.314 207.5c35.826 29.604 50.964 83.943 36.437 138.094-4.26 15.877-10.768 30.237-18.938 42.97 12.345 5.384 21.554 13.502 27.5 23.655 7.81 13.333 10.495 29.117 11.407 47.467l19.592 23.25c14.14-11.813 27.423-25.208 39.625-40L357.5 410l9.188-16.28L427.53 428c11.04-15.117 21.006-31.49 29.658-49-7.4-1.374-15.207-2.836-23.22-4.344-26.787-5.04-53.156-10.094-53.156-10.094l3.5-18.343s26.372 5.027 53.125 10.06c9.794 1.844 19.196 3.598 27.813 5.19 6.44-15.105 11.944-30.954 16.375-47.47.83-3.095 1.602-6.19 2.344-9.28L389 312.56l-1.53-18.625L488 285.625c4.66-25.49 6.37-50.705 5.406-75.156L384.25 265.655l-8.438-16.687L492 190.25c-2.783-27.4-8.956-53.61-18.156-77.875L361.03 218.28l-12.81-13.624L466.124 94c-11.236-24.31-25.668-46.277-42.844-65.03zM256.095 290.03c-10.452 0-20.172 5.342-27.78 15.126-7.61 9.784-12.658 23.895-12.658 39.688 0 15.793 5.047 29.903 12.656 39.687 7.61 9.785 17.33 15.158 27.782 15.158 10.452 0 20.14-5.373 27.75-15.157 7.61-9.783 12.656-23.893 12.656-39.686s-5.047-29.904-12.656-39.688c-7.61-9.784-17.298-15.125-27.75-15.125zm39.625 111.19c-10.36 11.14-24.236 18.342-39.626 18.342-14.957 0-28.49-6.798-38.75-17.406-2.662.66-5.147 1.384-7.438 2.188-11.464 4.02-18.388 9.46-23.437 16.97-9.19 13.66-11.542 37.05-11.907 69.248h163.812c-.135-31.55-1.154-55.19-9.188-68.906-4.42-7.55-10.596-12.946-21.562-17.062-3.467-1.302-7.433-2.437-11.906-3.375z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-tail {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="%23000000" stroke="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="%239CA3AF" d="M144.734 22.04c-5.61-.035-11.163.12-16.634.456-43.77 2.7-82.904 17.003-103.862 44.996-7.506 10.027-5.682 23.91 2.95 31.42 8.635 7.51 23.004 8.053 36.234-.52 22.84-14.805 47.933-9.572 64.27 6.172 16.34 15.745 23.736 41.453 7.54 71.145-19.17 35.143-32.716 96.153-20.146 156.526 12.57 60.374 52.968 119.76 139.728 145.772 33.476 10.036 78.825 16.75 121.645 7.666 44.507-8.788 95.85-34.758 106.892-63.11-9.25 8.885-19.44 15.14-30.202 19.79 18.306-20.92 31.735-49.732 36.79-88.174l2.53-19.24-16.322 10.496c-10.503 6.755-20.585 13.403-30.093 18.396 2.638-5.872 5.038-13.22 7.73-22.777-11.097 15.19-23.73 25.355-38.598 31.472-9.234-.503-18.353-4.867-29.21-16.097-11.358-11.747-18.12-32.095-22.463-57.666-4.344-25.572-6.46-55.927-10.668-86.877-8.42-61.902-25.912-127.873-89.74-161.035-36.955-19.2-79.092-28.577-118.372-28.813zm-.123 18.01c36.462.255 76.11 9.065 110.197 26.774 56.393 29.3 71.994 87.14 80.203 147.488 4.104 30.175 6.186 60.554 10.758 87.465 1.316 7.753 2.835 15.242 4.693 22.385-15.448.04-27.254-8.307-41.704-24.717 7.385 30.41 11.99 36.534 25.705 55.55-28.22-8.235-60.64-34.74-80.95-64.063-3.274 40.047 20.223 71.574 33.275 83.93-25.176-14.196-60.713-41.536-84.623-88.655-1.016 41.426 11.93 87.732 36.45 116.465-34.515-11.536-64.97-99.472-85.42-127.633-13.04 33.217-2.948 89.085 16.072 130.122-19.628-22.838-30.887-49.375-36.555-76.596-11.524-55.342 1.75-113.847 18.325-144.238 19.55-35.842 10.915-71.75-10.85-92.726-21.768-20.976-56.854-27.564-86.554-8.315-8.56 5.55-12.688 3.732-14.626 2.045-1.94-1.687-2.76-3.84-.356-7.053 16.106-21.514 50.135-35.324 90.56-37.817 5.052-.312 10.195-.45 15.403-.414z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-horns {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%239CA3AF" width="64px" height="64px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title>horns</title><path d="M26.638 11.075c-2.538-2.146-3.876-6.358 0.524-8.625-5.897 0.449-6.301 6.51-4.405 9.24 3.244 4.671 2.587 7.017 0.545 8.626-0.224-0.588-0.488-1.174-0.777-1.759-4.424 0.649-8.7 1.21-12.889 0-0.368 0.658-0.663 1.316-0.885 1.974-2.261-1.616-3.132-3.958 0.259-8.841 1.897-2.73 1.493-8.791-4.405-9.24 4.4 2.267 3.062 6.479 0.524 8.625-5.68 4.803-5.143 12.86 3.698 15.483 0.211 0.565 0.479 1.13 0.809 1.696 4.296-0.428 8.593-0.406 12.889 0 0.461-0.637 0.803-1.268 1.043-1.896 8.235-2.812 8.612-10.596 3.070-15.283z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-sparkle {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg height="64px" width="64px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><style type="text/css"> .st0{fill:%239CA3AF;} </style><g><path class="st0" d="M247.355,106.9C222.705,82.241,205.833,39.18,197.46,0c-8.386,39.188-25.24,82.258-49.899,106.917 c-24.65,24.642-67.724,41.514-106.896,49.904c39.188,8.373,82.254,25.235,106.904,49.895c24.65,24.65,41.522,67.72,49.908,106.9 c8.373-39.188,25.24-82.258,49.886-106.917c24.65-24.65,67.724-41.514,106.896-49.904 C315.08,148.422,272.014,131.551,247.355,106.9z"></path><path class="st0" d="M407.471,304.339c-14.714-14.721-24.81-40.46-29.812-63.864c-5.011,23.404-15.073,49.142-29.803,63.872 c-14.73,14.714-40.464,24.801-63.864,29.812c23.408,5.01,49.134,15.081,63.864,29.811c14.73,14.722,24.81,40.46,29.82,63.864 c5.001-23.413,15.081-49.142,29.802-63.872c14.722-14.722,40.46-24.802,63.856-29.82 C447.939,329.14,422.201,319.061,407.471,304.339z"></path><path class="st0" d="M146.352,354.702c-4.207,19.648-12.655,41.263-25.019,53.626c-12.362,12.354-33.968,20.82-53.613,25.027 c19.645,4.216,41.251,12.656,53.613,25.027c12.364,12.362,20.829,33.96,25.036,53.618c4.203-19.658,12.655-41.255,25.023-53.626 c12.354-12.362,33.964-20.82,53.605-25.035c-19.64-4.2-41.251-12.656-53.613-25.019 C159.024,395.966,150.555,374.351,146.352,354.702z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Lesson icons for "Pasakos tema" (Step 3) */
.icon-sharing {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%239CA3AF" width="64px" height="64px" viewBox="0 -32 576 576" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M565.3 328.1c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377c15.2-12.1 16.4-35.3 1.3-48.9z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-courage {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%239CA3AF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 234 260" enable-background="new 0 0 234 260" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M232.043,157.557L216.22,2l-32.915,51.122c0,0-28.733-21.024-66.301-21.024c-37.577,0-60.744,17.332-60.744,17.332L9.57,2 L1.957,157.557h4.675C11.901,213.818,59.385,258,117,258s105.099-44.182,110.368-100.443H232.043z M47.147,109.233 c2.105-7.719,11.19-11.065,17.794-6.556l35.635,24.35H42.293L47.147,109.233z M169.194,102.677 c6.604-4.508,15.698-1.163,17.803,6.556l4.845,17.794h-58.283L169.194,102.677z M117,238.185c-46.68,0-85.26-35.314-90.447-80.628 h180.893C202.26,202.871,163.68,238.185,117,238.185z M146.646,200.214H90.891v-16.932h55.755V200.214z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-birthday {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%239CA3AF" width="64px" height="64px" viewBox="0 0 24 24"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"></path></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

.icon-friends {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg fill="%239CA3AF" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 481.8 481.8" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M481.143,368.863l-11.952-60.019c-4.74-23.763-23.338-42.327-47.099-47.027l-16.173-3.19 c-9.29-1.835-16.582-9.062-18.517-18.337l-3.087-14.849c-0.975-4.764,0.74-9.686,4.487-12.779 c14.614-12.094,27.983-29.879,35.715-50.879c10.739-1.929,20.518-12.25,23.683-26.454c3.905-17.606-3.843-34.296-17.321-37.288 c-0.142-0.023-0.284-0.009-0.456-0.023c-4.063-45.714-21.669-79.561-80.215-79.561c-57.57,0-75.838,33.84-80.137,79.529 c-0.189,0.047-0.394,0.032-0.535,0.056c-13.463,2.992-21.211,19.683-17.306,37.288c3.133,14.204,12.93,24.525,23.668,26.454 c7.746,21.008,21.115,38.793,35.697,50.879c3.732,3.094,5.465,8.016,4.473,12.763l-3.07,14.85 c-1.922,9.283-9.211,16.518-18.519,18.353l-16.141,3.19c-21.116,4.171-38.076,19.296-44.956,39.271 c20.831,11.826,36.043,32.124,40.91,56.555l10.408,52.178h162.838c10.25,0,19.983-4.599,26.486-12.535 C480.529,389.357,483.142,378.925,481.143,368.863z"></path><path d="M250.578,362.368c-4.741-23.77-23.338-42.336-47.115-47.036l-16.157-3.189c-9.289-1.834-16.597-9.063-18.518-18.337 l-3.086-14.857c-0.978-4.757,0.739-9.677,4.487-12.778c14.614-12.086,27.982-29.881,35.699-50.879 c10.755-1.929,20.533-12.252,23.698-26.454c3.905-17.605-3.843-34.298-17.321-37.297c-0.143-0.024-0.284-0.008-0.473-0.024 c-4.047-45.712-21.652-79.553-80.215-79.553c-57.556,0-75.821,33.833-80.12,79.53c-0.205,0.039-0.394,0.023-0.536,0.047 c-13.479,2.999-21.227,19.691-17.32,37.297c3.133,14.202,12.928,24.525,23.668,26.454c7.746,21.006,21.115,38.793,35.713,50.887 c3.732,3.094,5.465,8.014,4.473,12.763l-3.072,14.85c-1.92,9.281-9.211,16.518-18.518,18.352l-16.141,3.189 c-23.777,4.7-42.374,23.267-47.115,47.036l-11.951,60.02c-2,10.061,0.614,20.494,7.117,28.423 c6.505,7.935,16.236,12.534,26.486,12.534h194.664c10.25,0,19.982-4.6,26.486-12.534c6.503-7.929,9.117-18.361,7.117-28.423 L250.578,362.368z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Lesson icon size for pills */
.lesson-icon {
    width: 1rem;
    height: 1rem;
}

/* ===== Loading Screen Styles ===== */

/* Glowing box with breathing animation */
.loading-icon-box {
    width: 140px;
    height: 140px;
    background: #0a0a12;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: glow-breathe 3s ease-in-out infinite;
}

@keyframes glow-breathe {
    0%, 100% {
        box-shadow: 0 0 30px rgba(19, 91, 236, 0.4),
                    0 0 60px rgba(19, 91, 236, 0.25),
                    0 0 90px rgba(19, 91, 236, 0.15);
    }
    50% {
        box-shadow: 0 0 50px rgba(19, 91, 236, 0.7),
                    0 0 100px rgba(19, 91, 236, 0.5),
                    0 0 150px rgba(19, 91, 236, 0.3);
    }
}

/* 3D Rotating Loader */
.loading-icon-box .loader {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.loading-icon-box .loader .inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.loading-icon-box .loader .inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #EFEFFA;
}

.loading-icon-box .loader .inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #EFEFFA;
}

.loading-icon-box .loader .inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
    0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
    100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes rotate-two {
    0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
    100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes rotate-three {
    0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
    100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

/* Status card */
.loading-status-card {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.4);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}

.loading-status-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3b82f6;
    margin-bottom: 0.25rem;
}

.loading-progress-bar {
    height: 6px;
    background: #1f2937;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.loading-progress-bar-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.loading-time-estimate {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.loading-time-estimate svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Preview section */
.loading-preview-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4b5563;
}

/* Image placeholder with sparkle icon */
.image-placeholder-icon {
    background: #0f0f17;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shimmer-glow 2s ease-in-out infinite;
}

@keyframes shimmer-glow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Chat widget thin scrollbar */
.chat-messages-scroll::-webkit-scrollbar {
    width: 4px;
}
.chat-messages-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.chat-messages-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
.chat-messages-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}
.chat-messages-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.image-placeholder-icon .placeholder-sparkle {
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml,<svg height="100px" width="100px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="%23000000" stroke="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><style type="text/css"> .st0{fill:%23135BEC;} </style><g><path class="st0" d="M247.355,106.9C222.705,82.241,205.833,39.18,197.46,0c-8.386,39.188-25.24,82.258-49.899,106.917 c-24.65,24.642-67.724,41.514-106.896,49.904c39.188,8.373,82.254,25.235,106.904,49.895c24.65,24.65,41.522,67.72,49.908,106.9 c8.373-39.188,25.24-82.258,49.886-106.917c24.65-24.65,67.724-41.514,106.896-49.904 C315.08,148.422,272.014,131.551,247.355,106.9z"></path><path class="st0" d="M407.471,304.339c-14.714-14.721-24.81-40.46-29.812-63.864c-5.011,23.404-15.073,49.142-29.803,63.872 c-14.73,14.714-40.464,24.801-63.864,29.812c23.408,5.01,49.134,15.081,63.864,29.811c14.73,14.722,24.81,40.46,29.82,63.864 c5.001-23.413,15.081-49.142,29.802-63.872c14.722-14.722,40.46-24.802,63.856-29.82 C447.939,329.14,422.201,319.061,407.471,304.339z"></path><path class="st0" d="M146.352,354.702c-4.207,19.648-12.655,41.263-25.019,53.626c-12.362,12.354-33.968,20.82-53.613,25.027 c19.645,4.216,41.251,12.656,53.613,25.027c12.364,12.362,20.829,33.96,25.036,53.618c4.203-19.658,12.655-41.255,25.023-53.626 c12.354-12.362,33.964-20.82,53.605-25.035c-19.64-4.2-41.251-12.656-53.613-25.019 C159.024,395.966,150.555,374.351,146.352,354.702z"></path></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
}