/*
Theme Name: Casino Network Theme AU
Theme URI: https://nupogodiweb.com/
Author: Corporation NUPOGODI
Description: Multisite-ready casino theme with Customizer-driven branding. Designed to serve multiple casino sites from a single codebase.
Version: 4.2.6
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
*/

/* === Global Styles & Resets === */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background: #000a12 !important;
  background-position: top center;
  color: #e0e0e0;
}

#page {
	margin: 0 auto;
}

a {
	color: #fff;
	transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover {
	  color: #ffd700;
    text-decoration-color: #ffd700;
}

/* === Main Layout & Containers === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.main-container {
  min-height: calc(100vh - 470px);
}

.content-layout {
  width: 100%;
}

@media (max-width: 575px) {
  .container {
    padding: 0 15px !important;
  }
}

/* Two-column layout */
@media (min-width: 1025px){
  .main-container,
  .content-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
  }

  .main-container > .breadcrumbs,
  .content-layout > .breadcrumbs {
    flex: 0 0 100%;
    order: 0;
    width: 100%;
    margin-bottom: 0;
  }

  .main-container > article,
  .main-container > .page,
  .main-container > .post,
  .content-layout > article,
  .content-layout > .page,
  .content-layout > .post {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
  }

  .main-container > .site-sidebar,
  .content-layout > .site-sidebar {
    flex: 0 0 320px;
    max-width: 320px;
    order: 2;
    align-self: flex-start;
  }
}

/* === Page/Post Styling === */
.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;
}

@media (max-width: 560px){
  .main-container .page,
  .main-container .post{
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* === Site Header === */
.site-header {
  width: 100%;
  background-color: #1e1e1e;
  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;
}

.site-header .header-bar::after {
    left: -45px; 
    right: -45px;
}

@media screen and (min-width: 1025px){
  .site-header {
    position: fixed;
    top: 0;
    z-index: 9999;
  }
  .admin-bar .site-header {
    top: 32px !important;
  }
  .site-header .header-inner .menu-toggle {
    display: none;
  }

  .site-header .menu li.menu-item-has-children > a > .submenu-toggle{display:none!important}
}

@media (max-width: 991px){
  .site-header .header-inner {
    padding: 16px 30px;
  }
  .site-header .header-bar::after {left: -30px; right: -30px;}
}
@media (max-width: 575px){
  .site-header .header-inner{
    padding: 14px 15px;
  }
  .site-header .header-bar::after {left: -15px;right: -15px;}
}


/* === Logo & Site Title === */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
}

.site-header .site-logo img {
  max-height: 36px; /* Adjusted from 42px */
  width: auto;
  height: auto;
}

.site-header .site-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === Main Navigation === */
.main-nav {
  display: flex;
  align-items: center;
  gap: 18px; /* Adjusted from 24px */
}

.main-nav .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px; /* Adjusted */
}

.main-nav .menu li {
  display: block;
}

.main-nav .menu a {
  font-weight: bold;
  text-decoration: none;
  color: #e0e0e0;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}

.main-nav .menu a:hover {
  background-color: #0000001f;
  color: #ffd700;
}

/* === Header 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;
}

.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);
}

.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 buttons polish overrides */
.site-header .auth-buttons .header-button {
  padding: 8px 14px;
  font-size: 14px;
  background: rgba(255,255,255,0.08);
  border: 2px solid #ffb300;
  box-shadow: none;
  transform: none;
}

.site-header .auth-buttons .header-button.login {
  border-color: #4a79ff;
}

.site-header .auth-buttons .header-button.signup {
  background:#ffb300 !important;
}

.site-header .auth-buttons .header-button:hover {
  background: #4a79ff;
  box-shadow: none;
  transform: translateY(0);
}

.site-header .auth-buttons .header-button.signup:hover {
  background: #ffb300e3 !important;
}


/* === Dropdown Menu (Desktop) === */
@media (min-width:1025px) {
  .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 > 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,
  .site-header .menu > .menu-item-has-children:focus-within > a {
    color:#ffd166;
  }
  .site-header .menu > .menu-item-has-children:hover > a::after,
  .site-header .menu > .menu-item-has-children:focus-within > a::after {
    transform:rotate(180deg);
  }

  /* Sub-menu container */
  .site-header .menu .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);
    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 .sub-menu li {
    margin:0;
  }

  .site-header .menu .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 .sub-menu a:hover,
  .site-header .menu .sub-menu a:focus {
    background:rgba(255,255,255,0.08);
    transform:translateX(2px);
  }

  /* Right-aligned dropdown */
  .site-header .menu > .menu-item-has-children.dropdown-right > .sub-menu {
    left:auto;
    right:0;
  }

  /* Nested sub-menus (flyouts) */
  .site-header .menu .sub-menu .menu-item-has-children {
    position: relative;
  }

  .site-header .menu .sub-menu .menu-item-has-children > .sub-menu {
    position: absolute;
    top: -8px;
    left: 100%;
    margin-left: 1px;
  }

  .site-header .menu > .menu-item-has-children.dropdown-right .sub-menu .menu-item-has-children > .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 1px;
  }

  .site-header .menu .sub-menu .menu-item-has-children:hover > .sub-menu,
  .site-header .menu .sub-menu .menu-item-has-children:focus-within > .sub-menu {
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: auto;
  }

  .site-header .menu .sub-menu .menu-item-has-children > a::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    margin-left: auto;
    opacity: .9;
  }

  /* Flyout hover bridge */
  .site-header .menu .sub-menu .menu-item-has-children::after{
    content:"";
    position:absolute;
    top:0; right:-6px;
    width:6px; height:100%;
  }

  .site-header .menu > .menu-item-has-children.dropdown-right .sub-menu .menu-item-has-children::after{
    left:-6px; right:auto;
  }
}

/* === Mobile Navigation === */
@media screen and (max-width: 1024px) {
.site-header .header-bar
{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
    width: 100%;
	height: 72px;
	position: relative;
}

body:has(.main-nav .menu.menu-open) .site-header .header-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}   

.site-header .header-bar .logo
{
	grid-column: 2;
	justify-self: center;
}


.site-header .header-bar .menu-toggle
{
	grid-column: 3;
	justify-self: end;
	margin-right: 0;
}

.site-header .header-bar .menu-toggle {
    display: block;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative; /* Esențial pentru liniile din interior */
    grid-column: 3;
    justify-self: end;
    align-self: center;
    z-index: 1001;
    padding: 0;
    margin: 0;
}


.site-header .header-bar .menu-toggle span,
.site-header .header-bar .menu-toggle::before,
.site-header .header-bar .menu-toggle::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background: #fff;
    transition: all 0.3s ease-in-out;
    left: 0;
}

.site-header .header-bar .menu-toggle::before { top: 0; }
.site-header .header-bar .menu-toggle span { top: 9px; }
.site-header .header-bar .menu-toggle::after { bottom: 0; }

.site-header .header-bar .menu-toggle.open span { 
    opacity: 0; 
    transform: translateX(-20px); 
}

.site-header .header-bar .menu-toggle.open::before { 
    transform: rotate(45deg); 
    top: 9px;
}

.site-header .header-bar .menu-toggle.open::after { 
    transform: rotate(-45deg); 
    bottom: 10px;
}

  /* Mobile Layout */
  .site-header .header-inner{
    flex-direction: column;
    justify-content: center;
  }

 .site-header .main-nav {
    order: 2;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    overflow: hidden;
  }

  /* Hide menu by default */
  .main-nav .menu,
  #site-navigation #main-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }


  .main-nav .menu.menu-open,
  #site-navigation #main-menu.menu-open {
    display: flex !important;
    order: 2;
    animation: slideDown 0.3s ease-out forwards;
    transform-origin: top;
  }

  .main-nav .menu li,
  .site-header .main-nav .menu li {
    display: block;
    width: 100%;
  }

  .main-nav .menu a {
    text-align: left;
    padding: 12px 8px;
  }

  /* Auth buttons mobile layout */

.site-header .main-nav .auth-buttons {
    display: none;
    flex-direction: row;
    justify-content: center;
    order: 1;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
  }


body:has(.main-nav .menu.menu-open) .site-header .main-nav .auth-buttons {
  display: flex;
}


 body:has(.main-nav .menu.menu-open) .site-header .main-nav {
  padding-top: 10px;
 }



  .site-header .auth-buttons .header-button {
    flex: 1 1 0;
  }

  /* Mobile dropdowns */
  .site-header .menu > .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.06);
  }

  .site-header .menu > .menu-item-has-children > a::after {
    margin-left:10px;
    font-size:0.9em;
  }

  .site-header .menu > .menu-item-has-children > .sub-menu {
    position: static;
    width: 100%;
    padding: 6px 0 6px 15px;
    margin-top: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }

.site-header .menu li.menu-item-has-children > a > .submenu-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;display:inline-grid;place-items:center;border-radius:8px;border:0;background:transparent;color:#ffffffd9;cursor:pointer;transition:color .15s ease,transform .15s ease;outline:2px solid #ffd700;}
.site-header .menu li.menu-item-has-children.submenu-open > a > .submenu-toggle i{transform:rotate(180deg);color:#ffd700}
.site-header .menu li.menu-item-has-children > .sub-menu{overflow:hidden;max-height:0;transition:max-height .25s ease;display: none;}
.site-header .menu li.menu-item-has-children > .submenu-open{display: block;max-height: fit-content !important;}

  .site-header .menu > .menu-item-has-children.submenu-open > .sub-menu {
    max-height: fit-content !important;
  }

  .site-header .menu > .menu-item-has-children.submenu-open > .sub-menu a {
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.06);
  }


  .site-header .menu > .menu-item-has-children.submenu-open > a::after {
    transform: rotate(180deg);
  }

.site-header .menu-open li.menu-item-has-children ul { display: none !important; } 
.site-header .menu-open li.submenu-open ul { display: block !important; }

}




/* === Tables === */
table {
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:#f5f7fb;
  background:linear-gradient(180deg,rgba(0,10,18,.75),rgba(0,10,18,.35)),radial-gradient(1000px 420px at 70% 0%,rgba(10,132,255,.18),transparent 60%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  font-size:clamp(14px,1.2vw,15px);
  table-layout:fixed;
  word-break:break-word;
}
table::after {
  content:"";
  display:block;
  height:2px;
  width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,153,0,.55),transparent);
}
table th {
  padding:14px 18px;
  text-align:left;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;
  font-size:14px;
  background:linear-gradient(90deg,rgba(255,153,0,.25),rgba(10,132,255,.12) 45%,rgba(0,10,18,.6));
  border-bottom:1px solid rgba(255,255,255,.15);
  background-color:rgba(12,16,24,.85);
  box-shadow:inset 0 -2px 0 rgba(255,153,0,.35);
}
table th:first-child { border-top-left-radius:10px; }
table th:last-child { border-top-right-radius:10px; }
table tbody td {
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(8,10,16,.78);
  transition:background .25s ease,box-shadow .25s ease,transform .2s ease;
  vertical-align:top;
}
table tbody tr:nth-child(even) td { background:rgba(12,16,24,.78); }
table tbody tr:hover td {
  background:linear-gradient(90deg,rgba(255,153,0,.08),rgba(10,132,255,.06) 60%,rgba(0,0,0,0));
  box-shadow:inset 0 0 0 1px rgba(255,153,0,.22);
  transform:translateY(-1px);
}
table tbody td:first-child {
  font-weight:800;
  color:#ff9900;
  letter-spacing:.01em;
}
table tbody tr:last-child td { border-bottom:none; }
table td:nth-child(2), table td:nth-child(3) {
  white-space:normal;
  word-wrap:break-word;
}
@media (max-width:768px) {
  table {
    display:block;
    overflow-x:auto;
    border-radius:10px;
    table-layout:auto;
  }
  table th, table td {
    padding:12px 14px;
    font-size:13px;
    white-space:nowrap;
  }
}


/* === Utility Classes === */
.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%;
  }
}

.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;
}

.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; }

.bg-dark { background-color: #121212; color: #fff; }
.bg-light { background-color: #f9f9f9; color: #111; }
.text-dark { color: #111; }
.text-light { color: #f9f9f9; }

.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; }

/* === Animations === */
@keyframes slideDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInCascade {
  from { opacity: 0; transform: translateY(-5px); }
  to { 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; }
}
