/**
 * CafeTal777 layout & styling
 * Header, sidebar, main content, footer. Bet slip and place-bet flow unchanged.
 */

/* ---------- Variables (CafeTal777 green/gold) ---------- */
.cafetal777-layout {
  --gb-header-bg: #1a1a1a;
  --gb-header-border: rgba(255, 215, 0, 0.2);
  --gb-body-bg: #161616;
  --gb-sidebar-bg: #1e1e1e;
  --gb-card-bg: #252525;
  --gb-card-border: rgba(255, 255, 255, 0.06);
  --gb-text: #e5e5e5;
  --gb-text-muted: #a0a0a0;
  --gb-accent: #FFD700;
  --gb-primary: #006400;
  --gb-hover: rgba(255, 215, 0, 0.12);
  --gb-nav-h: 56px;
}

/* ---------- Header – full-width dark bar ---------- */
.cafetal777-layout .header-primary {
  background: var(--gb-header-bg) !important;
  padding: 0 !important;
  min-height: var(--gb-nav-h);
  border-bottom: 1px solid var(--gb-header-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cafetal777-layout .header-fluid-custom-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--gb-nav-h);
  flex-wrap: wrap;
}

.cafetal777-layout .logo {
  flex-shrink: 0;
  max-width: 160px;
}

.cafetal777-layout .logo-text-brand {
  font-size: 1.35rem;
  color: #fff !important;
}

.cafetal777-layout .logo-text-brand .logo-tal {
  color: var(--gb-accent) !important;
}

/* Main nav: Sports, Live, Casino, Promotions */
.cafetal777-layout .primary-menu-container {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.cafetal777-layout .primary-menu-container > ul:first-of-type {
  display: flex !important;
  gap: 4px;
  margin-right: 16px;
}

.cafetal777-layout .primary-menu-container .primary-menu a.text-white.sm-text {
  color: var(--gb-text) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.cafetal777-layout .primary-menu-container .primary-menu a.text-white.sm-text:hover {
  background: var(--gb-hover);
  color: var(--gb-accent) !important;
}

.cafetal777-layout .primary-menu-container .primary-menu a.text-white.sm-text.active {
  background: var(--gb-hover);
  color: var(--gb-accent) !important;
  font-weight: 600;
}

.cafetal777-layout .primary-menu-container .right-side-nav {
  margin-left: auto;
}

.cafetal777-layout .primary-menu-container .form-select.oddsType,
.cafetal777-layout .primary-menu-container .language-btn {
  font-size: 13px;
  color: var(--gb-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gb-card-border);
  border-radius: 6px;
}

/* Desktop bet slip toggle – top-right icon */
.cafetal777-layout .bet-slip-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  color: var(--gb-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.cafetal777-layout .bet-slip-button:hover {
  background: rgba(255, 215, 0, 0.25);
  border-color: var(--gb-accent);
  color: #fff;
}

.cafetal777-layout .bet-slip-button .bet-count-badge {
  background: var(--gb-accent);
  color: #1a1a1a;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cafetal777-layout .bet-slip-button .bet-count-badge:empty {
  display: none;
}

/* ---------- Main layout: sidebar + body (bet slip stays right, unchanged) ---------- */
.cafetal777-layout .home-page {
  background: var(--gb-body-bg) !important;
  min-height: calc(100vh - var(--gb-nav-h));
}

.cafetal777-layout .sports-category {
  background: var(--gb-sidebar-bg) !important;
  border-right: 1px solid var(--gb-card-border) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

.cafetal777-layout .sports-body {
  background: var(--gb-body-bg) !important;
  padding: 16px 20px 24px !important;
}

/* ---------- Leagues bar – show ALL leagues (wrap on desktop, scroll on small) ---------- */
.cafetal777-layout .sub-category-drawer {
  background: var(--gb-card-bg) !important;
  border: 1px solid var(--gb-card-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  overflow: visible !important; /* allow all wrapped leagues to show */
}

.cafetal777-layout .sub-category-drawer__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cafetal777-layout .sub-category-drawer__link {
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: var(--gb-text-muted);
  font-size: 13px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cafetal777-layout .sub-category-drawer__link:hover,
.cafetal777-layout .sub-category-drawer__link:hover .sub-category-drawer__text {
  background: var(--gb-hover);
  color: var(--gb-accent);
}

.cafetal777-layout .sub-category-drawer__link.active {
  background: rgba(0, 100, 0, 0.35);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--gb-accent);
}

.cafetal777-layout .sub-category-drawer__text {
  color: inherit;
}

/* ---------- Game cards – compact row style ---------- */
.cafetal777-layout .sports-card {
  background: var(--gb-card-bg) !important;
  border: 1px solid var(--gb-card-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.cafetal777-layout .sports-card-wrapper {
  background: transparent !important;
}

.cafetal777-layout .sports-card-left {
  background: rgba(0, 0, 0, 0.15) !important;
  border-right: 1px solid var(--gb-card-border);
}

.cafetal777-layout .sports-card-heading {
  background: rgba(0, 0, 0, 0.2) !important;
  color: var(--gb-text-muted);
  font-size: 12px;
}

.cafetal777-layout .sports-card__info-text,
.cafetal777-layout .sports-card__stream {
  color: var(--gb-text-muted);
}

.cafetal777-layout .sports-card__stream.live,
.cafetal777-layout .sports-card__stream .text--danger {
  color: #ff4444 !important;
}

.cafetal777-layout .sports-card-body {
  color: var(--gb-text);
}

.cafetal777-layout .sports-card-inner {
  border-right: 1px solid var(--gb-card-border);
}

.cafetal777-layout .sports-card-inner .sports-card-heading {
  background: rgba(0, 0, 0, 0.15) !important;
}

.cafetal777-layout .team-select-title {
  color: var(--gb-text-muted);
  font-size: 12px;
}

.cafetal777-layout .option-odd-list__item .oddBtn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--gb-card-border);
  color: var(--gb-text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cafetal777-layout .option-odd-list__item .oddBtn:hover:not(.locked) {
  background: var(--gb-hover) !important;
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--gb-accent);
}

.cafetal777-layout .option-odd-list__item .oddBtn.active {
  background: var(--gb-accent) !important;
  border-color: var(--gb-accent);
  color: #1a1a1a !important;
}

.cafetal777-layout .option-odd-list__item .point {
  color: var(--gb-text-muted);
  font-size: 12px;
}

.cafetal777-layout .sports-card-left-bottom a {
  color: var(--gb-accent);
  font-size: 12px;
}

.cafetal777-layout .sports-card-left-bottom a:hover {
  text-decoration: underline;
}

/* Banner/slider – compact */
.cafetal777-layout .banner-slider,
.cafetal777-layout .hero-slider {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--gb-card-border);
}

.cafetal777-layout .banner-placeholder {
  background: linear-gradient(135deg, var(--gb-primary) 0%, var(--gb-sidebar-bg) 100%);
  color: var(--gb-text);
}

/* ---------- Footer – dark multi-column ---------- */
.cafetal777-layout .footer--light,
.cafetal777-layout .footer-ct777 {
  background: var(--gb-header-bg) !important;
  border-top: 1px solid var(--gb-card-border);
  padding: 32px 16px 24px;
}

.cafetal777-layout .footer-ct777__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .cafetal777-layout .footer-ct777__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .cafetal777-layout .footer-ct777__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.cafetal777-layout .footer-ct777__title {
  color: var(--gb-accent) !important;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cafetal777-layout .footer-ct777__about,
.cafetal777-layout .footer-ct777__link {
  color: var(--gb-text-muted) !important;
  font-size: 13px;
}

.cafetal777-layout .footer-ct777__link:hover {
  color: var(--gb-accent) !important;
}

.cafetal777-layout .footer-ct777__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cafetal777-layout .footer-ct777__list li {
  margin-bottom: 8px;
}

.cafetal777-layout .footer-ct777__social-icon {
  color: var(--gb-text-muted);
}

.cafetal777-layout .footer-ct777__social-icon:hover {
  color: var(--gb-accent);
}

/* Footer bottom bar */
.cafetal777-layout .footer-bottom,
.cafetal777-layout .footer-bottom-ct777 {
  background: #141414 !important;
  border-top: 1px solid var(--gb-card-border);
  padding: 14px 0;
}

.cafetal777-layout .footer-bottom-ct777__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.cafetal777-layout .footer-bottom-ct777__copy,
.cafetal777-layout .footer-bottom-ct777__brand {
  color: var(--gb-text-muted) !important;
  font-size: 12px;
}

.cafetal777-layout .footer-bottom-ct777__brand:hover {
  color: var(--gb-accent) !important;
}

.cafetal777-layout .footer-bottom-ct777__tip {
  color: var(--gb-text-muted);
  font-size: 12px;
}

/* ---------- Empty state ---------- */
.cafetal777-layout .empty-message p {
  color: var(--gb-text-muted);
}

/* ---------- Mobile nav ---------- */
.cafetal777-layout .app-nav {
  background: var(--gb-header-bg) !important;
  border-top: 1px solid var(--gb-card-border);
}

.cafetal777-layout .app-nav__menu-link,
.cafetal777-layout .app-nav__menu-text {
  color: var(--gb-text-muted) !important;
}

.cafetal777-layout .app-nav__menu-link.active .app-nav__menu-icon,
.cafetal777-layout .app-nav__menu-link.active .app-nav__menu-text {
  color: var(--gb-accent) !important;
}

.cafetal777-layout .app-nav__menu-link-important {
  background: var(--gb-primary) !important;
  border-color: var(--gb-accent) !important;
  color: var(--gb-accent) !important;
}

.cafetal777-layout .app-nav__drawer {
  background: var(--gb-sidebar-bg) !important;
}

.cafetal777-layout .app-nav__drawer-link {
  color: var(--gb-text) !important;
}

/* ---------- Bet slip & place bet: NO structural changes ---------- */
/* Only ensure they sit correctly in the layout; all behavior and inner markup unchanged. */
.cafetal777-layout .betslip {
  /* Keep existing bet slip styles from theme; this file only adds layout */
}