/* YouTube Channel Description Generator - Custom Styles */

/* ===== Mobile Button Optimizations ===== */
@media (max-width: 640px) {
    #generate-btn {
        padding: 1.25rem 0.75rem;
    }

    #btn-text {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: 1.1rem;
    }

    @keyframes gentle-glow {
        0% {
            box-shadow: 0 6px 20px rgba(255, 214, 1, 0.4),
                0 0 0 2px rgba(255, 214, 1, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }
        50% {
            box-shadow: 0 8px 30px rgba(255, 214, 1, 0.65),
                0 0 0 3px rgba(255, 214, 1, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.5);
        }
        100% {
            box-shadow: 0 6px 20px rgba(255, 214, 1, 0.4),
                0 0 0 2px rgba(255, 214, 1, 0.1),
                inset 0 2px 0 rgba(255, 255, 255, 0.3);
        }
    }

    #generate-btn {
        animation: gentle-glow 3s infinite ease-in-out;
    }
}

/* ===== Toast Container Styles ===== */
.toast-container {
    position: fixed;
    top: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s ease-in-out;
    background-color: #1B3C6B;
    color: white;
}

@media (max-width: 1023px) {
    .toast-container {
        left: 50% !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 80% !important;
        max-width: 80% !important;
        transform: translateX(-50%) !important;
    }

    .toast-container.-translate-y-full,
    .toast-container[class*="-translate-y-full"] {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(-100%) !important;
    }

    .toast-container:not(.hidden):not(.-translate-y-full),
    .toast-container:not(.hidden):not([class*="-translate-y-full"]) {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 1024px) {
    .toast-container {
        left: auto;
        right: 1rem;
        transform: translateX(0);
    }
}

.toast-container.hidden {
    display: none !important;
}

/* ===== Loading Spinner ===== */
.spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #1B3C6B;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Error State ===== */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ===== Focus States for Accessibility ===== */
input:focus,
textarea:focus,
button:focus {
    outline: 2px solid #1B3C6B;
    outline-offset: 2px;
}

button:focus:not(:focus-visible) { outline: none; }
button:focus-visible {
    outline: 2px solid #1B3C6B;
    outline-offset: 2px;
}

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { background-color: #f9fafb; }