/* ========================================
 WoolBet Casino — Custom CSS
 Northern Fleece Theme
 ======================================== */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ----------------------------------------
 CSS Custom Properties
 ---------------------------------------- */
:root {
 --primary: #1a8fe3;
 --primary-dark: #0f6ab0;
 --primary-light: #4db3ff;
 --accent-silver: #b0bec5;
 --accent-gold: #d4af37;
 --wool-dark: #0a1628;
 --wool-mid: #0d2244;
 --wool-card: #112a52;
 --wool-border: #1e3a6a;
 --aurora-green: #00e5a0;
 --aurora-purple: #7b4fff;
 --aurora-teal: #00cfcf;
}

/* ----------------------------------------
 Base Reset & Body
 ---------------------------------------- */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body {
 background-color: var(--wool-dark);
 color: #e2e8f0;
 font-family: 'Inter', system-ui, sans-serif;
 line-height: 1.6;
}

/* Wool texture overlay on body */
body::before {
 content: '';
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 background-image:
 radial-gradient(ellipse at 20% 50%, rgba(26, 143, 227, 0.05) 0%, transparent 60%),
 radial-gradient(ellipse at 80% 20%, rgba(0, 229, 160, 0.04) 0%, transparent 50%),
 url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
 background-size: cover, cover, 200px 200px;
}

/* ----------------------------------------
 Navigation Styles
 ---------------------------------------- */
.nav-link {
 display: inline-block;
 padding: 0.4rem 0.9rem;
 border-radius: 0.5rem;
 color: var(--accent-silver);
 font-size: 0.875rem;
 font-weight: 500;
 text-decoration: none;
 transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover {
 color: #ffffff;
 background-color: rgba(26, 143, 227, 0.15);
}

.mobile-nav-link {
 display: block;
 padding: 0.65rem 0.75rem;
 border-radius: 0.5rem;
 color: #e2e8f0;
 font-size: 0.95rem;
 font-weight: 500;
 text-decoration: none;
 transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav-link:hover {
 background-color: rgba(26, 143, 227, 0.2);
 color: #ffffff;
}

/* ----------------------------------------
 Button Styles
 ---------------------------------------- */
.btn-primary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
 color: #ffffff;
 font-weight: 700;
 border-radius: 0.625rem;
 text-decoration: none;
 transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 border: none;
 cursor: pointer;
 letter-spacing: 0.02em;
}

.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 30px rgba(26, 143, 227, 0.45);
 filter: brightness(1.1);
}

.btn-primary:active {
 transform: translateY(0);
}

.btn-secondary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: transparent;
 color: var(--accent-silver);
 font-weight: 600;
 border-radius: 0.625rem;
 text-decoration: none;
 border: 2px solid var(--wool-border);
 transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
 cursor: pointer;
}

.btn-secondary:hover {
 border-color: var(--primary-light);
 color: var(--primary-light);
 background-color: rgba(26, 143, 227, 0.08);
}

.btn-outline-sm {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0.5rem 1.25rem;
 background: transparent;
 color: var(--primary-light);
 font-size: 0.875rem;
 font-weight: 600;
 border-radius: 0.5rem;
 border: 1.5px solid var(--primary);
 text-decoration: none;
 transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline-sm:hover {
 background-color: var(--primary);
 color: #ffffff;
}

/* Pulsing glow animation for hero CTA */
.pulse-glow {
 animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
 0%, 100% {
 box-shadow: 0 0 15px rgba(26, 143, 227, 0.5);
 }
 50% {
 box-shadow: 0 0 35px rgba(26, 143, 227, 0.9), 0 0 60px rgba(77, 179, 255, 0.4);
 }
}

/* ----------------------------------------
 Hero Section
 ---------------------------------------- */
.hero-section {
 min-height: 90vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.hero-bg {
 filter: brightness(0.35) saturate(0.8);
}

.hero-overlay {
 background: linear-gradient(
 180deg,
 rgba(10, 22, 40, 0.6) 0%,
 rgba(10, 22, 40, 0.85) 60%,
 rgba(10, 22, 40, 1) 100%
 );
}

/* Aurora wave decoration */
.aurora-wave {
 position: absolute;
 left: 0;
 right: 0;
 height: 3px;
 border-radius: 100%;
 pointer-events: none;
 z-index: 2;
}

.aurora-wave-1 {
 top: 30%;
 background: linear-gradient(90deg, transparent, var(--aurora-teal), transparent);
 opacity: 0.3;
 animation: auroraShift 8s ease-in-out infinite alternate;
}

.aurora-wave-2 {
 top: 50%;
 background: linear-gradient(90deg, transparent, var(--aurora-purple), transparent);
 opacity: 0.2;
 animation: auroraShift 12s ease-in-out infinite alternate-reverse;
}

@keyframes auroraShift {
 0% { transform: scaleX(0.5) translateX(-20%); opacity: 0.1; }
 50% { opacity: 0.4; }
 100% { transform: scaleX(1.2) translateX(10%); opacity: 0.15; }
}

/* ----------------------------------------
 Bonus Badge
 ---------------------------------------- */
.bonus-badge {
 animation: badgePop 0.6s ease-out both;
}

.bonus-badge-inner {
 background: linear-gradient(135deg, var(--accent-gold), var(--primary), var(--aurora-teal));
 background-size: 300% 300%;
 animation: badgeGradientShift 5s ease infinite;
 padding: 2px;
 border-radius: 1rem;
}

@keyframes badgeGradientShift {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

@keyframes badgePop {
 from { transform: scale(0.9); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------
 Marquee / Horizontal Scroll Animation
 ---------------------------------------- */
.marquee-outer {
 -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
 mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
 display: flex;
 gap: 1.5rem;
 animation: marqueeScroll 40s linear infinite;
 width: max-content;
}

.marquee-outer:hover .marquee-track {
 animation-play-state: paused;
}

@keyframes marqueeScroll {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

/* ----------------------------------------
 Game Cards
 ---------------------------------------- */
.game-card {
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 16px 40px rgba(26, 143, 227, 0.3);
}

/* ----------------------------------------
 Step-by-Step Section
 ---------------------------------------- */
.bonus-steps-section {
 background: linear-gradient(180deg, var(--wool-mid) 0%, var(--wool-dark) 100%);
 position: relative;
 overflow: hidden;
}

.bonus-steps-section::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 background:
 radial-gradient(ellipse at 10% 90%, rgba(0, 229, 160, 0.07) 0%, transparent 50%),
 radial-gradient(ellipse at 90% 10%, rgba(123, 79, 255, 0.06) 0%, transparent 50%);
 pointer-events: none;
}

.step-card {
 background: var(--wool-card);
 border: 1px solid var(--wool-border);
 border-radius: 1.25rem;
 padding: 2.5rem 1.5rem 2rem;
 position: relative;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
 transform: translateY(-6px);
 box-shadow: 0 20px 50px rgba(0, 229, 160, 0.15);
}

.step-number {
 position: absolute;
 top: -1.25rem;
 left: 50%;
 transform: translateX(-50%);
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary), var(--aurora-teal));
 color: white;
 font-size: 1.1rem;
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 4px 15px rgba(26, 143, 227, 0.5);
}

.step-icon-wrap {
 width: 4.5rem;
 height: 4.5rem;
 border-radius: 50%;
 background: rgba(26, 143, 227, 0.12);
 border: 1px solid rgba(26, 143, 227, 0.25);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1.25rem;
}

/* ----------------------------------------
 Review Blocks
 ---------------------------------------- */
.review-block {
 background: var(--wool-card);
 border: 1px solid var(--wool-border);
 border-radius: 1rem;
 overflow: hidden;
}

.review-block-header {
 background: linear-gradient(90deg, rgba(26, 143, 227, 0.2), rgba(0, 207, 207, 0.1));
 border-bottom: 1px solid var(--wool-border);
 padding: 1rem 1.25rem;
 font-weight: 700;
 font-size: 1rem;
 color: #ffffff;
 display: flex;
 align-items: center;
}

.review-block-body {
 padding: 1.25rem;
 font-size: 0.875rem;
 color: #cbd5e1;
 line-height: 1.75;
}

.review-block-body p {
 margin-bottom: 0.85rem;
}

.review-list {
 list-style: none;
 padding: 0;
 margin: 0;
 space-y: 0.5rem;
}

.review-list li {
 display: flex;
 align-items: flex-start;
 gap: 0.25rem;
 padding: 0.35rem 0;
 border-bottom: 1px solid rgba(30, 58, 106, 0.5);
 font-size: 0.8rem;
 line-height: 1.5;
}

.review-list li:last-child {
 border-bottom: none;
}

/* ----------------------------------------
 Word Cloud
 ---------------------------------------- */
.word-cloud {
 display: flex;
 flex-wrap: wrap;
 gap: 0.6rem;
 align-items: center;
 justify-content: center;
}

.wc-tag {
 display: inline-block;
 background: rgba(26, 143, 227, 0.1);
 border: 1px solid rgba(26, 143, 227, 0.25);
 border-radius: 2rem;
 color: var(--primary-light);
 font-weight: 600;
 transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
 cursor: default;
}

.wc-tag:hover {
 background: rgba(26, 143, 227, 0.25);
 color: #ffffff;
 transform: scale(1.06);
}

.wc-sm { font-size: 0.75rem; padding: 0.3rem 0.75rem; }
.wc-md { font-size: 0.875rem; padding: 0.35rem 0.9rem; }
.wc-lg { font-size: 1rem; padding: 0.4rem 1.1rem; }
.wc-xl { font-size: 1.2rem; padding: 0.5rem 1.3rem; color: var(--aurora-teal); border-color: rgba(0, 207, 207, 0.3); }

/* ----------------------------------------
 Promo Cards
 ---------------------------------------- */
.promo-card {
 background: var(--wool-card);
 border: 1px solid var(--wool-border);
 border-radius: 1.25rem;
 padding: 2rem 1.5rem;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 position: relative;
 overflow: hidden;
}

.promo-card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--primary), var(--aurora-teal), var(--aurora-purple));
}

.promo-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 16px 40px rgba(26, 143, 227, 0.2);
}

.promo-card-icon {
 width: 5rem;
 height: 5rem;
 border-radius: 50%;
 background: rgba(26, 143, 227, 0.1);
 border: 1px solid rgba(26, 143, 227, 0.2);
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 1.25rem;
}

/* ----------------------------------------
 FAQ Section
 ---------------------------------------- */
.faq-list {
 max-width: 48rem;
 margin: 0 auto;
}

.faq-item {
 background: var(--wool-card);
 border: 1px solid var(--wool-border);
 border-radius: 0.875rem;
 overflow: hidden;
 transition: box-shadow 0.2s ease;
}

.faq-item:hover {
 box-shadow: 0 4px 20px rgba(26, 143, 227, 0.15);
}

.faq-item[open] {
 border-color: rgba(26, 143, 227, 0.4);
}

.faq-question {
 display: flex;
 align-items: center;
 padding: 1.1rem 1.25rem;
 cursor: pointer;
 font-weight: 600;
 font-size: 0.95rem;
 color: #e2e8f0;
 list-style: none;
 user-select: none;
 transition: background-color 0.2s ease;
 gap: 0.5rem;
}

.faq-question::-webkit-details-marker {
 display: none;
}

.faq-question:hover {
 background-color: rgba(26, 143, 227, 0.08);
}

.faq-item[open] .faq-question {
 background-color: rgba(26, 143, 227, 0.1);
 border-bottom: 1px solid var(--wool-border);
 color: var(--primary-light);
}

.faq-chevron {
 font-size: 0.6rem;
 color: var(--accent-silver);
 transition: transform 0.3s ease;
}

.faq-item[open] .faq-chevron {
 transform: rotate(180deg);
 color: var(--primary-light);
}

.faq-answer {
 padding: 1rem 1.25rem 1.25rem 1.25rem;
 font-size: 0.875rem;
 color: #94a3b8;
 line-height: 1.75;
}

.faq-answer p {
 margin: 0;
}

/* ----------------------------------------
 Footer Links
 ---------------------------------------- */
.footer-link {
 color: #64748b;
 text-decoration: none;
 transition: color 0.2s ease;
}

.footer-link:hover {
 color: var(--primary-light);
}

/* ----------------------------------------
 Prose Styles (Single Pages)
 ---------------------------------------- */
.prose-woolbet {
 color: #cbd5e1;
 max-width: 72ch;
}

.prose-woolbet h1 {
 font-size: 2.25rem;
 font-weight: 800;
 color: #ffffff;
 margin-bottom: 1rem;
 line-height: 1.25;
}

.prose-woolbet h2 {
 font-size: 1.5rem;
 font-weight: 700;
 color: #e2e8f0;
 margin-top: 2rem;
 margin-bottom: 0.75rem;
 border-bottom: 1px solid var(--wool-border);
 padding-bottom: 0.5rem;
}

.prose-woolbet h3 {
 font-size: 1.2rem;
 font-weight: 600;
 color: var(--primary-light);
 margin-top: 1.5rem;
 margin-bottom: 0.5rem;
}

.prose-woolbet p {
 margin-bottom: 1rem;
 line-height: 1.8;
}

.prose-woolbet ul,
.prose-woolbet ol {
 margin-left: 1.5rem;
 margin-bottom: 1rem;
}

.prose-woolbet ul li {
 list-style-type: disc;
 margin-bottom: 0.4rem;
}

.prose-woolbet ol li {
 list-style-type: decimal;
 margin-bottom: 0.4rem;
}

.prose-woolbet a {
 color: var(--primary-light);
 text-decoration: underline;
}

.prose-woolbet a:hover {
 color: var(--aurora-teal);
}

.prose-woolbet strong {
 color: #e2e8f0;
 font-weight: 700;
}

.prose-woolbet blockquote {
 border-left: 3px solid var(--primary);
 padding-left: 1rem;
 color: #94a3b8;
 font-style: italic;
 margin: 1.5rem 0;
}

.prose-woolbet table {
 width: 100%;
 border-collapse: collapse;
 margin-bottom: 1.5rem;
 font-size: 0.875rem;
}

.prose-woolbet table th {
 background-color: var(--wool-card);
 color: var(--accent-silver);
 padding: 0.65rem 1rem;
 text-align: left;
 font-weight: 600;
 border-bottom: 1px solid var(--wool-border);
}

.prose-woolbet table td {
 padding: 0.6rem 1rem;
 border-bottom: 1px solid var(--wool-border);
 color: #cbd5e1;
}

.prose-woolbet table tr:hover td {
 background-color: rgba(17, 42, 82, 0.5);
}

/* Table overflow wrapper — ensures all tables scroll on small screens */
.prose-woolbet table {
 display: block;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------
 Review Block Prose
 ---------------------------------------- */
.prose-review p {
 margin-bottom: 0.85rem;
 font-size: 0.875rem;
 color: #94a3b8;
 line-height: 1.75;
}

/* ----------------------------------------
 Parallax Effect
 ---------------------------------------- */
.parallax-bg {
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

/* ----------------------------------------
 Scrollbar Styling
 ---------------------------------------- */
::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}

::-webkit-scrollbar-track {
 background: var(--wool-dark);
}

::-webkit-scrollbar-thumb {
 background: var(--wool-border);
 border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
 background: var(--primary);
}

/* ----------------------------------------
 Selection Color
 ---------------------------------------- */
::selection {
 background-color: rgba(26, 143, 227, 0.4);
 color: #ffffff;
}

/* ----------------------------------------
 Utility
 ---------------------------------------- */
.z-1 { z-index: 1; }

/* Fade-in animation for page elements */
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.fade-in-up {
 animation: fadeInUp 0.6s ease-out both;
}

/* ----------------------------------------
 Responsive Helpers
 ---------------------------------------- */
@media (max-width: 640px) {
 .hero-section {
 min-height: 80vh;
 }

 .bonus-badge-inner {
 padding: 1.5px;
 }

 .step-card {
 margin-top: 1.25rem;
 }
}

@media (prefers-reduced-motion: reduce) {
 .marquee-track,
 .pulse-glow,
 .aurora-wave,
 .bonus-badge-inner {
 animation: none;
 }
}