/*
  MASTER CASINO STYLES
  Python script placeholders:
    {{COLOR_BG}}, #FFFFFF, #FF007F, #0080FF,
    #FFD700, #FF007F, #FFD700,
    and background-image:url("../images/pattern.png");background-repeat:repeat; for repeating background images.
    */

    /* Body & Global */
    body {
      margin: 0;
      padding: 0;
      background-color: {{COLOR_BG}};
      color: #FFFFFF;
      background-image:url("../images/pattern.png");background-repeat:repeat; /* replaced by Python => background-image: url("../images/pattern.png"); background-repeat: repeat; */
      font-family: "Open Sans", sans-serif;
    }
    
    /*
      NAVBAR
      We'll give it a dark, translucent background so the text stands out.
    */
    .casino-nav {
      background-color: rgba(0, 0, 0, 0.8);
      /* If you want to incorporate placeholders, you could do:
         background-color: #FF007F;
         But let's keep it black for a casino vibe. */
    }
    
    /*
      HERO SECTION
      Using an overlay to allow partial transparency (to reveal BG pattern).
    */
    .hero-section {
      position: relative;
      min-height: 65vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    
    .hero-overlay {
      content: "";
      position: absolute;
      inset: 0; /* top:0; left:0; right:0; bottom:0 */
      pointer-events: none;
      background: linear-gradient(
        to right,
        #FF007F,
        #FFD700
      );
      opacity: 0.7; /* Adjust for more or less transparency */
      z-index: 1;
    }
    
    .hero-section .container {
      position: relative;
      z-index: 2;
    }
    
    /* .btn-hero uses the primary color from Python. */
    .btn-hero {
      background-color: #FF007F;
      border: none;
      color: #fff;
      padding: 0.75rem 1.5rem;
      font-size: 1.1rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border-radius: 30px; /* more pill-shaped */
    }
    .btn-hero:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    /*
      FEATURES
    */
    
    /* Feature box has a solid white background with black text forced */
    .features-section .feature-box {
      background-color: #fff;
      color: #000; /* Force black text so it's always readable */
      border-radius: 15px;
      transition: transform 0.2s ease;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .features-section .feature-box:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    
    .features-section .feature-img {
      transition: transform 0.3s ease;
      border: 2px solid #fff;
    }
    /* Slight enlarge on hover */
    .features-section .feature-img:hover {
      transform: scale(1.03);
    }
    
    .features-section .btn-secondary {
      background-color: #0080FF !important;
      border: none;
      color: #fff;
      transition: opacity 0.2s ease, box-shadow 0.2s ease;
      border-radius: 20px;
    }
    .features-section .btn-secondary:hover {
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
      opacity: 0.9;
    }
    
    /*
      DISCLAIMER SECTION
      Uses accent color as background
    */
    .disclaimer-section {
      background-color: #FFD700;
      color: #000; /* override if accent is dark */
      border-top: 2px solid rgba(255,255,255,0.2);
      border-bottom: 2px solid rgba(255,255,255,0.2);
      box-shadow: 0 2px 6px rgba(0,0,0,0.2) inset;
    }
    
    /*
      FOOTER
    */
    .footer-section {
      background-color: rgba(0,0,0,0.85);
      color: #ccc;
      border-top: 2px solid #FFD700;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.3) inset;
    }
    .footer-section small {
      opacity: 0.9;
    }
    
    /*
      ADDITIONAL TWEAKS
    */
    .feature-box {background-color: #fff; color: #000!important;}

    .logo {
      max-height: 50px;
      transition: transform 0.2s ease;
    }
    .logo:hover {
      transform: scale(1.05);
    }
    
    /*
      CONTENT-BG (used in terms.html, privacy.html, contact.html)
      White card with subtle shadow.
    */
    .content-bg {
      background-color: #fff;
      color: #333;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 2rem;
    }
    
    /*
      POP SHADOWS & HOVER (moved from inline in index.html, if needed)
      If you use .hero-img or .feature-img outside the .features-section
    */
    .hero-img, .feature-img {
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .hero-img:hover, .feature-img:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    }
    
    /* .btn-pop for “pop” shadow buttons */
    .btn-pop {
      border-radius: 30px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-pop:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }