/*
Theme Name: CashAuditUK
Theme URI: https://cashaudituk.com
Author: CashAuditUK
Author URI: https://cashaudituk.com
Description: CashAuditUK - UK Casino Reviews & Withdrawal Times. Exact replica of the Lovable React project as a WordPress theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cashaudituk
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */
:root {
  --background: hsl(230, 15%, 95%);
  --foreground: hsl(230, 25%, 12%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(230, 25%, 12%);
  --primary: hsl(210, 65%, 42%);
  --primary-foreground: hsl(0, 0%, 98%);
  --secondary: hsl(210, 20%, 92%);
  --secondary-foreground: hsl(210, 25%, 12%);
  --muted: hsl(210, 12%, 92%);
  --muted-foreground: hsl(210, 10%, 46%);
  --accent: hsl(38, 85%, 55%);
  --accent-foreground: hsl(0, 0%, 100%);
  --border: hsl(210, 15%, 88%);
  --input: hsl(210, 15%, 88%);
  --ring: hsl(210, 65%, 42%);
  --radius: 0.75rem;
  --header-bg: hsl(210, 55%, 28%);
  --header-foreground: hsl(0, 0%, 98%);
  --hero-bg: hsl(210, 55%, 28%);
  --hero-foreground: hsl(0, 0%, 98%);
  --hero-muted: hsl(210, 20%, 72%);
  --nav-pill: hsl(0, 0%, 100%);
  --nav-pill-foreground: hsl(210, 55%, 25%);
  --accent-light: hsl(45, 90%, 45%);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.site-container {
  min-height: 100vh;
  background-color: var(--background);
}

.site-main {
  max-width: 1560px;
  margin: 0 auto;
  padding-bottom: 5rem;
}

.section-spacing {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1.5rem;
}

.section-border-top {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--header-bg);
}

.header-inner {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo span {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.025em;
}

/* Desktop navigation */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid hsla(0, 0%, 98%, 0.3);
  font-size: 15px;
  font-weight: 600;
  color: var(--header-foreground);
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
}

.nav-pill:hover,
.nav-pill.active {
  background-color: var(--nav-pill);
  color: var(--nav-pill-foreground);
  border-color: var(--nav-pill);
}

.nav-pill img {
  width: 2rem;
  height: 2rem;
}

/* Mobile menu toggle */
.menu-toggle {
  display: block;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-toggle:hover {
  background-color: hsla(0, 0%, 98%, 0.1);
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--header-foreground);
  stroke: var(--header-foreground);
}

/* Mobile dropdown nav */
.nav-mobile {
  display: none;
  border-top: 1px solid hsla(0, 0%, 98%, 0.1);
  background-color: var(--header-bg);
  padding: 0.75rem 1rem 1.25rem;
}

.nav-mobile.open {
  display: block;
}

.nav-mobile-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--header-foreground);
  text-decoration: none;
  transition: background-color 0.2s;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.nav-mobile-item:hover,
.nav-mobile-item.active {
  background-color: hsla(0, 0%, 98%, 0.1);
}

.nav-mobile-item img {
  width: 2rem;
  height: 2rem;
}

.nav-mobile-user {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; margin-top: 0.5rem;
  border-top: 1px solid hsla(0,0%,98%,0.1);
}

/* ==========================================================================
   HEADER RIGHT (user icon + mobile toggle)
   ========================================================================== */
.header-right {
  display: flex; align-items: center; gap: 0.75rem;
}

/* User avatar */
.user-avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  object-fit: cover; cursor: pointer;
  border: 2px solid hsla(0,0%,98%,0.3);
  transition: border-color 0.2s;
}

.user-avatar:hover { border-color: var(--accent); }

/* User dropdown */
.user-menu { position: relative; }

.user-dropdown {
  display: none; position: absolute; top: calc(100% + 0.5rem); right: 0;
  width: 16rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15);
  z-index: 100; overflow: hidden;
}

.user-dropdown.open { display: block; }

.user-dropdown-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem; border-bottom: 1px solid var(--border);
}

.user-dropdown-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover;
}

.user-dropdown-name {
  font-size: 0.875rem; font-weight: 700; color: var(--foreground); display: block;
}

.user-dropdown-email {
  font-size: 0.75rem; color: var(--muted-foreground); display: block;
  word-break: break-all;
}

.user-dropdown-logout {
  display: block; padding: 0.75rem 1rem;
  font-size: 0.875rem; font-weight: 600;
  color: hsl(0,84%,60%); text-decoration: none;
  transition: background-color 0.2s;
}

.user-dropdown-logout:hover { background: var(--muted); }

/* Google Sign In button */
.google-login-btn {
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: white; color: #333;
  font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; transition: box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.google-login-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

.google-icon { flex-shrink: 0; }

@media (min-width: 1024px) {
  .google-login-btn { display: flex; }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  margin: 0.75rem 1rem 0;
  min-height: 340px;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid hsla(0, 0%, 98%, 0.1);
  background: linear-gradient(135deg, hsl(210, 55%, 18%) 0%, hsl(210, 55%, 28%) 30%, hsl(215, 60%, 22%) 60%, hsl(210, 50%, 16%) 100%);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hero-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 9999px;
}

.hero-orb-1 {
  top: -5rem; right: -2.5rem;
  width: 20rem; height: 20rem;
  background: hsla(38, 85%, 55%, 0.2);
  filter: blur(120px);
  animation: pulse 2s ease-in-out infinite;
}

.hero-orb-2 {
  top: 50%; left: -5rem;
  width: 16rem; height: 16rem;
  background: hsla(210, 65%, 42%, 0.25);
  filter: blur(100px);
}

.hero-orb-3 {
  bottom: -2.5rem; right: 33%;
  width: 14rem; height: 14rem;
  background: hsla(38, 85%, 55%, 0.15);
  filter: blur(90px);
  animation: pulse 2s ease-in-out infinite 1s;
}

.hero-orb-4 {
  top: 2.5rem; left: 33%;
  width: 10rem; height: 10rem;
  background: hsla(200, 70%, 50%, 0.12);
  filter: blur(70px);
}

.hero-grid {
  position: absolute; inset: 0; opacity: 0.06;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 48px 48px;
}

.hero-stripe-1 {
  position: absolute; top: -8rem; right: -8rem;
  width: 500px; height: 500px;
  background: hsla(38, 85%, 55%, 0.06);
  transform: rotate(45deg); border-radius: 1.5rem;
}

.hero-stripe-2 {
  position: absolute; bottom: -10rem; left: -10rem;
  width: 400px; height: 400px;
  background: hsla(210, 65%, 42%, 0.08);
  transform: rotate(12deg); border-radius: 9999px;
}

.hero-shine-top {
  position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, hsla(38, 85%, 55%, 0.4), transparent);
}

.hero-shine-bottom {
  position: absolute; bottom: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, hsla(0, 0%, 98%, 0.15), transparent);
}

.hero-shine-left {
  position: absolute; top: 0; left: 0; width: 1px; height: 100%;
  background: linear-gradient(to bottom, hsla(38, 85%, 55%, 0.3), transparent, transparent);
}

.hero-vignette {
  position: absolute; bottom: 0; left: 0;
  height: 10rem; width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
}

.hero-content {
  position: relative; z-index: 10; max-width: 48rem;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 1rem; border-radius: 9999px;
  background: hsla(38, 85%, 55%, 0.15);
  border: 1px solid hsla(38, 85%, 55%, 0.25);
  margin-bottom: 1.5rem;
}

.hero-badge-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background-color: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.hero-badge-text {
  color: var(--accent); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.hero-title {
  font-size: 1.875rem; font-weight: 900;
  color: var(--hero-foreground); line-height: 1.1;
}

.hero-description {
  margin-top: 1.5rem; color: var(--hero-muted);
  max-width: 36rem; line-height: 1.6; font-size: 15px;
}

/* ==========================================================================
   CASINO GRID
   ========================================================================== */
.casino-grid-header {
  background-color: var(--header-bg);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.casino-grid-icon {
  width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
  background: hsla(38, 85%, 55%, 0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.casino-grid-icon svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--accent); stroke: var(--accent);
}

.casino-grid-title {
  font-size: 1.5rem; font-weight: 700;
  color: var(--header-foreground);
}

.casino-grid-subtitle {
  font-size: 0.75rem; color: hsla(0, 0%, 100%, 0.5);
}

.casino-grid-wrapper {
  max-width: 100%; margin: 0 auto;
}

.casino-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}

.casino-card {
  position: relative; border-radius: 0.75rem;
  border: 1px solid var(--border);
  background-color: var(--header-bg);
  overflow: hidden; transition: all 0.3s ease;
  display: flex; flex-direction: column;
}

.casino-card:hover {
  border-color: hsla(210, 65%, 42%, 0.5);
}

.casino-rank {
  position: absolute; top: 0.5rem; left: 0.5rem; z-index: 10;
  width: 1.75rem; height: 1.75rem; border-radius: 0.375rem;
  background-color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}

.casino-rank span {
  font-size: 0.75rem; font-weight: 900;
  color: var(--primary-foreground);
}

.casino-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
}

.casino-logo-wrap img {
  width: 9rem; height: 5rem; object-fit: contain;
}

.casino-logo-fallback {
  font-size: 2.25rem; font-weight: 400; color: white;
}

.casino-card-body {
  display: flex; flex-direction: column; flex: 1; padding: 0.75rem;
}

.casino-name {
  font-size: 1rem; font-weight: 600; color: white; text-align: center;
}

.casino-stars {
  display: flex; align-items: center; justify-content: center;
  gap: 0.25rem; margin-top: 0.375rem;
}

.casino-stars svg {
  width: 0.875rem; height: 0.875rem;
}

.casino-stars svg.filled {
  fill: var(--accent); color: var(--accent); stroke: var(--accent);
}

.casino-stars svg.empty {
  fill: none; color: hsla(0, 0%, 100%, 0.2); stroke: hsla(0, 0%, 100%, 0.2);
}

.casino-rating {
  font-size: 0.75rem; font-weight: 700;
  color: hsla(0, 0%, 100%, 0.6); margin-left: 0.25rem;
}

.casino-bonus {
  font-size: 0.75rem; font-weight: 700; color: var(--accent);
  text-align: center; margin-top: 0.75rem; line-height: 1.4;
  min-height: 2.5rem;
}

.casino-cta {
  margin-top: auto; padding-top: 1rem;
}

.casino-cta a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.625rem;
  background: linear-gradient(to right, var(--accent), var(--accent-light));
  color: var(--accent-foreground); font-weight: 700;
  border-radius: 0.5rem; transition: filter 0.2s;
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.casino-cta a:hover {
  filter: brightness(1.1);
}

.casino-cta a svg {
  width: 0.875rem; height: 0.875rem;
}

/* ==========================================================================
   ABOUT US SECTION
   ========================================================================== */
.section-heading-bar {
  font-size: 1.875rem; font-weight: 800;
  color: var(--header-foreground);
  background-color: var(--header-bg);
  padding: 1rem 1.5rem; border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.about-grid {
  display: grid; gap: 2rem;
}

.about-text p {
  font-size: 1rem; color: var(--foreground); line-height: 1.7; margin-bottom: 1rem;
}

.about-team-row {
  display: flex; align-items: center; gap: 1.25rem; padding-top: 1rem;
}

.team-photos {
  display: flex;
}

.team-photos img {
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  object-fit: cover; border: 2px solid var(--background);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-left: -0.75rem;
}

.team-photos img:first-child {
  margin-left: 0;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 0.75rem;
  background-color: var(--primary); color: var(--primary-foreground);
  font-size: 0.875rem; font-weight: 700; transition: filter 0.2s;
  box-shadow: 0 10px 15px -3px hsla(210, 65%, 42%, 0.2);
  text-decoration: none;
}

.btn-primary:hover { filter: brightness(1.1); }

.btn-primary svg { width: 1rem; height: 1rem; }

.highlight-card {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem;
  border-radius: 0.75rem; background-color: var(--card);
  border: 1px solid var(--border); margin-bottom: 1rem;
}

.highlight-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  background: hsla(210, 65%, 42%, 0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.highlight-icon svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--primary); stroke: var(--primary);
}

.highlight-label {
  font-size: 0.875rem; font-weight: 700; color: var(--foreground);
}

.highlight-desc {
  font-size: 0.75rem; color: hsla(230, 25%, 12%, 0.6); margin-top: 0.125rem;
}

/* ==========================================================================
   HOW WE TEST
   ========================================================================== */
.how-we-test-intro p {
  font-size: 1rem; color: hsla(230, 25%, 12%, 0.6);
}

.test-step {
  display: flex; gap: 1.5rem; padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.test-step:last-child { border-bottom: none; }

.test-step-icon-col {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}

.test-step-icon {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background: hsla(210, 65%, 42%, 0.1);
  display: flex; align-items: center; justify-content: center;
}

.test-step-icon svg {
  width: 1.5rem; height: 1.5rem;
  color: var(--primary); stroke: var(--primary);
}

.test-step-line {
  width: 1px; flex: 1; background-color: var(--border); margin-top: 0.75rem;
}

.test-step-title {
  font-size: 1.25rem; font-weight: 800; color: var(--foreground); margin-bottom: 0.75rem;
}

.test-step-desc {
  font-size: 1rem; color: var(--foreground); line-height: 1.7;
}

/* ==========================================================================
   CATEGORY QUICK LINKS
   ========================================================================== */
.category-grid {
  display: grid; gap: 1.5rem;
}

.category-heading {
  font-size: 1.875rem; font-weight: 800; color: var(--foreground); margin-bottom: 0.5rem;
}

.category-subheading {
  font-size: 1rem; color: hsla(230, 25%, 12%, 0.6); margin-bottom: 2rem;
}

.category-card {
  position: relative; border-radius: 1rem;
  border: 1px solid var(--border); background-color: var(--card);
  overflow: hidden; transition: all 0.3s ease;
}

.category-card:hover {
  border-color: hsla(210, 65%, 42%, 0.4);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.category-card-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.5rem; background-color: var(--header-bg);
}

.category-card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
  background: hsla(0, 0%, 100%, 0.15);
  display: flex; align-items: center; justify-content: center;
}

.category-card-icon img { width: 2rem; height: 2rem; }

.category-card-title {
  font-size: 1.125rem; font-weight: 700; color: var(--header-foreground);
}

.category-card-body {
  padding: 1.5rem; padding-bottom: 1rem;
}

.category-card-desc {
  font-size: 0.875rem; color: var(--foreground); line-height: 1.6; margin-bottom: 1.25rem;
}

.category-article-item {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.875rem; color: hsla(230, 25%, 12%, 0.7); margin-bottom: 0.625rem;
}

.category-article-dot {
  width: 0.375rem; height: 0.375rem; border-radius: 9999px;
  background-color: var(--primary); flex-shrink: 0;
}

.category-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid hsla(210, 15%, 88%, 0.6);
  background: hsla(38, 85%, 55%, 0.1);
  transition: background-color 0.2s; text-decoration: none;
}

.category-card-footer:hover {
  background: hsla(38, 85%, 55%, 0.2);
}

.category-card-footer span {
  font-size: 0.875rem; font-weight: 700; color: var(--accent);
}

.category-card-footer svg {
  width: 1rem; height: 1rem;
  color: var(--accent); stroke: var(--accent);
  transition: transform 0.2s;
}

.category-card:hover .category-card-footer svg {
  transform: translateX(0.25rem);
}

/* ==========================================================================
   COMMUNITY REPORTS
   ========================================================================== */
.community-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background-color: var(--header-bg);
  padding: 1rem 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem;
}

.community-title {
  font-size: 1.875rem; font-weight: 800;
  color: var(--header-foreground); margin-bottom: 0.25rem;
}

.community-subtitle {
  font-size: 0.875rem; color: hsla(0, 0%, 98%, 0.6);
}

.btn-accent {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 2rem; border-radius: 9999px;
  background-color: var(--accent); color: var(--accent-foreground);
  font-size: 1rem; font-weight: 700;
  transition: background-color 0.2s;
  box-shadow: 0 10px 15px -3px hsla(38, 85%, 55%, 0.25);
  border: none; cursor: pointer;
}

.btn-accent:hover { background-color: hsla(38, 85%, 55%, 0.9); }

.btn-accent svg { width: 1.25rem; height: 1.25rem; }

.reports-grid {
  display: grid; gap: 1rem;
}

.report-card {
  border-radius: 1rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.25rem;
  transition: all 0.2s ease;
}

.report-card:hover {
  border-color: hsla(210, 65%, 42%, 0.3);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.report-user-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;
}

.report-user-info {
  display: flex; align-items: center; gap: 0.75rem;
}

.report-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background-color: var(--header-bg);
  display: flex; align-items: center; justify-content: center;
}

.report-avatar svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--header-foreground); stroke: var(--header-foreground);
}

.report-username {
  font-size: 0.875rem; font-weight: 700; color: var(--foreground); display: block;
}

.report-date {
  font-size: 0.75rem; color: hsla(230, 25%, 12%, 0.4);
}

.report-casino-name {
  font-size: 1.125rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.75rem;
}

.report-badges {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}

.badge-amount {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: hsla(145, 63%, 42%, 0.1); border-radius: 0.5rem;
  padding: 0.375rem 0.75rem; border: 1px solid hsl(145, 50%, 80%);
}

.badge-amount svg {
  width: 1rem; height: 1rem; color: hsl(145, 63%, 32%); stroke: hsl(145, 63%, 32%);
}

.badge-amount span {
  font-size: 1rem; font-weight: 800; color: hsl(145, 63%, 32%);
}

.badge-time {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: hsla(210, 65%, 42%, 0.05); border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
}

.badge-time svg {
  width: 1rem; height: 1rem; color: var(--primary); stroke: var(--primary);
}

.badge-time span {
  font-size: 0.875rem; font-weight: 700; color: var(--primary);
}

.badge-method {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600;
  background: hsla(48, 89%, 50%, 0.15); color: hsl(40, 70%, 35%);
  border: 1px solid hsl(48, 80%, 70%);
}

.badge-method svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   WITHDRAWAL COMPARISON TABLE
   ========================================================================== */
.comparison-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}

.comparison-title {
  font-size: 1.875rem; font-weight: 800; color: var(--foreground); margin-bottom: 0.5rem;
}

.comparison-subtitle {
  font-size: 1rem; color: hsla(230, 25%, 12%, 0.6);
}

.comparison-meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: hsla(230, 25%, 12%, 0.4);
}

.comparison-meta svg {
  width: 0.875rem; height: 0.875rem;
  color: var(--accent); stroke: var(--accent);
}

.search-input-wrap {
  position: relative; margin-bottom: 1.5rem;
}

.search-input-wrap svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  color: hsla(230, 25%, 12%, 0.3); stroke: hsla(230, 25%, 12%, 0.3);
}

.search-input {
  width: 100%; padding: 0.875rem 1rem 0.875rem 3rem;
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); color: var(--foreground);
  font-size: 0.875rem; font-family: inherit; outline: none; transition: all 0.2s;
}

.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px hsla(210, 65%, 42%, 0.1);
}

.search-input::placeholder { color: hsla(230, 25%, 12%, 0.3); }

.comparison-table {
  border-radius: 1rem; border: 1px solid var(--border);
  overflow: hidden; background-color: var(--card);
}

.comparison-table-head {
  display: none;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem; padding: 0.875rem 1.5rem;
  background-color: var(--header-bg);
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: hsla(0, 0%, 98%, 0.7);
}

.comparison-table-head span {
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
}

.comparison-table-head span:first-child { justify-content: flex-start; }

.comparison-table-head svg { width: 0.75rem; height: 0.75rem; }

.comparison-row {
  padding: 1rem 1.5rem; transition: background-color 0.2s;
  border-bottom: 1px solid hsla(210, 15%, 88%, 0.6);
}

.comparison-row:last-child { border-bottom: none; }

.comparison-row:hover { background-color: hsla(210, 12%, 92%, 0.3); }

.comparison-row-desktop {
  display: none;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem; align-items: center;
}

.comparison-casino-info {
  display: flex; align-items: center; gap: 0.75rem;
}

.rank-badge {
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

.rank-badge.gold { background-color: hsl(48, 89%, 55%); color: hsl(40, 70%, 20%); }
.rank-badge.silver { background-color: hsl(0, 0%, 80%); color: hsl(0, 0%, 35%); }
.rank-badge.bronze { background-color: hsla(25, 55%, 45%, 0.8); color: white; }
.rank-badge.default { background-color: hsla(210, 65%, 42%, 0.1); color: var(--primary); }
.rank-badge svg { width: 0.875rem; height: 0.875rem; }

.comparison-casino-name {
  font-size: 0.875rem; font-weight: 700; color: var(--foreground);
}

.comparison-avg {
  font-size: 0.875rem; font-weight: 800; color: var(--primary); text-align: center;
}

.comparison-time {
  font-size: 0.875rem; color: hsla(230, 25%, 12%, 0.7); text-align: center;
}

.comparison-row-mobile { display: block; }

.comparison-mobile-top {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}

.comparison-mobile-avg {
  margin-left: auto; font-size: 0.875rem; font-weight: 800; color: var(--primary);
}

.comparison-mobile-methods {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}

.comparison-method-box {
  display: flex; flex-direction: column; align-items: center;
  border-radius: 0.5rem; background: hsla(210, 12%, 92%, 0.5);
  padding: 0.5rem 0.25rem;
}

.comparison-method-label {
  font-size: 0.625rem; font-weight: 600; color: hsla(230, 25%, 12%, 0.5);
  display: flex; align-items: center; gap: 0.25rem;
}

.comparison-method-label svg { width: 0.625rem; height: 0.625rem; }

.comparison-method-value {
  font-size: 0.75rem; font-weight: 700; color: var(--foreground); margin-top: 0.125rem;
}

.comparison-empty {
  padding: 2rem 1.5rem; text-align: center;
  font-size: 0.875rem; color: hsla(230, 25%, 12%, 0.5);
}

/* ==========================================================================
   RECENTLY TESTED
   ========================================================================== */
.tested-grid { display: grid; gap: 1rem; }

.tested-card {
  border-radius: 1rem; border: 1px solid var(--border);
  background-color: var(--card); overflow: hidden;
  transition: all 0.2s ease;
}

.tested-card:hover {
  border-color: hsla(210, 65%, 42%, 0.3);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tested-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.25rem; background-color: var(--header-bg);
}

.tested-card-left { display: flex; align-items: center; gap: 0.75rem; }

.tested-rank {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: hsla(0, 0%, 100%, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--header-foreground);
}

.tested-casino-name {
  font-size: 1.125rem; font-weight: 700; color: var(--header-foreground);
}

.tested-status {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: hsla(145, 63%, 42%, 0.2);
}

.tested-status svg {
  width: 0.875rem; height: 0.875rem;
  color: hsl(145, 63%, 72%); stroke: hsl(145, 63%, 72%);
}

.tested-status span {
  font-size: 0.6875rem; font-weight: 700; color: hsl(145, 63%, 72%);
}

.tested-card-body { padding: 1.25rem; }

.tested-badges {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}

.tested-time-badge {
  display: flex; align-items: center; gap: 0.375rem;
  background: hsla(210, 65%, 42%, 0.05); border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.tested-time-badge svg {
  width: 1rem; height: 1rem; color: var(--primary); stroke: var(--primary);
}

.tested-time-badge span {
  font-size: 1.125rem; font-weight: 800; color: var(--primary);
}

.tested-method-badge {
  display: flex; align-items: center; gap: 0.375rem;
  background: hsla(48, 89%, 50%, 0.15); border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; border: 1px solid hsl(48, 80%, 70%);
}

.tested-method-badge svg {
  width: 1rem; height: 1rem; color: hsl(40, 70%, 35%); stroke: hsl(40, 70%, 35%);
}

.tested-method-badge span {
  font-size: 0.875rem; font-weight: 700; color: hsl(40, 70%, 35%);
}

.tested-date {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: var(--foreground);
}

.tested-date svg { width: 0.875rem; height: 0.875rem; }
.tested-date span { font-weight: 500; }

/* ==========================================================================
   LATEST ARTICLES
   ========================================================================== */
.articles-grid { display: grid; gap: 1.5rem; }

.articles-title {
  font-size: 1.875rem; font-weight: 800; color: var(--foreground); margin-bottom: 1.5rem;
}

.article-card {
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: 1rem; overflow: hidden; transition: all 0.3s ease;
  display: block; text-decoration: none;
}

.article-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: hsla(210, 65%, 42%, 0.3);
}

.article-thumb {
  width: 100%; aspect-ratio: 5 / 3; background-color: var(--muted); overflow: hidden;
}

.article-thumb img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;
}

.article-card:hover .article-thumb img { transform: scale(1.05); }

.article-card-body { padding: 1.25rem; }

.article-meta {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.75rem; color: hsla(230, 25%, 12%, 0.5); margin-bottom: 0.75rem;
}

.article-card-title {
  font-size: 1.125rem; font-weight: 700; color: var(--foreground);
  margin-bottom: 0.5rem; line-height: 1.4; transition: color 0.2s;
}

.article-card:hover .article-card-title { color: var(--primary); }

.article-excerpt {
  font-size: 0.875rem; color: hsla(230, 25%, 12%, 0.7); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.article-read-more {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-top: 1rem; font-size: 0.875rem; font-weight: 600;
  color: var(--primary); transition: gap 0.2s;
}

.article-card:hover .article-read-more { gap: 0.5rem; }

/* ==========================================================================
   RESPONSIBLE GAMBLING BANNER
   ========================================================================== */
.rg-section {
  margin-left: 1rem; margin-right: 1rem;
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--border); margin-bottom: 2rem;
}

.rg-banner {
  position: relative; border-radius: 1rem;
  border: 1px solid hsla(210, 65%, 42%, 0.2);
  overflow: hidden; background-color: var(--header-bg);
}

.rg-banner-layers {
  position: absolute; inset: 0; pointer-events: none;
}

.rg-orb-1 {
  position: absolute; top: -4rem; right: -4rem;
  width: 12rem; height: 12rem; border-radius: 9999px;
  background: hsla(210, 65%, 42%, 0.1); filter: blur(80px);
}

.rg-orb-2 {
  position: absolute; bottom: -2.5rem; left: -2.5rem;
  width: 10rem; height: 10rem; border-radius: 9999px;
  background: hsla(38, 85%, 55%, 0.08); filter: blur(60px);
}

.rg-shine {
  position: absolute; top: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(to right, transparent, hsla(210, 65%, 42%, 0.3), transparent);
}

.rg-content {
  position: relative; z-index: 10; padding: 2rem;
}

.rg-top-row {
  display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem;
}

.rg-icon {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background: hsla(38, 85%, 55%, 0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.rg-icon svg {
  width: 1.5rem; height: 1.5rem; color: var(--accent); stroke: var(--accent);
}

.rg-title {
  font-size: 1.5rem; font-weight: 800; color: white; margin-bottom: 0.5rem;
}

.rg-desc {
  font-size: 0.875rem; color: hsla(0, 0%, 100%, 0.7); line-height: 1.6;
}

.rg-helplines { display: grid; gap: 1rem; margin-bottom: 1.5rem; }

.rg-helpline {
  display: flex; align-items: center; gap: 0.75rem;
  border-radius: 0.75rem;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  padding: 0.875rem 1rem; transition: all 0.2s; text-decoration: none;
}

.rg-helpline:hover {
  background: hsla(0, 0%, 100%, 0.12);
  border-color: hsla(0, 0%, 100%, 0.2);
}

.rg-helpline-name {
  font-size: 0.875rem; font-weight: 600; color: white; display: block;
}

.rg-helpline-desc { font-size: 0.75rem; color: hsla(0, 0%, 100%, 0.5); }

.rg-helpline-arrow { margin-left: auto; flex-shrink: 0; }

.rg-helpline-arrow svg {
  width: 0.875rem; height: 0.875rem;
  color: hsla(0, 0%, 100%, 0.3); stroke: hsla(0, 0%, 100%, 0.3);
  transition: color 0.2s;
}

.rg-helpline:hover .rg-helpline-arrow svg {
  color: hsla(0, 0%, 100%, 0.6); stroke: hsla(0, 0%, 100%, 0.6);
}

.rg-footer-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}

.rg-phone {
  display: flex; align-items: center; gap: 0.5rem;
  color: hsla(0, 0%, 100%, 0.5); font-size: 0.875rem;
}

.rg-phone svg { width: 1rem; height: 1rem; }
.rg-phone strong { color: white; font-weight: 600; }
.rg-divider { color: hsla(0, 0%, 100%, 0.2); }

.rg-policy-link {
  font-size: 0.875rem; font-weight: 600; color: var(--accent);
  text-decoration: none; transition: text-decoration 0.2s;
}

.rg-policy-link:hover { text-decoration: underline; }

.rg-bottom-bar {
  position: relative; z-index: 10;
  padding: 0.75rem 2rem;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  background: hsla(0, 0%, 100%, 0.03);
  display: flex; align-items: center; gap: 0.75rem;
}

.rg-18 { font-size: 0.6875rem; font-weight: 700; color: hsla(0, 0%, 100%, 0.4); }
.rg-license { font-size: 0.6875rem; color: hsla(0, 0%, 100%, 0.3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--header-bg); color: var(--header-foreground); margin-top: 3rem;
}

.footer-inner {
  max-width: 1560px; margin: 0 auto; padding: 3rem 1rem;
}

.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}

.footer-brand-desc {
  color: hsla(0, 0%, 98%, 0.6); font-size: 0.875rem; line-height: 1.6;
}

.footer-col-title {
  font-weight: 700; color: var(--header-foreground); margin-bottom: 1rem;
}

.footer-links li { margin-bottom: 0.5rem; }

.footer-links a {
  color: hsla(0, 0%, 98%, 0.6); font-size: 0.875rem;
  transition: color 0.2s; text-decoration: none;
}

.footer-links a:hover { color: var(--header-foreground); }

.footer-bottom {
  border-top: 1px solid hsla(0, 0%, 98%, 0.15);
  margin-top: 2rem; padding-top: 1.5rem; text-align: center;
}

.footer-copyright {
  color: hsla(0, 0%, 98%, 0.5); font-size: 0.75rem;
}

/* ==========================================================================
   SVG ICONS
   ========================================================================== */
.icon {
  display: inline-block; vertical-align: middle; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 640px) {
  .header-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .site-logo span { font-size: 1.875rem; }
  .hero-section { padding: 3.5rem; }
  .hero-title { font-size: 2.25rem; }
  .reports-grid { grid-template-columns: repeat(2, 1fr); }
  .tested-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .rg-helplines { grid-template-columns: repeat(3, 1fr); }
  .rg-title { font-size: 1.875rem; }
}

@media (min-width: 768px) {
  .casino-grid-wrapper { max-width: 85%; margin: 0 auto; }
  .casino-grid { gap: 1rem; }
  .casino-card-body { padding: 1rem; }
  .casino-name { font-size: 1.125rem; }
  .casino-bonus { font-size: 0.875rem; }
  .casino-logo-wrap img { width: 11rem; height: 6rem; }
  .about-grid { grid-template-columns: 2fr 1fr; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .comparison-table-head { display: grid; }
  .comparison-row-desktop { display: grid; }
  .comparison-row-mobile { display: none; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .site-main { padding-bottom: 3rem; }
  .rg-content { padding: 2rem 2.5rem; }
}

@media (min-width: 1024px) {
  .header-inner { padding-left: 2rem; padding-right: 2rem; }
  .nav-desktop { display: flex; }
  .menu-toggle { display: none; }
  .casino-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-title { font-size: 3.4rem; }
  .hero-section { padding: 3.5rem; }
  .reports-grid { grid-template-columns: repeat(3, 1fr); }
  .tested-grid { grid-template-columns: repeat(3, 1fr); }
  .articles-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { padding-left: 2rem; padding-right: 2rem; }
  .rg-content { padding: 2.5rem; }
  .rg-bottom-bar { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ==========================================================================
   SECONDARY PAGE HERO (shorter variant)
   ========================================================================== */
.page-hero {
  position: relative; margin: 0.75rem 1rem 0;
  min-height: 280px; overflow: hidden; border-radius: 1rem;
  border: 1px solid hsla(0, 0%, 98%, 0.1);
  background: linear-gradient(135deg, hsl(210, 55%, 18%) 0%, hsl(210, 55%, 28%) 30%, hsl(215, 60%, 22%) 60%, hsl(210, 50%, 16%) 100%);
  padding: 2.5rem; display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.page-hero-short { min-height: 240px; }

.page-hero .hero-content { position: relative; z-index: 10; max-width: 48rem; }

.page-hero-title {
  font-size: 1.875rem; font-weight: 900;
  color: var(--hero-foreground); line-height: 1.1;
}

.page-hero-subtitle {
  margin-top: 1rem; color: var(--hero-muted);
  max-width: 36rem; line-height: 1.6; font-size: 15px;
}

/* ==========================================================================
   PROSE / ARTICLE CONTENT
   ========================================================================== */
.prose-content {
  margin: 0 1rem;
}

.prose-content p {
  color: var(--muted-foreground); line-height: 1.7; margin-bottom: 1rem;
  font-size: 1rem;
}

.prose-content h2 {
  font-size: 1.5rem; font-weight: 900; color: var(--foreground);
  margin-top: 3rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.prose-content h3 {
  font-size: 1.25rem; font-weight: 700; color: var(--foreground);
  margin-top: 2rem; margin-bottom: 0.75rem;
}

.prose-content a {
  color: var(--primary); text-decoration: none;
}

.prose-content a:hover { text-decoration: underline; }

.prose-content strong { color: var(--foreground); }

/* ==========================================================================
   CONTENT CARDS (used across secondary pages)
   ========================================================================== */
.content-card {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.5rem;
}

.content-card-row {
  display: flex; gap: 1rem;
}

.content-card-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.content-card-icon.accent-bg { background: hsla(38, 85%, 55%, 0.15); }
.content-card-icon.primary-bg { background: hsla(210, 65%, 42%, 0.15); }

.content-card-icon svg {
  width: 1.25rem; height: 1.25rem;
}

.content-card-icon.accent-bg svg { color: var(--accent); stroke: var(--accent); }
.content-card-icon.primary-bg svg { color: var(--primary); stroke: var(--primary); }

.content-card-title {
  font-size: 1.125rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.25rem;
}

.content-card-desc {
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
}

.cards-grid-2 { display: grid; gap: 1.25rem; }
.cards-grid-3 { display: grid; gap: 1.25rem; }

/* ==========================================================================
   SECTION TITLES (secondary pages)
   ========================================================================== */
.section-title {
  font-size: 1.5rem; font-weight: 900; color: var(--foreground);
  margin-bottom: 1.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.section-title-with-icon {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section-title-with-icon svg {
  width: 1.75rem; height: 1.75rem; color: var(--accent); stroke: var(--accent);
}

.section-title-with-icon h2 {
  font-size: 1.5rem; font-weight: 900; color: var(--foreground);
}

.section-intro {
  font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.6;
  margin-bottom: 2rem;
}

/* ==========================================================================
   TEAM MEMBERS (About Us)
   ========================================================================== */
.team-grid { display: grid; gap: 1.25rem; }

.team-card {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.5rem;
}

.team-card-header {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;
}

.team-card-header img {
  width: 4rem; height: 4rem; border-radius: 0.75rem; object-fit: cover;
}

.team-card-name {
  font-size: 15px; font-weight: 700; color: var(--foreground);
}

.team-card-role {
  font-size: 0.75rem; font-weight: 600; color: var(--accent);
}

.team-card-bio {
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-category-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 1rem 2.5rem;
}

.faq-category-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  border: 1px solid var(--border); background-color: var(--card);
  font-size: 0.875rem; font-weight: 600; color: var(--foreground);
  transition: background-color 0.2s; text-decoration: none;
}

.faq-category-link:hover { background-color: var(--muted); }

.faq-category-link svg {
  width: 1rem; height: 1rem; color: var(--accent); stroke: var(--accent);
}

.faq-category-section { margin-bottom: 2.5rem; }

.faq-category-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;
}

.faq-category-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;
  background: hsla(38, 85%, 55%, 0.15);
  display: flex; align-items: center; justify-content: center;
}

.faq-category-icon svg {
  width: 1.25rem; height: 1.25rem; color: var(--accent); stroke: var(--accent);
}

.faq-category-title {
  font-size: 1.5rem; font-weight: 900; color: var(--foreground);
}

.faq-item {
  border: 1px solid var(--border); border-radius: 0.75rem;
  background-color: var(--card); overflow: hidden; margin-bottom: 0.75rem;
}

.faq-question {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 1.25rem; text-align: left; cursor: pointer;
  background: none; border: none; font-family: inherit;
  transition: background-color 0.2s;
}

.faq-question:hover { background-color: var(--muted); }

.faq-question span {
  font-size: 15px; font-weight: 700; color: var(--foreground); line-height: 1.4;
}

.faq-question svg {
  width: 1.25rem; height: 1.25rem; flex-shrink: 0;
  color: var(--muted-foreground); stroke: var(--muted-foreground);
  transition: transform 0.2s;
}

.faq-item.open .faq-question svg { transform: rotate(180deg); }

.faq-answer {
  display: none; padding: 0 1.25rem 1.25rem;
}

.faq-item.open .faq-answer { display: block; }

.faq-answer p {
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
}

/* ==========================================================================
   CONTACT PAGE CARDS
   ========================================================================== */
.contact-grid { display: grid; gap: 1.25rem; }

.contact-card {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.5rem;
  display: flex; flex-direction: column;
}

.contact-card-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}

.contact-card-desc {
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
  flex: 1; margin-bottom: 0.75rem;
}

.contact-card-email {
  font-size: 0.875rem; font-weight: 600; color: var(--primary);
  word-break: break-all;
}

.contact-card-email:hover { text-decoration: underline; }

.response-time-grid { display: grid; gap: 1rem; }

.response-time-card {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.25rem; text-align: center;
}

.response-time-label {
  font-size: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.25rem;
}

.response-time-value {
  font-size: 1.125rem; font-weight: 700; color: var(--foreground);
}

/* ==========================================================================
   COMMITMENT CARD (Our Mission)
   ========================================================================== */
.commitment-card {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background-color: var(--card); padding: 1.25rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
}

.commitment-card svg {
  width: 1.25rem; height: 1.25rem; color: var(--accent);
  stroke: var(--accent); flex-shrink: 0; margin-top: 0.125rem;
}

.commitment-card p {
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
}

/* Accent bordered card (Join Us box) */
.accent-box {
  border-radius: 0.75rem;
  border: 1px solid hsla(38, 85%, 55%, 0.3);
  background: hsla(38, 85%, 55%, 0.05);
  padding: 2rem;
}

/* ==========================================================================
   RESPONSIVE (secondary pages)
   ========================================================================== */
@media (min-width: 640px) {
  .page-hero { padding: 3.5rem; }
  .page-hero-title { font-size: 2.25rem; }
  .cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .response-time-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .prose-content h2 { font-size: 1.875rem; }
  .response-time-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .page-hero-title { font-size: 3.4rem; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .response-time-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs {
  padding: 1rem 1.5rem; font-size: 0.875rem;
  color: var(--muted-foreground);
  display: flex; align-items: center; gap: 0.5rem;
}
.breadcrumbs a {
  color: var(--muted-foreground); text-decoration: none; transition: color 0.2s;
}
.breadcrumbs a:hover { color: var(--foreground); }
.breadcrumbs .sep { color: var(--muted-foreground); }
.breadcrumbs .current { color: var(--foreground); }

/* ==========================================================================
   ARTICLE HERO (author row)
   ========================================================================== */
.hero-author-row {
  position: relative; z-index: 10; margin-top: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.hero-author-row img {
  width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; object-fit: cover;
}
.hero-author-name {
  font-size: 0.875rem; font-weight: 600; color: var(--hero-foreground);
}
.hero-author-date {
  font-size: 0.75rem; color: var(--hero-muted);
}

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
.toc-wrapper {
  margin: 1.5rem 1rem 0; border-radius: 1rem;
  border: 1px solid var(--header-bg);
  background-color: var(--header-bg); overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.toc-summary {
  padding: 1rem 1.5rem; background-color: var(--header-bg);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}
.toc-summary::-webkit-details-marker { display: none; }
.toc-summary-left {
  display: flex; align-items: center; gap: 0.625rem;
}
.toc-summary-left svg {
  width: 1rem; height: 1rem; color: var(--accent); stroke: var(--accent);
}
.toc-summary-text {
  font-size: 0.875rem; font-weight: 700; color: white;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.toc-chevron {
  width: 1rem; height: 1rem; color: hsla(0,0%,100%,0.4);
  stroke: hsla(0,0%,100%,0.4);
  transition: transform 0.2s;
}
details.toc-wrapper[open] .toc-chevron { transform: rotate(180deg); }
.toc-list {
  padding: 1rem 1.5rem; border-top: 1px solid hsla(0,0%,100%,0.1);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  list-style: none;
}
.toc-list li a {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: hsla(0,0%,100%,0.6);
  text-decoration: none; transition: color 0.2s;
}
.toc-list li a:hover { color: var(--accent); }
.toc-number {
  width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;
  background: hsla(38,85%,55%,0.15); color: var(--accent);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.toc-list li a:hover .toc-number {
  background: var(--accent); color: var(--accent-foreground);
}

/* ==========================================================================
   ARTICLE CONTENT AREA
   ========================================================================== */
.article-content-card {
  margin: 2rem 1rem 0; border-radius: 1rem;
  border: 1px solid var(--border); background-color: var(--card);
  padding: 1.5rem;
}
.article-content-card h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--foreground);
  margin-top: 2.5rem; margin-bottom: 1rem;
}
.article-content-card h2:first-child { margin-top: 0; }
.article-content-card h3 {
  font-size: 1.125rem; font-weight: 700; color: var(--foreground);
  margin-top: 1.5rem; margin-bottom: 0.75rem;
}
.article-content-card p {
  font-size: 0.875rem; color: var(--foreground); line-height: 1.7;
  margin-bottom: 1rem;
}
.article-content-card a {
  color: var(--primary); text-decoration: none;
}
.article-content-card a:hover { text-decoration: underline; }
.article-content-card strong { color: var(--foreground); }
.article-content-card ul, .article-content-card ol {
  margin-bottom: 1.5rem; padding-left: 1.5rem;
}
.article-content-card li {
  font-size: 0.875rem; color: var(--foreground); line-height: 1.7;
  margin-bottom: 0.5rem;
}

/* Article Tables */
.article-content-card .content-table-wrap {
  overflow-x: auto; margin-bottom: 1.5rem; border-radius: 0.75rem;
  border: 1px solid var(--border);
}
.article-content-card table {
  width: 100%; font-size: 0.875rem; border-collapse: collapse;
}
.article-content-card thead tr {
  background-color: var(--header-bg);
}
.article-content-card th {
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.75rem; font-weight: 700; color: hsla(0,0%,100%,0.8);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.article-content-card tbody tr {
  border-top: 1px solid var(--border);
}
.article-content-card tbody tr:nth-child(even) {
  background: hsla(210,12%,92%,0.3);
}
.article-content-card tbody tr:nth-child(odd) {
  background: var(--card);
}
.article-content-card td {
  padding: 0.75rem 1rem; color: var(--foreground);
}
.article-content-card td:first-child {
  font-weight: 600; white-space: nowrap;
}

/* ==========================================================================
   ARTICLE FAQ (dark blue box)
   ========================================================================== */
.article-faq-box {
  margin-top: 2.5rem; border-radius: 1rem;
  border: 1px solid hsl(210,55%,35%);
  background-color: hsl(210,55%,28%); overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.article-faq-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(210,55%,32%);
  background: hsl(210,55%,24%);
}
.article-faq-title {
  font-size: 1.25rem; font-weight: 700; color: white;
  display: flex; align-items: center; gap: 0.625rem;
}
.article-faq-title-icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: hsla(38,85%,55%,0.2);
  display: flex; align-items: center; justify-content: center;
}
.article-faq-title-icon svg {
  width: 1rem; height: 1rem; color: var(--accent); stroke: var(--accent);
}
.article-faq-body {
  padding: 1.5rem;
}
.article-faq-item {
  border-radius: 0.75rem; border: 1px solid hsl(210,50%,34%);
  overflow: hidden; background: hsl(210,55%,32%);
  margin-bottom: 0.75rem; transition: background-color 0.2s;
}
.article-faq-item:hover { background: hsl(210,55%,35%); }
.article-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: hsla(0,0%,100%,0.9);
}
.article-faq-q .faq-num {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background: var(--accent); color: var(--accent-foreground);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 0.75rem;
}
.article-faq-q .faq-chevron {
  width: 1rem; height: 1rem; flex-shrink: 0; margin-left: 0.5rem;
  color: hsla(0,0%,100%,0.4); stroke: hsla(0,0%,100%,0.4);
  transition: transform 0.2s;
}
.article-faq-item.open .faq-chevron { transform: rotate(180deg); }
.article-faq-a {
  display: none; padding: 0 1.25rem 1rem 3.5rem;
  font-size: 0.875rem; color: hsla(0,0%,100%,0.65); line-height: 1.6;
}
.article-faq-item.open .article-faq-a { display: block; }

/* ==========================================================================
   AUTHOR BOX
   ========================================================================== */
.author-box {
  margin: 2rem 1rem 2rem; border-radius: 1rem;
  border: 1px solid hsl(210,55%,35%);
  background: hsl(210,55%,28%); overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.author-box-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid hsl(210,55%,32%);
  background: hsl(210,55%,24%);
}
.author-box-header p {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: hsla(0,0%,100%,0.5);
}
.author-box-body {
  padding: 1.5rem 2rem;
}
.author-box-row {
  display: flex; flex-direction: column; gap: 1.25rem;
}
.author-box-img {
  width: 5rem; height: 5rem; border-radius: 1rem;
  object-fit: cover; flex-shrink: 0;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.author-box-name {
  font-size: 1.125rem; font-weight: 700; color: white;
}
.author-box-role {
  font-size: 0.75rem; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem;
}
.author-box-role svg {
  width: 0.75rem; height: 0.75rem;
}
.author-box-bio {
  font-size: 0.875rem; color: hsla(0,0%,100%,0.65); line-height: 1.6;
}
.author-box-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;
}
.author-box-tag {
  padding: 0.25rem 0.75rem; border-radius: 9999px;
  background: hsla(38,85%,55%,0.15); color: var(--accent);
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid hsla(38,85%,55%,0.25);
}

/* ==========================================================================
   DARK FAQ ACCORDION (inside article content)
   ========================================================================== */
.dark-faq {
  margin-top: 2.5rem; border-radius: 1rem;
  border: 1px solid hsl(210, 55%, 35%);
  background-color: hsl(210, 55%, 28%);
  overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.dark-faq-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(210, 55%, 32%);
  background-color: hsl(210, 55%, 24%);
}

.dark-faq-title {
  font-size: 1.25rem; font-weight: 700; color: white;
  display: flex; align-items: center; gap: 0.625rem;
}

.dark-faq-title-icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: hsla(38, 85%, 55%, 0.2);
  display: flex; align-items: center; justify-content: center;
}

.dark-faq-title-icon svg {
  width: 1rem; height: 1rem; color: var(--accent); stroke: var(--accent);
}

.dark-faq-body {
  padding: 1.5rem;
}

.dark-faq-item {
  border-radius: 0.75rem;
  border: 1px solid hsl(210, 50%, 34%);
  overflow: hidden; margin-bottom: 0.75rem;
  background-color: hsl(210, 55%, 32%);
  transition: background-color 0.2s;
}

.dark-faq-item:hover { background-color: hsl(210, 55%, 35%); }

.dark-faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; cursor: pointer;
  font-size: 0.875rem; font-weight: 600; color: hsla(0,0%,100%,0.9);
  list-style: none;
}

.dark-faq-item summary::-webkit-details-marker { display: none; }

.dark-faq-item-left {
  display: flex; align-items: center; gap: 0.75rem;
}

.dark-faq-num {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  background-color: var(--accent); color: var(--accent-foreground);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

.dark-faq-chevron {
  width: 1rem; height: 1rem; flex-shrink: 0; margin-left: 0.5rem;
  color: hsla(0,0%,100%,0.4); stroke: hsla(0,0%,100%,0.4);
  transition: transform 0.2s;
}

.dark-faq-item[open] .dark-faq-chevron { transform: rotate(180deg); }

.dark-faq-answer {
  padding: 0 1.25rem 1rem 3.5rem;
  font-size: 0.875rem; color: hsla(0,0%,100%,0.65); line-height: 1.6;
}

/* ==========================================================================
   RESPONSIVE (article pages)
   ========================================================================== */
@media (min-width: 640px) {
  .author-box-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .article-content-card { padding: 2.5rem; }
}

/* ==========================================================================
   CASINO REVIEW PAGE (Betfair-style)
   ========================================================================== */
/* Review hero - special gradient */
.review-hero {
  position: relative; margin: 0.75rem 1rem 0; overflow: hidden; border-radius: 1rem;
  border: 1px solid hsla(0,0%,98%,0.1);
  background: linear-gradient(135deg, var(--header-bg) 0%, hsl(210,55%,28%) 40%, hsl(38,85%,20%) 100%);
  padding: 1.5rem; box-shadow: inset 0 1px 0 hsla(0,0%,98%,0.08);
}

.review-hero-grid {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; gap: 1rem;
}

.review-hero h1 {
  font-size: 1.875rem; font-weight: 900; color: var(--hero-foreground); line-height: 1.1;
}

.review-hero-desc {
  color: var(--hero-muted); line-height: 1.6; font-size: 15px;
}

.review-hero-logo {
  width: 100%; height: 10rem; border-radius: 0.75rem; overflow: hidden;
  border: 1px solid hsla(0,0%,98%,0.1); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.review-hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.review-payment-icons {
  display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.25rem;
}

.review-payment-icon {
  width: 3rem; height: 3rem; border-radius: 0.5rem;
  background: hsla(0,0%,98%,0.1); border: 1px solid hsla(0,0%,98%,0.15);
  padding: 0.375rem; display: flex; align-items: center; justify-content: center;
}

.review-payment-icon img { width: 100%; height: 100%; object-fit: contain; }

.review-hero-buttons {
  display: flex; gap: 0.75rem; margin-top: 1rem;
}

.review-visit-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 0.75rem 1.5rem; border-radius: 0.75rem;
  background: var(--accent); color: var(--accent-foreground);
  border: 1px solid var(--accent); font-weight: 700; font-size: 0.875rem;
  text-decoration: none; transition: filter 0.2s;
}

.review-visit-btn:hover { filter: brightness(1.1); }
.review-visit-btn svg { width: 1rem; height: 1rem; }

.review-users-avg {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.75rem 1.5rem; border-radius: 0.75rem;
  background: var(--accent); color: var(--accent-foreground);
  border: 1px solid var(--accent); font-weight: 700; font-size: 0.875rem;
}

.review-users-avg svg { width: 1.125rem; height: 1.125rem; }
.review-users-avg-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; display: block; }
.review-users-avg-value { font-size: 1.125rem; font-weight: 900; line-height: 1.1; }

.review-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  font-size: 0.75rem; color: var(--hero-muted); margin-top: 1rem;
}

.review-hero-meta span { display: flex; align-items: center; gap: 0.375rem; }
.review-hero-meta svg { width: 0.875rem; height: 0.875rem; }

/* Stats bar */
.review-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin: 0 1rem; margin-top: 1.5rem;
}

.review-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 0.5rem; border-radius: 0.75rem;
  border: 1px solid var(--border); background: var(--card); text-align: center;
}

.review-stat svg { width: 1.25rem; height: 1.25rem; margin-bottom: 0.375rem; }
.review-stat-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.review-stat-value { font-size: 1rem; font-weight: 800; color: var(--foreground); margin-top: 0.125rem; }
.review-stat.highlight { border-color: var(--accent); }
.review-stat.highlight svg { color: var(--accent); stroke: var(--accent); }

/* Pros & Cons */
.pros-cons-grid { display: grid; gap: 1rem; margin: 0 1rem; margin-top: 2rem; }

.pros-card, .cons-card {
  border-radius: 0.75rem; background: var(--card); padding: 1.25rem 1.5rem;
  position: relative; overflow: hidden;
}

.pros-card { border: 2px solid hsla(145,63%,42%,0.2); }
.cons-card { border: 2px solid hsla(0,84%,60%,0.2); }

.pros-card::before, .cons-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
}

.pros-card::before { background: linear-gradient(to right, hsl(145,63%,42%), hsl(145,63%,52%)); }
.cons-card::before { background: linear-gradient(to right, hsl(0,84%,60%), hsla(0,84%,60%,0.7)); }

.pros-card h2, .cons-card h2 {
  font-size: 1rem; font-weight: 700; color: var(--foreground);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}

.pros-card li, .cons-card li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6;
  margin-bottom: 0.625rem;
}

.pros-card li span { color: hsl(145,63%,42%); font-weight: 700; margin-top: 0.125rem; flex-shrink: 0; }
.cons-card li span { color: hsl(0,84%,60%); font-weight: 700; margin-top: 0.125rem; flex-shrink: 0; }

/* Casino details tabs */
.review-details {
  margin: 0 1rem; margin-top: 2rem; border-radius: 0.75rem;
  border: 1px solid var(--border); background: var(--card); overflow: hidden;
}

.review-details-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  background: var(--header-bg);
}

.review-details-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--primary-foreground); }
.review-details-header p { font-size: 0.875rem; color: hsla(0,0%,98%,0.6); margin-top: 0.25rem; }

.review-tabs {
  display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border);
}

.review-tab {
  padding: 0.875rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; border-bottom: 2px solid transparent;
  color: var(--muted-foreground); background: none; border-top: none;
  border-left: none; border-right: none; cursor: pointer; transition: color 0.2s;
  font-family: inherit;
}

.review-tab:hover, .review-tab.active { color: var(--foreground); border-bottom-color: var(--foreground); }

.review-details-row {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
}

.review-details-row:last-child { border-bottom: none; }
.review-details-label { font-size: 0.875rem; color: var(--muted-foreground); font-weight: 500; }
.review-details-value { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.review-details-value a { color: var(--primary); }
.review-details-value a:hover { text-decoration: underline; }

/* Overall assessment */
.review-assessment {
  margin: 0 1rem; margin-top: 2rem; border-radius: 0.75rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.review-assessment-header {
  background: linear-gradient(135deg, var(--header-bg) 0%, var(--primary) 100%);
  padding: 1.5rem 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}

.review-score-box {
  width: 4rem; height: 4rem; border-radius: 1rem;
  background: hsla(0,0%,98%,0.1); border: 1px solid hsla(0,0%,98%,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.review-score-num { font-size: 1.5rem; font-weight: 900; color: var(--primary-foreground); line-height: 1; }

.review-score-stars { display: flex; margin-top: 0.25rem; }
.review-score-stars svg { width: 0.625rem; height: 0.625rem; }
.review-score-stars svg.filled { fill: var(--accent); color: var(--accent); stroke: var(--accent); }
.review-score-stars svg.half { fill: hsla(38,85%,55%,0.4); color: var(--accent); stroke: var(--accent); }

.review-assessment-title { font-size: 1.25rem; font-weight: 700; color: var(--primary-foreground); }
.review-assessment-sub { font-size: 0.875rem; color: hsla(0,0%,98%,0.6); margin-top: 0.25rem; }

.review-assessment-badges {
  display: flex; gap: 0.75rem; margin-left: auto;
}

.review-assessment-badge {
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  background: hsla(0,0%,98%,0.1); border: 1px solid hsla(0,0%,98%,0.05);
  text-align: center;
}

.review-assessment-badge-value { font-size: 0.875rem; font-weight: 700; color: var(--primary-foreground); display: block; line-height: 1.1; }
.review-assessment-badge-label { font-size: 0.625rem; color: hsla(0,0%,98%,0.5); }

.review-assessment-body {
  background: var(--card); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 0.75rem 0.75rem; padding: 1.5rem 2rem;
}

.review-assessment-body p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; }

/* Review comments section */
.review-section-header {
  border-radius: 0.75rem 0.75rem 0 0;
  background: var(--header-bg); padding: 1rem 1.5rem;
}

.review-section-header h2 {
  font-size: 1.125rem; font-weight: 700; color: white;
  display: flex; align-items: center; gap: 0.5rem;
}

.review-section-header h2 svg { width: 1.25rem; height: 1.25rem; }

.review-section-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 0.75rem 0.75rem; padding: 1rem;
}

.review-comment {
  border-radius: 0.75rem; border: 1px solid var(--border);
  background: var(--card); padding: 1.25rem 1.5rem; margin-bottom: 0.75rem;
}

.review-comment:last-child { margin-bottom: 0; }

.review-comment-header {
  display: flex; align-items: flex-start; gap: 0.75rem;
}

.review-comment-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: hsla(210,65%,42%,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.review-comment-avatar span { font-size: 0.875rem; font-weight: 700; color: var(--primary); }

.review-comment-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.review-comment-date { font-size: 0.75rem; color: var(--muted-foreground); }

.review-comment-badges {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
}

.review-badge {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 700;
}

.review-badge svg { width: 1.125rem; height: 1.125rem; }
.review-badge-time { background: hsla(210,65%,42%,0.1); border: 2px solid hsla(210,65%,42%,0.25); color: var(--foreground); }
.review-badge-time .val { color: var(--primary); font-weight: 900; }
.review-badge-time svg { color: var(--primary); stroke: var(--primary); }
.review-badge-method { background: hsla(48,89%,50%,0.15); border: 2px solid hsl(48,80%,70%); color: hsl(40,70%,35%); }
.review-badge-method svg { color: hsl(40,70%,35%); stroke: hsl(40,70%,35%); }
.review-badge-amount { background: hsla(145,63%,42%,0.1); border: 2px solid hsl(145,50%,70%); color: hsl(145,63%,32%); font-weight: 800; }

.review-comment-text { font-size: 0.875rem; color: var(--foreground); line-height: 1.6; margin-top: 0.5rem; }

/* Complaint status badges */
.complaint-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.complaint-resolved { background: hsla(145,63%,42%,0.1); color: hsl(145,63%,32%); }
.complaint-rejected { background: hsla(0,84%,60%,0.1); color: hsl(0,84%,60%); }
.complaint-pending { background: hsla(38,85%,55%,0.1); color: var(--accent); }

@media (min-width: 640px) {
  .review-hero { padding: 2.5rem; }
  .review-hero h1 { font-size: 2.5rem; }
  .review-details-row { flex-direction: row; align-items: flex-start; gap: 0; }
  .review-details-label { width: 12rem; flex-shrink: 0; }
}

@media (min-width: 768px) {
  .review-stats { grid-template-columns: repeat(6, 1fr); }
  .pros-cons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .review-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
  .review-hero h1 { font-size: 3rem; }
  .review-hero-logo { height: auto; aspect-ratio: 4/3; max-width: 440px; }
  .review-hero-logo img { object-fit: contain; padding: 1.5rem; }
  .review-hero-buttons { margin-top: 1rem; }
  .review-visit-btn { padding: 1rem 2.5rem; font-size: 1rem; }
  .review-users-avg { padding: 1rem 2.5rem; font-size: 1rem; }
}

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }

/* ==========================================================================
   WORDPRESS ADMIN BAR OFFSET
   ========================================================================== */
body.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}