/*
Theme Name: Ocean Breeze Gaming
Theme URI: #
Author: Theme Developer
Author URI: #
Description: A professional gaming theme designed for Indian commercial gaming websites. Features responsive design, Bootstrap 5 framework, and SEO-optimized structure.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocean-breeze-gaming
Tags: gaming, casino, responsive, bootstrap, india
*/

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --blue: #1e40af;
  --orange: #06b6d4;
  --red: #0891b2;
  --footer-bg: #0c1929;
  --footer-panel: #112240;
  --footer-ink: #e7efff;
  --footer-accent: #38bdf8;
  --footer-accent2: #22d3ee;
  --footer-hot: #f472b6;
}

/* ========================================
   Base Styles
   ======================================== */
body {
  font-family: "Poppins", serif;
  background: #fafaff;
}

/* ========================================
   Navbar
   ======================================== */
.navbar {
  background: linear-gradient(90deg, #dbeafe 0%, #ffffff 100%);
}

.navbar .nav-link {
  color: #4a4a4a;
  font-weight: 500;
}

.navbar .nav-link:hover {
  color: var(--blue);
}

.brand-text .mega {
  font-family: ui-rounded, system-ui;
  color: var(--blue);
  font-weight: 800;
}

.brand-text .n888 {
  color: var(--orange);
  font-weight: 800;
}

/* ========================================
   Section Titles
   ======================================== */
.section-title {
  background: #1a1a2e;
  color: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  display: inline-block;
}

.section-title .badge {
  font-size: .65em;
}

/* ========================================
   Page Title
   ======================================== */
.page-title {
  color: var(--red);
}

/* ========================================
   Cards
   ======================================== */
.card {
  border: none;
  border-radius: 16px;
  transition: all .3s;
}

.card:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

/* ========================================
   Download Cards - Horizontal Scroll
   ======================================== */
.cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
}

.cards::-webkit-scrollbar {
  height: 6px;
}

.cards::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

/* ========================================
   Game Grid
   ======================================== */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* ========================================
   Buttons
   ======================================== */
.btn-zoomin:hover {
  transform: scale3d(1.1, 1.1, 1);
}

.bg-orange {
  background: #ff3b00 !important;
  color: #fff;
}

/* Gradient Button */
.btn-gradient {
  background: linear-gradient(135deg, #1e40af 0, #06b6d4 100%);
  color: #fff;
  border: none;
}

.btn-gradient:hover {
  color: #fff;
  opacity: .9;
}

/* ========================================
   Animations
   ======================================== */
.rotate-3d {
  animation: rotate3d 5s linear infinite;
}

@keyframes rotate3d {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.ani-fadeup {
  animation: fadeup 2s ease-in-out infinite;
}

@keyframes fadeup {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ========================================
   Progress Bar
   ======================================== */
.progress-bar-custom {
  background: linear-gradient(to right, #6495ed, #00bfff);
}

/* ========================================
   Footer
   ======================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: 48px 0 0;
}

.site-footer h5 {
  color: var(--footer-accent);
  font-weight: 700;
}

.site-footer a {
  color: var(--footer-ink);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--footer-accent);
}

.footer-panel {
  background: var(--footer-panel);
}

.footer-social a {
  color: var(--footer-accent2);
  font-size: 1.5rem;
}

.footer-hot {
  color: var(--footer-hot);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 16px 0;
}

/* ========================================
   Back to Top Button
   ======================================== */
#backToTop {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 999;
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ========================================
   Random Spin Floating Button
   ======================================== */
.random-spin {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 56px;
  height: 56px;
}

.random-spin img {
  width: 100%;
  height: 100%;
}

/* ========================================
   Content Expand/Collapse
   ======================================== */
.content-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all .3s;
}

.content-clamp.expanded {
  -webkit-line-clamp: unset;
}

/* ========================================
   Offcanvas Mobile Menu
   ======================================== */
.offcanvas {
  width: min(88vw, 380px) !important;
}

/* ========================================
   Breadcrumbs
   ======================================== */
.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  color: var(--blue);
}

/* Theme color overrides */
.bg-deepblue-theme { background-color: #1e40af !important; color: #fff; }
.bg-cyan-theme { background-color: #06b6d4 !important; color: #fff; }
.bg-sky-theme { background-color: #0284c7 !important; color: #fff; }
.bg-amber-theme { background-color: #f59e0b !important; color: #fff; }
.bg-rose-theme { background-color: #f43f5e !important; color: #fff; }
.text-deepblue { color: #1e40af !important; }
.btn-deepblue-theme { background-color: #1e40af !important; border-color: #1e40af !important; color: #fff !important; }
.btn-outline-deepblue { border-color: #1e40af !important; color: #1e40af !important; }
.btn-outline-deepblue:hover { background-color: #1e40af !important; color: #fff !important; }