/*
Theme Name: Casino Network Theme
Theme URI: https://example.com/
Author: Your Company
Author URI: https://example.com/
Description: Multisite-ready casino theme with Customizer-driven branding. Designed to serve multiple casino sites from a single codebase.
Version: 1.8.8
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.0
Text Domain: casino-theme
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* === Base Typography === */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #121212;
  background-position: top center;
  color: #e0e0e0;
}

/* === Reusable Container === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile breakpoint */
@media (max-width: 575px) {
  .container {
    padding: 0 15px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* === Full-width Site Header (new) === */
.site-header{
  width: 100%;
  background-color: rgba(30, 30, 30, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.site-header .header-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
}
/* Logo block: supports custom logo or site title + flag */
.site-header .logo{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.site-header .site-title{
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header .site-logo img{
  max-height: 42px;
  width: auto;
  height: auto;
}
.flag-logo .flag-icon{
  width: 24px;
  height: auto;
  display: block;
  border-radius: 2px;
}
/* Main nav: button + list + auth buttons */
.main-nav{
  display: flex;
  align-items: center;
  gap: 24px;
}
.main-nav .menu{
  margin: 0;
}
/* Desktop auth buttons are visible by default (mobile overrides below) */
.main-nav .auth-buttons{
  display: flex;
  gap: 10px;
}

/* Paddings responsive for the inner container */
@media (max-width: 991px){
  .site-header .header-inner{ padding: 16px 30px; }
}
@media (max-width: 575px){
  .site-header .header-inner{ padding: 14px 15px; }
}

/* Mobile layout: stack menu + auth inside nav, controlled by .menu.menu-open */
@media screen and (max-width: 1024px){
  .main-nav{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .menu-toggle{
    display: block;
    margin-left: auto;
  }
  .main-nav .menu{
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    animation: slideDown 0.3s ease-out forwards;
    transform-origin: top;
  }
  .main-nav .menu.menu-open{
    display: flex;
  }
  .main-nav .auth-buttons{
    display: none;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  /* Show auth buttons when list is opened (JS toggles class on UL) */
  .main-nav .menu.menu-open + .auth-buttons{
    display: flex;
  }
}

/* Ensure auth buttons render inline on desktop */
@media screen and (min-width: 1025px){
  .menu-toggle{ display: none !important; }
  .main-nav .auth-buttons{ display: flex; }
}

/* Header menu dropdown */
.site-header .menu > .menu-item-has-children { position:relative; }
.site-header .menu > .menu-item-has-children::after { content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; }
.site-header .menu > .menu-item-has-children > .sub-menu { position:absolute; top:100%; left:0; min-width:220px; padding:8px; margin:0; list-style:none; background:rgba(20,20,20,0.95); border:1px solid rgba(255,255,255,0.08); border-radius:12px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 12px 30px rgba(0,0,0,0.45); z-index:999; opacity:0; transform:translateY(8px) scale(0.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.site-header .menu > .menu-item-has-children:hover > .sub-menu,
.site-header .menu > .menu-item-has-children:focus-within > .sub-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.site-header .menu > .menu-item-has-children > .sub-menu > li { margin:0; }
.site-header .menu > .menu-item-has-children > .sub-menu a { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; color:#fff; text-decoration:none; white-space:nowrap; font-weight:600; font-size:14px; line-height:1.2; transition:background .15s ease, transform .15s ease; }
.site-header .menu > .menu-item-has-children > .sub-menu a:hover,
.site-header .menu > .menu-item-has-children > .sub-menu a:focus { background:rgba(255,255,255,0.08); transform:translateX(2px); }
.site-header .menu > .menu-item-has-children:hover > a,
.site-header .menu > .menu-item-has-children:focus-within > a { color:#ffd166; }
.site-header .menu > .menu-item-has-children.dropdown-right > .sub-menu { left:auto; right:0; }
.site-header .menu > .menu-item-has-children > a::after { content:"\f107"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-left:6px; font-size:0.85em; display:inline-block; transition:transform .2s ease; vertical-align:middle; }
.site-header .menu > .menu-item-has-children:hover > a::after,
.site-header .menu > .menu-item-has-children:focus-within > a::after { transform:rotate(180deg); }

@media (max-width:1024px) {
.site-header .menu { overflow:visible; }
.site-header .menu > .menu-item-has-children { position:relative; }
.site-header .menu > .menu-item-has-children::after { display:none; }
.site-header .menu > .menu-item-has-children > a { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,0.06); }
.site-header .menu > .menu-item-has-children > .sub-menu { position:static; top:auto; left:auto; right:auto; width:100%; padding:6px 0; margin-top:6px; background:transparent; border:none; border-radius:10px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:auto; opacity:1; transform:none; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.site-header .menu > .menu-item-has-children:focus-within > .sub-menu,
.site-header .menu > .menu-item-has-children:hover > .sub-menu { max-height:600px; }
/* Also expand when JS adds .submenu-open on mobile (tap-to-open) */
.site-header .menu > .menu-item-has-children.submenu-open > .sub-menu { max-height:600px; }
.site-header .menu > .menu-item-has-children > .sub-menu > li > a { padding:12px 14px; border-radius:10px; background:rgba(0,0,0,0.35); margin:4px 0; }
.site-header .menu > .menu-item-has-children > a::after { margin-left:10px; font-size:0.9em; transform:rotate(0); }
.site-header .menu > .menu-item-has-children:focus-within > a::after,
.site-header .menu > .menu-item-has-children:hover > a::after { transform:rotate(180deg); }
/* Rotate caret when submenu-open is active */
.site-header .menu > .menu-item-has-children.submenu-open > a::after { transform:rotate(180deg); }
}


/* === Header === */
.header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* === Menu === */
.menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.menu li {
  display: inline;
}
.menu a {
  font-weight: bold;
  text-decoration: none;
  color: #e0e0e0;
  display: block;
  padding: 10px;
  border-radius: 5px;
  transition: background-color .15s ease;
}
.menu a:hover {
      background-color: #0000001f;
}

/* === Auth Buttons === */
.auth-buttons {
  display: flex;
  gap: 10px;
}
.header-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  position: relative;
  animation: fadeInCascade 0.7s ease forwards;
}

.header-button.login::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f084";
  margin-right: 8px;
  font-size: 14px;
}

.header-button.signup::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
  content: "\f234";
  margin-right: 8px;
  font-size: 14px;
}

.header-button:hover {
  background: linear-gradient(135deg, #ff5252, #ff6b6b);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 82, 82, 0.45);
}

.header-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(255, 82, 82, 0.25);
}


/* === Menu Toggle === */
.menu-toggle {
  display: none;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  position: relative;
  cursor: pointer;
}
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
  content: "";
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  transition: 0.3s ease all;
  left: 0;
}
.menu-toggle span {
  top: 9px;
}
.menu-toggle::before {
  top: 0;
}
.menu-toggle::after {
  bottom: 0;
}
.menu-toggle.open span {
  transform: scaleX(0);
}
.menu-toggle.open::before {
  transform: rotate(45deg);
  top: 9px;
}
.menu-toggle.open::after {
  transform: rotate(-45deg);
  bottom: 9px;
}

/* === Responsive Menu === */
@media screen and (max-width: 1024px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .menu.menu-open {
    display: flex;
  }

  .header {
    flex-direction: column;
    align-items: stretch;
  }

  .header-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .auth-buttons {
    justify-content: flex-end;
  }
  
  .auth-buttons-mobile {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
  }
  
  .auth-buttons-mobile.menu-open {
    display: flex;
  }
}

@media screen and (min-width: 1025px) {
  .menu-toggle {
    display: none !important;
  }
  
  .auth-buttons-mobile {
    display: none !important;
  }
}

/* === Main Content === */
.main-container {
  min-height: calc(100vh - 470px);
}

.main-container .page,
.main-container .post {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .04) 60%, #000a12 100%);
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    padding: 32px 48px 40px;
    border-radius: 14px;
    overflow: hidden;
}

.main-container .page::before,
.main-container .post::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px; /* grosimea borderului */
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,10,18,.6));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* === Utility Classes === */

/* Grid */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.col-12 { width: 100%; padding: 10px; }
.col-6 { width: 50%; padding: 10px; }
.col-4 { width: 33.3333%; padding: 10px; }
.col-3 { width: 25%; padding: 10px; }
@media (max-width: 768px) {
  .col-6, .col-4, .col-3 {
    width: 100%;
  }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.6em 1.2em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
  border: 0;
  cursor: pointer;
}
.btn-primary {
  background-color: #ff5252;
  color: #fff;
}
.btn-primary:hover {
  background-color: #e04848;
}

/* Spacing */
.p-0 { padding: 0 !important; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pt-20 { padding-top: 5rem; }
.pb-20 { padding-bottom: 5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }

/* Colors */
.bg-dark { background-color: #121212; color: #fff; }
.bg-light { background-color: #f9f9f9; color: #111; }
.text-dark { color: #111; }
.text-light { color: #f9f9f9; }

/* Borders and Shadows */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.border { border: 1px solid #ccc; }
.border-light { border: 1px solid #eee; }
.border-dark { border: 1px solid #333; }
.rounded { border-radius: 6px; }

/* Auth buttons under site navigation on mobile */
@media screen and (max-width: 1024px) {
  .header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    margin-top: 15px;
  }
  
  .primary-nav {
    order: 1;
  }
  
  .auth-buttons {
    order: 2;
    display: none;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  
  .header-right.menu-open-active .auth-buttons {
    display: flex;
  }
  
  .auth-buttons .header-button {
    flex: 1;
    text-align: center;
  }
  
  .main-container {
    padding-bottom: 20px; /* reset padding */
  }
}

/* Ensure header and main have background for visibility */
.header {
  background-color: #1e1e1e;
}

/* Remove fixed bottom auth buttons */
.auth-fixed-bottom {
  display: none !important;
}

@keyframes slideUpFadeIn {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.header {
  background-color: rgba(30, 30, 30, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


/* Global box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .site-title {
    flex: 1;
  }

  .menu-toggle {
    margin-left: auto;
  }
}

.menu-toggle.open span {
  transform: scaleX(0);
}
.menu-toggle.open::before {
  transform: rotate(45deg);
  top: 9px;
}
.menu-toggle.open::after {
  transform: rotate(-45deg);
  bottom: 9px;
}

@media screen and (max-width: 1024px) {
  .menu {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    animation: slideDown 0.3s ease-out forwards;
    transform-origin: top;
  }

  .menu.menu-open {
    display: flex;
  }

  @keyframes slideDown {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media screen and (max-width: 1024px) {
  .menu.menu-open a {
    opacity: 0;
    animation: fadeInCascade 0.4s ease forwards;
  }

  .menu.menu-open a:nth-child(1) { animation-delay: 0.05s; }
  .menu.menu-open a:nth-child(2) { animation-delay: 0.1s; }
  .menu.menu-open a:nth-child(3) { animation-delay: 0.15s; }
  .menu.menu-open a:nth-child(4) { animation-delay: 0.2s; }
  .menu.menu-open a:nth-child(5) { animation-delay: 0.25s; }

  @keyframes fadeInCascade {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* =========================================================
   TABLE STYLE
   ========================================================= */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255,255,255,.08);
  font-size: clamp(14px, 1.2vw, 15px);
  color: #f5f5f5;
}

table thead {
  background: linear-gradient(90deg, #0d0d0d, #2a002a);
  background-color: transparent !important;
  color: #fff;
}

table thead th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(34,34,34,.85);
  transition: background .25s ease;
}

table tbody tr:hover td {
  background: rgba(58,0,61,.9);
}

table tbody td:first-child {
  font-weight: 600;
  color: #ff6ec7;
}

table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* === HEADER POLISH OVERRIDES (refine alignment/spacing/visuals) === */
.site-header .header-inner{
  min-height: 64px;
  gap: 16px;
}
.site-header .logo{
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-header .site-logo img{
  max-height: 36px;
  height: auto;
  width: auto;
}
.site-header .flag-logo{
  align-self: center;
  margin-left: 8px;
}
.site-header .main-nav{
  gap: 18px;
}
.site-header .main-nav .menu{
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header .main-nav .menu li{
  display: block;
}
.site-header .main-nav .menu a{
  padding: 10px 12px;
  border-radius: 8px;
}

/* Lighter header buttons to match nav; reduce glow/shadow for clean look */
.site-header .auth-buttons .header-button{
  padding: 8px 14px;
  font-size: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
  transform: none;
}
.site-header .auth-buttons .header-button.signup {
  background:#ffb300;
}

.site-header .auth-buttons .header-button:hover{
  background: rgba(255,255,255,0.16);
  box-shadow: none;
  transform: translateY(0);
}

/* Mobile: spacing when menu opens */
@media screen and (max-width: 1024px){
  .site-header .main-nav .auth-buttons{
    margin-top: 4px;
  }
}

/* === MOBILE NAV STACK FIX — left align, full width, tighter spacing === */
@media (max-width: 1024px){
  /* Allow wrapping: nav drops under the logo */
  .site-header .header-inner{
    flex-wrap: wrap;
    align-items: center;
  }
  .site-header .logo{
    order: 1;
  }
  .site-header .main-nav{
    order: 2;
    width: 100%;
    align-items: stretch;
  }

  /* Menu list: full width column, left aligned */
  .site-header .main-nav .menu{
    align-items: flex-start;
    width: 100%;
    margin-top: 6px;
    padding: 4px 0;
  }
  .site-header .main-nav .menu.menu-open{
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .site-header .main-nav .menu li{
    display: block;
    width: 100%;
  }
  .site-header .main-nav .menu a{
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 8px;
    border-radius: 6px;
  }
  .site-header .main-nav .menu a:hover{
    background-color: rgba(255,255,255,0.06);
  }

  /* Auth buttons below menu, full width */
  .site-header .main-nav .auth-buttons{
    margin-top: 8px;
    gap: 8px;
  }
  .site-header .main-nav .auth-buttons .header-button{
    flex: 1 1 0;
    padding: 10px 12px;
  }

  /* Keep burger aligned to the right edge of nav row */
  .menu-toggle{
    align-self: flex-end;
    margin-left: auto;
  }
}

/* === FORCE MOBILE MENU CLOSED BY DEFAULT (specific + !important) === */
@media (max-width: 1024px){
  /* Hide menu UL until .menu-open is added */
  #site-navigation #main-menu{
    display: none !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }
  #site-navigation #main-menu.menu-open{
    display: flex !important;
  }

  /* Auth buttons: hidden until menu is opened */
  #site-navigation #main-menu + .auth-buttons{
    display: none !important;
  }
  #site-navigation #main-menu.menu-open + .auth-buttons{
    display: flex !important;
  }
}

/* === MOBILE: position absolute for menu-toggle (burger) === */
@media (max-width: 1024px){
  .site-header{
    position: relative; /* anchor for absolute burger */
  }
  .site-header .header-inner{
    position: static;
  }
  .site-header .menu-toggle{
    position: absolute;
    right: 12px;
    top: 23px;
    transform: none;
    margin: 0;
    z-index: 20; /* above nav elements */
    align-self: auto;
  }
  #site-navigation #main-menu{ margin-top: 0; }
}