/* ===================================================================
   Kixonair UI — FULL stylesheet (with mobile header + brand improvements)
   Build: mobile-header-v3 (logo larger/clearer, tabs scrollable)
   =================================================================== */

/* Base tokens */
:root{
  --bg:#0b0f14;--card:#161c26;--edge:#222c3b;--text:#e8eef6;--muted:#9fb0c8;
  --pill:#111827;--accent:#4f8cff;--live:#ff4d4d
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,#0b0f14 0%, #0b0f14 100%);
  color:var(--text)
}

/* Header */
.header{
  position:sticky;top:0;
  background:rgba(9,14,20,0.7);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #0a121c;
  z-index:10
}
.bar{
  max-width:1040px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  gap:12px;
  align-items:center
}
.controls{
  display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap
}
.controls input[type="text"], .controls input[type="date"]{
  background:#0e1620;border:1px solid var(--edge);color:var(--text);
  border-radius:12px;padding:10px 12px;min-width:160px;outline:none
}

/* Style the main search bar in the header (outside of .controls) */
#q{
  background:#0e1620;
  border:1px solid var(--edge);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  min-width:200px;
  max-width:320px;
  outline:none;
  flex-grow:1;
  flex-shrink:0;
}
#q::placeholder{
  color:var(--muted);
}
.pill{
  background:var(--pill);border:1px solid var(--edge);color:var(--text);
  border-radius:999px;padding:8px 12px;cursor:pointer
}
.pill.active{border-color:transparent;background:#1c2230;color:#cde0ff;font-weight:700}
.ghost{background:transparent;border:1px solid var(--edge);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.league-wrap{position:relative;display:flex;align-items:center;gap:6px}
.league-menu{
  position:absolute;top:110%;left:0;min-width:260px;background:#101621;
  border:1px solid var(--edge);border-radius:12px;padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35)
}
.league-menu.hidden{display:none}
.league-menu .menuitem{
  display:block;width:100%;text-align:left;border:1px solid transparent;
  background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer
}
.league-menu .menuitem:hover{background:rgba(255,255,255,0.06)}
.switch{display:flex;align-items:center;gap:8px}
.switch span{color:var(--muted);font-size:12px;font-weight:600}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:#1b2432;position:relative;cursor:pointer}
.switch input:checked{background:linear-gradient(120deg,#06B6D4,#8B5CF6)}
.switch input::after{content:"";position:absolute;top:3px;left:4px;width:16px;height:16px;border-radius:50%;background:#0b0f14;transition:left .18s}
.switch input:checked::after{left:18px}

/* Main */
main{max-width:1040px;margin:0 auto;padding:16px}
.hero{
  margin:18px 0 10px;
  /* Make hero more vibrant with a deeper gradient */
  background:linear-gradient(135deg,rgba(139,92,246,0.20),rgba(6,182,212,0.20));
  border:1px solid #0f1622;
  border-radius:16px;
  padding:18px;
}
.hero h1{margin:0 0 6px;font-size:22px}
.hero p{margin:0;color:var(--muted)}
.counts{margin:10px 2px;color:var(--muted)}
.section{background:transparent;border:0;padding:0;margin-top:6px}
.section>h2{margin:10px 0 10px;font-size:16px;color:#dbe6ff}
.feed{display:flex;flex-direction:column;gap:14px}

/* Game Card */
.game-card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:14px;
  padding:14px;
  position:relative;
  /* Add depth to cards for a more premium feel */
  box-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
  transition:transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Subtle lift and stronger shadow on hover to enhance interactivity */
.game-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.3);
}

/* Favourite star */
.game-card .fav{
  position:absolute;
  top:8px;
  right:8px;
  font-size:18px;
  color:#485b75;
  cursor:pointer;
  user-select:none;
  transition:color 0.2s ease;
}
.game-card .fav.active{
  color:#facc15;
}
.game-card.favourite{
  border-color:#facc15;
  box-shadow:0 6px 14px rgba(255,204,0,0.3), 0 3px 6px rgba(255,204,0,0.15);
}
.game-card .gc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.gc-head .left{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#7a8597;display:inline-block}
.dot.live{background:var(--live);box-shadow:0 0 0 4px rgba(255,77,77,0.12)}
.state{font-weight:700;letter-spacing:0.4px}
.comp{color:var(--muted)}
.sport-tag{color:#c6d2f3;font-weight:700}

.gc-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 10px}
.team{display:flex;align-items:center;gap:10px;min-width:0}
.team.right{justify-content:flex-end}
.badge{width:36px;height:36px;border-radius:50%;object-fit:contain;background:#0f1622;border:1px solid #233048}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.score{display:flex;flex-direction:column;align-items:center;min-width:100px}
.score .num{font-size:26px;font-weight:800}
.score .when{margin-top:4px;color:var(--muted);font-size:12px}
.gc-foot{display:flex;justify-content:flex-start;padding:8px 4px 0}
.watch-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(145deg,#21293a,#2e3750);
  border:1px solid #2a3650;
  color:#e5eeff;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  /* Lift button off the page with a soft shadow */
  box-shadow:0 3px 6px rgba(0,0,0,0.2);
  transition:background 0.18s ease, box-shadow 0.18s ease;
}
.watch-btn:hover{
  background:#344465;
  border-color:#41527a;
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
}
.play{width:0;height:0;border-left:10px solid #e5eeff;border-top:6px solid transparent;border-bottom:6px solid transparent;display:inline-block}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,#151b26,#1b2230,#151b26);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:0 0}100%{background-position:-200% 0}}

/* Mobile defaults */
@media(max-width:640px){
  .controls{width:100%}
  .controls input[type="text"]{flex:1 1 100%}
  .name{max-width:140px}
}
.empty{color:var(--muted);padding:10px;text-align:center;border:1px dashed var(--edge);border-radius:12px}

/* Footer */
.footer{border-top:1px solid #0a121c;margin-top:28px}
.footer .inner{
  max-width:1040px;margin:0 auto;padding:16px;display:flex;gap:10px;
  justify-content:space-between;align-items:center;flex-wrap:wrap
}
.muted{color:var(--muted)} .small{font-size:12px}
.hidden{display:none !important}

/* === Mobile menu toggle styles ========================================= */
/* Button to toggle the collapsible menu. Hidden on desktops by default. */
.menu-btn{
  display:none;
  background:transparent;
  border:none;
  color:var(--text);
  font-size:28px;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  line-height:1;
}

/* Overlay behind the menu; hidden by default */
.menu-overlay{
  display:none;
}

@media (max-width:768px){
  /* Show the hamburger button on small screens */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  /* Convert controls into an off-canvas panel that slides down */
  .controls{
    position:fixed;
    top:60px; /* approximate header height; adjust if header size changes */
    left:0;
    right:0;
    background:rgba(10,14,20,0.95);
    padding:16px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    transform:translateY(-200%);
    transition:transform 0.3s ease-in-out;
    z-index:999;
  }
  /* When open, slide the controls into view */
  .controls.open{
    transform:translateY(0);
  }
  /* Display the overlay when menu is open */
  .menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:998;
  }
  .menu-overlay.active{display:block;}
  /* Ensure search input spans full width on mobile */
  .bar > input[type="text"]{flex:1 1 100%;min-width:0;}
}

/* === Mobile polish: general ========================================== */
:root{ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }
@media (max-width: 768px){
  body{ padding-top: var(--safe-top); padding-bottom: calc(10px + var(--safe-bottom)); }
  .header, .toolbar, .filters-bar{
    position: sticky; top: calc(0px + var(--safe-top)); z-index: 1000;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    background: rgba(10,14,20,0.75);
  }
  .filters-bar{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .filters-bar .chip, .chip{
    display:inline-flex; min-width:72px; padding:10px 14px; margin-right:8px; border-radius:10px;
  }
  .date-row button, .date-controls button{ padding:9px 12px; border-radius:10px; }
  .match-card, .card{ margin:12px; border-radius:14px; }
  .teams{ display:grid; grid-template-columns:32px 1fr auto 1fr 32px; align-items:center; gap:8px; }
  .team-name, .home-name, .away-name{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.2;
  }
  .team-badge, .badge{ width:32px; height:32px; border-radius:50%; object-fit:contain; }
  .kickoff, .kickoff-time{ font-size:12px; opacity:.8; margin-top:2px; }
  .watch-btn, .cta-watch{ width:100%; padding:14px 16px; font-size:16px; border-radius:12px; margin-top:10px; }
  .load-summary{ font-size:12px; opacity:.8; }
}

/* === Timers addon states ============================================= */
.state.live{ color: var(--live); }
.state.finished{ color: #b6c2d9; }
.state.scheduled{ color: var(--text); opacity:.85; }
.state.half{ color:#fbbf24; }
.countdown{ margin-top:4px; font-size:12px; color:#9fb3d1; }

/* =====================================================================
   MOBILE HEADER + BRAND REWORK (v3)
   - bigger, brighter logo at top-left
   - tabs become horizontal pill bar
   - extra spacing so logo never overlaps search
   ===================================================================== */
@media (max-width: 640px){
  /* Layout space for the brand */
  .header .bar{ position: relative; padding-top: 72px; }

  /* Brand node: try several common wrappers */
  .header .bar .brand,
  .header .bar .logo,
  .header .bar .site-brand,
  .header .bar a.brand,
  .header .bar > a:first-child{
    position: absolute;
    top: 12px; left: 14px;
    z-index: 1400;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* Icon itself: larger + contrasted */
  .header .bar .brand img,
  .header .bar .logo img,
  .header .bar .site-brand img,
  .header .bar a.brand img,
  .header .bar > a:first-child > img{
    width: 48px; height: 48px;
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12), rgba(255,255,255,0));
    border: 1px solid #233048;
    padding: 6px;
    object-fit: contain;
    filter: brightness(1.45) contrast(1.2) drop-shadow(0 2px 10px rgba(0,0,0,.7));
  }

  /* Optional wordmark to ensure readability on dark icons */
  .header .bar .brand:not(.brand--no-text)::after,
  .header .bar .logo:not(.brand--no-text)::after,
  .header .bar .site-brand:not(.brand--no-text)::after,
  .header .bar a.brand:not(.brand--no-text)::after,
  .header .bar > a:first-child:not(.brand--no-text)::after{
    content: "Kixonair";
    color: #eaf2ff;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    margin-left: 6px;
  }
  /* Override: remove brand caption on mobile */
  .header .bar .brand::after,
  .header .bar .logo::after,
  .header .bar .site-brand::after,
  .header .bar a.brand::after,
  .header .bar > a:first-child::after{
    content: none !important;
    display: none !important;
  }


  /* Controls stack cleanly */
  .controls{ margin-left: 0; width: 100%; gap: 8px; flex-wrap: wrap; }

  /* Search first, full width */
  #q{ order: 1; flex: 1 1 100%; min-width: 0; }

  /* Sport tabs as pill bar */
  .filters, .sport-tabs, .filters-sports{
    order: 2; display: flex; gap: 8px; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar, .sport-tabs::-webkit-scrollbar, .filters-sports::-webkit-scrollbar{ display: none; }
  .filters .pill, .sport-tabs .pill, .filters-sports .pill{ flex: 0 0 auto; }

  /* Leagues + major toggle + dates */
  .league-wrap{ order: 3; }
  .switch{ order: 4; }
  .datepick, .dates, .date-row{ order: 5; width: 100%; display: flex; gap: 8px; overflow-x:auto; }
}

/* ===================================================================
   Mobile header layout refinement
   Place the logo, search bar and menu button on a single line for
   screens up to 640px wide.  This overrides the earlier mobile
   header rules that absolutely positioned the logo and stacked the
   search bar below it.  By restoring static positioning and allowing
   the search bar to flex, we achieve a cleaner, single‑row layout.
   =================================================================== */
@media (max-width: 640px) {
  /* Reduce the top padding reserved for the absolute logo */
  .header .bar {
    padding-top: 12px;
  }
  /* Keep the brand in the normal flow rather than absolute */
  .header .bar .brand,
  .header .bar .logo,
  .header .bar .site-brand,
  .header .bar a.brand,
  .header .bar > a:first-child {
    position: static;
  }
  /* Allow the search input to grow between the logo and menu button */
  #q {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin-left: 8px;
  }
  /* Push the hamburger menu to the far right */
  #menuBtn {
    margin-left: auto;
  }
}


/* Desktop: make the logo 56x56 */
@media (min-width: 641px){
  .brand img,
  .header .bar .logo img,
  .header .bar .site-brand img,
  .header .bar a.brand img,
  .header .bar > a:first-child > img{
    width: 56px;
    height: 56px;
  }
}