/*
Theme Name:  FieHub Child
Template:    twentytwentyfour
Description: FieHub UAE child theme — home page template
Version:     1.0
Author:      FieHub Team
*/

/* ─── Reset & Variables ─────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --green:#3B6D11;--green-lt:#EAF3DE;--green-mid:#639922;--green-dk:#27500A;
  --amber:#BA7517;--amber-lt:#FAEEDA;
  --blue:#185FA5;--blue-lt:#E6F1FB;
  --red:#A32D2D;--red-lt:#FCEBEB;
  --purple:#534AB7;--purple-lt:#EEEDFE;
  --gray:#F5F3EF;--white:#fff;
  --text:#1a1a1a;--text2:#555;--text3:#888;
  --border:#E0DCDA;--border2:#C8C4BF;
  --radius:10px;--radius-lg:16px;
  --font-display:'Bebas Neue',sans-serif;
  --font-body:'DM Sans',sans-serif;
}
body{font-family:var(--font-body);color:var(--text);background:#F7F5F1;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* ─── NAV ───────────────────────────────────────────── */
.nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;}
.nav-logo{font-family:var(--font-display);font-size:26px;letter-spacing:.05em;color:var(--green);display:flex;align-items:center;gap:7px;}
.nav-logo-dot{width:9px;height:9px;border-radius:50%;background:var(--green-mid);animation:logoPulse 1.8s ease infinite;}
.nav-center{display:flex;gap:4px;}
.nav-link{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s;}
.nav-link:hover,.nav-link.on{background:var(--green-lt);color:var(--green-dk);}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-icon-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--text2);}
.nav-icon-btn:hover{border-color:var(--green-mid);color:var(--green);}
.btn-sm{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:none;}
.btn-outline{background:transparent;border:1.5px solid var(--green);color:var(--green);}
.btn-solid{background:var(--green);color:#fff;}
.btn-solid:hover{background:var(--green-dk);}

/* ─── TICKER ─────────────────────────────────────────── */
.ticker{background:var(--green);padding:8px 24px;display:flex;align-items:center;gap:14px;overflow:hidden;}
.ticker-tag{background:#9FE1CB;color:#04342C;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.ticker-items{display:flex;gap:32px;animation:tickerSlide 18s linear infinite;}
.ticker:hover .ticker-items{animation-play-state:paused;}
.ticker-item{font-size:12px;color:#E1F5EE;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.ticker-score{font-weight:700;color:#fff;}

/* ─── HERO ───────────────────────────────────────────── */
.hero{background:var(--white);padding:40px 24px 32px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(59,109,17,.055) 1px,transparent 1px),linear-gradient(0deg,rgba(59,109,17,.045) 1px,transparent 1px);background-size:46px 46px;animation:heroFieldDrift 18s linear infinite;pointer-events:none;}
.hero-inner{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.hero-kicker{font-size:12px;font-weight:600;color:var(--green);letter-spacing:.05em;margin-bottom:10px;}
.hero-h1{font-family:var(--font-display);font-size:clamp(44px,7vw,80px);letter-spacing:.03em;color:var(--text);line-height:1;margin-bottom:12px;}
.hero-h1 span{color:var(--green);}
.hero-sub{font-size:15px;color:var(--text2);margin-bottom:28px;line-height:1.65;}

/* ─── SEARCH ─────────────────────────────────────────── */
.search-box{background:var(--gray);border:1.5px solid var(--border2);border-radius:var(--radius-lg);padding:14px 16px;display:flex;align-items:center;gap:10px;max-width:720px;margin:0 auto 24px;transition:box-shadow .25s,transform .25s,border-color .25s;}
.search-box.search-active{border-color:var(--green-mid);transform:translateY(-2px);box-shadow:0 18px 45px rgba(59,109,17,.14);}
.search-sport,.search-location,.search-date{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--white);font-size:14px;color:var(--text);font-family:var(--font-body);}
.search-sport{min-width:140px;}
.search-location{flex:1;cursor:pointer;appearance:none;}
.search-divider{width:1px;height:28px;background:var(--border);}
.search-btn{padding:10px 24px;border-radius:8px;border:none;background:var(--green);color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--font-body);}
.search-btn:hover{background:var(--green-dk);}

/* ─── SPORT PILLS ────────────────────────────────────── */
.sport-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.sport-pill{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;}
.sport-pill:hover,.sport-pill.on{border-color:var(--green-mid);background:var(--green-lt);color:var(--green-dk);}
.sport-pill i{font-size:15px;}

/* ─── LAYOUT ─────────────────────────────────────────── */
.layout{max-width:1100px;margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:1fr 300px;gap:24px;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec-title{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px;}
.sec-title i{font-size:18px;color:var(--green);}
.see-all{font-size:13px;font-weight:600;color:var(--green);cursor:pointer;display:flex;align-items:center;gap:4px;}

/* ─── DESTINATION CARDS ──────────────────────────────── */
.destination-section{padding:0;}
.dest-section-label{font-family:var(--font-display);font-size:13px;letter-spacing:.15em;color:var(--text3);text-transform:uppercase;margin-bottom:6px;}
.dest-section-heading{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);letter-spacing:.03em;color:var(--text);margin-bottom:4px;line-height:1;}
.dest-section-sub{font-size:14px;color:var(--text2);margin-bottom:24px;}
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
.dest-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;height:280px;border:1.5px solid var(--border);transition:transform .35s cubic-bezier(.2,1,.2,1),box-shadow .35s;display:flex;flex-direction:column;justify-content:flex-end;}
.dest-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 24px 50px rgba(0,0,0,.15);}
.dest-card-bg{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,1,.2,1);}
.dest-card:hover .dest-card-bg{transform:scale(1.07);}
.dest-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 55%,transparent 100%);transition:opacity .3s;}
.dest-card:hover .dest-card-overlay{opacity:.85;}
.dest-card-content{position:relative;z-index:2;padding:20px 18px 18px;}
.dest-card-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);transition:transform .3s cubic-bezier(.2,1.4,.2,1);}
.dest-card:hover .dest-card-icon{transform:scale(1.15) rotate(-6deg);}
.dest-card-title{font-family:var(--font-display);font-size:28px;letter-spacing:.03em;color:#fff;line-height:1;margin-bottom:5px;}
.dest-card-sub{font-size:12px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:12px;}
.dest-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:20px;transition:background .2s,transform .2s;}
.dest-card:hover .dest-card-cta{background:rgba(255,255,255,.28);transform:translateX(4px);}
.dest-card.matches .dest-card-bg{background:linear-gradient(135deg,#1a2a0a,#3B6D11,#639922);}
.dest-card.matches .dest-card-icon{background:rgba(163,220,74,.25);}
.dest-card.stadiums .dest-card-bg{background:linear-gradient(135deg,#0a1020,#185FA5,#378ADD);}
.dest-card.stadiums .dest-card-icon{background:rgba(56,130,220,.25);}
.dest-card.tournaments .dest-card-bg{background:linear-gradient(135deg,#1a0800,#BA7517,#EF9F27);}
.dest-card.tournaments .dest-card-icon{background:rgba(239,159,39,.25);}
.dest-card.coaches .dest-card-bg{background:linear-gradient(135deg,#120820,#534AB7,#7F77DD);}
.dest-card.coaches .dest-card-icon{background:rgba(127,119,221,.25);}
.dest-card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-120%) skewX(-16deg);pointer-events:none;z-index:3;}
.dest-card:hover::after{animation:shimmerSlide .7s ease .1s both;}

/* ─── TRANSPORT / ROAD ───────────────────────────────── */
.transport-section{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;margin-bottom:28px;position:relative;overflow:hidden;}
.transport-section::before{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--blue),var(--amber),var(--purple));}
.transport-road{position:relative;height:90px;background:#E8EDE0;border-radius:10px;overflow:hidden;margin-top:16px;border:1px solid rgba(59,109,17,.15);}
.road-markings{position:absolute;top:50%;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.7) 30px,transparent 30px,transparent 60px);transform:translateY(-50%);}
.road-surface{position:absolute;inset:0;background:linear-gradient(180deg,#d0d9c5 0%,#b8c4a8 50%,#c8d4b8 100%);}
.vehicle{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .2s;animation-timing-function:linear;animation-iteration-count:infinite;}
.vehicle:hover{transform:translateY(-4px) scale(1.1);}
.vehicle-icon{font-size:32px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));}
.vehicle-label{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.4);}
.vehicle.car1{animation:driveRight 14s linear infinite;top:12px;}
.vehicle.car2{animation:driveRight 20s linear infinite;top:12px;animation-delay:-7s;}
.vehicle.bike1{animation:driveRight 10s linear infinite;top:32px;animation-delay:-3s;}
.vehicle.bicycle1{animation:driveRight 22s linear infinite;top:36px;animation-delay:-11s;}
.vehicle.car3{animation:driveRight 17s linear infinite;top:14px;animation-delay:-14s;}
.vehicle-label.car-lbl{background:rgba(59,109,17,.85);color:#fff;}
.vehicle-label.bike-lbl{background:rgba(186,117,23,.85);color:#fff;}
.vehicle-label.bicycle-lbl{background:rgba(83,74,183,.85);color:#fff;}

/* ─── ROAD SIGNS (vehicle-shaped) ───────────────────── */
.road-signs{display:flex;justify-content:space-around;align-items:center;height:100%;position:absolute;inset:0;pointer-events:none;}
.road-sign{display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:all;cursor:pointer;transition:transform .25s cubic-bezier(.2,1.4,.2,1),filter .2s;z-index:5;}
.road-sign:hover{transform:scale(1.18) translateY(-4px);filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));}
.road-sign-post{width:3px;height:18px;border-radius:2px;}
.road-sign-vehicle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 10px 5px;border:2px solid rgba(255,255,255,.35);border-radius:8px;min-width:54px;box-shadow:0 3px 12px rgba(0,0,0,.22);}
.road-sign-vehicle.shape-car::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:60%;height:10px;border-radius:5px 5px 0 0;border:2px solid rgba(255,255,255,.3);border-bottom:none;}
.sign-wheels{display:flex;justify-content:space-around;width:100%;margin-top:2px;}
.sign-wheel{width:9px;height:9px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);}
.sign-wheel.sm{width:7px;height:7px;}
.road-sign-vehicle i{font-size:18px;}
.road-sign-vehicle .sign-lbl{font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);line-height:1;}
.sign-matches .road-sign-vehicle{background:#3B6D11;}
.sign-matches .road-sign-vehicle::before{background:#2A5008;}
.sign-matches .road-sign-post{background:#27500A;}
.sign-tournaments .road-sign-vehicle{background:#BA7517;}
.sign-tournaments .road-sign-vehicle::before{background:#9B6110;}
.sign-tournaments .road-sign-post{background:#9B6110;}
.sign-coaches .road-sign-vehicle{background:#534AB7;}
.sign-coaches .road-sign-vehicle::before{background:#3C3489;}
.sign-coaches .road-sign-post{background:#3C3489;}
.road-sign:hover .road-sign-vehicle::after{content:"";position:absolute;inset:-4px;border-radius:11px;border:2px solid rgba(255,255,255,.4);animation:signPulse .6s ease;}

/* ─── TRANSITION OVERLAY ─────────────────────────────── */
.dest-transition{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(5,10,5,.8);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .22s ease;}
.dest-transition.show{opacity:1;pointer-events:all;}
.dest-scene{width:min(440px,90vw);min-height:260px;border-radius:28px;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transform:scale(.9) translateY(20px);transition:transform .35s cubic-bezier(.2,1,.2,1);padding:32px;}
.dest-transition.show .dest-scene{transform:scale(1) translateY(0);}
.dest-scene-particles{position:absolute;inset:0;pointer-events:none;}
.particle{position:absolute;border-radius:50%;animation:particleFloat 2s ease-in-out infinite;}
.dest-scene-icon{width:100px;height:100px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:52px;position:relative;z-index:1;animation:iconBounce .6s cubic-bezier(.2,1.5,.2,1) .1s both;}
.dest-scene-title{font-family:var(--font-display);font-size:32px;letter-spacing:.03em;color:#fff;position:relative;z-index:1;text-align:center;animation:textSlideUp .4s ease .2s both;}
.dest-scene-sub{font-size:14px;color:rgba(255,255,255,.65);position:relative;z-index:1;text-align:center;animation:textSlideUp .4s ease .3s both;}
.dest-scene-bar{width:180px;height:4px;background:rgba(255,255,255,.15);border-radius:2px;position:relative;z-index:1;overflow:hidden;animation:textSlideUp .4s ease .35s both;}
.dest-scene-progress{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;transition:width 0.9s ease;}

/* ─── DEST INNER PAGES ───────────────────────────────── */
.dest-page{display:none;min-height:60vh;}
.dest-page.active{display:block;animation:pageReveal .5s cubic-bezier(.2,1,.2,1) both;}
.page-hero-banner{padding:40px 24px;position:relative;overflow:hidden;}
.page-hero-banner::before{content:"";position:absolute;inset:0;background:inherit;filter:brightness(.85);}
.page-hero-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;}
.page-hero-eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-bottom:8px;color:#fff;}
.page-hero-title{font-family:var(--font-display);font-size:clamp(36px,5vw,64px);letter-spacing:.02em;color:#fff;line-height:1;margin-bottom:10px;}
.page-hero-sub{font-size:15px;color:rgba(255,255,255,.8);max-width:500px;line-height:1.6;margin-bottom:20px;}
.page-hero-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:8px;background:#fff;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:transform .2s;}
.page-hero-btn:hover{transform:translateY(-2px);}
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#fff;opacity:.8;cursor:pointer;margin-bottom:16px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:20px;transition:opacity .2s;}
.back-btn:hover{opacity:1;}
.page-content{max-width:1100px;margin:0 auto;padding:28px 24px;}
.match-hero{background:linear-gradient(135deg,#1a2a0a,#3B6D11,#639922);}
.stadium-hero{background:linear-gradient(135deg,#0a1020,#185FA5,#378ADD);}
.tournament-hero{background:linear-gradient(135deg,#1a0800,#BA7517,#EF9F27);}
.coaches-hero{background:linear-gradient(135deg,#120820,#534AB7,#7F77DD);}

/* ─── SIDEBAR WIDGETS ────────────────────────────────── */
.sidebar-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;}
.sw-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.sw-title i{font-size:16px;color:var(--green);}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.notif-text{font-size:12px;line-height:1.5;}
.notif-time{font-size:11px;color:var(--text3);margin-top:2px;}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-size:13px;font-weight:700;width:20px;color:var(--text3);}
.lb-rank.top{color:var(--amber);}
.lb-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.lb-name{flex:1;font-size:13px;font-weight:500;}
.lb-pts{font-size:13px;font-weight:700;color:var(--green);}

/* ─── MAP ────────────────────────────────────────────── */
.map-section{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px;}
.map-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.map-placeholder{height:200px;background:#E8EDE0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;}
.map-placeholder i{font-size:40px;color:#97C459;}
.map-placeholder p{font-size:14px;color:#3B6D11;font-weight:500;}
.map-pins{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 16px;gap:8px;}
.map-pin{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;padding:5px;border-radius:6px;}
.map-pin:hover{background:var(--gray);}
.map-pin-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:pinPulse 1.6s ease infinite;}

/* ─── STATS BAR & HOW IT WORKS ───────────────────────── */
.home-bottom-motion{max-width:1100px;margin:4px auto 34px;padding:0 24px;}
.stats-bar{background:var(--green);padding:20px 24px;display:grid;grid-template-columns:repeat(5,1fr);text-align:center;border-radius:16px;overflow:hidden;margin:0 0 24px;}
.stat-item{padding:0 12px;border-right:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden;}
.stat-item:last-child{border-right:none;}
.stat-n{font-family:var(--font-display);font-size:30px;color:#fff;letter-spacing:.03em;display:inline-block;}
.stat-l{font-size:11px;color:rgba(255,255,255,.65);}
.how-section{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;margin:0;}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px;}
.how-step{text-align:center;}
.how-step-num{width:40px;height:40px;border-radius:50%;background:var(--green-lt);color:var(--green-dk);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.how-step-icon{font-size:26px;color:var(--green);margin-bottom:8px;}
.how-step-title{font-size:13px;font-weight:700;margin-bottom:4px;}
.how-step-desc{font-size:12px;color:var(--text3);line-height:1.6;}

/* ─── CTA BANNER ─────────────────────────────────────── */
.cta-banner{background:var(--green);border-radius:var(--radius-lg);padding:28px 24px;margin-bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.cta-text-h{font-family:var(--font-display);font-size:24px;letter-spacing:.02em;color:#fff;margin-bottom:6px;}
.cta-text-s{font-size:14px;color:rgba(255,255,255,.75);}
.cta-btns{display:flex;gap:10px;}
.cta-btn-white{padding:11px 24px;border-radius:8px;background:#fff;color:var(--green-dk);font-size:14px;font-weight:700;border:none;cursor:pointer;white-space:nowrap;font-family:var(--font-body);}
.cta-btn-outline{padding:11px 24px;border-radius:8px;background:transparent;color:#fff;font-size:14px;font-weight:600;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;white-space:nowrap;font-family:var(--font-body);}

/* ─── BOOKING WIDGET ─────────────────────────────────── */
.booking-widget{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:sticky;top:74px;}
.bw-title{font-size:16px;font-weight:700;margin-bottom:4px;}
.bw-sub{font-size:12px;color:var(--text3);margin-bottom:16px;}
.bw-field{margin-bottom:12px;}
.bw-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;display:block;}
.bw-input{width:100%;padding:9px 12px;border-radius:8px;border:1.5px solid var(--border);font-size:14px;color:var(--text);font-family:var(--font-body);}
.bw-input:focus{outline:none;border-color:var(--green-mid);}
.bw-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bw-time-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.time-slot{padding:7px;border-radius:8px;border:1.5px solid var(--border);text-align:center;font-size:12px;font-weight:500;cursor:pointer;transition:transform .18s;position:relative;overflow:hidden;}
.time-slot:not(.full):hover{transform:translateY(-2px);}
.time-slot.on{border-color:var(--green);background:var(--green-lt);color:var(--green-dk);}
.time-slot.full{background:var(--gray);color:var(--text3);cursor:not-allowed;text-decoration:line-through;}
.bw-summary{background:var(--gray);border-radius:8px;padding:12px;margin:14px 0;}
.bw-sum-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
.bw-sum-row:last-child{font-weight:700;font-size:15px;margin-bottom:0;padding-top:8px;border-top:1px solid var(--border);}
.bw-book-btn{width:100%;padding:13px;border-radius:10px;background:var(--green);color:#fff;font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:var(--font-body);}
.bw-book-btn:hover{background:var(--green-dk);}
.bw-payment-icons{display:flex;gap:6px;justify-content:center;margin-top:10px;}
.pay-icon{padding:4px 10px;border-radius:6px;border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--text3);}

/* ─── STADIUM / MATCH / TOURNEY / COACH CARDS ────────── */
.stadium-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.stadium-book-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;}
.stadium-book-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12);}
.stadium-img{height:160px;position:relative;display:flex;align-items:center;justify-content:center;font-size:60px;overflow:hidden;}
.stadium-img img{width:100%;height:100%;object-fit:cover;}
.stadium-info{padding:14px;}
.stadium-name{font-size:15px;font-weight:700;margin-bottom:4px;}
.stadium-meta{font-size:12px;color:var(--text3);display:flex;gap:12px;margin-bottom:8px;}
.stadium-price-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.stadium-price{font-size:16px;font-weight:700;color:var(--blue);}
.book-now-btn{padding:8px 18px;border-radius:8px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-body);}
.book-now-btn:hover{background:#0C447C;}
.match-register-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;}
.match-list-full{display:flex;flex-direction:column;gap:12px;}
.match-card-reg{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;cursor:pointer;transition:border-color .2s,transform .2s;}
.match-card-reg:hover{border-color:var(--green-mid);transform:translateY(-2px);}
.match-card-reg.selected{border-color:var(--green);background:var(--green-lt);}
.match-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:8px;}
.match-title-lg{font-size:16px;font-weight:600;margin-bottom:6px;}
.match-details-row{display:flex;gap:16px;font-size:13px;color:var(--text2);flex-wrap:wrap;}
.match-spots{font-size:12px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:8px;}
.spots-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.spots-fill{height:100%;background:var(--green-mid);border-radius:2px;}
.register-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:sticky;top:74px;}
.reg-panel-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.reg-panel-sub{font-size:12px;color:var(--text3);margin-bottom:16px;}
.reg-field{margin-bottom:12px;}
.reg-label{font-size:12px;font-weight:600;color:var(--text2);display:block;margin-bottom:5px;}
.reg-input{width:100%;padding:9px 12px;border-radius:8px;border:1.5px solid var(--border);font-size:14px;font-family:var(--font-body);}
.reg-input:focus{outline:none;border-color:var(--green-mid);}
.reg-submit{width:100%;padding:13px;border-radius:10px;background:var(--green);color:#fff;font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:var(--font-body);}
.reg-submit:hover{background:var(--green-dk);}
.tournament-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.tourney-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:border-color .2s,transform .2s;}
.tourney-card:hover{border-color:var(--amber);transform:translateY(-3px);}
.tourney-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:12px;}
.tourney-name{font-size:17px;font-weight:700;margin-bottom:6px;}
.tourney-meta{font-size:13px;color:var(--text2);display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.tourney-prizes{display:flex;gap:12px;padding:10px;background:var(--amber-lt);border-radius:8px;margin-bottom:12px;}
.prize-item{text-align:center;flex:1;}
.prize-n{font-size:14px;font-weight:700;color:var(--amber);}
.prize-l{font-size:10px;color:var(--text3);}
.tourney-btn{width:100%;padding:10px;border-radius:8px;background:var(--amber);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-body);}
.tourney-btn:hover{background:#9B6110;}
.coaches-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.coach-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;text-align:center;cursor:pointer;transition:border-color .2s,transform .2s;}
.coach-card:hover{border-color:var(--purple);transform:translateY(-3px);}
.coach-avatar{width:70px;height:70px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;border:3px solid transparent;}
.coach-name{font-size:15px;font-weight:700;margin-bottom:3px;}
.coach-sport{font-size:12px;color:var(--text3);margin-bottom:8px;}
.coach-stats{display:flex;justify-content:center;gap:16px;margin-bottom:12px;}
.coach-stat{text-align:center;}
.coach-stat-n{font-size:16px;font-weight:700;color:var(--purple);}
.coach-stat-l{font-size:10px;color:var(--text3);}
.coach-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
.coach-tag{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--purple-lt);color:var(--purple);font-weight:500;}
.coach-view-btn{width:100%;padding:9px;border-radius:8px;border:1.5px solid var(--purple);background:transparent;color:var(--purple);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);}
.coach-view-btn:hover{background:var(--purple-lt);}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer{background:var(--text);padding:40px 24px 20px;color:rgba(255,255,255,.65);}
.footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
.footer-logo{font-family:var(--font-display);font-size:26px;letter-spacing:.03em;color:#fff;margin-bottom:10px;}
.footer-desc{font-size:13px;line-height:1.7;margin-bottom:14px;}
.footer-social{display:flex;gap:8px;}
.footer-social-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;}
.footer-col-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;}
.footer-link{font-size:13px;margin-bottom:8px;cursor:pointer;}
.footer-link:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:12px;max-width:1100px;margin:0 auto;}
.footer-lang{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:8px;overflow:hidden;}
.footer-lang-btn{padding:5px 12px;font-size:12px;cursor:pointer;background:transparent;color:rgba(255,255,255,.65);border:none;font-family:var(--font-body);}
.footer-lang-btn.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600;}

/* ─── KEYFRAMES ──────────────────────────────────────── */
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2);box-shadow:0 0 0 6px rgba(99,153,34,.16)}}
@keyframes tickerSlide{0%{transform:translateX(0)}100%{transform:translateX(-38%)}}
@keyframes heroFieldDrift{to{background-position:46px 46px;}}
@keyframes shimmerSlide{to{transform:translateX(120%) skewX(-16deg);}}
@keyframes signPulse{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.25)}}
@keyframes pageReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes iconBounce{0%{transform:scale(.3) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes textSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes particleFloat{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-20px) scale(1.2);opacity:1}}
@keyframes driveRight{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes pinPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,153,34,.28)}50%{box-shadow:0 0 0 7px rgba(99,153,34,0)}}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .dest-grid{grid-template-columns:repeat(2,1fr);}
  .match-register-grid,.tournament-grid,.stadium-grid{grid-template-columns:1fr;}
  .coaches-grid{grid-template-columns:repeat(2,1fr);}
  .how-steps{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats-bar{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:600px){
  .dest-grid{grid-template-columns:1fr 1fr;}
  .dest-card{height:200px;}
  .coaches-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.vehicle,.ticker-items,.nav-logo-dot{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════
   AUTH MODALS — FieHub Login & Registration
═══════════════════════════════════════════════════════ */

/* Overlay */
.fh-modal-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,10,.75);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
  padding:16px;
}
.fh-modal-overlay.open{opacity:1;visibility:visible;}

/* Modal box */
.fh-modal{
  background:#fff;
  border-radius:20px;
  padding:36px 32px 28px;
  width:100%;max-width:420px;
  position:relative;
  transform:translateY(24px) scale(.97);
  transition:transform .32s cubic-bezier(.2,1,.2,1);
  box-shadow:0 32px 80px rgba(0,0,0,.22);
  max-height:90vh;overflow-y:auto;
}
.fh-modal-wide{max-width:580px;}
.fh-modal-overlay.open .fh-modal{transform:translateY(0) scale(1);}

/* Close button */
.fh-modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);background:var(--gray);
  font-size:18px;line-height:1;cursor:pointer;color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.fh-modal-close:hover{background:var(--border);}

/* Modal logo */
.fh-modal-logo{
  font-family:var(--font-display);font-size:22px;letter-spacing:.05em;
  color:var(--green);display:flex;align-items:center;gap:7px;
  margin-bottom:20px;
}
.fh-modal-logo-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green-mid);
}

/* Titles */
.fh-modal-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;}
.fh-modal-sub{font-size:14px;color:var(--text3);margin-bottom:22px;}

/* Alert box */
.fh-alert{
  border-radius:8px;padding:10px 14px;font-size:13px;
  margin-bottom:14px;display:none;
  animation:fadeIn .2s ease;
}
.fh-alert.error{background:#FCEBEB;color:#A32D2D;border:1px solid #f7c1c1;}
.fh-alert.success{background:#EAF3DE;color:#27500A;border:1px solid #c8e6a0;}
.fh-alert.show{display:block;}

/* Form grid (registration 2-col) */
.fh-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fh-col-2{grid-column:span 2;}

/* Field */
.fh-field{display:flex;flex-direction:column;gap:5px;}
.fh-label{font-size:12px;font-weight:600;color:var(--text2);}
.fh-required{color:#A32D2D;}

/* Input wrap */
.fh-input-wrap{position:relative;display:flex;align-items:center;}
.fh-input-icon{
  position:absolute;left:12px;font-size:16px;color:var(--text3);
  pointer-events:none;
}
.fh-input{
  width:100%;padding:10px 12px 10px 36px;
  border-radius:9px;border:1.5px solid var(--border);
  font-size:14px;font-family:var(--font-body);color:var(--text);
  background:var(--gray);
  transition:border-color .18s,box-shadow .18s,background .18s;
  -webkit-appearance:none;appearance:none;
}
.fh-input:focus{
  outline:none;border-color:var(--green-mid);
  background:#fff;
  box-shadow:0 0 0 3px rgba(99,153,34,.12);
}
.fh-select{padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}

/* Toggle password button */
.fh-toggle-pw{
  position:absolute;right:10px;background:none;border:none;
  cursor:pointer;color:var(--text3);font-size:16px;padding:4px;
}
.fh-toggle-pw:hover{color:var(--green);}

/* Remember + forgot row */
.fh-field-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px;}
.fh-check-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text2);cursor:pointer;}
.fh-check-label input{accent-color:var(--green);width:14px;height:14px;}
.fh-link{font-size:13px;color:var(--green);font-weight:600;text-decoration:none;}
.fh-link:hover{text-decoration:underline;}

/* Submit button */
.fh-submit{
  width:100%;padding:13px;border-radius:10px;
  background:var(--green);color:#fff;
  font-size:15px;font-weight:700;border:none;cursor:pointer;
  font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s,transform .18s,box-shadow .18s;
  margin-top:18px;
  box-shadow:0 8px 20px rgba(59,109,17,.25);
}
.fh-submit:hover{background:var(--green-dk);transform:translateY(-1px);box-shadow:0 12px 28px rgba(59,109,17,.3);}
.fh-submit:active{transform:translateY(0);}
.fh-submit:disabled{background:#aaa;cursor:not-allowed;box-shadow:none;}

/* Spinner */
@keyframes spin{to{transform:rotate(360deg)}}
.fh-spin{display:inline-block;animation:spin .7s linear infinite;}

/* Switch row */
.fh-switch{text-align:center;font-size:13px;color:var(--text3);margin-top:16px;}
.fh-switch-btn{background:none;border:none;color:var(--green);font-weight:700;cursor:pointer;font-size:13px;font-family:var(--font-body);}
.fh-switch-btn:hover{text-decoration:underline;}

/* Password strength */
.fh-pw-strength{margin-top:8px;display:flex;align-items:center;gap:10px;}
.fh-pw-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
.fh-pw-fill{height:100%;border-radius:2px;transition:width .3s,background .3s;}
.fh-pw-label{font-size:11px;font-weight:600;min-width:48px;}

/* ── USER AVATAR MENU (logged in state) ──────────────── */
.fh-user-menu{position:relative;}
.fh-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--green);color:#fff;
  font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  border:2px solid var(--green-mid);
  transition:transform .2s;
}
.fh-avatar:hover{transform:scale(1.08);}
.fh-user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#fff;border:1px solid var(--border);
  border-radius:12px;min-width:200px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .2s ease;
  z-index:500;overflow:hidden;
}
.fh-user-menu.open .fh-user-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.fh-user-info{
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:var(--gray);
}
.fh-user-info strong{display:block;font-size:14px;font-weight:700;color:var(--text);}
.fh-user-info span{font-size:12px;color:var(--text3);}
.fh-drop-link{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;font-size:13px;font-weight:500;
  color:var(--text2);text-decoration:none;
  transition:background .15s,color .15s;
}
.fh-drop-link:hover{background:var(--green-lt);color:var(--green-dk);}
.fh-drop-link i{font-size:15px;color:var(--text3);}
.fh-drop-link:hover i{color:var(--green);}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:600px){
  .fh-modal{padding:28px 20px 22px;}
  .fh-form-grid{grid-template-columns:1fr;}
  .fh-col-2{grid-column:span 1;}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* ── BOPEA OVERRIDE FIXES ── */
.nav { background: var(--white) !important; overflow: visible !important; }
.nav-right { overflow: visible !important; }
.btn-sm { height: auto !important; display: inline-flex !important; padding: 7px 16px !important; }
.btn-outline { background: transparent !important; color: var(--green) !important; border: 1.5px solid var(--green) !important; }
.btn-solid { background: var(--green) !important; color: #fff !important; }
.fh-user-menu { overflow: visible !important; }
.fh-user-dropdown { overflow: hidden !important; z-index: 99999 !important; }
.fh-drop-link { display: flex !important; align-items: center !important; height: auto !important; padding: 11px 16px !important; color: var(--text2) !important; background: transparent !important; border-radius: 0 !important; font-size: 13px !important; }
.fh-drop-link i { display: inline-flex !important; font-size: 15px !important; height: auto !important; width: auto !important; }
body { overflow-x: hidden !important; overflow-y: auto !important; }
#fh-app { overflow: visible !important; }