/* ========== SVG ICONS STYLES ========== */



.icon {

    display: inline-block;

    width: 1em;

    height: 1em;

    vertical-align: -0.125em;

    font-size: inherit;

    color: inherit;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    flex-shrink: 0;

}



.icon-inline {

    width: 1em;

    height: 1em;

    margin-right: 0.5em;

}



.icon[fill="currentColor"] {

    fill: currentColor;

}



/* Navigation icons */

.nav-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 0.75rem;

}



.nav-icon .icon {

    width: 1.1em;

    height: 1.1em;

    transition: transform 0.2s ease;

}



.nav-link-item:hover .nav-icon .icon {

    transform: scale(1.1);

}



/* Button icons */

.btn-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 0.75rem;

}



.btn-icon .icon {

    width: 1.1em;

    height: 1.1em;

}



/* Search button icon */

.search-btn-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem;

    background: none;

    border: none;

    cursor: pointer;

    color: var(--cosmic-accent);

    transition: transform 0.2s ease, color 0.2s ease;

}



.search-btn-icon:hover {

    color: var(--cosmic-accent-bright);

    transform: scale(1.1);

}



.search-btn-icon .icon {

    width: 1.1em;

    height: 1.1em;

}



/* Theme toggle button */

.theme-toggle-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem;

    background: none;

    border: none;

    cursor: pointer;

    color: var(--cosmic-text);

    transition: transform 0.2s ease, color 0.2s ease;

}



.theme-toggle-btn:hover {

    transform: scale(1.1) rotate(20deg);

    color: var(--cosmic-accent);

}



.theme-icon-container {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.theme-icon-container .icon {

    width: 1.1em;

    height: 1.1em;

}



/* App icons */

.app-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 0.5rem;

}



.app-icon .icon {

    width: 1.1em;

    height: 1.1em;

}



/* Carousel / Spotlight arrow buttons */

.carousel-arrow,

.spotlight-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.75rem;

    background: var(--cosmic-bg-elevated);

    border: 1px solid var(--cosmic-border);

    border-radius: 50%;

    cursor: pointer;

    color: var(--cosmic-accent);

    transition: all 0.2s ease;

}



.carousel-arrow:hover,

.spotlight-arrow:hover {

    background: var(--cosmic-accent);

    color: white;

    border-color: var(--cosmic-accent);

    transform: scale(1.1);

}



.carousel-arrow .icon,

.spotlight-arrow .icon {

    width: 1.1em;

    height: 1.1em;

}



/* Watch now button icon */

.watch-now-btn,

.details-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.watch-now-btn .icon,

.details-btn .icon {

    width: 1em;

    height: 1em;

    margin-right: 0.5rem;

}



/* Close menu icon */

.close-menu {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    background: none;

    border: none;

    color: var(--cosmic-text);

    cursor: pointer;

    padding: 0.5rem;

    transition: color 0.2s ease;

}



.close-menu:hover {

    color: var(--cosmic-accent);

}



.close-menu .icon {

    width: 0.5em;

    height: 0.5em;

}



/* Reset filter button */

.reset-filters-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.reset-filters-btn .icon {

    width: 1em;

    height: 1em;

}



/* Favorites link icon */

.favorites-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.favorites-link .icon {

    width: 0.5em;

    height: 0.5em;

}



/* Section title icons */

.section-title .icon {

    width: 1.2em;

    height: 1.2em;

    margin-right: 0.5em;

    vertical-align: -0.25em;

}



/* Pagination buttons */

.page-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 2.5rem;

    height: 2.5rem;

    background: var(--cosmic-bg-elevated);

    border: 1px solid var(--cosmic-border);

    border-radius: 0.5rem;

    cursor: pointer;

    color: var(--cosmic-accent);

    transition: all 0.2s ease;

    font-weight: 500;

}



.page-btn:hover {

    background: var(--cosmic-accent);

    color: white;

    border-color: var(--cosmic-accent);

}



.page-btn .icon {

    width: 1.1em;

    height: 1.1em;

}



/* Badge icons */

.badge .icon {

    width: 1em;

    height: 1em;

    margin-right: 0.25em;

    vertical-align: -0.125em;

}



/* Rating star icon */

.badge-rating .icon {

    width: 1em;

    height: 1em;

    color: #fbbf24;

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .icon {

        width: 1.125em;

        height: 1.125em;

    }

    

    .icon-inline {

        width: 0.875em;

        height: 0.875em;

        margin-right: 0.375em;

    }

    

    .carousel-arrow,

    .spotlight-arrow {

        padding: 0.5rem;

    }

}



/* Animation for loading states */

@keyframes icon-spin {

    to {

        transform: rotate(360deg);

    }

}



.icon-loading {

    animation: icon-spin 1s linear infinite;

}



/* Accessibility - reduced motion */

@media (prefers-reduced-motion: reduce) {

    .nav-icon .icon,

    .search-btn-icon,

    .carousel-arrow,

    .spotlight-arrow,

    .theme-toggle-btn {

        transition: none;

    }

    

    .icon-loading {

        animation: none;

    }

}



/* Dark theme adjustments */

body.light-theme .carousel-arrow,

body.light-theme .spotlight-arrow {

    background: #f3f4f6;

    border-color: rgba(148, 163, 184, 0.4);

    color: var(--cosmic-cta);

}



body.light-theme .carousel-arrow:hover,

body.light-theme .spotlight-arrow:hover {

    background: var(--cosmic-cta);

    color: white;

    border-color: var(--cosmic-cta);

}



body.light-theme .close-menu {

    color: var(--cosmic-text);

}



body.light-theme .close-menu:hover {

    color: var(--cosmic-cta);

}



body.light-theme .page-btn {

    background: #f9fafb;

    border-color: rgba(148, 163, 184, 0.4);

    color: var(--cosmic-cta);

}



body.light-theme .page-btn:hover {

    background: var(--cosmic-cta);

    color: white;

    border-color: var(--cosmic-cta);

}