/* =============================================================== */
/* Modern & Minimalist IPTV Web Player                           */
/* =============================================================== */

/* --- 1. Global Styles & Color Palette --- */
:root {
    --bg-dark: #090436;
    --surface-color: #031f2d;
    --border-color: #f2fe14;
    --accent-color: #099af4f1;
    --accent-hover: #8ac915;
    --text-primary: #eff3f6;
    --text-secondary: #0bf632;
    --live-red: #f91808;
    --scheduled-yellow: #ffc107;
    --ended-gray: #2aa508;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; color: var(--text-primary); background-color: var(--bg-dark); min-height: 100vh; padding: 24px; }

/* --- 2. Main Layout & Header --- */
.main-container, .adult-page-container { max-width: 960px; margin: 0 auto; }
.app-header { display: flex; align-items: center; justify-content: space-between; text-align: center; margin-bottom: 40px; padding: 0 24px 16px 24px; border-bottom: 2px solid var(--border-color); }
.app-header h1 { font-size: 1.8em; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--text-primary); margin: 0; padding: 0; }
.app-header h1:first-child { margin: 0 auto; }
.menu-container { position: relative; }
#menu-btn { background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
#menu-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
#menu-btn svg { fill: var(--text-secondary); width: 24px; height: 24px; }
#menu-btn:hover svg { fill: var(--text-primary); }
.dropdown-menu { display: none; position: absolute; top: 120%; right: 0; z-index: 100; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); padding: 8px; width: 150px; }
.dropdown-menu.visible { display: block; }
#about-btn, #unlock-btn { width: 100%; padding: 10px 12px; font-size: 1em; font-weight: 600; text-align: left; color: var(--text-primary); background-color: transparent; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; }
#about-btn:hover, #unlock-btn:hover { background-color: var(--accent-color); }

/* --- 3. Channel Grid & Cards --- */
#channel-grid, #adult-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.channel-card { background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.3s ease, transform 0.3s ease; }
.channel-card:hover, .channel-card:focus {
  transform: translateY(-4px);
  border-color: var(--accent-color);
  outline: 2px solid var(--accent-color); }
.match-status { padding: 5px 12px; border-radius: 20px; font-size: 0.6em; font-weight: 700; color: #fff; }
.status-live { background-color: var(--live-red); }
.status-scheduled { background-color: var(--scheduled-yellow); color: #111; }
.status-ended, .status-finished { background-color: var(--ended-gray); }
.status-movie, .status-music { background-color: #6366f1; }
.match-details { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.teams { display: flex; flex-direction: column; gap: 8px; font-size: 0.8em; font-weight: 700; color: var(--text-primary); }
.teams .team-line { display: flex; align-items: center; gap: 12px; font-size: 1em; font-weight: 600; }
.teams .team-logo { width: 28px; height: 28px; object-fit: contain; }
.match-time { font-size: 0.7em; font-weight: 700; text-align: right; white-space: nowrap; color: var(--text-primary); }
.match-time span { font-size: 0.7em; font-weight: 400; margin-left: 4px; }
.card-footer { border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.match-date { font-size: 0.7em; font-weight: 600; color: var(--text-secondary); }
.watch-button { background-color: transparent; color: #84c8fc; border: 2px solid #84cefc; padding: 6px 16px; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 0.9em; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; }
.watch-button:hover { background-color: #c084fc; color: #ffffff; }

/* --- League Logo & Header Pill Styles --- */
.card-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.85em; font-weight: 600; color: var(--text-secondary); }
.event-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid #475569; border-radius: 20px; font-size: 0.8em; font-weight: 600; color: #e2e8f0; }
.league-logo { width: 22px; height: 22px; object-fit: contain; }
.channel-thumbnail { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

/* --- 4. Category Filters --- */
.category-filters-container { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; justify-content: center; margin-bottom: 40px; padding-bottom: 5px; -ms-overflow-style: none; scrollbar-width: none; }
.category-filters-container::-webkit-scrollbar { display: none; }
.category-filters-container button { padding: 10px 24px; font-size: 1em; font-weight: 600; color: var(--text-secondary); background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 25px; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; white-space: nowrap; }
.category-filters-container button:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.category-filters-container button.active { color: var(--bg-dark); background-color: var(--accent-color); border-color: var(--accent-color); }

/* --- 5. Modal Styles --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6000; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease-in-out; background: rgba(10, 5, 20, 0.5); backdrop-filter: blur(10px); }
.modal-overlay.visible { display: flex; opacity: 1; }
.modal-content { position: relative; transform: scale(0.95) translateY(15px); transition: transform 0.3s ease-in-out; max-width: 380px; width: 90%; }
.modal-overlay.visible .modal-content { transform: scale(1) translateY(0); }
#close-modal-btn, #close-server-modal-btn, #close-password-modal-btn, #close-settings-modal-btn { position: absolute; top: 15px; right: 15px; z-index: 10; background: transparent; border: none; width: 30px; height: 30px; font-size: 20px; cursor: pointer; color: rgba(255, 255, 255, 0.8); transition: all 0.2s ease; }
#close-modal-btn:hover, #close-server-modal-btn:hover, #close-password-modal-btn:hover, #close-settings-modal-btn:hover { color: #ffffff; transform: scale(1.1); }

/* --- 6. Server & Settings Modal --- */
#server-modal .modal-content, #settings-modal .modal-content { background: #03011c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
#server-modal .card-content-wrapper-server, #settings-modal .card-content-wrapper-server { padding: 24px 30px 30px 30px; display: flex; flex-direction: column; }
#server-modal h2, #settings-modal h2 { font-size: 1.6em; font-weight: 600; color: #ffffff; margin-bottom: 24px; text-align: center; }
.server-list-container { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.server-card { background-color: #032731; color: #E4E4E7; border: 1px solid transparent; border-radius: 12px; padding: 14px 18px; cursor: pointer; width: 100%; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; gap: 12px; }
.server-card .server-name { font-size: 1.05em; font-weight: 600; }
.server-card .server-status-indicator { width: 10px; height: 10px; background-color: #04f720; border-radius: 50%; box-shadow: 0 0 8px rgba(5, 248, 86, 0.7); }
.server-card:hover { background-color: #424404; border-color: #52525B; }

/* --- 7. Player Styles --- */
.player-wrapper { display: none; }
body.player-active .main-container, body.player-active .adult-page-container { display: none; }
body.player-active .player-wrapper { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 7000; }
#video-player { width: 100%; height: 100%; object-fit: contain; background-color: #000; transition: object-fit 0.2s ease-in-out; z-index: 7001; }
#video-player:-webkit-full-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#video-player.zoom-contain { object-fit: contain; }
#video-player.zoom-cover { object-fit: cover; }
#video-player.zoom-fill { object-fit: fill; }

.player-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7002; }
#close-player-btn { 
    pointer-events: auto; position: absolute; 
    top: 20px; right: 20px; 
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
    width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.3s ease; }
#close-player-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.1); }

.player-controls-bottom { 
    position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; 
    padding: 15px calc(20px + env(safe-area-inset-right)) calc(15px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    pointer-events: none; 
}
.controls-left, .controls-right { display: flex; align-items: center; gap: 15px; pointer-events: auto; }
#quality-menu-container, #settings-btn, #fullscreen-btn { position: relative; pointer-events: auto; }
#quality-btn, #settings-btn, #fullscreen-btn { width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); color: white; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; transition: all 0.3s ease; }
#quality-btn:hover, #settings-btn:hover, #fullscreen-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.1); }

#quality-menu { display: none; position: absolute; bottom: 110%; left: 0; background-color: rgba(25, 25, 25, 0.85); border-radius: 6px; padding: 5px; width: 100px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); }
#quality-menu-container:hover .quality-menu { display: block; }
.quality-menu button { width: 100%; padding: 8px 12px; background: transparent; border: none; color: white; text-align: center; border-radius: 4px; cursor: pointer; font-size: 0.9em; }
.quality-menu button:hover { background-color: rgba(255, 255, 255, 0.2); }
.quality-menu button.active { background-color: var(--accent-color); font-weight: bold; }

#settings-modal { z-index: 8000; }
.zoom-option .checkmark { display: none; color: var(--border-color); font-size: 1.2em; }
.zoom-option.active .checkmark { display: inline; }
.zoom-option { justify-content: space-between; }

/* --- 8. Loading Spinner --- */
.loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-dark); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; opacity: 1; }
.spinner { width: 50px; height: 50px; border: 4px solid var(--border-color); border-top: 4px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.main-container { visibility: hidden; opacity: 0; transition: opacity 0.5s ease; }
body.loading-done .loader-overlay { opacity: 0; pointer-events: none; }
body.loading-done .main-container { visibility: visible; opacity: 1; }

/* --- 9. Glowing Card & Modal Styles --- */
@keyframes rotate { to { transform: rotate(1turn); } }
.glowing-card { position: relative; padding: 1px; border-radius: 24px; }
.glowing-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 180deg at 50% 50%, #5a2f96, #00d4ff, #5a2f96); animation: rotate 4s linear infinite; z-index: 0; }
.card-content-wrapper { position: relative; background: rgba(25, 15, 50, 0.85); backdrop-filter: blur(10px); border-radius: inherit; padding: 40px 20px 30px 20px; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }

#about-modal h2 { color: #e8dffc; font-size: 1.8em; font-weight: 700; margin-bottom: 15px; }
#about-modal .about-text-container { width: 90%; margin: 20px auto; border-radius: 16px; }
#about-modal .about-text-container .card-content-wrapper { background: rgba(10, 10, 20, 0.6); padding: 15px; }
#about-modal .about-text-container p { color: #d8d0e8; font-size: 0.95em; line-height: 1.8; padding: 10px; margin: 0; }
#about-modal .disclaimer-text { font-size: 0.85em; margin-top: 15px; }
#about-modal .developer-info { margin-top: 20px; color: #b0a8c2; font-size: 0.9em; }
#about-modal .copyright-info { font-size: 0.8em; color: #8c82a3; }

/* --- iOS PWA Fullscreen Fix --- */
body.ios-native-fullscreen .player-controls {
    display: none !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 420px) { 
    body { padding: 16px; }
    .app-header { padding-left: 0; padding-right: 0; }
    .category-filters-container { padding-left: 16px; padding-right: 16px; }
    .app-header h1 { letter-spacing: 1px; font-size: 1.0em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .channel-card { padding: 16px; gap: 12px; }
    .match-details { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
    .teams { font-size: 1.1em; }
    .match-time { font-size: 1.3em; white-space: normal; text-align: right; }
    .watch-button { padding: 8px 16px; font-size: 0.9em; }
    .category-filters-container button { padding: 8px 20px; font-size: 0.9em; }
}

/* --- Floating Scores Button --- */
#floating-scores-btn { position: fixed; z-index: 1000; bottom: 30px; right: 30px; }
#channel-grid { padding-bottom: 100px; }

/* --- Styles for Hidden Adult Page --- */
.adult-page-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-dark); z-index: 5000; overflow-y: auto; padding: 24px; max-width: none; }
body.adult-page-active .main-container, body.adult-page-active #floating-scores-btn { display: none; }
body.adult-page-active .adult-page-container { display: block; }
.header-nav-btn.text-btn { display: flex; align-items: center; gap: 8px; background-color: var(--surface-color); padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: all 0.2s ease; }
.header-nav-btn.text-btn:hover { background-color: var(--accent-color); color: var(--bg-dark); }

/* --- Custom Password Modal Styles --- */
#password-modal h2 { color: #e8dffc; font-size: 1.6em; margin-bottom: 10px; }
.error-message { color: #ff5c5c; font-weight: 500; font-size: 0.9em; height: 20px; margin-bottom: 10px; transition: opacity 0.3s ease; opacity: 0; }
.error-message.visible { opacity: 1; }
.password-input-container { display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 0 15px; margin-top: 15px; }
#password-input { background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 14px; color: var(--text-primary); font-size: 1.1em; text-align: center; letter-spacing: 2px; width: 100%; transition: border-color 0.3s ease; }
#password-input::placeholder { color: rgba(255, 255, 255, 0.4); }
#password-input:focus { outline: none; border-color: var(--accent-color); }
#password-input.error { border-color: #ff5c5c; animation: shake 0.5s; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
#submit-password-btn { background-color: var(--accent-color); color: white; border: none; padding: 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 1.1em; width: 100%; transition: background-color 0.2s ease; }
#submit-password-btn:hover { background-color: var(--accent-hover); }

/* --- League Name Text Colors --- */
.event-pill span[data-league="live-tv"] { color: var(--border-color); }
.event-pill span[data-league="premier-league"] { color: #ebfb40; }
.event-pill span[data-league="uefa-champions-league"] { color: #448aff; }
.event-pill span[data-league="la-liga"] { color: #ff5252; }
.event-pill span[data-league="serie-a"] { color: #ffd740; }
.event-pill span[data-league="fa-cup"] { color: #ff4081; }

/* Blinking LIVE indicator */
.match-status.status-live::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: middle; border-radius: 50%; background-color: #04f720; animation: blink 1.4s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
/* style.css */

/* --- Custom Video Player Loader (NEW & COMPLETE) --- */
#video-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* This will be toggled by JavaScript */
    justify-content: center;
    align-items: center;
    z-index: 7001;
    /* This prevents the loader from blocking mouse clicks on the video */
    pointer-events: none; 
}

.video-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3); /* A softer white for video overlay */
    border-top-color: #ffffff; /* A bright white for the spinning part */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* You should already have this 'spin' animation from your main loader */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* --- TV Focus Visibility Additions --- */
.focusable:focus,
.channel-card:focus,
.server-card:focus,
.zoom-option:focus,
.watch-button:focus,
.category-filters-container button:focus,
#close-server-modal-btn:focus,
#close-settings-modal-btn:focus,
#close-modal-btn:focus,
#submit-password-btn:focus,
#menu-btn:focus,
#quality-btn:focus,
#settings-btn:focus,
#fullscreen-btn:focus,
#close-player-btn:focus,
#back-to-main-btn:focus,
#floating-scores-btn:focus {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-color: var(--accent-color);
  z-index: 11;
}