/*
============
    css variables 
============
*/

@import url(./variables.css);
/*
============
    css reset 
============
*/

@import url(./reset.css);

/*
================
| SEO & Accessibility utilities |
================
*/
/* Visually hidden but accessible to screen readers and SEO */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lazy loading image placeholder */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}



/*
==============
|reused style |
==============
*/
.container header,
nav {
    background-color: var(--very-dark-brown);
}

.navbar,
.banner,
.movies,
.category,
.live,
.platforms {
    padding: 0px var(--px);
}


.section-heading {
    font-size: var(--section-heading);
    font-weight: var(--fw-5);
    margin-bottom: 60px;
}

/*
============
|   Main   |
============
*/

/* main container style */
.container {
    max-width: 1440px;
    margin: auto;
}

/*
============
    Header/Navbar 
============
*/

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* navbar style */
.navbar-brand img {
    width: 100%;
    height: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

/* small screen menu button */
.navbar-menu-btn {
    display: none;
}

/* navbar navigation style */
.navbar-nav {
    margin: 0 50px;
}

.navbar-nav {
    display: flex;
}

.navbar-nav li:not(:last-child) {
    margin-right: 60px;
}

.navbar-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-5);
}

.navbar-link:hover {
    color: var(--bright-orange);
}


/* live indicator */
.indicator {
    position: relative;
}

.indicator::after {
    content: '';
    background: var(--live-indicator);
    position: absolute;
    top: calc(50% - 1px);
    right: -15px;
    width: 4px;
    height: 4px;
    box-shadow: 0 0 2px var(--live-indicator-shadow);
    border-radius: 5px;
}

/* navbar from and the button style*/
.navbar-actions {
    display: flex;
    align-items: center;
}

.user-info {
    margin: 5px;
}

.navbar-form {
    position: relative;
    margin-top: 8px;
}

.user-info-btn {
    margin: 5px;
}

.navbar-form-search {
    background: var(--muted-red);
    width: 100%;
    padding: 12px 20px;
    border-radius: 15px;
    color: var(--light-gray);
    font-size: var(--fs-sm);
    font-weight: var(--fw-5);
}

.navbar-form-btn {
    position: absolute;
    top: calc(50% - 10px);
    right: 10px;
}

.navbar-form-btn ion-icon,
.navbar-search-btn {
    font-size: 20px;
    color: var(--bright-orange);
    --ionicon-stroke-width: 50px;
}

.navbar-form-btn:hover ion-icon,
.navbar-form-search::placeholder {
    color: var(--light-gray);
}

.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--very-dark-brown);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 1;
    overflow: scroll;
    height: 400px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown span {
    color: hsl(24, 84%, 56%);
    margin: 0px 1px;
}

.dropdown span:hover {
    color: var(--bright-orange);
}

.navbar-form-close,
.navbar-search-btn {
    display: none;
}

.navbar-signin {
    display: flex;
    align-items: center;
    font-size: var(--fs-sm);
}

.navbar-signin,
.ion-icon {
    color: var(--bright-orange);
    --ionicon-stroke-width: 30px;
}

.navbar-signin:hover {
    color: var(--light-gray);
}




/*
============
|   Banner |
============
*/

/* banner card style */
.banner {
    margin: 20px auto;
}

.banner-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
}

.banner-img {
    object-position: top;

}

.banner-card:hover .banner-img {
    transform: scale(1.1);
}

.banner-card .card-content {
    position: absolute;
    right: 80px;
    left: 80px;
    bottom: 60px;
}

.banner-card .card-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.banner-card .card-info div {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.banner-card .card-info ion-icon {
    font-size: 20px;
    color: var(--vibrant-orange-red);
    margin-right: 5px;
}

.banner-genre {
    margin: 0 1px;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 5px;
}

.banner-card .card-info span {
    font-weight: var(--fw-6);
}

.banner-card .card-info .quality {
    background: var(--vibrant-orange-red);
    padding: 2px 5px;
    border-radius: 5px;
    font-weight: var(--fw-7);
}

.banner-card .card-title {
    font-size: 3em;
    color: var(--white);
    text-shadow: 2px 0 5px #0007;
}

/*
==================
| auth |
==================
*/
.profile-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 350px;
    margin: 100px auto;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
    border-radius: 10px;
}

.profile-input {
    background-color: var(--muted-red);
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    margin-top: 5px;
}

.password-container i {
    position: relative;
    right: -138px;
    top: -16px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #ccc;
}

.profile-button {
    border: none;
    padding: 10px 15px;
    background-color: hsl(21, 100%, 50%);
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
}

.profile-button:hover {
    background-color: hsl(24, 84%, 56%);
}

/* Old auth-form styles removed - now using modern auth-styles partial */

/* Old notification/alert styles removed - now using modern components/alerts.blade.php */

.btn-delete {
    background-color: red;
    padding: 10px;
    color: white;
    border: none;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.btn-delete:hover {
    background-color: darkred;
}



/* verify email card */
.verify-email-card {
    text-align: center;
}

.title {
    color: #eee;
    font-family: sans-serif;
    font-size: 36px;
    font-weight: 600;
    margin-top: 30px;
}

.subtitle {
    color: #eee;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

/* Old input-container, .input, .cut, .placeholder, .submit styles removed - 
   now using modern auth-styles.blade.php and inline styles */

.btn-download {
    background-color: var(--bright-orange);
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    padding: 15px;
    text-align: center;
    outline: 0;
    margin: 5px auto;
}

.btn-delete {
    background-color: red;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    margin-top: 10px;
    outline: 0;
    text-align: center;
    width: 50%;
}

.btn-update {
    background-color: green;
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    cursor: pointer;
    font-size: 18px;
    height: 50px;
    margin-top: 10px;
    outline: 0;
    text-align: center;
    width: 50%;
}

.bg-profile {
    background-color: var(--light-gray);
    border-radius: 50px;
    padding: 1px;
    cursor: pointer;
}

.btn-download:hover {
    background-color: var(--vibrant-orange-red);
}

/*
==================
| Platforms section |
==================
*/
.platforms {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.platforms .platforms-box {
    width: 100px;
    text-align: center;
    margin: 15px 0;
    overflow: hidden;
    border-radius: 20px;
    background-color: transparent;
    transition: .3s all ease-in-out;
}

.platforms .platforms-box img {
    width: 100px;
    aspect-ratio: 4 / 3;
    object-fit: cover;

}

.platforms .platforms-box:hover {
    cursor: pointer;
    scale: 1.1;
}


/*
==================
| movies section |
==================
*/

.search-results {
    margin: 60px;
    padding: 0px var(--px);
}

.movies {
    margin-bottom: 60px;
}

.bar {
    display: flex;
    align-items: center;
    background: var(--muted-red);
    padding: 20px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}

/* filter bar style */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--muted-red);
    padding: 20px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}

.filter-bar select {
    color: var(--white);
    font-size: var(--fs-sm);
    margin-right: 15px;
    cursor: pointer;
}

.filter-bar option {
    background-color: var(--very-dark-brown);
}

.filter-radios {
    position: relative;
    background-color: var(--very-dark-brown);
    padding: 10px;
    border-radius: 15px;
}

.filter-radios input {
    display: none;
}

.filter-radios label {
    position: relative;
    margin: 0 10px;
    font-size: var(--fs-sm);
    user-select: none;
    cursor: pointer;
    z-index: 10;
}

.filter-radios input:checked+label,
.filter-radios label:hover+label {
    color: var(--bright-orange);
}

input~.checked-radio-bg {
    /* variable for changing postion and size
    based on radio checked */
    --width: 85px;
    --left: 5px;

    background: var(--muted-red);
    position: absolute;
    top: 5px;
    left: var(--left);
    bottom: 5px;
    width: var(--width);
    border-radius: 10px;

}

#popular:checked~.checked-radio-bg {
    --width: 73px;
    --left: 90px;
}

#newest:checked~.checked-radio-bg {
    --width: 81px;
    --left: 163px;
}

.details {
    border: 3px solid var(--muted-red);
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    background-color: var(--dark-brownish-black);
}

.details-genre {
    margin: 0 1px;
    color: #ffffff;
    padding: 1.5px;
    border-radius: 5px;
    background-color: var(--bright-orange);
}

.player {
    width: 1024px;
    height: 630px;
    border: 3px solid var(--muted-red);
    border-radius: 20px;
    margin-top: 5px;
}

.player iframe {
    border: none;
    border-radius: 20px;
    width: 100%;
    height: 100%;
}

/*
===============
| Feedbacks |
===============
*/
.feedbacks {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
}

.feedbacks-list {
    border-radius: 10px;
    padding: 5px;
    height: 400px;
    width: 50%;
}

.lists {
    border: 3px solid var(--very-dark-brown);
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
    width: 70%;
    background-color: var(--very-dark-brown);
}

.feedback-input {
    background-color: var(--muted-red);
    border-radius: 12px;
    border: 0;
    box-sizing: border-box;
    color: #eee;
    font-size: 18px;
    height: 100%;
    outline: 0;
    padding: 10px;
    width: 100%;
}

.feedback-form {
    width: auto;
}

.feedback-message {
    margin: 10px;
    background-color: var(--muted-red);
    color: white;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
}

.feedbacks-container {
    background-color: var(--muted-red);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;

}

.feedbacks-head {
    text-align: center;
}

/*
===============
| Contact us & Request - OLD STYLES REMOVED |
===============
*/
/* Old contact-form, contact-input, request-container, request-form, 
   request-input, rules-container styles removed - 
   now using modern inline styles in contactus.blade.php and request.blade.php */

/*
===============
| movies grid - Modern Styles |
===============
*/

.relateds {
    margin-top: 10px;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

/* Modern Movie Card */
.movie-card {
    cursor: pointer;
    transition: var(--transition-smooth, all 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}

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

.movie-card-link {
    text-decoration: none;
    display: block;
}

.movie-card .card-head {
    position: relative;
    height: 240px;
    border-radius: var(--radius-lg, 16px);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--glass-bg-light, rgba(255, 255, 255, 0.03));
}

.movie-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base, all 0.3s ease);
}

.movie-card:hover .card-img {
    transform: scale(1.1);
}

.movie-card .card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base, all 0.3s ease);
}

.movie-card:hover .card-overlay {
    opacity: 1;
}

/* Play Button */
.movie-card .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    transition: var(--transition-smooth, all 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}

.movie-card:hover .play {
    transform: translate(-50%, -50%) scale(1);
}

.movie-card .play ion-icon {
    font-size: 60px;
    color: var(--primary, #ff6b35);
    --ion-icon-stroke-width: 20px;
    filter: drop-shadow(0 4px 15px rgba(255, 107, 53, 0.5));
}

.movie-card .play i {
    font-size: 3.5rem;
    color: var(--primary, #ff6b35);
    filter: drop-shadow(0 4px 15px rgba(255, 107, 53, 0.5));
}

/* Badge */
.movie-card .badge {
    position: absolute;
    top: 12px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--primary-gradient, linear-gradient(135deg, #ff6b35, #f43f5e));
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--shadow-primary, 0 4px 15px rgba(255, 107, 53, 0.3));
}

.movie-card .badge span {
    color: white;
    font-size: 0.75rem;
    font-weight: var(--fw-semibold, 600);
}

.movie-card .badge ion-icon,
.movie-card .badge i {
    font-size: 0.8rem;
    color: white;
}

/* Card Body */
.movie-card .card-body {
    padding: 0 4px;
}

.movie-card .card-title {
    color: var(--text-white, #fff);
    font-size: var(--fs-sm, 0.875rem);
    font-weight: var(--fw-medium, 500);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: var(--transition-fast, all 0.2s ease);
}

.movie-card:hover .card-title {
    color: var(--primary, #ff6b35);
}

/* Card Info & Genres */
.movie-card .card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.movie-card .genre {
    font-size: 0.7rem;
    color: var(--text-subtle, rgba(255, 255, 255, 0.5));
    background: var(--bg-input, rgba(255, 255, 255, 0.04));
    padding: 4px 10px;
    border-radius: var(--radius-sm, 8px);
    transition: var(--transition-fast, all 0.2s ease);
}

.movie-card:hover .genre {
    background: rgba(255, 107, 53, 0.15);
    color: var(--primary, #ff6b35);
}


/*
============
| pagination |
=============
*/

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* Ensures wrapping for small devices */
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.page-item {
    margin: 0 0.2rem;
}

.page-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    /* Adjust font size for visibility */
    font-weight: 500;
    color: var(--bright-orange);
    text-decoration: none;
    border: 1px solid var(--bright-orange);
    border-radius: 0.25rem;
}

.page-link:hover {
    color: var(--white);
    background-color: var(--bright-orange);
}

.page-item.active .page-link {
    background-color: var(--bright-orange);
    color: var(--white);
    /* border-color: var(--vibrant-orange-red); */
}

.page-item.disabled .page-link {
    color: var(--shade-gray);
    pointer-events: none;
    background-color: var(--light-gray);
    border: none;
}


/* ================
    |   Category section |
    ==================  */
.category {
    margin-bottom: 60px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.category-card {
    position: relative;
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.category-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, #000a);
}

.category-card:hover .card-img {
    transform: scale(1.1);
}

.category-card .name,
.category-card .total {
    position: absolute;
    bottom: 20px;
    color: var(--white);
    z-index: 20;
}

.category-card .name {
    font-size: 20px;
    left: 20px;
}

.category-card .total {
    right: 20px;
    font-size: 18px;
    background: var(--muted-red);
    padding: 5px 8px;
    border-radius: 8px;
}

.category-card:hover .name {
    color: var(--bright-orange);
}


/* <!-- ================
    |   Footer section |
    ================== --> */

footer {
    background: var(--dark-brownish-black);
    padding: 80px var(--px);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--muted-red);
    padding-bottom: 80px;
}

.footer-brand {
    max-width: 250px;
    margin-right: 130px;
}

.footer-logo {
    width: 100px;
    margin-bottom: 30px;
}

.slogan {
    font-size: var(--fs-sm);
    line-height: 20px;
    margin-bottom: 20px;
}

.social-link a {
    display: inline-block;
}

.social-link ion-icon {
    font-size: 25px;
    margin-bottom: 20px;
}

.footer-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    align-items: flex-end;
}

.link-heading {
    margin-bottom: 20px;
}

.link-item {
    font-size: var(--fs-sm);
}

ul .link-item:not(:last-child) {
    margin-bottom: 10px;
}

.link-item:hover a {
    color: var(--bright-orange);
}

.footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
}

.footer-copyright p,
.wrapper a {
    font-size: var(--fs-sm);
}

.wrapper a:hover {
    color: var(--bright-orange);
}

.wrapper {
    display: flex;
}

.wrapper a:not(:last-child) {
    margin-right: 30px;
}

/*
============================================
    Select Dropdown Styling
    Dark theme for all portals
============================================
*/

/* Base select styling */
select,
.filter-section select,
.filter-bar select,
.filter-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 40px !important;
    cursor: pointer;
}

/* Option styling - Dark background */
select option,
.filter-section select option,
.filter-bar select option {
    background-color: #1a1a2e;
    color: #fff;
    padding: 12px 16px;
    border: none;
}

/* Option hover/selected state */
select option:hover,
select option:focus,
select option:checked {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(244, 63, 94, 0.3));
    color: #fff;
}

/* Portal-specific option styling */
.portal-apps select option:checked,
.portal-apps select option:hover {
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.3), rgba(0, 184, 148, 0.3));
}

.portal-software select option:checked,
.portal-software select option:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(124, 58, 237, 0.3));
}

.portal-games select option:checked,
.portal-games select option:hover {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(255, 107, 53, 0.3));
}

/* Select focus state */
select:focus {
    outline: none;
    border-color: var(--portal-primary, rgba(255, 107, 53, 0.5)) !important;
    box-shadow: 0 0 0 3px var(--portal-glow, rgba(255, 107, 53, 0.2));
}

/* Firefox specific fix */
@-moz-document url-prefix() {
    select option {
        background-color: #1a1a2e;
        color: #fff;
    }
}

/* Filter bar input focus effects */
.filter-section input:focus,
.filter-bar input:focus {
    outline: none;
    border-color: var(--portal-primary, rgba(255, 107, 53, 0.5)) !important;
    box-shadow: 0 0 0 3px var(--portal-glow, rgba(255, 107, 53, 0.2));
}

/* Portal-specific input focus */
.portal-apps input:focus,
.portal-apps select:focus {
    border-color: rgba(0, 212, 170, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.2);
}

.portal-software input:focus,
.portal-software select:focus {
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.portal-games input:focus,
.portal-games select:focus {
    border-color: rgba(244, 63, 94, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
}

.portal-movies input:focus,
.portal-movies select:focus {
    border-color: rgba(255, 107, 53, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}