:root {
    --tv-red: #e60000;
    --tv-yellow: #ffcc00;
    --tv-blue: #003366;
    --dark: #1a1a1a;
    --white: #ffffff;
    --bg: #f4f4f4;
}

* { margin:0; padding:0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background-color: var(--bg); overflow-x: hidden; }

/* HEADER */
header { background: var(--tv-blue); position: sticky; top: 0; z-index: 1000; border-bottom: 4px solid var(--tv-red); }
.main-nav { padding: 10px 5%; display: flex; align-items: center; justify-content: space-between; }
.main-site-logo { height: 45px; width: auto; display: block; }

.nav-buttons { display: flex; align-items: stretch; background: rgba(0,0,0,0.2); margin-top: 10px; border-radius: 4px; height: 38px; }
.scroll-links { display: flex; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-grow: 1; }
.scroll-links a, .nav-btn { color: white; text-decoration: none; display: flex; align-items: center; padding: 0 15px; font-size: 11px; font-weight: bold; text-transform: uppercase; }

.admin-link { background: var(--white); color: var(--tv-blue) !important; margin-left: 5px; padding: 0 15px !important; display: flex; align-items: center; text-decoration: none !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap; border-radius: 0 4px 4px 0; }

/* TICKER */
.breaking-ticker { background: var(--dark); color: white; display: flex; height: 40px; align-items: center; overflow: hidden; margin-top: 12px; }
.ticker-label { background: var(--tv-red); padding: 0 15px; height: 100%; display: flex; align-items: center; font-weight: bold; font-size: 12px; z-index: 5; position: relative; }
.ticker-content { display: flex; white-space: nowrap; flex-grow: 1; overflow: hidden; }
.ticker-text { display: inline-block; padding-left: 20px; animation: scroll-left 30s linear infinite; font-size: 14px; }
@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* LOGO OVERLAY RATIO FIX */
.card-photo-container { position: relative; width: 100%; background: #000; line-height: 0; }
.card-photo-container img#overlayImage { width: 100%; height: auto; display: block; }

.card-logo-overlay { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    height: 35px; /* Fixed height */
    width: auto;  /* Auto width keeps the logo's original ratio */
    object-fit: contain; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    z-index: 20;
}

/* POPUP UI */
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; padding: 20px; overflow-y: auto; }
.overlay-card { max-width: 600px; margin: auto; background: white; border-radius: 12px; overflow: hidden; }
.overlay-header { background: var(--tv-blue); color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.close-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

.card-body { padding: 20px; background: white; }
.card-body h2 { color: var(--tv-red); font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.card-footer { background: #f9f9f9; padding: 12px 20px; display: flex; justify-content: space-between; font-size: 11px; border-top: 1px solid #eee; }
.card-domain { color: var(--tv-red); font-weight: bold; }

.download-btn { width: 100%; padding: 15px; background: #28a745; color: white; border: none; font-weight: bold; cursor: pointer; }