/* ==========================================================================
   ZINGARA home page v3 - black / yellow landing layout.
   Loaded AFTER home-v2.css (keeps its app / FAQ / footer styles, re-colours the palette,
   and adds the new header, two-panel hero, category tiles, trending cards and promo row).
   Presentation only. Scoped to body.zh.
   ========================================================================== */
:root {
  --zh-gold: #ffb400;
  --zh-gold-hi: #ffc83d;
  --zh-gold-lo: #e69f00;
  --zh-line: rgba(255, 180, 0, .28);
  --zh-yellow: #ffb400;
  --zh-blue: #1d6fe0;
}
body.zh { background: #fff; }

/* ---------- Header: existing menu items, big emblem logo ---------- */
body.zh header.fixed-top { background: #0b0b0b !important; border-bottom: 0; box-shadow: none; }
body.zh header.fixed-top > .container { max-width: 1500px; padding-left: 20px; padding-right: 20px; }
body.zh header .navbar { min-height: 58px; }
body.zh header .navbar > a:has(img.logo) { display: block; }
body.zh header .logo { height: 44px; width: 44px; border: 2px solid var(--zh-yellow); background: #000; }
@media (min-width: 992px) {
  body.zh header .navbar > a:has(img.logo) { position: absolute; left: 24px; top: 6px; z-index: 70; }
  body.zh header .logo { width: 108px; height: 108px; border: 4px solid var(--zh-yellow); box-shadow: 0 8px 26px rgba(0, 0, 0, .55); }
  body.zh header .navbar { padding-left: 150px !important; }
}
.zh-city { margin-left: auto; }
body.zh header .navbar-nav .nav-link { font-size: .84rem; font-weight: 600; color: #fff !important; }
body.zh header .navbar-nav .nav-link:hover { color: var(--zh-yellow) !important; }
body.zh header .navbar-nav .nav-link .zx { color: #ff6a13; font-weight: 800; }
.zh-city { border: 0 !important; background: transparent; color: #fff !important; font-size: .84rem !important; font-weight: 600 !important; }
.zh-city i { color: var(--zh-yellow); }

/* ---------- Hero ---------- */
.zh3-hero { position: relative; background: #070707; color: #fff; padding: 74px 0 0; overflow: hidden; }
.zh3-grid { display: grid; grid-template-columns: 1.05fr .78fr 1.17fr; min-height: 372px; position: relative; }
.zh3-left { position: relative; padding: 38px 20px 34px 150px; display: flex; flex-direction: column; justify-content: center; z-index: 2; }
.zh3-left::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60px 60px at 18% 22%, rgba(255, 190, 70, .55), transparent 70%), radial-gradient(48px 48px at 40% 12%, rgba(255, 160, 60, .4), transparent 70%),
    radial-gradient(70px 70px at 75% 30%, rgba(255, 210, 120, .35), transparent 70%), radial-gradient(56px 56px at 62% 70%, rgba(255, 140, 40, .35), transparent 70%),
    radial-gradient(40px 40px at 10% 78%, rgba(255, 200, 90, .4), transparent 70%), linear-gradient(120deg, #0b0b0b, #1a1208 55%, #0b0b0b); }
.zh3-club { letter-spacing: .55em; font-size: .8rem; font-weight: 700; color: #f3efe2; }
.zh3-name { font-size: clamp(3rem, 6vw, 5.4rem); line-height: .95; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 8px; }
.zh3-tag { letter-spacing: .4em; font-size: .74rem; font-weight: 700; color: #f3efe2; }
.zh3-motto { margin: 16px 0 8px; font-size: clamp(1.7rem, 3.3vw, 2.7rem); font-weight: 800; color: var(--zh-yellow); letter-spacing: .01em; }
.zh3-motto i { font-style: normal; color: #fff; margin: 0 .35em; }
.zh3-lead { color: #e7e2d0; font-size: .92rem; line-height: 1.5; max-width: 470px; margin-bottom: 20px; }
.zh3-feats { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.zh3-feat { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid rgba(255, 255, 255, .2); }
.zh3-feat:last-child { border-right: 0; }
.zh3-feat i { color: var(--zh-yellow); font-size: 1.7rem; width: 34px; text-align: center; }
.zh3-feat span { font-size: .72rem; line-height: 1.25; font-weight: 600; color: #f3efe2; }
/* phone */
.zh3-mid { position: relative; display: flex; justify-content: center; align-items: flex-end; z-index: 3; }
.zh3-phone { width: 232px; height: 354px; margin-top: -4px; border-radius: 34px 34px 0 0; background: #0e0e0e; border: 6px solid #2a2a2a; border-bottom: 0; box-shadow: 0 0 0 1px #3a3a3a, 0 24px 60px rgba(0, 0, 0, .7); padding: 14px 12px 0; overflow: hidden; transform: translateY(14px); }
.zh3-phone .st { display: flex; justify-content: space-between; font-size: .5rem; color: #bdb8a6; padding: 0 4px 6px; }
.zh3-phone .app { text-align: center; color: var(--zh-yellow); font-weight: 800; font-size: .76rem; letter-spacing: .06em; font-style: italic; margin-bottom: 8px; }
.zh3-phone .s { background: #1b1b1b; border: 1px solid #2a2a2a; border-radius: 999px; padding: 6px 10px; font-size: .5rem; color: #8f8a79; margin-bottom: 8px; }
.zh3-phone .loc { font-size: .5rem; color: #ddd7c4; margin-bottom: 8px; } .zh3-phone .loc i { color: var(--zh-yellow); }
.zh3-phone .cg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
.zh3-phone .cg div { text-align: center; font-size: .42rem; color: #cfcab8; }
.zh3-phone .cg i { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 3px; border-radius: 9px; background: #fff; font-size: .75rem; }
.zh3-phone .xb { margin-top: 10px; border-radius: 10px; padding: 10px; background: linear-gradient(135deg, #3b0a6b, #b0127a 60%, #ff7a18); color: #fff; font-size: .5rem; }
.zh3-phone .xb b { display: block; font-size: .72rem; } .zh3-phone .xb u { display: inline-block; margin-top: 6px; background: var(--zh-yellow); color: #111; padding: 3px 8px; border-radius: 5px; font-weight: 800; text-decoration: none; }
/* Zingara X panel */
.zh3-right { position: relative; padding: 38px 28px 34px 36px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; z-index: 2; }
.zh3-right::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(240px 220px at 78% 28%, rgba(255, 90, 120, .55), transparent 70%), radial-gradient(260px 260px at 95% 10%, rgba(120, 90, 255, .6), transparent 70%),
    radial-gradient(220px 200px at 55% 0%, rgba(40, 140, 255, .55), transparent 70%), radial-gradient(260px 220px at 100% 90%, rgba(255, 120, 40, .45), transparent 70%),
    conic-gradient(from 200deg at 70% -10%, transparent 0 40deg, rgba(180, 120, 255, .35) 55deg, transparent 75deg 120deg, rgba(60, 160, 255, .3) 135deg, transparent 150deg),
    linear-gradient(120deg, #120a22, #34104d 50%, #0d0716); }
.zh3-xt { font-size: clamp(2.3rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.zh3-xt b { background: linear-gradient(180deg, #ffb13d, #ff4d12); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zh3-xs { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 800; margin: 4px 0 6px; letter-spacing: .01em; }
.zh3-xl { font-size: .9rem; color: #f3efe2; margin-bottom: 20px; } .zh3-xl i { font-style: normal; opacity: .55; margin: 0 .35em; }
.zh3-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--zh-yellow); color: #111 !important; font-weight: 800; font-size: .86rem; padding: 14px 26px; border-radius: 6px; text-decoration: none !important; border: 0; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 180, 0, .3); }
.zh3-btn:hover { background: var(--zh-gold-hi); }
.zh3-live { position: absolute; right: 26px; bottom: 26px; transform: rotate(-12deg); text-align: right; font-style: italic; font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.zh3-live::after { content: ""; display: block; height: 3px; margin-top: 6px; background: linear-gradient(90deg, transparent, var(--zh-yellow)); }
@media (max-width: 1199.98px) { .zh3-grid { grid-template-columns: 1fr 1fr; } .zh3-mid { display: none; } .zh3-left { padding-left: 24px; } }
@media (max-width: 991.98px) { .zh3-hero { padding-top: 64px; } .zh3-grid { grid-template-columns: 1fr; } .zh3-left { padding: 30px 20px 26px; } .zh3-right { padding: 30px 20px 90px; min-height: 280px; } .zh3-live { font-size: 1.15rem; } }

/* ---------- Explore by categories ---------- */
.zh3-cats { background: #fff; padding: 26px 0 18px; }
.zh3-wrap { max-width: 1500px; margin: 0 auto; padding: 0 28px; }
.zh3-chead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.zh3-chead h2 { margin: 0; font-size: 1.28rem; font-weight: 800; color: #111; white-space: nowrap; font-family: var(--zh-font) !important; }
.zh3-chead .zh-search { flex: 1; max-width: 520px; margin: 0 auto 0 8px; }
.zh3-chead .zh-search-inner { box-shadow: none; border-width: 1.5px; padding: 3px 6px 3px 14px; }
.zh3-chead .zh-search input#searchBox { height: 34px; font-size: .78rem; }
.zh3-chead .zh-search .zh-go { width: 34px; height: 34px; }
.zh3-chead .zh-city-label { font-size: .66rem; }
.zh3-viewall { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--zh-blue) !important; text-decoration: none !important; white-space: nowrap; }
.zh3-viewall:hover { text-decoration: underline !important; }
.zh3-tiles { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 12px; }
.zh3-tile { display: block; text-align: center; text-decoration: none !important; color: #1b1b1b; }
.zh3-tile .im { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #f3f1ea; border: 1px solid #ebe6d6; box-shadow: 0 6px 16px rgba(0, 0, 0, .06); transition: transform .15s, box-shadow .15s; }
.zh3-tile .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zh3-tile:hover .im { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(255, 180, 0, .25); border-color: var(--zh-yellow); }
.zh3-tile span.lb { display: block; margin-top: 7px; font-size: .68rem; font-weight: 600; line-height: 1.25; }
.zh3-tile .im.more { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 18%; background: #fff; }
.zh3-tile .im.more i { background: var(--zh-yellow); border-radius: 5px; opacity: .95; }
@media (max-width: 1199.98px) { .zh3-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .zh3-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .zh3-wrap { padding: 0 16px; } .zh3-chead .zh-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; } }

/* ---------- Trending near you ---------- */
.zh3-trend { background: #0b0b0b; padding: 20px 0 22px; color: #fff; }
.zh3-trend .zh3-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: center; }
.zh3-trend h2 { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #fff; font-family: var(--zh-font) !important; }
.zh3-trend h2::before { content: ""; width: 24px; height: 3px; background: var(--zh-yellow); }
.zh3-trend p { font-size: 1.15rem; line-height: 1.4; color: #e9e3cf; margin: 0 0 16px; }
.zh3-trend .zh3-btn { padding: 11px 20px; font-size: .78rem; }
.zh3-slider { position: relative; min-width: 0; }
.zh3-card { background: #fff; color: #111; border-radius: 6px; overflow: hidden; display: block; text-decoration: none !important; height: 100%; }
.zh3-card .ph { position: relative; display: block; aspect-ratio: 16 / 10; background: #222; overflow: hidden; }
.zh3-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.zh3-card:hover .ph img { transform: scale(1.05); }
.zh3-card .off { position: absolute; left: 0; top: 10px; background: #e5251b; color: #fff; font-size: .68rem; font-weight: 800; padding: 4px 10px; }
.zh3-card .bd { padding: 9px 12px 11px; }
.zh3-card h3 { margin: 0; font-size: .84rem; font-weight: 800; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh3-card .sub { font-size: .66rem; color: #6a6a6a; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh3-card .rt { font-size: .7rem; font-weight: 700; display: flex; align-items: center; gap: 4px; } .zh3-card .rt i { color: var(--zh-yellow); }
body.zh .zh3-slider .categories-next, body.zh .zh3-slider .categories-prev { background: rgba(0, 0, 0, .78) !important; border: 1px solid rgba(255, 180, 0, .5); width: 34px !important; height: 34px !important; color: var(--zh-yellow) !important; }
@media (max-width: 991.98px) { .zh3-trend .zh3-wrap { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Promo row ---------- */
.zh3-promos { background: #fff; padding: 12px 0 26px; }
.zh3-pgrid { display: grid; grid-template-columns: 1.1fr 1.05fr 1fr; gap: 14px; }
.zh3-pc { position: relative; border-radius: 12px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; background: #fff3d6; border: 1px solid #f6e3b3; overflow: hidden; min-height: 150px; }
.zh3-pc h3 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 800; color: #111; font-family: var(--zh-font) !important; }
.zh3-pc ul { margin: 0 0 10px; padding: 0; list-style: none; }
.zh3-pc li { font-size: .78rem; color: #1d1d1d; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.zh3-pc li i { color: #111; background: var(--zh-yellow); width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: .56rem; flex: 0 0 auto; }
.zh3-pc .zh3-btn { padding: 9px 16px; font-size: .74rem; }
.zh3-coin { width: 118px; height: 118px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 3.2rem; font-weight: 800; color: #8a5a00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc928 45%, #d18a00 80%); box-shadow: inset 0 -6px 12px rgba(120, 70, 0, .35), 0 12px 26px rgba(209, 138, 0, .35); border: 6px solid #f2b300; }
.zh3-pc.x { background: #fff8e8; padding-left: 0; }
.zh3-xart { width: 150px; align-self: stretch; flex: 0 0 auto; background: linear-gradient(160deg, #1b0a3a, #8a1bb0 55%, #ff5a2a); display: grid; place-items: center; color: #fff; font-size: 2.6rem; margin-right: 6px; }
.zh3-pc.x h3 b { color: #ff6a13; }
.zh3-pc.x .sub { font-size: .66rem; color: #4a4a4a; margin-bottom: 6px; }
.zh3-pc.x .chk { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 10px; } .zh3-pc.x .chk span { font-size: .64rem; font-weight: 600; display: flex; align-items: center; gap: 5px; } .zh3-pc.x .chk i { color: #111; background: var(--zh-yellow); border-radius: 50%; width: 13px; height: 13px; display: grid; place-items: center; font-size: .45rem; }
.zh3-store { width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center; font-size: 3.4rem; background: #111; color: var(--zh-yellow); border-radius: 18px; }
@media (max-width: 1100px) { .zh3-pgrid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .zh3-pc { flex-direction: column; align-items: flex-start; } .zh3-xart { width: 100%; height: 90px; align-self: auto; margin: 0 0 8px; } .zh3-pc.x { padding: 0 0 18px; } .zh3-pc.x > div:last-child { padding: 0 18px; } }

/* app section sits right after the promo row */
.zh-app { margin-top: 0; }

/* the admin-managed banner (ViewBag.RandomBannerImage) stays as a faint texture behind the hero text */
.zh3-left::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(90deg, rgba(8,8,8,.82) 0%, rgba(8,8,8,.45) 100%), var(--zh-hero-img); background-size: cover; background-position: center; }

/* header: city chip on the right (after the menu), softer banner texture */
body.zh header .navbar .zh-city { order: 20; margin-left: auto; }
@media (min-width: 992px) { body.zh header .navbar .zh-city { display: inline-flex; } body.zh header .navbar .offcanvas { order: 10; } }
.zh3-left::after { opacity: .06; }

/* menu starts right of the emblem logo in both guest and signed-in states (beats the v2 padding reset) */
@media (min-width: 992px) {
  body.zh header.fixed-top .navbar { padding-left: 152px !important; }
  body.zh header.fixed-top .navbar-nav { justify-content: flex-start !important; gap: 6px; }
  body.zh header.fixed-top .navbar-nav > li.nav-item.dropdown[style] { margin-left: 8px !important; }
}

/* the shared header supplies its own spacer */
.zh3-hero { padding-top: 0 !important; }

/* ---------- Hero media stage: rotating admin-managed banners + muted background video (js/zh-hero.js) ----------
   Replaces the 6%-opacity banner texture of .zh3-left::after only when media exists; the hero layout is unchanged. */
/* the media covers the whole hero (left text panel, phone and Zingara X panel sit on top of it) */
.zh3-hero.has-stage .zh3-left::before, .zh3-hero.has-stage .zh3-left::after, .zh3-hero.has-stage .zh3-right::before { display: none; }
.zh3-hero.has-stage .zh3-grid { z-index: 1; }
.zh3-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b0b0b; }
.zh3-si, .zh3-sv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.zh3-si { z-index: 1; background-size: cover; background-position: center; }
.zh3-sv { z-index: 2; object-fit: cover; }
.zh3-si.is-active, .zh3-sv.is-active { opacity: 1; }
.zh3-shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(8, 8, 8, .86) 0%, rgba(8, 8, 8, .55) 48%, rgba(8, 8, 8, .66) 100%); }
@media (prefers-reduced-motion: reduce) { .zh3-si, .zh3-sv { transition: none; } }

/* the home page sections above the footer are dark: no white gap */
body.zh .sf { margin-top: 0; }

/* ---------- Mobile hero fixes ---------- */
@media (max-width: 767.98px) {
  /* admin banners can contain baked-in text; keep them as a faint texture on phones */
  .zh3-shade { background: rgba(8, 8, 8, .9); }
  .zh3-left { padding: 24px 16px 20px; }
  .zh3-name { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .zh3-club, .zh3-tag { letter-spacing: .3em; font-size: .68rem; }
  .zh3-motto { font-size: clamp(1.3rem, 6.5vw, 1.8rem); }
  .zh3-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .zh3-feat { border-right: 0; padding-right: 0; }
  .zh3-right { padding: 24px 16px 84px; min-height: 0; }
  .zh3-xt { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .zh3-live { right: 16px; bottom: 18px; font-size: 1rem; }
  .zh3-cats { padding: 18px 0 12px; }
  .zh3-wrap { padding: 0 14px; }
  .zh3-chead { gap: 10px; }
  .zh3-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ---- Mobile bottom bar: Home icon centred at the bottom ---- */
@media (max-width: 767.98px) {
  body.zh .mobile-menu { left: 0; right: 0; display: flex; justify-content: center; }
  body.zh .mobile-menu ul { justify-content: center; align-items: center; }
  body.zh .mobile-menu ul li { width: auto; min-width: 80px; flex: 0 0 auto; text-align: center; margin: 0 auto; }
  body.zh .mobile-menu .menu-box { display: flex; flex-direction: column; align-items: center; justify-content: center; }
}