/* ============================================================================
   CALDERA THEME — Pixelated Cyber-Playground Design System
   ============================================================================ */

:root {
  /* Colors */
  --color-basalt-canvas: #e2e2df;
  --color-ash-white: #f7f6f2;
  --color-abyssal-ink: #070607;
  --color-pure-white: #ffffff;
  --color-digital-orange: #fc5000;
  --color-cyber-violet: #524ae9;
  --color-pixel-glare: #f5f28e;

  /* Typography — Font Families */
  --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pp-neue-corp-compact-ultrabold: 'PP Neue Corp Compact Ultrabold', 'Bebas Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.25;
  --text-body: 16px;
  --leading-body: 1.55;
  --text-subheading: 30px;
  --leading-subheading: 1.11;
  --text-heading-sm: 32px;
  --leading-heading-sm: 0.95;
  --tracking-heading-sm: 0.02px;
  --text-heading: 56px;
  --leading-heading: 0.94;
  --tracking-heading: 0.02px;
  --text-display: 96px;
  --leading-display: 0.94;
  --tracking-display: 0.02px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-92: 92px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40px;
  --card-padding: 40px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 40px;
  --radius-full: 100px;
  --radius-full-2: 800px;

  /* Named Radii */
  --radius-cards: 40px;
  --radius-inputs: 100px;
  --radius-buttons: 800px;
  --radius-default: 40px;

  /* Surfaces */
  --surface-basalt-canvas: #e2e2df;
  --surface-ash-white: #f7f6f2;
  --surface-digital-orange-accent: #fc5000;

  /* Transitions */
  --transition: all 0.3s ease;
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  color: var(--color-abyssal-ink);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-heading);
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
}

h2 {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
}

h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

h4 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

h5 {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

h6 {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

p {
  margin-bottom: var(--spacing-16);
  color: var(--color-abyssal-ink);
}

a {
  color: var(--color-digital-orange);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-abyssal-ink);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Primary Action Button */
.btn-primary,
button[type="submit"],
.primary-action-btn {
  background-color: var(--color-digital-orange);
  color: var(--color-pure-white);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-buttons);
  padding: var(--spacing-12) var(--spacing-24);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}

.btn-primary:hover,
button[type="submit"]:hover,
.primary-action-btn:hover {
  background-color: var(--color-abyssal-ink);
  color: var(--color-pure-white);
}

.btn-primary:active,
button[type="submit"]:active,
.primary-action-btn:active {
  transform: scale(0.98);
}

/* Ghost Button */
.btn-ghost,
.ghost-button {
  background-color: transparent;
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-buttons);
  padding: 0 var(--spacing-12);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: 44px;
}

.btn-ghost:hover,
.ghost-button:hover {
  background-color: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  border-color: var(--color-abyssal-ink);
}

/* Navigation Link Button */
.nav-link-btn,
.nav-link {
  background-color: var(--color-ash-white);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-cards);
  padding: var(--spacing-16);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link-btn:hover,
.nav-link:hover {
  background-color: var(--color-digital-orange);
  color: var(--color-pure-white);
}

/* ============================================================================
   CARDS
   ============================================================================ */

/* Basic Content Card */
.card,
.content-card {
  background-color: var(--color-ash-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
  border: none;
  box-shadow: none;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-2px);
}

.card-title {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: var(--text-heading-sm);
  color: var(--color-abyssal-ink);
  margin-bottom: var(--spacing-16);
}

.card-text {
  color: var(--color-abyssal-ink);
  line-height: var(--leading-body);
}

/* Stats Card - Orange */
.stats-card-orange {
  background-color: var(--color-digital-orange);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
  text-align: center;
}

.stats-card-orange .stats-number {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: var(--text-heading);
  color: var(--color-pure-white);
  margin-bottom: var(--spacing-8);
}

.stats-card-orange .stats-label {
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  color: var(--color-pure-white);
  font-weight: var(--font-weight-medium);
}

/* Stats Card - Ash White */
.stats-card-white {
  background-color: var(--color-ash-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
  text-align: center;
}

.stats-card-white .stats-number {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: var(--text-heading);
  color: var(--color-abyssal-ink);
  margin-bottom: var(--spacing-8);
}

.stats-card-white .stats-label {
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  color: var(--color-abyssal-ink);
  font-weight: var(--font-weight-medium);
}

/* ============================================================================
   FORMS & INPUTS
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: var(--color-pure-white);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
  font-size: var(--text-body);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-12) var(--spacing-24);
  transition: var(--transition);
  width: 100%;
  font-weight: var(--font-weight-regular);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-abyssal-ink);
  opacity: 0.6;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-digital-orange);
  box-shadow: 0 0 0 3px rgba(252, 80, 0, 0.1);
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-16);
}

.section {
  padding: var(--section-gap) 0;
}

.section-gap {
  margin-bottom: var(--section-gap);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--section-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--section-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--section-gap);
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--element-gap);
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* ============================================================================
   SPACING UTILITIES
   ============================================================================ */

.m-0 { margin: 0; }
.m-4 { margin: var(--spacing-4); }
.m-8 { margin: var(--spacing-8); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }
.m-40 { margin: var(--spacing-40); }

.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-32 { margin-bottom: var(--spacing-32); }
.mb-40 { margin-bottom: var(--spacing-40); }

.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-40 { margin-top: var(--spacing-40); }

.p-0 { padding: 0; }
.p-4 { padding: var(--spacing-4); }
.p-8 { padding: var(--spacing-8); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }
.p-32 { padding: var(--spacing-32); }
.p-40 { padding: var(--spacing-40); }

.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 {
    font-size: 64px;
  }

  h2 {
    font-size: 48px;
  }

  h3 {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .card,
  .content-card {
    padding: var(--spacing-24);
  }

  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 24px;
  }

  .section {
    padding: var(--spacing-32) 0;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    padding: var(--spacing-12) var(--spacing-16);
  }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-digital-orange);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.bg-basalt { background-color: var(--color-basalt-canvas); }
.bg-ash-white { background-color: var(--color-ash-white); }
.bg-digital-orange { background-color: var(--color-digital-orange); }
.bg-cyber-violet { background-color: var(--color-cyber-violet); }

.text-basalt { color: var(--color-basalt-canvas); }
.text-ash-white { color: var(--color-ash-white); }
.text-abyssal { color: var(--color-abyssal-ink); }
.text-orange { color: var(--color-digital-orange); }
.text-violet { color: var(--color-cyber-violet); }

.rounded-full { border-radius: var(--radius-full); }
.rounded-buttons { border-radius: var(--radius-buttons); }
.rounded-cards { border-radius: var(--radius-cards); }
.rounded-inputs { border-radius: var(--radius-inputs); }

.font-display { font-family: var(--font-pp-neue-corp-compact-ultrabold); }
.font-body { font-family: var(--font-dm-sans); }

.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

/* ============================================================================
   SVG ICONS & GRAPHICS
   ============================================================================ */

svg {
  transition: var(--transition);
}

svg path,
svg circle,
svg rect,
svg line,
svg polyline,
svg polygon {
  transition: var(--transition);
}

/* Icon styling for header/nav */
header svg,
nav svg {
  stroke: currentColor;
  fill: none;
  color: var(--color-abyssal-ink);
  transition: all 0.3s ease;
}

header a:hover svg,
nav a:hover svg {
  color: var(--color-digital-orange);
  stroke: var(--color-digital-orange);
  filter: drop-shadow(0 0 8px rgba(252, 80, 0, 0.3));
}

/* Icon buttons */
.icon-btn svg,
.header-icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  color: inherit;
}

/* Decorative SVG graphics */
.hero-graphic svg,
.section-graphic svg,
.bg-graphic svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
}

/* SVG with neon effects */
svg.neon-icon {
  filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.4));
}

svg.neon-icon:hover {
  filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.7));
}

/* Font Awesome Icons */
.fa,
.fas,
.far,
.fal {
  color: inherit;
  transition: var(--transition);
}

i.fa,
i.fas,
i.far,
i.fal {
  color: inherit;
  transition: all 0.3s ease;
}

/* Icon in buttons */
.btn-primary i,
.btn-primary .fa {
  color: inherit;
}

.btn-ghost i,
.btn-ghost .fa {
  color: inherit;
}

/* ============================================================================
   THEME OVERRIDES — Eliminate Old Lime/Yellow Colors
   ============================================================================ */

/* Override old primary color (lime #dfff00) */
[style*="background: var(--primary"],
[style*="background-color: var(--primary"],
.primary,
.primary-action,
.main-menu-item:hover,
.main-menu-item.active {
  background-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* Override lime color on any element */
*[style*="#dfff00"],
*[style*="dfff00"],
.bg-primary,
.primary-bg {
  background-color: var(--color-digital-orange) !important;
}

/* Currency/Language selector button styling */
.navbar-nav.right-content a.main-menu-item {
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  color: var(--color-abyssal-ink) !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar-nav.right-content a.main-menu-item:hover {
  background: var(--color-digital-orange) !important;
  border-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* Icon arrow styling */
.icon-arrow,
.navbar-nav.right-content .icon-arrow {
  color: inherit !important;
  font-size: 12px !important;
  transition: all 0.3s ease;
}

/* Fix dropdown items in currency selector */
.children {
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-digital-orange) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  list-style: none !important;
  position: absolute !important;
  z-index: 1100 !important;
  min-width: 160px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

.children li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.children li a,
.children a {
  display: block;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--color-abyssal-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  margin: 0 !important;
}

.children li a:hover,
.children a:hover,
.children li a.active {
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* ============================================================================
   BACKGROUND PATTERNS & OVERLAYS
   ============================================================================ */

.bg-gradient-dark {
  background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 50%, #0f0f1e 100%);
  background-attachment: fixed;
}

.bg-gradient-neon {
  background: linear-gradient(135deg, #0a0a14 0%, rgba(100, 200, 255, 0.05) 50%, #0f0f1e 100%);
  background-attachment: fixed;
}

/* Subtle animated background */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.bg-animated {
  background: linear-gradient(-45deg, #0a0a14, #1a1a2e, #0f0f1e, #0a0a14);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  background-attachment: fixed;
}




/* ==========================================================================
   SCOPED STYLES FOR: index.blade.php (.page-index)
   ========================================================================== */
.page-index {
/* ============================================================================
   CALDERA THEME OVERRIDES FOR HOME PAGE
   ============================================================================ */

/* Hero Banner - Curved Box with Video Background */
.hero-banner-caldera-box {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px;
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.1);
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(7, 6, 7, 0.65) 0%,
    rgba(7, 6, 7, 0.45) 50%,
    rgba(7, 6, 7, 0.7) 100%
  );
  z-index: 1;
}

.hero-banner-caldera-box .container {
  position: relative;
  z-index: 2;
  padding: var(--spacing-80) var(--spacing-40);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-badge-caldera {
  display: inline-flex;
  align-items: center;
  background: var(--color-pure-white);
  border: 2px solid var(--color-digital-orange);
  color: var(--color-digital-orange);
  padding: var(--spacing-12) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.hero-badge-caldera i {
  font-size: 16px;
  color: var(--color-digital-orange);
}

.hero-title-caldera {
  font-size: clamp(42px, 6vw, 96px);
  font-weight: 900;
  color: var(--color-pure-white);
  line-height: 1.1;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.hero-subtitle-caldera {
  font-size: var(--text-heading-sm);
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--leading-body);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-buttons-caldera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-top: var(--spacing-32);
}

/* View Pricing (ghost) button over the video — white border & white hover */
.hero-buttons-caldera .btn-ghost {
  color: var(--color-pure-white);
  border-color: var(--color-pure-white);
}

.hero-buttons-caldera .btn-ghost:hover {
  background-color: var(--color-pure-white);
  color: var(--color-abyssal-ink);
  border-color: var(--color-pure-white);
}

/* Feature Icon Styling */
.feature-icon-caldera {
  width: 60px;
  height: 60px;
  background: var(--color-digital-orange);
  border-radius: var(--radius-3xl);
  color: var(--color-pure-white);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.card:hover .feature-icon-caldera {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.3);
}

/* Section Title with Line */
.section-title-with-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
}

.title-square {
  width: 20px;
  height: 20px;
  background: var(--color-digital-orange);
  border-radius: 3px;
  flex-shrink: 0;
}

.section-title-with-line h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title-underline {
  flex: 1;
  height: 2px;
  background: var(--color-abyssal-ink);
  margin-left: var(--spacing-24);
}

/* Why Choose Section */
.why-choose-section {
  background: var(--color-pure-white);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(252, 80, 0, 0.1);
}

/* Gaming Featured Section */
.gaming-featured-section {
  background: var(--color-basalt-canvas);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(252, 80, 0, 0.1);
}

.why-choose-wrapper {
  max-width: 100%;
  width: 100%;
  padding: var(--spacing-56) var(--spacing-40);
}

/* Card System Grid - 4 Cards */
.grid-4-card-system {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-40);
}

.card-system {
  border-radius: var(--radius-3xl-3);
  padding: var(--spacing-24) var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  transition: all 0.3s ease;
  min-height: auto;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 40px rgba(7, 6, 7, 0.08);
  overflow: hidden;
}

/* Uniform Card Base Style */
.card-system {
  background: var(--color-pure-white);
  border: 3px solid var(--color-abyssal-ink);
  color: var(--color-abyssal-ink);
}

.card-system .card-label {
  color: var(--color-abyssal-ink);
}

.card-system .card-description {
  color: var(--color-abyssal-ink);
  line-height: 1.6;
}

.card-system .card-icon-top {
  color: var(--color-digital-orange);
  font-size: 22px;
}

/* Hover State - Change to Orange */
.card-system:hover {
  background: var(--color-digital-orange);
  border-color: var(--color-digital-orange);
  color: var(--color-pure-white);
  transform: translateY(-4px);
  box-shadow: 0 15px 50px rgba(252, 80, 0, 0.25);
}

.card-system:hover .card-label {
  color: var(--color-pure-white);
}

.card-system:hover .card-description {
  color: rgba(255, 255, 255, 0.95);
}

.card-system:hover .card-icon-top {
  color: var(--color-pure-white);
}

/* Card Top Section */
.card-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  min-height: auto;
  flex-wrap: wrap;
}

.card-label {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.card-icon-top {
  font-size: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}

.card-body {
  width: 100%;
}

.card-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

/* Section Bottom CTA */
.section-bottom-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-56);
  padding-top: var(--spacing-40);
  border-top: 1px solid rgba(7, 6, 7, 0.1);
}

.btn-section-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16) var(--spacing-48);
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: none;
  border-radius: var(--radius-inputs);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  box-shadow: 0 16px 40px rgba(252, 80, 0, 0.2);
}

.btn-section-view:hover {
  background: #e65b00;
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(252, 80, 0, 0.3);
}

.btn-section-view i {
  transition: all 0.3s ease;
}

.btn-section-view:hover i {
  transform: translateX(5px);
}

/* Card Action Button */
.btn-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-14) var(--spacing-28);
  border: 2px solid var(--color-abyssal-ink);
  background: transparent;
  color: var(--color-abyssal-ink);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  width: 100%;
  margin-top: auto;
}

/* Orange Button */
.btn-card-action.btn-orange {
  background: var(--color-digital-orange);
  border-color: var(--color-digital-orange);
  color: var(--color-pure-white);
}

.btn-card-action.btn-orange:hover {
  background: #e65b00;
  border-color: #e65b00;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(252, 80, 0, 0.3);
}

/* Dark Button */
.btn-card-action.btn-dark {
  border-color: var(--color-abyssal-ink);
  color: var(--color-abyssal-ink);
  background: transparent;
}

.btn-card-action.btn-dark:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 6, 7, 0.2);
}

/* White Button */
.btn-card-action.btn-white {
  border-color: var(--color-digital-orange);
  color: var(--color-digital-orange);
  background: transparent;
}

.btn-card-action.btn-white:hover {
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border-color: var(--color-digital-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(252, 80, 0, 0.3);
}

/* Responsive */
@media (max-width: 1199px) {
  .grid-4-card-system {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-24);
  }
}

@media (max-width: 991px) {
  .why-choose-section {
    margin: var(--spacing-24);
    margin-top: var(--spacing-40);
  }

  .gaming-featured-section {
    margin: var(--spacing-24);
    margin-top: var(--spacing-40);
  }

  .grid-4-card-system {
    grid-template-columns: 1fr;
    gap: var(--spacing-20);
  }

  .section-title-with-line {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
  }

  .title-underline {
    width: 100%;
    margin-left: 0;
  }

  .card-system {
    min-height: auto;
    padding: var(--spacing-24) var(--spacing-20);
  }
}

@media (max-width: 768px) {
  .why-choose-section {
    margin: var(--spacing-16);
    margin-top: var(--spacing-32);
    border-radius: var(--radius-3xl-3);
  }

  .why-choose-wrapper {
    padding: var(--spacing-32) var(--spacing-24);
  }

  .gaming-featured-section {
    margin: var(--spacing-16);
    margin-top: var(--spacing-32);
    border-radius: var(--radius-3xl-3);
  }

  .section-title-with-line h2 {
    font-size: clamp(24px, 2.5vw, 32px);
  }

  .card-system {
    gap: var(--spacing-10);
    min-height: auto;
    padding: var(--spacing-16) var(--spacing-16);
  }

  .card-description {
    font-size: 14px;
    line-height: 1.5;
  }

  .card-label {
    font-size: 15px;
  }

  .section-bottom-cta {
    margin-top: var(--spacing-40);
    padding-top: var(--spacing-32);
  }

  .btn-section-view {
    padding: var(--spacing-14) var(--spacing-32);
    font-size: 14px;
    width: 100%;
  }

  /* Gaming Showcase Responsive */
  .gaming-section-wrapper {
    padding: var(--spacing-40) var(--spacing-20);
    margin: var(--spacing-20);
  }

  .gaming-rows {
    gap: var(--spacing-40);
  }

  .game-row-head {
    padding: 0;
    margin-bottom: var(--spacing-16);
  }

  .game-row-title {
    font-size: 20px;
  }

  /* Hide arrows on touch — swipe/scroll instead */
  .game-carousel .swiper-button-next,
  .game-carousel .swiper-button-prev {
    display: none;
  }

  .game-card {
    cursor: default;
  }

  .game-title {
    font-size: 14px;
  }

  .game-reward {
    font-size: 12px;
  }

  .game-info {
    padding: 14px 12px;
  }
}

/* Badge Section */
.badge-section {
  display: inline-block;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Section Subtitle */
.section-subtitle-caldera {
  font-size: var(--text-body);
  color: var(--color-abyssal-ink);
  max-width: 600px;
  margin: 0 auto;
}

/* Top-Up Console — themed two-panel card */
/* Match horizontal inset of the sections above (40px from viewport edge) */
#points-topup .container {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
}

.topup-console {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
}

/* Header — spans both panels, sits at the top of the console */
.topup-header {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-40) var(--spacing-40) var(--spacing-32);
  border-bottom: 3px solid var(--color-abyssal-ink);
}

.topup-header h2 {
  margin-top: var(--spacing-12);
}

/* Notice banner — spans both panels, stays permanently */
.topup-notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  padding: var(--spacing-24) var(--spacing-40);
  background: var(--color-ash-white);
  border-bottom: 3px solid var(--color-abyssal-ink);
  color: var(--color-abyssal-ink);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.topup-notice i {
  color: var(--color-digital-orange);
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.topup-panel {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-40);
  min-width: 0;
}

.topup-panel-right {
  border-left: 3px solid var(--color-abyssal-ink);
}

.topup-panel-label {
  display: block;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-abyssal-ink);
  margin-bottom: var(--spacing-24);
}

/* Dark calculator block fills the panel below its label */
.topup-panel-right .topup-calc {
  flex: 1;
}

@media (max-width: 991px) {
  #points-topup .container {
    padding-left: var(--spacing-24);
    padding-right: var(--spacing-24);
  }

  .topup-console {
    grid-template-columns: 1fr;
  }

  .topup-panel-right {
    border-left: none;
    border-top: 3px solid var(--color-abyssal-ink);
  }

  .topup-panel {
    padding: var(--spacing-24);
  }

  .topup-notice {
    padding: var(--spacing-20) var(--spacing-24);
  }

  .topup-header {
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
  }
}

/* Card Hover Effects */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(252, 80, 0, 0.1);
}

/* Gaming Section Wrapper — matches .why-choose-section spacing */
.gaming-section-wrapper {
  padding: var(--spacing-56) var(--spacing-40);
  background: var(--color-ash-white);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  box-shadow: 0 0 0 1px rgba(252, 80, 0, 0.1);
  position: relative;
}

/* Stacked Category Rows */
.gaming-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
}

.game-row {
  width: 100%;
}

/* Row Header */
.game-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  padding: 0 var(--spacing-8);
}

.game-row-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.game-row-title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1;
}

.game-row-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  background: transparent;
  color: var(--color-abyssal-ink);
  border-radius: var(--radius-full);
  font-family: var(--font-dm-sans);
  font-weight: 600;
  font-size: var(--text-body-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.game-row-link i {
  transition: transform 0.3s ease;
}

.game-row-link:hover {
  color: var(--color-digital-orange);
}

.game-row-link:hover i {
  transform: translateX(4px);
}

/* Gaming Carousel */
.game-carousel {
  position: relative;
  width: 100%;
  padding: 14px 0;
}

.game-carousel .swiper-slide {
  height: auto;
}

.game-carousel .swiper-button-next,
.game-carousel .swiper-button-prev {
  width: 44px;
  height: 44px;
  background: var(--color-pure-white);
  border: 1px solid rgba(7, 6, 7, 0.1);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  color: var(--color-abyssal-ink);
  box-shadow: 0 6px 18px rgba(7, 6, 7, 0.12);
  top: 38%;
}

.game-carousel .swiper-button-next:hover,
.game-carousel .swiper-button-prev:hover {
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border-color: var(--color-digital-orange);
  box-shadow: 0 8px 24px rgba(252, 80, 0, 0.3);
}

.game-carousel .swiper-button-next::after,
.game-carousel .swiper-button-prev::after {
  font-size: 15px;
  font-weight: 900;
}

.game-carousel .swiper-button-prev {
  left: -6px;
}

.game-carousel .swiper-button-next {
  right: -6px;
}

.game-carousel .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Game Card */
.game-card {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

.game-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background: var(--color-basalt-canvas);
  border: 2px solid var(--color-basalt-canvas);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.game-card:hover .game-image-wrapper {
  transform: translateY(-6px);
  border-color: var(--color-digital-orange);
  box-shadow: 0 14px 32px rgba(252, 80, 0, 0.22);
}

.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.game-image-wrapper:hover .game-image {
  transform: scale(1.12);
}

/* Game Overlay */
.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(7, 6, 7, 0.75) 0%, rgba(252, 80, 0, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius-3xl);
}

.game-image-wrapper:hover .game-overlay {
  opacity: 1;
}

.play-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border-radius: var(--radius-xl);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 6px 16px rgba(252, 80, 0, 0.3);
  transform: scale(0.85);
}

.game-overlay:hover .play-now-btn {
  transform: scale(1);
}

.play-now-btn:hover {
  box-shadow: 0 10px 28px rgba(252, 80, 0, 0.4);
  background: #e63f00;
}

/* Game Info */
.game-info {
  padding: 16px 14px;
  background: var(--color-pure-white);
  border-top: 2px solid var(--color-basalt-canvas);
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  margin-top: -4px;
}

.game-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-abyssal-ink);
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-reward {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-digital-orange);
  margin: 0;
  display: flex;
  align-items: center;
}

.empty-games {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  background: var(--color-pure-white);
  border: 1px dashed rgba(7, 6, 7, 0.15);
  border-radius: var(--radius-3xl);
  color: var(--color-abyssal-ink);
  opacity: 0.55;
}

.empty-games i {
  font-size: 28px;
  color: var(--color-digital-orange);
  margin-bottom: var(--spacing-8);
}

.empty-games p {
  margin: 0;
  font-size: var(--text-body-sm);
}

/* Swiper Custom Theme Styling */
.pg-swiper-showcase {
    width: 100%;
    border-radius: var(--radius-3xl-2);
    background: var(--color-ash-white);
    border: 1px solid rgba(7,6,7,0.08);
    box-shadow: 0 24px 64px rgba(7, 6, 7, 0.06);
    overflow: hidden;
}

.pg-slide-showcase-card {
    display: grid;
    grid-template-columns: 550px 1fr;
    min-height: 350px;
    width: 100%;
}

.pg-slide-image-col {
    position: relative;
    width: 550px;
    height: 350px;
    overflow: hidden;
}

.pg-slide-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-slide-showcase-card:hover .pg-slide-image-col img {
    transform: scale(1.04);
}

.pg-slide-index-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(252, 80, 0, 0.2);
}

.pg-slide-details-col {
    padding: var(--spacing-40) var(--spacing-48);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: var(--color-ash-white);
}

.pg-category-tag {
    display: inline-block;
    background: rgba(252, 80, 0, 0.1);
    color: var(--color-digital-orange);
    border: 1px solid rgba(252, 80, 0, 0.22);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    width: max-content;
}

.pg-slide-details-col h3 {
    font-size: clamp(26px, 3.5vw, 36px) !important;
    font-weight: 900 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 0 16px;
    line-height: 1.1;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
}

.pg-details-summary {
    color: var(--color-abyssal-ink) !important;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 28px;
    max-width: 580px;
}

.pg-details-actions {
    display: flex;
    align-items: center;
}

.pg-swiper-thumbs {
    width: 100%;
    padding: 10px 0 !important;
    overflow: visible !important;
}

.pg-thumb-slide {
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-thumb-slide:hover {
    opacity: 0.8;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1 !important;
}

.pg-thumb-card {
    background: var(--color-pure-white);
    border: 1px solid rgba(7,6,7,0.08);
    border-radius: var(--radius-2xl-2);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 24px rgba(7,6,7,0.04);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-thumb-card img {
    width: 68px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}

.pg-thumb-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.mySwiper .swiper-slide-thumb-active .pg-thumb-card {
    border-color: var(--color-digital-orange);
    background: var(--color-abyssal-ink);
    box-shadow: 0 14px 28px rgba(252, 80, 0, 0.22);
    transform: scale(1.02);
}

.mySwiper .swiper-slide-thumb-active .pg-thumb-title {
    color: var(--color-pure-white);
}

/* Customize Swiper Navigation Buttons */
.pg-swiper-btn-next,
.pg-swiper-btn-prev {
    color: var(--color-pure-white) !important;
    background: var(--color-digital-orange);
    backdrop-filter: blur(8px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-digital-orange);
    box-shadow: 0 8px 24px rgba(252, 80, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-swiper-btn-next:after,
.pg-swiper-btn-prev:after {
    font-size: 15px !important;
    font-weight: 900;
}

.pg-swiper-btn-next:hover,
.pg-swiper-btn-prev:hover {
    background: var(--color-abyssal-ink);
    border-color: var(--color-abyssal-ink);
    transform: scale(1.08);
}

/* Responsiveness */
@media (max-width: 1199px) {
    .pg-slide-showcase-card {
        grid-template-columns: 460px 1fr;
    }
    .pg-slide-image-col {
        width: 460px;
        height: 350px;
    }
}

@media (max-width: 991px) {
    .pg-slide-showcase-card {
        grid-template-columns: 1fr;
    }
    .pg-slide-image-col {
        width: 100%;
        height: 320px;
    }
    .pg-slide-details-col {
        padding: 34px 28px;
    }
}

/* Points Top-Up Section - Caldera Theme */
.bp-topup-section {
    position: relative;
    padding: var(--spacing-92) 0 !important;
    background: linear-gradient(135deg, var(--color-ash-white), var(--color-basalt-canvas)) !important;
}

/* Disclaimer styling - override alert */
.alert {
    background: rgba(252, 80, 0, 0.05) !important;
    border: 1px solid rgba(252, 80, 0, 0.15) !important;
    border-radius: var(--radius-2xl) !important;
    color: var(--color-abyssal-ink) !important;
}

.alert-warning {
    color: var(--color-digital-orange) !important;
}

.bp-disclaimer-wrapper {
    position: relative;
    border-radius: var(--radius-2xl);
    background: rgba(252, 80, 0, 0.05);
    padding: 1px;
    overflow: hidden;
    box-shadow: none;
}

.bp-disclaimer-content {
    position: relative;
    z-index: 1;
    background: var(--color-pure-white);
    border-radius: calc(var(--radius-2xl) - 1px);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.bp-disclaimer-badge {
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.bp-disclaimer-text {
    margin: 0 !important;
    color: var(--color-abyssal-ink) !important;
    font-size: 13px !important;
    font-weight: 600;
}

/* Header & Badges */
.bp-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-digital-orange);
    border: 1px solid var(--color-digital-orange);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-pure-white);
}

.bp-main-title {
    color: var(--color-abyssal-ink) !important;
    font-size: clamp(32px, 4.5vw, 48px) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
}

.bp-title-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px auto;
}

.bp-title-separator .sep-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #0b0d10, transparent);
}

.bp-title-separator .sep-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dfff00;
    border: 1.5px solid #0b0d10;
}

.bp-topup-intro-deck {
    max-width: 760px;
    margin: 0 auto;
}

.bp-intro-lead {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #34383f !important;
    font-weight: 600;
    margin-bottom: 10px !important;
}

.bp-intro-sub {
    font-size: 14px !important;
    color: #68707a !important;
    margin-bottom: 0 !important;
}

/* Left Card: Bonus Tiers & Roadmap */
.bp-tier-card {
    background: var(--color-pure-white) !important;
    border: 1px solid rgba(7, 6, 7, 0.08) !important;
    border-radius: var(--radius-3xl-2) !important;
    padding: var(--spacing-40) !important;
    box-shadow: 0 24px 60px rgba(7, 6, 7, 0.05) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bp-card-corner-decor {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent var(--color-digital-orange) transparent transparent;
}

.bp-card-header-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bp-card-header-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-2xl);
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(252, 80, 0, 0.15);
}

.bp-card-title-new {
    color: var(--color-abyssal-ink) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
}

.bp-card-subtitle-new {
    font-size: 13px !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 !important;
}

/* Premium Table Layout */
.bp-table-container {
    border-radius: var(--radius-2xl-2);
    border: 1px solid rgba(7, 10, 12, 0.08);
    overflow: hidden;
    background: var(--color-pure-white);
}

.bp-premium-table {
    width: 100%;
    border-collapse: collapse;
}

.bp-premium-table th {
    background: var(--color-abyssal-ink);
    color: var(--color-pure-white);
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 20px;
    border: none;
}

.bp-premium-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(7, 10, 12, 0.06);
    vertical-align: middle;
    transition: all 0.25s ease;
    color: var(--color-abyssal-ink);
}

.bp-tier-row:last-child td {
    border-bottom: none;
}

.bp-tier-row:hover td {
    background: rgba(252, 80, 0, 0.03);
}

.bp-col-range {
    font-weight: 800;
    color: var(--color-abyssal-ink) !important;
}

.range-badge {
    font-size: 14px;
}

.multiplier-pill {
    background: var(--color-abyssal-ink);
    color: var(--color-pure-white);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.multiplier-pill.boost-1 {
    background: var(--color-abyssal-ink);
    color: var(--color-digital-orange);
    border-color: rgba(252, 80, 0, 0.2);
}

.multiplier-pill.boost-2 {
    background: var(--color-abyssal-ink);
    color: var(--color-digital-orange);
    border-color: rgba(252, 80, 0, 0.4);
    box-shadow: 0 4px 14px rgba(252, 80, 0, 0.15);
}

.multiplier-pill.boost-3 {
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    border-color: var(--color-digital-orange);
    box-shadow: 0 4px 18px rgba(252, 80, 0, 0.3);
}

.bp-tier-row:hover .multiplier-pill.boost-3 {
    transform: scale(1.08) rotate(-2deg);
}

.benefit-badge {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.benefit-badge.standard {
    background: rgba(7, 6, 7, 0.05);
    color: var(--color-abyssal-ink);
}

.benefit-badge.silver {
    background: rgba(7, 6, 7, 0.08);
    color: var(--color-abyssal-ink);
}

.benefit-badge.gold {
    background: rgba(252, 80, 0, 0.12);
    color: var(--color-digital-orange);
}

.benefit-badge.hyper {
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    font-weight: 900;
}

/* Note box */
.bp-note-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 74, 90, 0.04);
    border: 1px solid rgba(255, 74, 90, 0.08);
    border-radius: 12px;
    padding: 12px 18px;
}

.bp-note-text {
    font-size: 11.5px;
    font-weight: 700;
    color: #ff4a5a !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Roadmap Flow */
.bp-process-flow {
    border-top: 1px dashed rgba(8, 10, 12, 0.12);
    padding-top: 24px;
}

.bp-flow-heading {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #0b0d10;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.bp-timeline-container {
    position: relative;
    width: 100%;
}

.bp-timeline-line {
    position: absolute;
    top: 18px;
    left: 4%;
    width: 92%;
    height: 2px;
    background: linear-gradient(90deg, #0b0d10 0%, #dfff00 50%, #0b0d10 100%);
    opacity: 0.25;
    z-index: 0;
}

.bp-timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.bp-t-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 22%;
}

.bp-t-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0b0d10;
    color: #ffffff;
    font-family: 'Orbitron', 'Chakra Petch', sans-serif;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 6px 15px rgba(8, 10, 12, 0.15);
    margin-bottom: 10px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bp-t-step:hover .bp-t-number {
    background: #dfff00;
    color: #0b0d10;
    transform: scale(1.15);
    box-shadow: 0 8px 20px rgba(195, 226, 0, 0.35);
}

.bp-t-label {
    font-size: 11px;
    font-weight: 800;
    color: #68707a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* Right Column: Cyber Cockpit Panel */
.bp-cyber-calc-card {
    background: var(--color-pure-white) !important;
    border: 1px solid rgba(7, 6, 7, 0.08) !important;
    border-radius: var(--radius-3xl-2) !important;
    padding: var(--spacing-40) !important;
    box-shadow: 0 32px 80px rgba(7, 6, 7, 0.05) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bp-cyber-scan-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(252, 80, 0, 0.02) 50%), linear-gradient(90deg, rgba(252, 80, 0, 0.01), transparent);
    background-size: 100% 4px, 4px 100%;
    z-index: 0;
    pointer-events: none;
}

.bp-cyber-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 85% 15%, rgba(252, 80, 0, 0.05), transparent 45%);
    z-index: 0;
    pointer-events: none;
}

.bp-cyber-calc-card .bp-card-header-block {
    position: relative;
    z-index: 1;
}

.calculator-icon {
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    box-shadow: 0 10px 24px rgba(252, 80, 0, 0.2);
}

.bp-cyber-calc-card .bp-card-subtitle-new {
    color: var(--color-abyssal-ink) !important;
}

/* Form Styles */
.bp-calc-form {
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.bp-input-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
}

.bp-input-status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-digital-orange);
    box-shadow: 0 0 10px var(--color-digital-orange);
    display: inline-block;
    animation: statusPulse 1.8s infinite;
}

/* Custom Input Box */
.bp-input-cyber-wrapper {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    background: var(--color-ash-white);
    border: 2px solid var(--color-abyssal-ink);
    border-radius: var(--radius-inputs);
    overflow: hidden;
    padding: 0 20px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bp-currency-indicator {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    color: var(--color-digital-orange);
    font-size: 20px;
    font-weight: 900;
    margin-right: 14px;
    user-select: none;
}

.bp-cyber-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans);
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    width: 100%;
}

.bp-cyber-input::placeholder {
    color: var(--color-abyssal-ink) !important;
    opacity: 0.5 !important;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-dm-sans);
}

.bp-cyber-input-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--color-digital-orange);
    transition: width 0.4s ease;
}

.bp-input-cyber-wrapper:focus-within {
    border-color: var(--color-digital-orange);
    background: var(--color-pure-white);
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.1);
}

.bp-input-cyber-wrapper:focus-within .bp-cyber-input-border {
    width: 100%;
}

/* Digital Cockpit Breakdown */
.bp-digital-cockpit {
    position: relative;
    background: var(--color-ash-white);
    border: 1px solid rgba(7, 6, 7, 0.08);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-24);
    overflow: hidden;
}

.bp-cockpit-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(252, 80, 0, 0.02) 0%, transparent 60%);
    pointer-events: none;
}

.bp-cockpit-header {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 10px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bp-cockpit-model {
    color: var(--color-digital-orange);
}

.bp-cockpit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-pure-white);
    border: 1px solid rgba(7, 6, 7, 0.08);
    border-radius: 12px;
    padding: 10px 16px;
}

.bp-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-row-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(7, 6, 7, 0.2);
}

.bp-row-indicator.bonus-indicator {
    background: var(--color-digital-orange);
    box-shadow: 0 0 6px var(--color-digital-orange);
}

.bp-row-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.bp-row-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bp-cockpit-display {
    width: 140px;
    text-align: right;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    color: var(--color-abyssal-ink) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    padding: 0 !important;
}

.bp-cockpit-display.bonus {
    color: var(--color-digital-orange) !important;
}

.bp-row-unit {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 10px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    opacity: 0.5;
}

.bp-cockpit-separator {
    height: 1px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Scoreboard Panel */
.bp-scoreboard-panel {
    position: relative;
    background: rgba(252, 80, 0, 0.04);
    border: 1px solid rgba(252, 80, 0, 0.15);
    border-radius: var(--radius-2xl);
    padding: 16px 20px;
    overflow: hidden;
}

.bp-scoreboard-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(252, 80, 0, 0.01) 0px, rgba(252, 80, 0, 0.01) 1px, transparent 1px, transparent 4px);
    z-index: 0;
}

.bp-scoreboard-header {
    position: relative;
    z-index: 1;
}

.bp-scoreboard-label {
    font-size: 11px;
    font-weight: 900;
    color: var(--color-digital-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.bp-scoreboard-glow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-digital-orange);
    box-shadow: 0 0 10px var(--color-digital-orange);
}

.bp-scoreboard-value-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bp-bolt-icon {
    font-size: 22px;
    color: var(--color-digital-orange);
    animation: lightningFlicker 3s infinite;
}

.bp-scoreboard-display {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    color: var(--color-digital-orange) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    padding: 0 !important;
    text-shadow: 0 0 15px rgba(252, 80, 0, 0.2);
    width: 100%;
}

.bp-scoreboard-unit {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 12px;
    font-weight: 900;
    color: var(--color-digital-orange);
    opacity: 0.6;
}

/* Submit CTA button */
.bp-cyber-submit-btn {
    position: relative;
    width: 100%;
    height: 56px;
    border-radius: var(--radius-inputs);
    border: none;
    background: var(--color-digital-orange);
    color: var(--color-pure-white);
    font-family: var(--font-dm-sans);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(252, 80, 0, 0.24);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bp-cyber-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(252, 80, 0, 0.38);
    background: #e65b00;
}

.bp-cyber-submit-btn:active {
    transform: translateY(1px);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: all 0.6s ease;
}

.bp-cyber-submit-btn:hover .btn-shine {
    left: 100%;
}

/* Animations */
@keyframes flowLight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes statusPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes lightningFlicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(223, 255, 0, 0.8)); }
    45% { opacity: 1; }
    50% { opacity: 0.4; }
    55% { opacity: 0.8; }
    60% { opacity: 0.2; }
    65% { opacity: 1; }
}

/* responsive overrides */
@media (max-width: 991px) {
    .bp-timeline-line {
        display: none;
    }
    .bp-timeline-steps {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .bp-t-step {
        width: 100%;
        flex-direction: row;
        gap: 14px;
        text-align: left;
    }
    .bp-t-number {
        margin-bottom: 0;
    }
    .bp-tier-card, .bp-cyber-calc-card {
        padding: 28px !important;
    }
}

/* Immersive Video Banner Section */
.cinema-showcase-section {
    position: relative;
    padding: var(--spacing-56) 0;
}

.cinema-banner {
    position: relative;
    margin: var(--spacing-40);
    border-radius: var(--radius-3xl-3);
    overflow: hidden;
    min-height: 580px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 40px 100px rgba(7, 6, 7, 0.12);
}

.cinema-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cinema-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(7, 6, 7, 0.88) 0%, rgba(7, 6, 7, 0.45) 45%, rgba(7, 6, 7, 0.12) 100%);
}

.cinema-banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--spacing-64) var(--spacing-56);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-40);
}

.cinema-content-left {
    max-width: 560px;
}

.cinema-content-right {
    flex-shrink: 0;
}

.cinema-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-digital-orange);
    border: 1px solid var(--color-digital-orange);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-pure-white);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-pure-white);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    animation: cinemaPulse 1.8s infinite;
}

@keyframes cinemaPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.cinema-banner-title {
    color: var(--color-pure-white);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: clamp(34px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: var(--spacing-16) 0;
}

.cinema-banner-title .text-orange {
    color: var(--color-digital-orange);
}

.cinema-banner-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    max-width: 520px;
    margin-bottom: var(--spacing-24);
}

.cinema-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-12);
}

.cinema-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    color: var(--color-pure-white);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cinema-chip i {
    color: var(--color-digital-orange);
}

.cinema-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 34px;
    border-radius: var(--radius-inputs);
    border: none;
    background: var(--color-digital-orange);
    color: var(--color-pure-white) !important;
    font-family: var(--font-dm-sans);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(252, 80, 0, 0.24);
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cinema-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(252, 80, 0, 0.38);
    background: #e65b00;
}

.cinema-cta-btn:active {
    transform: translateY(1px);
}

/* Utility Classes */
.bg-orange {
    background-color: var(--color-digital-orange) !important;
}

.text-orange {
    color: var(--color-digital-orange);
}

/* Responsive overrides */
@media (max-width: 991px) {
    .hero-banner-caldera-box {
        margin: var(--spacing-24);
        margin-top: 120px;
        min-height: 500px;
    }

    .hero-banner-caldera-box .container {
        padding: var(--spacing-56) var(--spacing-24);
    }

    .hero-title-caldera {
        font-size: clamp(32px, 4vw, 56px);
    }

    .hero-subtitle-caldera {
        font-size: var(--text-body);
    }

    .hero-buttons-caldera {
        flex-direction: column;
        gap: var(--spacing-12);
    }

    .hero-buttons-caldera a {
        width: 100%;
        justify-content: center;
    }

    .cinema-banner {
        margin: var(--spacing-24);
        min-height: 480px;
    }
    .cinema-banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-24);
        padding: var(--spacing-40) var(--spacing-24);
    }
    .cinema-chips {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .hero-banner-caldera-box {
        margin: var(--spacing-16);
        margin-top: 100px;
        min-height: 450px;
    }

    .hero-banner-caldera-box .container {
        padding: var(--spacing-40) var(--spacing-16);
    }

    .hero-badge-caldera {
        font-size: 12px;
        padding: var(--spacing-8) var(--spacing-12);
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .cinema-banner {
        margin: var(--spacing-16);
        min-height: 440px;
    }

    .cinema-banner-content {
        padding: var(--spacing-32) var(--spacing-20);
    }

    /* Why Choose Section Mobile */
    .why-choose-wrapper {
        padding: var(--spacing-24);
    }

    .grid-4-card-system {
        gap: var(--spacing-16);
    }

    .card-system {
        min-height: auto;
        padding: var(--spacing-20) var(--spacing-16);
        gap: var(--spacing-10);
    }

    .card-description {
        font-size: 14px;
    }

    .card-label {
        font-size: 15px;
    }

    .card-icon-top {
        font-size: 26px;
    }

    .btn-section-view {
        width: 100%;
    }
}
}



/* ==========================================================================
   GLOBAL LAYOUT STYLES FROM: layouts\footer.blade.php
   ========================================================================== */
/* =====================================================================
   CALDERA FOOTER — 4-Column Grid Layout
   Logo | Navigation | Policies | Newsletter
   ===================================================================== */

.gaming-footer {
  background: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  padding: 60px 0 0;
  border-top: 2px solid var(--color-digital-orange);
  position: relative;
  overflow: hidden;
}

.footer-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  padding: 60px 0;
}

/* ---- Column 1: Logo & Company ---- */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  width: 120px;
  height: auto;
}

.footer-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 120px;
  display: block;
  mix-blend-mode: multiply;
}

.footer-company-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-company-details h3 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 20px !important;
  color: var(--color-abyssal-ink);
  margin: 0;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-company-details p {
  font-family: var(--font-dm-sans) !important;
  font-size: 15px !important;
  color: var(--color-abyssal-ink);
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.footer-company-details p:last-child {
  margin-bottom: 0;
}

.footer-company-details a {
  color: var(--color-digital-orange);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.footer-company-details a:hover {
  color: var(--color-abyssal-ink);
}

/* ---- Column 2: Navigation Links ---- */
.footer-nav {
  display: flex;
  flex-direction: column;
}

.footer-nav h4 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 20px !important;
  color: var(--color-abyssal-ink);
  margin: 0 0 20px 0;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav li {
  margin: 0;
}

.footer-nav a {
  font-family: var(--font-dm-sans) !important;
  font-size: 15px !important;
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-nav a:hover {
  color: var(--color-digital-orange);
  transform: translateX(4px);
}

.footer-nav i {
  width: 16px;
  height: 16px;
  color: var(--color-digital-orange);
  font-size: 14px;
}

/* ---- Column 3: Policy Links ---- */
.footer-policies {
  display: flex;
  flex-direction: column;
}

.footer-policies h4 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 20px !important;
  color: var(--color-abyssal-ink);
  margin: 0 0 20px 0;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-policies ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-policies li {
  margin: 0;
}

.footer-policies a {
  font-family: var(--font-dm-sans) !important;
  font-size: 15px !important;
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer-policies a:hover {
  color: var(--color-digital-orange);
  transform: translateX(4px);
}

.footer-policies i {
  width: 16px;
  height: 16px;
  color: var(--color-digital-orange);
  font-size: 14px;
}

/* ---- Column 4: Newsletter ---- */
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-newsletter h4 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 20px !important;
  color: var(--color-abyssal-ink);
  margin: 0;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-newsletter p {
  font-family: var(--font-dm-sans) !important;
  font-size: 15px !important;
  color: var(--color-abyssal-ink);
  line-height: 1.6;
  margin: 0;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-input {
  padding: 10px 14px;
  border: 2px solid var(--color-abyssal-ink);
  border-radius: 8px;
  font-family: var(--font-dm-sans) !important;
  font-size: 14px !important;
  color: var(--color-abyssal-ink);
  background: var(--color-ash-white);
  transition: all 0.3s ease;
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--color-digital-orange);
  box-shadow: 0 0 0 3px rgba(252, 80, 0, 0.1);
}

.newsletter-input::placeholder {
  color: rgba(7, 6, 7, 0.5);
}

.newsletter-btn {
  padding: 10px 20px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-dm-sans) !important;
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
}

.newsletter-btn:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-digital-orange);
  transform: translateY(-2px);
}

.newsletter-success {
  display: none;
  padding: 12px;
  background: rgba(252, 80, 0, 0.1);
  border: 1px solid var(--color-digital-orange);
  border-radius: 8px;
  color: var(--color-abyssal-ink);
  font-size: 13px;
  animation: fadeInUp 0.4s ease;
}

.newsletter-success.show {
  display: block;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Footer Bottom: Copyright & Payments ---- */
.footer-bottom {
  background: var(--color-ash-white);
  border-top: 2px solid var(--color-digital-orange);
  padding: 30px 0;
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-copyright {
  font-family: var(--font-dm-sans) !important;
  font-size: 14px !important;
  color: var(--color-abyssal-ink);
  flex: 1;
}

.footer-copyright a {
  color: var(--color-digital-orange);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-copyright a:hover {
  color: var(--color-abyssal-ink);
}

.payment-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-icons img {
  height: 30px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.payment-icons img:hover {
  opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 0;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 0;
  }

  .footer-bottom-content {
    flex-direction: column;
    align-items: flex-start;
  }
}



/* ==========================================================================
   GLOBAL LAYOUT STYLES FROM: layouts\header.blade.php
   ========================================================================== */
/* =====================================================================
   CALDERA HEADER — Premium Gaming Theme
   Full-width to Floating Navbar with smooth scroll transformation
   ===================================================================== */

:root {
  --transition-duration: 400ms;
  --transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Preloader ---- */
#preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-abyssal-ink);
  background-image: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
}

.preloader-content {
  position: relative;
  text-align: center;
  background: rgba(7, 6, 7, 0.95) !important;
  border: 2px solid var(--color-digital-orange) !important;
  box-shadow: 
    0 0 25px rgba(252, 80, 0, 0.25),
    inset 0 0 15px rgba(252, 80, 0, 0.15) !important;
  padding: 50px 60px !important;
  border-radius: 4px !important;
  max-width: 420px;
  width: 90%;
  overflow: hidden;
}

.preloader-content::before, .preloader-content::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--color-digital-orange);
  border-style: solid;
  pointer-events: none;
}
.preloader-content::before {
  top: 10px;
  left: 10px;
  border-width: 2px 0 0 2px;
}
.preloader-content::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 2px 2px 0;
}

.preloader-scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--color-digital-orange), transparent);
  opacity: 0.8;
  animation: scan 3s linear infinite;
}

.preloader-logo {
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}
.preloader-logo img {
  width: 90px !important;
  height: 90px !important;
  object-fit: contain;
  border-radius: 0px !important;
  background: var(--color-ash-white) !important;
  padding: 10px !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  box-shadow: 4px 4px 0px var(--color-cyber-violet) !important;
  animation: floatLogo 2s ease-in-out infinite alternate;
}

.preloader-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
}
.spinner-outer {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--color-digital-orange);
  border-bottom-color: var(--color-digital-orange);
  border-radius: 50%;
  animation: spinClockwise 1.5s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
}
.spinner-inner {
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--color-cyber-violet);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinCounterClockwise 1s linear infinite;
}

.preloader-text {
  color: var(--color-pure-white) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  position: relative;
  display: inline-block;
  animation: glitchText 3s infinite;
}

.preloader-subtext {
  font-family: var(--font-dm-sans) !important;
  font-size: 10px;
  color: var(--color-digital-orange);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  animation: pulse 1s ease-in-out infinite alternate;
  margin-top: 5px;
}

@keyframes scan {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}
@keyframes floatLogo {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-6px) rotate(1deg); }
}
@keyframes spinClockwise {
  to { transform: rotate(360deg); }
}
@keyframes spinCounterClockwise {
  to { transform: rotate(-360deg); }
}
@keyframes glitchText {
  0%, 95%, 100% { text-shadow: none; color: var(--color-pure-white); }
  96% { text-shadow: 2px -1px var(--color-digital-orange), -2px 1px var(--color-cyber-violet); color: var(--color-pixel-glare); }
  97% { text-shadow: -3px 2px var(--color-digital-orange), 3px -2px var(--color-cyber-violet); }
  98% { text-shadow: 1px 2px var(--color-digital-orange), -1px -2px var(--color-cyber-violet); }
  99% { text-shadow: none; }
}
@keyframes pulse {
  from { opacity: 0.4; }
  to { opacity: 0.8; }
}

/* ---- Back to Top ---- */
.back-to-top {
  background: #fc5000;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #e64a00;
  transform: translateY(-3px);
}

/* ============================================================================
   HEADER — Full-width Desktop Version
   ============================================================================ */

header.large-screens {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-ash-white);
  z-index: 1000;
  transition: all var(--transition-duration) var(--transition-easing);
  display: block !important;
  overflow: visible !important;
  box-shadow: 0 2px 10px rgba(7, 6, 7, 0.08);
}

header.large-screens.scrolled {
  width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  background: rgba(247, 246, 242, 0.95);
  border: 2px solid var(--color-digital-orange);
  border-radius: 20px;
  padding: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(7, 6, 7, 0.15);
}

/* Navbar container */
header.large-screens nav.navbar {
  min-height: auto;
  background: transparent !important;
  border: none !important;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

/* ---- Logo/Brand with Animated Background ---- */
header.large-screens .navbar-brand {
  padding: 8px 16px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, rgba(252, 80, 0, 0.05), rgba(252, 80, 0, 0.02));
  border: 2px solid rgba(252, 80, 0, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 10;
  position: relative;
  overflow: hidden;
}

header.large-screens .navbar-brand::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(252, 80, 0, 0.1) 0%, transparent 70%);
  animation: brandGlow 4s ease-in-out infinite;
  z-index: 1;
}

header.large-screens .navbar-brand img {
  height: 48px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}

@keyframes brandGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

header.large-screens.scrolled .navbar-brand img {
  height: 40px;
}

header.large-screens .navbar-brand:hover {
  transform: scale(1.02);
}

/* Remove any background effects on logo container */
header.large-screens .navbar-brand::before,
header.large-screens .navbar-brand::after {
  display: none !important;
}

/* ---- Navigation Menu ---- */
header.large-screens nav .navbar-collapse {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-basis: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: visible !important;
}

header.large-screens .navbar-nav.mainmenu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 !important;
  background: transparent !important;
  flex: 1;
}

header.large-screens .navbar-nav.mainmenu > li {
  list-style: none;
  margin: 0;
  position: relative;
}

header.large-screens .navbar-nav.mainmenu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-abyssal-ink) !important;
  padding: 8px 16px !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  background: transparent !important;
  transition: all 0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

header.large-screens .navbar-nav.mainmenu > li > a:hover,
header.large-screens .navbar-nav.mainmenu > li > a.active {
  color: var(--color-pure-white) !important;
  background: var(--color-digital-orange) !important;
}

header.large-screens .navbar-nav.mainmenu > li > a .fa-caret-down {
  color: inherit;
  font-size: 10px;
}

/* ---- Dropdown Submenus ---- */
header.large-screens .submenu,
.navbar .dropdown-menu {
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-digital-orange) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
  min-width: 200px;
  backdrop-filter: blur(10px);
  position: absolute !important;
  z-index: 1100 !important;
  top: 100% !important;
  left: 0 !important;
  display: none !important;
}

header.large-screens .submenu li,
.navbar .dropdown-menu li {
  list-style: none;
  margin: 0 0 2px;
}

header.large-screens .submenu li a,
.navbar .dropdown-menu li a {
  display: block;
  padding: 10px 14px !important;
  background: transparent !important;
  border-radius: 8px !important;
  color: var(--color-abyssal-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'DM Sans', sans-serif;
}

header.large-screens .submenu li a:hover,
.navbar .dropdown-menu li a:hover {
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* Show dropdown on parent hover */
header.large-screens .menu-item:hover > .submenu,
header.large-screens .menu-item.has-children:hover .submenu,
.navbar li:hover > .dropdown-menu {
  display: block !important;
}

/* Override Bootstrap dropdown styles */
.dropdown-menu,
.submenu {
  background-color: var(--color-ash-white) !important;
  border: 2px solid var(--color-digital-orange) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

.dropdown-item {
  color: var(--color-abyssal-ink) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border-radius: 8px !important;
}

/* Game mega menu: 2-col grid */
header.large-screens .menu-item.has-children:hover .submenu.game-mega-menu,
header.large-screens .menu-item:hover > .submenu.game-mega-menu,
.game-mega-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  grid-auto-flow: row;
  gap: 2px 12px;
  min-width: 340px !important;
  max-width: 460px !important;
}

/* Currency & Language dropdowns */
header.large-screens .navbar-nav.right-content li.menu-item.has-children .children,
header.large-screens .navbar-nav.right-content li.has-children .children,
.navbar-nav.right-content li.menu-item.has-children .children,
.navbar-nav.right-content li.has-children .children {
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-digital-orange) !important;
  border-radius: 12px !important;
  padding: 8px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
  position: absolute !important;
  z-index: 1100 !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  min-width: 160px !important;
  display: none !important;
  list-style: none !important;
  margin: 8px 0 0 0 !important;
  padding: 8px !important;
}

header.large-screens .navbar-nav.right-content li.menu-item.has-children:hover .children,
header.large-screens .navbar-nav.right-content li.has-children:hover .children,
.navbar-nav.right-content li.menu-item.has-children:hover .children,
.navbar-nav.right-content li.has-children:hover .children {
  display: block !important;
}

header.large-screens .navbar-nav.right-content li.menu-item.has-children .children li,
header.large-screens .navbar-nav.right-content li.has-children .children li,
.navbar-nav.right-content li.menu-item.has-children .children li,
.navbar-nav.right-content li.has-children .children li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header.large-screens .navbar-nav.right-content li.menu-item.has-children .children li a,
header.large-screens .navbar-nav.right-content li.has-children .children li a,
.navbar-nav.right-content li.menu-item.has-children .children li a,
.navbar-nav.right-content li.has-children .children li a {
  display: block;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--color-abyssal-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'DM Sans', sans-serif;
  margin: 0 !important;
}

header.large-screens .navbar-nav.right-content li.menu-item.has-children .children li a:hover,
header.large-screens .navbar-nav.right-content li.has-children .children li a:hover,
.navbar-nav.right-content li.menu-item.has-children .children li a:hover,
.navbar-nav.right-content li.has-children .children li a:hover {
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border: none !important;
}

/* Override old theme styles for currency/language buttons */
header.large-screens .navbar-nav.right-content li.menu-item > a.main-menu-item:hover,
.navbar-nav.right-content li.menu-item > a.main-menu-item:hover {
  background: var(--color-digital-orange) !important;
  border-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* ---- Right Content (Icons & Controls) ---- */
header.large-screens .navbar-nav.right-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
}

header.large-screens .navbar-nav.right-content > li {
  position: relative;
}

header.large-screens .navbar-nav.right-content > li.menu-item > a.main-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: 20px !important;
  color: var(--color-abyssal-ink) !important;
  padding: 8px 14px !important;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

header.large-screens .navbar-nav.right-content > li.menu-item > a.main-menu-item:hover {
  background: var(--color-digital-orange) !important;
  border-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
}

/* Icon buttons (cart, account) */
header.large-screens .right-content li.icon a,
header.large-screens .navbar-nav.right-content li.menu-item > a.header-icon-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: 10px !important;
  color: var(--color-abyssal-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  transition: all 0.3s ease;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
}

header.large-screens .right-content li.icon a:hover,
header.large-screens .navbar-nav.right-content li.menu-item > a.header-icon-btn:hover {
  background: var(--color-digital-orange) !important;
  border-color: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  transform: translateY(-2px);
}

header.large-screens .right-content li.icon a svg,
header.large-screens .navbar-nav.right-content li.menu-item > a.header-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}

header.large-screens .right-content li.icon a .badge-uinfo {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #fc5000 !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px rgba(10, 10, 20, 0.95);
}

/* Credits chip (logged-in users) */
.custom-jpont { list-style: none; }
.custom-jpont a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fc5000 !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(252, 80, 0, 0.3);
  transition: all 0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

.custom-jpont a:hover {
  background: #e64a00 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(252, 80, 0, 0.4);
}

/* ============================================================================
   MOBILE HEADER
   ============================================================================ */

header.small-screen {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-ash-white);
  border-bottom: 2px solid var(--color-digital-orange);
  padding: 12px 16px;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

header.small-screen .navbar {
  padding: 0;
}

header.small-screen .navbar-brand img {
  height: 40px;
  width: auto;
}

header.small-screen .hamburger-menu {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

header.small-screen .hamburger-menu .bar {
  width: 24px;
  height: 2px;
  background: var(--color-abyssal-ink) !important;
  border-radius: 2px;
  transition: all 0.3s ease;
}

header.small-screen .hamburger-menu.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

header.small-screen .hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}

header.small-screen .hamburger-menu.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

header.small-screen .mobile-navar {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--color-ash-white) !important;
  border-bottom: 2px solid var(--color-digital-orange);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  backdrop-filter: blur(10px);
  display: none;
}

header.small-screen .mobile-navar.active {
  display: block;
}

header.small-screen .mobile-navar ul {
  list-style: none;
  margin: 0;
  padding: 12px;
}

header.small-screen .mobile-navar ul li a {
  display: block;
  padding: 12px 16px !important;
  border-radius: 8px;
  color: var(--color-abyssal-ink) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: var(--color-basalt-canvas) !important;
  border: 2px solid rgba(7, 6, 7, 0.1) !important;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

header.small-screen .mobile-navar ul li a:hover,
header.small-screen .mobile-navar ul li a.active {
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border-color: var(--color-digital-orange) !important;
}

/* ============================================================================
   SIDE CART PANEL (Glassmorphism)
   ============================================================================ */

.sideCart-wrapper.offcanvas-wrapper {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1100 !important;
  background: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.sideCart-wrapper.offcanvas-wrapper.show {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sideCart-wrapper .sidemenu-content {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 420px !important;
  max-width: 92vw !important;
  padding: 0 !important;
  background: var(--color-ash-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-right: none !important;
  border-left: 3px solid var(--color-abyssal-ink) !important;
  backdrop-filter: blur(10px);
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.1);
  z-index: 1101 !important;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  height: 100vh !important;
}

.sideCart-wrapper.show .sidemenu-content {
  transform: translateX(0);
}

/* Cart header */
.sideCart-wrapper .widget_title {
  position: relative;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 24px 24px 20px !important;
  background: var(--color-basalt-canvas) !important;
  color: var(--color-abyssal-ink) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none !important;
  border-bottom: 3px solid var(--color-abyssal-ink) !important;
}

.sideCart-wrapper .widget_title::before {
  content: "\f07a";
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", sans-serif;
  font-weight: 900;
  color: var(--color-digital-orange);
  font-size: 16px;
}


/* Cart items */
.sideCart-wrapper .cart_list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 16px;
}

.sideCart-wrapper .mini_cart_item {
  position: relative;
  list-style: none;
  background: var(--color-pure-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  transition: all 0.25s ease;
}

.sideCart-wrapper .mini_cart_item:hover {
  border-color: var(--color-digital-orange) !important;
  box-shadow: 0 10px 25px rgba(252, 80, 0, 0.1) !important;
}

.sideCart-wrapper .prductsde_info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.sideCart-wrapper .mini_cart_item img {
  width: 70px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 2px solid var(--color-abyssal-ink) !important;
}

.sideCart-wrapper .cart-product-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sideCart-wrapper .cart-product-title {
  color: var(--color-abyssal-ink) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  line-height: 1.2;
  margin: 0 !important;
}

.sideCart-wrapper .cart-total-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  line-height: 1;
  margin-top: 6px;
  border: 2px solid var(--color-abyssal-ink);
  text-transform: uppercase;
  width: fit-content;
}

.sideCart-wrapper .car-hours-group {
  position: relative !important;
  background: rgba(252, 80, 0, 0.06) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sideCart-wrapper .car-hours-group h5 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--color-digital-orange) !important;
  margin: 0 !important;
  text-transform: uppercase;
}

.sideCart-wrapper .car-hours-group p {
  font-family: var(--font-dm-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-abyssal-ink) !important;
  margin: 0 !important;
}

.sideCart-wrapper .training-remove {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  color: var(--color-abyssal-ink) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: color 0.2s ease;
}

.sideCart-wrapper .training-remove:hover {
  color: var(--color-digital-orange) !important;
}

.sideCart-wrapper .mini_cart_item > .remove {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 42, 42, 0.1);
  border: 1px solid rgba(255, 42, 42, 0.2);
  color: #ff2a2a !important;
  font-size: 12px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sideCart-wrapper .mini_cart_item > .remove:hover {
  background: #ff2a2a;
  border-color: #ff2a2a;
  color: #fff !important;
}

/* Cart footer */
.sideCart-wrapper .sidecart-footer {
  flex: 0 0 auto;
  padding: 16px;
  background: var(--color-basalt-canvas);
  border-top: 2px solid rgba(7, 6, 7, 0.1);
}

.sideCart-wrapper .total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-pure-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 16px !important;
  width: 100%;
}

.sideCart-wrapper .total strong {
  color: var(--color-abyssal-ink) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.sideCart-wrapper .total .amount {
  color: var(--color-digital-orange) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-weight: 900;
  font-size: 20px;
  white-space: nowrap;
}

.sideCart-wrapper .buttons {
  display: flex;
  gap: 10px;
  margin: 0 !important;
}

.sideCart-wrapper .buttons .cus-btn {
  flex: 1;
  width: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-buttons) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--color-abyssal-ink) !important;
  text-decoration: none !important;
}

.sideCart-wrapper .buttons .cus-btn:hover {
  background: var(--color-abyssal-ink) !important;
  color: var(--color-pure-white) !important;
  box-shadow: none !important;
  transform: translateY(2px) !important;
}

.sideCart-wrapper .closeButton {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ash-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  color: var(--color-abyssal-ink) !important;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sideCart-wrapper .closeButton:hover {
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border-color: var(--color-abyssal-ink) !important;
  transform: rotate(90deg);
}

.header-icon-btn i {
  font-size: 18px !important;
  color: var(--color-abyssal-ink) !important;
}
li.custom-jpont {
    padding-right: 20px;
}
/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1199px) {
  header.large-screens { display: none !important; }
  header.small-screen { display: block !important; }
}

@media (min-width: 1200px) {
  header.small-screen { display: none !important; }
  header.large-screens { display: block !important; }
}

@media (max-width: 768px) {
  header.small-screen { padding: 10px 12px; }
  .sideCart-wrapper .sidemenu-content { width: 100vw !important; max-width: 100vw !important; }
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\about-us.blade.php (.page-pages-about-us)
   ========================================================================== */
.page-pages-about-us {
/* ============================================================================
   CALDERA ABOUT PAGE — Premium Gaming Theme Style
   ============================================================================ */

.polygamez-about-page {
  padding: 0;
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Intro Grid Section */
.about-intro-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.18);
  overflow: hidden;
}

/* Full-bleed background video */
.about-intro-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay for text legibility */
.about-intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(7, 6, 7, 0.88) 0%,
    rgba(7, 6, 7, 0.72) 45%,
    rgba(7, 6, 7, 0.45) 100%
  );
}

.about-intro-wrapper {
  position: relative;
  z-index: 2;
  max-width: 100%;
  padding: var(--spacing-80) var(--spacing-40);
}

.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

/* Copy block (now over the video) */
.about-copy-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-ash-white);
  border: 2px solid var(--color-digital-orange);
  color: var(--color-digital-orange);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-20);
}

.about-copy-block h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 900;
  color: var(--color-pure-white);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: var(--spacing-12);
}

.about-copy-block h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-digital-orange);
  margin-bottom: var(--spacing-24);
  line-height: 1.4;
  font-family: var(--font-dm-sans);
}

.about-copy-block p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--spacing-20);
}

.about-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16) var(--spacing-40);
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: none;
  border-radius: var(--radius-inputs);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  box-shadow: 0 12px 30px rgba(252, 80, 0, 0.2);
  margin-top: var(--spacing-16);
}

.about-pill-btn:hover {
  background: var(--color-pure-white);
  color: var(--color-abyssal-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.25);
}

/* Why Choose / Pillars Section Box */
.why-choose-section {
  background: var(--color-pure-white);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(252, 80, 0, 0.1);
}

.why-choose-wrapper {
  max-width: 100%;
  width: 100%;
  padding: var(--spacing-56) var(--spacing-40);
}

/* Card System Grid - 4 Cards */
.grid-4-card-system {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-40);
}

.card-system {
  border-radius: var(--radius-3xl-3);
  padding: var(--spacing-24) var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  transition: all 0.3s ease;
  min-height: auto;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 40px rgba(7, 6, 7, 0.08);
  overflow: hidden;
  background: var(--color-pure-white);
  border: 3px solid var(--color-abyssal-ink);
  color: var(--color-abyssal-ink);
}

.card-system:hover {
  background: var(--color-digital-orange);
  border-color: var(--color-digital-orange);
  color: var(--color-pure-white);
  transform: translateY(-4px);
  box-shadow: 0 15px 50px rgba(252, 80, 0, 0.25);
}

.card-system .card-label {
  color: var(--color-abyssal-ink);
}

.card-system .card-description {
  color: var(--color-abyssal-ink);
  line-height: 1.6;
}

.card-system .card-icon-top {
  color: var(--color-digital-orange);
  font-size: 22px;
}

.card-system:hover .card-label {
  color: var(--color-pure-white);
}

.card-system:hover .card-description {
  color: rgba(255, 255, 255, 0.95);
}

.card-system:hover .card-icon-top {
  color: var(--color-pure-white);
}

.card-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
  min-height: auto;
  flex-wrap: wrap;
}

.card-label {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin: 0;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.card-icon-top {
  font-size: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}

.card-body {
  width: 100%;
}

.card-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

/* Section Title with Line */
.section-title-with-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
}

.title-square {
  width: 20px;
  height: 20px;
  background: var(--color-digital-orange);
  border-radius: 3px;
  flex-shrink: 0;
}

.section-title-with-line h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title-underline {
  flex: 1;
  height: 2px;
  background: var(--color-abyssal-ink);
  margin-left: var(--spacing-24);
}

/* Footer Banner Call To Action */
.about-footer-cta {
  background: linear-gradient(135deg, var(--color-abyssal-ink) 0%, #17151a 100%);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(7, 6, 7, 0.2);
  border: 3px solid var(--color-abyssal-ink);
}

.about-cta-wrapper {
  padding: var(--spacing-64) var(--spacing-40);
  text-align: center;
  position: relative;
}

.about-cta-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(252, 80, 0, 0.1);
  border: 2px solid var(--color-digital-orange);
  color: var(--color-digital-orange);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-24);
}

.about-footer-cta h2 {
  font-size: clamp(32px, 4vw, 56px);
  color: var(--color-pure-white);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

.about-footer-cta p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-body);
  max-width: 600px;
  margin: 0 auto var(--spacing-32);
  line-height: 1.6;
}

.about-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-16) var(--spacing-48);
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: none;
  border-radius: var(--radius-inputs);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  box-shadow: 0 15px 40px rgba(252, 80, 0, 0.3);
}

.about-cta-btn:hover {
  background: var(--color-pure-white);
  color: var(--color-abyssal-ink);
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

/* Responsive Media Queries */
@media (max-width: 1199px) {
  .grid-4-card-system {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-24);
  }
}

@media (max-width: 991px) {
  .about-hero-section,
  .about-intro-section,
  .why-choose-section,
  .about-footer-cta {
    margin: var(--spacing-24);
    margin-top: var(--spacing-40);
  }

  .about-hero-wrapper {
    padding: var(--spacing-64) var(--spacing-24);
  }

  .about-intro-wrapper {
    padding: var(--spacing-56) var(--spacing-24);
  }

  .about-cta-wrapper {
    padding: var(--spacing-48) var(--spacing-24);
  }

  .grid-4-card-system {
    grid-template-columns: 1fr;
    gap: var(--spacing-20);
  }
  .card-system {
    min-height: auto;
    padding: var(--spacing-24) var(--spacing-20);
  }
  .section-title-with-line {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
  }
  .title-underline {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .about-hero-section,
  .about-intro-section,
  .why-choose-section,
  .about-footer-cta {
    margin: var(--spacing-16);
    margin-top: var(--spacing-32);
    border-radius: var(--radius-3xl-2);
  }

  .about-hero-wrapper {
    padding: var(--spacing-48) var(--spacing-16);
  }

  .about-intro-wrapper {
    padding: var(--spacing-40) var(--spacing-16);
  }

  .about-cta-wrapper {
    padding: var(--spacing-32) var(--spacing-16);
  }

  .about-pill-btn,
  .about-cta-btn {
    width: 100%;
  }

  .card-system {
    gap: var(--spacing-10);
    min-height: auto;
    padding: var(--spacing-16) var(--spacing-16);
  }

  .card-description {
    font-size: 14px;
    line-height: 1.5;
  }

  .card-label {
    font-size: 15px;
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\cart.blade.php (.page-pages-cart)
   ========================================================================== */
.page-pages-cart {
/* ============================================================================
   CALDERA CART SYSTEM — Premium Gaming Design System
   ============================================================================ */

.cart-section {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40);
    margin-top: var(--spacing-56);
    margin-bottom: var(--spacing-80) !important;
    min-height: 50vh;
}

.cart-continue {
    margin-bottom: var(--spacing-32) !important;
}

.cart-continue-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-8) !important;
    background: var(--color-ash-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-buttons) !important;
    color: var(--color-abyssal-ink) !important;
    padding: 12px 24px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 0 var(--color-abyssal-ink) !important;
    transition: all 0.2s ease !important;
}

.cart-continue-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Cart Grid */
.cart-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-32) !important;
}

/* Cart Table */
.cart-table {
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
}

.cart-table-head,
.cart-table-row {
    display: grid !important;
    grid-template-columns: 1fr 180px 140px 120px !important;
    gap: var(--spacing-16) !important;
    align-items: center !important;
    padding: var(--spacing-20) var(--spacing-40) !important;
}

.cart-table-head {
    background: var(--color-abyssal-ink) !important;
    border-bottom: 3px solid var(--color-abyssal-ink) !important;
    padding: var(--spacing-16) var(--spacing-40) !important;
}

.cart-th {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--color-pure-white) !important;
}

.cart-th-center {
    text-align: center !important;
}

.cart-table-row {
    border-bottom: 2px solid rgba(7, 6, 7, 0.08) !important;
    transition: background 0.3s ease !important;
}

.cart-table-row:last-child {
    border-bottom: none !important;
}

.cart-table-row:hover {
    background: var(--color-ash-white) !important;
}

.cart-col-product {
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-16) !important;
}

.cart-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 768px) {
    .cart-table-head {
        display: none !important;
    }

    .cart-table-row {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-12) !important;
        padding: var(--spacing-20) !important;
        align-items: flex-start !important;
        border-bottom: 2px solid var(--color-abyssal-ink) !important;
    }

    .cart-table-row:last-child {
        border-bottom: none !important;
    }

    .cart-col-product {
        width: 100% !important;
        margin-bottom: var(--spacing-8) !important;
    }

    .cart-col-price, .cart-col-total, .cart-col-action {
        justify-content: space-between !important;
        width: 100% !important;
    }
}

.cart-product-image {
    width: 84px !important;
    height: 60px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--color-basalt-canvas) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
}

.cart-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.cart-product-points-only {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: rgba(252, 80, 0, 0.1) !important;
    border: 2px dashed rgba(252, 80, 0, 0.4) !important;
}

.cart-product-points-only i {
    font-size: 16px !important;
    color: var(--color-digital-orange) !important;
}

.cart-product-points-only .points-badge {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--color-digital-orange) !important;
    text-transform: uppercase !important;
}

.cart-product-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

.cart-product-price {
    font-family: var(--font-dm-sans) !important;
    font-size: 14px !important;
    color: rgba(7, 6, 7, 0.6) !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.cart-product-price span {
    color: var(--color-digital-orange) !important;
    font-weight: 700 !important;
}

.cart-product-total {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--color-abyssal-ink) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.cart-cell-label {
    display: none !important;
}

@media (max-width: 768px) {
    .cart-cell-label {
        display: inline-block !important;
        font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: rgba(7, 6, 7, 0.4) !important;
        margin-right: 6px !important;
    }
}

.cart-remove-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.cart-remove-btn:hover {
    background: #ef4444 !important;
    color: var(--color-pure-white) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Empty Cart State */
.cart-empty {
    text-align: center !important;
    padding: var(--spacing-64) var(--spacing-32) !important;
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
}

.cart-empty-icon {
    width: 80px !important;
    height: 80px !important;
    background: rgba(252, 80, 0, 0.1) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto var(--spacing-24) !important;
}

.cart-empty h3 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--spacing-12) !important;
}

.cart-empty p {
    color: rgba(7, 6, 7, 0.6) !important;
    font-size: 15px !important;
    margin-bottom: var(--spacing-28) !important;
}

.cart-empty-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.cart-empty-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
}

/* Cart Summary Sidebar */
.cart-summary {
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.cart-summary-body {
    padding: var(--spacing-32) !important;
}

.cart-summary-items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-16) !important;
    margin-bottom: var(--spacing-24) !important;
    padding-bottom: var(--spacing-24) !important;
    border-bottom: 1px solid rgba(7, 6, 7, 0.08) !important;
}

.cart-summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cart-summary-item-label {
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(7, 6, 7, 0.5) !important;
}

.cart-summary-item-value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
}

.cart-summary-totals {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: var(--spacing-28) !important;
}

.cart-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cart-summary-row.total {
    padding-top: var(--spacing-16) !important;
    border-top: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.cart-summary-row.total .label {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    text-transform: uppercase !important;
}

.cart-summary-row.total .value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--color-digital-orange) !important;
    line-height: 1 !important;
}

.cart-checkout-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    padding: 16px 24px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
}

.cart-checkout-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
}

.cart-continue-shopping {
    display: block !important;
    text-align: center !important;
    margin-top: 18px !important;
    color: rgba(7, 6, 7, 0.5) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.cart-continue-shopping:hover {
    color: var(--color-digital-orange) !important;
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .cart-section {
        padding: 0 !important;
        margin: var(--spacing-16);
    }
    
    .cart-summary {
        position: static !important;
    }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\cat-list.blade.php (.page-pages-cat-list)
   ========================================================================== */
.page-pages-cat-list {
/* Cat List Page Hero Banner - Gaming Theme */
.cat-hero-banner {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ws-bg-dark);
    margin-top: 80px;
}

.cat-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../media/blogs/bd-1.png') center/cover no-repeat;
    opacity: 0.25;
}

.cat-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(15, 15, 35, 0.9) 50%, rgba(124, 58, 237, 0.2) 100%);
}

.cat-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 60px 20px;
}

.cat-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-accent));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
    animation: pulse-glow-cat 2s ease-in-out infinite;
}

@keyframes pulse-glow-cat {
    0%, 100% { 
        box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 60px rgba(124, 58, 237, 0.8), 0 0 80px rgba(244, 63, 94, 0.4);
        transform: scale(1.05);
    }
}

.cat-hero-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.cat-hero-title {
    font-size: 56px;
    font-weight: 800;
    font-family: 'Chakra Petch', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--ws-text-primary) 0%, var(--ws-primary-light) 50%, var(--ws-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.5));
}

.cat-hero-subtitle {
    font-size: 18px;
    color: var(--ws-text-muted);
    margin-bottom: 30px;
    font-weight: 400;
}

.cat-hero-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(26, 26, 46, 0.8);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid var(--ws-border-light);
}

.cat-hero-breadcrumb a,
.cat-hero-breadcrumb span {
    color: var(--ws-text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-hero-breadcrumb a:hover {
    color: var(--ws-primary-light);
}

.cat-hero-breadcrumb span.active {
    color: var(--ws-primary-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    .cat-hero-banner {
        min-height: 300px;
        margin-top: 70px;
    }
    .cat-hero-title {
        font-size: 36px;
    }
    .cat-hero-icon {
        width: 60px;
        height: 60px;
    }
    .cat-hero-icon svg {
        width: 30px;
        height: 30px;
    }
}

/* Cat List Page Content */
.db-detail {
    background: var(--ws-bg-darker);
    padding: 60px 0;
}

.db-detail .gt-shop-section {
    background: var(--ws-bg-dark);
}

/* Category Cards - Gaming Theme */
.db-detail .product-card {
    background: var(--ws-bg-card, #1A1F36);
    border: 1px solid var(--ws-border-light, rgba(160, 174, 192, 0.1));
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    padding-bottom: 16px;
}

.db-detail .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
    border-color: var(--ws-primary, #8B5CF6);
}

.db-detail .product-card a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.db-detail .product-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.db-detail .product-card:hover img {
    transform: scale(1.1);
}

.db-detail .product-card h4 {
    margin-top: 16px;
    text-align: center;
    font-family: 'Chakra Petch', sans-serif;
    color: var(--ws-text-primary, white) !important;
    font-size: 16px;
    padding: 0 12px;
}

.db-detail .product-card h4 a {
    color: var(--ws-text-primary, white) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.db-detail .product-card h4 a:hover {
    color: var(--ws-primary, #8B5CF6) !important;
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\checkout.blade.php (.page-pages-checkout)
   ========================================================================== */
.page-pages-checkout {
/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Main Checkout Layout */
.checkout-page-wrapper {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40) !important;
    margin-top: var(--spacing-56) !important;
    margin-bottom: var(--spacing-80) !important;
    min-height: auto;
}

@media (max-width: 768px) {
    .checkout-page-wrapper {
        margin: var(--spacing-16) !important;
        margin-top: var(--spacing-32) !important;
        margin-bottom: var(--spacing-48) !important;
    }
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--spacing-40);
    align-items: start;
}

@media (max-width: 1024px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
    }
}

/* Left Column - Forms */
.checkout-forms-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}

/* Gaming Card Styling */
.gaming-card {
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 20px !important;
    padding: var(--spacing-32);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    transition: all 0.3s ease;
}

.gaming-card-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: var(--spacing-24);
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Styling */
.checkout-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.checkout-form-row.full-width {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .checkout-form-row {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }
}

.checkout-form-group {
    position: relative;
}

.checkout-form-group label {
    display: block;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-form-group label .required-star {
    color: var(--color-digital-orange);
    margin-left: 2px;
}

.checkout-input,
.checkout-select,
.checkout-textarea,
.payment-input {
    width: 100%;
    padding: 14px 20px;
    background: var(--color-pure-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    color: var(--color-abyssal-ink) !important;
    font-size: 14px !important;
    font-family: var(--font-dm-sans) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
}

.checkout-textarea {
    border-radius: 16px !important;
    min-height: 120px;
    resize: vertical;
}

.checkout-input:focus,
.checkout-select:focus,
.checkout-textarea:focus,
.payment-input:focus {
    outline: none !important;
    border-color: var(--color-digital-orange) !important;
    box-shadow: 0 0 0 4px rgba(252, 80, 0, 0.15) !important;
    background: var(--color-pure-white) !important;
}

.checkout-input::placeholder,
.checkout-textarea::placeholder,
.payment-input::placeholder {
    color: rgba(7, 6, 7, 0.35) !important;
}

.checkout-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23070607' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 16px !important;
}

.checkout-select option {
    background: var(--color-pure-white) !important;
    color: var(--color-abyssal-ink) !important;
    padding: 12px;
}

/* Checkbox Styling */
.checkout-checkbox-group {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checkout-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

.checkout-checkbox input[type="checkbox"] {
    display: none;
}

.checkout-checkbox .custom-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
    background: var(--color-pure-white) !important;
}

.checkout-checkbox input[type="checkbox"]:checked + .custom-check {
    background: var(--color-digital-orange) !important;
    border-color: var(--color-abyssal-ink) !important;
}

.checkout-checkbox .custom-check i {
    font-size: 11px;
    color: var(--color-pure-white) !important;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.checkout-checkbox input[type="checkbox"]:checked + .custom-check i {
    opacity: 1;
    transform: scale(1);
}

.checkout-checkbox .checkbox-label {
    font-family: var(--font-dm-sans) !important;
    font-size: 14px;
    font-weight: 500;
    color: rgba(7, 6, 7, 0.7) !important;
    line-height: 1.5;
}

.checkout-checkbox .checkbox-label a {
    color: var(--color-digital-orange) !important;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}

.checkout-checkbox .checkbox-label a:hover {
    color: var(--color-abyssal-ink) !important;
    text-decoration: underline;
}

.checkout-checkbox.error {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.06);
    border: 2px solid rgba(239, 68, 68, 0.2);
}

/* Payment Logos */
.payment-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.payment-logos img {
    height: 28px;
}

.dba-text {
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(7, 6, 7, 0.7) !important;
    margin-top: 20px;
    padding: 16px;
    background: var(--color-ash-white) !important;
    border-radius: 12px;
    border-left: 4px solid var(--color-digital-orange) !important;
    border-top: 2px solid var(--color-abyssal-ink) !important;
    border-bottom: 2px solid var(--color-abyssal-ink) !important;
    border-right: 2px solid var(--color-abyssal-ink) !important;
}

/* Right Column - Sticky Checkout Card */
.checkout-summary-column {
    position: sticky;
    top: 130px;
    z-index: 10;
}

.checkout-summary-card {
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    position: relative;
}

.checkout-summary-header {
    padding: 24px 28px 20px;
    border-bottom: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.checkout-summary-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Order Items */
.order-items-list {
    padding: 12px 28px;
    max-height: 280px;
    overflow-y: auto;
}

.order-items-list::-webkit-scrollbar {
    width: 6px;
}

.order-items-list::-webkit-scrollbar-track {
    background: rgba(252, 80, 0, 0.05);
    border-radius: 3px;
}

.order-items-list::-webkit-scrollbar-thumb {
    background: rgba(7, 6, 7, 0.15);
    border-radius: 3px;
}

.order-items-list::-webkit-scrollbar-thumb:hover {
    background: rgba(7, 6, 7, 0.25);
}

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.order-item:last-child {
    border-bottom: none !important;
}

.order-item-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.order-item-icon {
    width: 44px;
    height: 44px;
    background: rgba(252, 80, 0, 0.08) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-item-icon i {
    font-size: 16px;
    color: var(--color-digital-orange) !important;
}

.order-item-details h5 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.order-item-details span {
    font-family: var(--font-dm-sans) !important;
    font-size: 13px !important;
    font-weight: 600;
    color: rgba(7, 6, 7, 0.5) !important;
}

.order-item-price {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--color-abyssal-ink) !important;
}

/* Order Total */
.order-total-section {
    padding: 20px 28px;
    background: var(--color-ash-white) !important;
    border-top: 3px solid var(--color-abyssal-ink) !important;
    border-bottom: 3px solid var(--color-abyssal-ink) !important;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-total-label {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-total-amount {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--color-digital-orange) !important;
}

/* Payment Form */
.payment-form-section {
    padding: 28px;
}

.payment-form-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-input-group {
    margin-bottom: 18px;
}

.payment-input-group label {
    display: block;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
}

.card-jninfo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-jninfo .payment-input {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
}

.card-jninfo span {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-abyssal-ink) !important;
}

/* Captcha Section */
.captcha-section {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.captcha-section .payment-input {
    flex: 1;
}

.captcha-box {
    width: 130px;
    height: 50px;
    min-width: 130px;
    background: var(--color-ash-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-2xl-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.captcha-box img {
    max-width: 100%;
    height: auto;
}

/* Place Order Button */
.place-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    padding: 16px 32px !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-buttons) !important;
    color: var(--color-pure-white) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.place-order-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
}

/* Error / warning messages */
.text-danger,
#frmCheckout label.error {
    display: block;
    font-family: var(--font-dm-sans) !important;
    font-size: 12px;
    font-weight: 700;
    color: #ef4444 !important;
    margin-top: 8px;
}

/* Alert styling overrides */
.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 2px solid #10b981 !important;
    color: #10b981 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-family: var(--font-dm-sans) !important;
    font-weight: 600 !important;
    margin-bottom: 20px;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    font-family: var(--font-dm-sans) !important;
    font-weight: 600 !important;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .checkout-summary-column {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .gaming-card {
        padding: 24px 20px;
    }
    
    .checkout-summary-card {
        margin-top: 10px;
    }
    
    .payment-row {
        grid-template-columns: 1.2fr 0.8fr;
    }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\contact.blade.php (.page-pages-contact)
   ========================================================================== */
.page-pages-contact {
/* ============================================================================
   CALDERA CONTACT PAGE — Premium Gaming Theme Style
   ============================================================================ */

.polygamez-contact-page {
  padding: 0;
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Contact console layout */
.contact-section-box {
  background: var(--color-pure-white);
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
  border: 3px solid var(--color-abyssal-ink);
}

.contact-console {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 600px;
}

/* Left Panel: Company details & support details */
.contact-info-panel {
  background: var(--color-ash-white);
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  border-right: 3px solid var(--color-abyssal-ink);
}

.contact-info-panel h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-8);
  line-height: 1.1;
}

.contact-info-subtitle {
  font-size: 15px;
  color: var(--color-digital-orange);
  font-weight: 600;
  margin-bottom: var(--spacing-40);
}

/* Company items stack */
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  margin-bottom: var(--spacing-40);
}

.contact-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.contact-detail-icon {
  width: 50px;
  height: 50px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 2px solid var(--color-abyssal-ink);
}

.contact-detail-text {
  display: flex;
  flex-direction: column;
}

.contact-detail-text label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 14px;
  color: rgba(7, 6, 7, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-4);
}

.contact-detail-text strong {
  font-size: 16px;
  color: var(--color-abyssal-ink);
  word-break: break-word;
}

.contact-detail-text a {
  font-size: 16px;
  color: var(--color-digital-orange);
  font-weight: 600;
  text-decoration: none;
}

.contact-detail-text a:hover {
  color: var(--color-abyssal-ink);
}

/* Extra support badge at bottom */
.contact-support-badge-caldera {
  margin-top: auto;
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-20);
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.contact-support-badge-caldera i {
  font-size: 28px;
  color: var(--color-digital-orange);
}

.contact-support-badge-caldera div {
  display: flex;
  flex-direction: column;
}

.contact-support-badge-caldera span {
  font-size: 12px;
  color: rgba(7, 6, 7, 0.6);
}

.contact-support-badge-caldera strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-abyssal-ink);
}

/* Right Panel: Send message form */
.contact-form-panel {
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  background: var(--color-pure-white);
}

.contact-form-panel h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-12);
  line-height: 1.1;
}

.contact-form-panel p {
  font-size: 15px;
  color: rgba(7, 6, 7, 0.7);
  margin-bottom: var(--spacing-32);
}

/* Field styling */
.contact-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  position: relative;
}

.contact-field label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-abyssal-ink);
}

/* Input design */
.contact-input-wrap {
  position: relative;
  width: 100%;
}

.contact-input-wrap input {
  padding-left: 48px; /* space for icon */
  border-radius: var(--radius-inputs);
  border: 2px solid var(--color-abyssal-ink);
  font-size: 15px;
  height: 48px;
  width: 100%;
}

.contact-input-wrap textarea {
  padding-left: 48px;
  border-radius: var(--radius-2xl);
  border: 2px solid var(--color-abyssal-ink);
  font-size: 15px;
  min-height: 120px;
  resize: vertical;
  width: 100%;
}

.contact-input-wrap i {
  position: absolute;
  left: 20px;
  top: 15px;
  color: rgba(7, 6, 7, 0.4);
  font-size: 16px;
  pointer-events: none;
}

.contact-input-wrap textarea + i {
  top: 18px;
}

/* Captcha row styles */
.contact-captcha-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-16);
  align-items: center;
  margin-bottom: var(--spacing-24);
}

.contact-captcha-image {
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-inputs);
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
}

.contact-captcha-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* Submit button */
.contact-submit-btn-caldera {
  width: 100%;
  min-height: 50px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-buttons);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25);
}

.contact-submit-btn-caldera:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(7, 6, 7, 0.2);
}

.contact-submit-btn-caldera:active {
  transform: scale(0.98);
}

/* Validation styles matching standard error message output */
#contact_form .text-danger,
#contact_form label.error {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #b45309 !important; /* warning amber */
  margin-top: 6px;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .contact-section-box {
    margin: var(--spacing-24);
    margin-top: var(--spacing-40);
  }

  .contact-console {
    grid-template-columns: 1fr;
  }

  .contact-info-panel {
    border-right: none;
    border-bottom: 3px solid var(--color-abyssal-ink);
    padding: var(--spacing-32);
  }

  .contact-form-panel {
    padding: var(--spacing-32);
  }
}

@media (max-width: 768px) {
  .contact-section-box {
    margin: var(--spacing-16);
    margin-top: var(--spacing-32);
    border-radius: var(--radius-3xl-2);
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: var(--spacing-24) var(--spacing-16);
  }

  .contact-field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-captcha-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .contact-captcha-image {
    width: 100%;
    justify-content: center;
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\database.blade.php (.page-pages-database)
   ========================================================================== */
.page-pages-database {
/* Database Page Hero Banner - Gaming Theme */
.db-hero-banner {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--ws-bg-dark);
    margin-top: 80px;
}

.db-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../media/blogs/bd-1.png') center/cover no-repeat;
    opacity: 0.25;
}

.db-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(15, 15, 35, 0.9) 50%, rgba(124, 58, 237, 0.2) 100%);
}

.db-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 60px 20px;
}

.db-hero-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ws-primary), var(--ws-accent));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
    animation: pulse-glow-db 2s ease-in-out infinite;
}

@keyframes pulse-glow-db {
    0%, 100% { 
        box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 60px rgba(124, 58, 237, 0.8), 0 0 80px rgba(244, 63, 94, 0.4);
        transform: scale(1.05);
    }
}

.db-hero-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.db-hero-title {
    font-size: 56px;
    font-weight: 800;
    font-family: 'Chakra Petch', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--ws-text-primary) 0%, var(--ws-primary-light) 50%, var(--ws-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(124, 58, 237, 0.5));
}

.db-hero-subtitle {
    font-size: 18px;
    color: var(--ws-text-muted);
    margin-bottom: 30px;
    font-weight: 400;
}

.db-hero-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(26, 26, 46, 0.8);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid var(--ws-border-light);
}

.db-hero-breadcrumb a,
.db-hero-breadcrumb span {
    color: var(--ws-text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-hero-breadcrumb a:hover {
    color: var(--ws-primary-light);
}

.db-hero-breadcrumb span.active {
    color: var(--ws-primary-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    .db-hero-banner {
        min-height: 300px;
        margin-top: 70px;
    }
    .db-hero-title {
        font-size: 36px;
    }
    .db-hero-icon {
        width: 60px;
        height: 60px;
    }
    .db-hero-icon svg {
        width: 30px;
        height: 30px;
    }
}

/* Database Page Content */
.db-detail {
    background: var(--ws-bg-darker);
    padding: 60px 0;
}

.db-detail .gt-shop-section {
    background: var(--ws-bg-dark);
}

/* Database Product Cards - Gaming Theme */
.db-detail .product-card {
    background: var(--ws-bg-card, #1A1F36);
    border: 1px solid var(--ws-border-light, rgba(160, 174, 192, 0.1));
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Fix app.css button animation issue - keep gradient after animation */
.db-detail .product-card .cus-btn {
    background: linear-gradient(135deg, var(--ws-primary, #8B5CF6), var(--ws-accent, #f43f5e)) !important;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: white !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.db-detail .product-card .cus-btn::before {
    display: none !important;
}

.db-detail .product-card .cus-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, var(--ws-primary-dark, #7C3AED), var(--ws-accent, #f43f5e)) !important;
    color: white !important;
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\forget-pwd-form.blade.php (.page-pages-forget-pwd-form)
   ========================================================================== */
.page-pages-forget-pwd-form {
/* ============================================================================
   CALDERA FORGOT PASSWORD PAGE — Premium Gaming Theme Style
   ============================================================================ */

.polygamez-auth-page {
  padding: 0;
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Auth console layout */
.auth-section-box {
  background: var(--color-pure-white);
  margin: var(--spacing-56) auto;
  max-width: 650px;
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
  border: 3px solid var(--color-abyssal-ink);
}

.auth-console {
  display: block;
}

/* Form Panel */
.auth-form-panel {
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  background: var(--color-pure-white);
}

.auth-form-panel h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-12);
  line-height: 1.1;
  text-align: center;
}

.auth-form-panel p {
  font-size: 15px;
  color: rgba(7, 6, 7, 0.7);
  margin-bottom: var(--spacing-32);
  text-align: center;
}

/* Field styling */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  position: relative;
}

.auth-field label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-abyssal-ink);
}

/* Input design */
.auth-input-wrap {
  position: relative;
  width: 100%;
}

.auth-input-wrap input {
  padding-left: 48px; /* space for icon */
  border-radius: var(--radius-inputs);
  border: 2px solid var(--color-abyssal-ink);
  font-size: 15px;
  height: 48px;
  width: 100%;
}

.auth-input-wrap i {
  position: absolute;
  left: 20px;
  top: 15px;
  color: rgba(7, 6, 7, 0.4);
  font-size: 16px;
  pointer-events: none;
}

/* Captcha row styles */
.auth-captcha-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-16);
  align-items: center;
  margin-bottom: var(--spacing-24);
}

.auth-captcha-image {
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-inputs);
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
}

.auth-captcha-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* Submit button */
.auth-submit-btn-caldera {
  width: 100%;
  min-height: 50px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-buttons);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25);
}

.auth-submit-btn-caldera:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(7, 6, 7, 0.2);
}

.auth-submit-btn-caldera:active {
  transform: scale(0.98);
}

/* Validation styles matching standard error message output */
.text-danger {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #b45309 !important; /* warning amber */
  margin-top: 6px;
}

.auth-switch-link {
  margin-top: var(--spacing-24);
  text-align: center;
  font-size: 14px;
}

.auth-switch-link p {
  color: rgba(7, 6, 7, 0.6);
  margin: 0;
}

.auth-switch-link a {
  color: var(--color-digital-orange);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch-link a:hover {
  color: var(--color-abyssal-ink);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .auth-section-box {
    margin: var(--spacing-40) auto;
  }
}

@media (max-width: 768px) {
  .auth-section-box {
    margin: var(--spacing-32) var(--spacing-16);
    border-radius: var(--radius-3xl-2);
  }

  .auth-form-panel {
    padding: var(--spacing-24) var(--spacing-16);
  }

  .auth-captcha-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .auth-captcha-image {
    width: 100%;
    justify-content: center;
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\gamecart.blade.php (.page-pages-gamecart)
   ========================================================================== */
.page-pages-gamecart {
/* ============================================================================
   CALDERA GAMECART SYSTEM — Premium Gaming Design System
   ============================================================================ */

.gamecart-section {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40);
    margin-top: var(--spacing-56);
    margin-bottom: var(--spacing-80) !important;
    min-height: 50vh !important;
}

@media (max-width: 768px) {
    .gamecart-section {
        margin: var(--spacing-16) !important;
        margin-top: var(--spacing-32) !important;
        margin-bottom: var(--spacing-48) !important;
    }
}

/* Top bar: credits */
.gamecart-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: var(--spacing-32) !important;
}

.gamecart-continue-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-8) !important;
    background: var(--color-ash-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-buttons) !important;
    color: var(--color-abyssal-ink) !important;
    padding: 12px 24px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 0 var(--color-abyssal-ink) !important;
    transition: all 0.2s ease !important;
}

.gamecart-continue-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
}

.gamecart-credits {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--color-pure-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    padding: 12px 20px !important;
    box-shadow: 0 4px 0 rgba(7, 6, 7, 0.05) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--color-abyssal-ink) !important;
}

.gamecart-credits i {
    color: var(--color-digital-orange) !important;
}

.gamecart-credits b {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--color-digital-orange) !important;
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Layout grid */
.gamecart-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-32) !important;
}

/* Cards grid */
.gamecart-items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-24) !important;
}

/* Horizontal product card */
.game-card {
    display: flex !important;
    flex-direction: row !important;
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.game-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--color-digital-orange) !important;
    box-shadow: 0 15px 45px rgba(252, 80, 0, 0.15) !important;
}

.game-card-media {
    position: relative !important;
    width: 240px !important;
    min-width: 240px !important;
    height: auto !important;
    overflow: hidden !important;
    background: var(--color-basalt-canvas) !important;
    border-right: 3px solid var(--color-abyssal-ink) !important;
}

.game-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.game-card-points-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--color-abyssal-ink) !important;
    border: 1px solid var(--color-digital-orange) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: var(--color-pure-white) !important;
}

.game-card-points-badge i {
    color: var(--color-digital-orange) !important;
}

.game-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-16) !important;
    padding: var(--spacing-24) !important;
    flex: 1 !important;
}

.game-card-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 20px !important;
}

.game-card-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

.game-card-title:hover {
    color: var(--color-digital-orange) !important;
}

.game-card-points-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.game-card-points-label .label {
    font-family: var(--font-dm-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: rgba(7, 6, 7, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.game-card-points-label .value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--color-digital-orange) !important;
}

/* Optional training block */
.game-training {
    position: relative !important;
    background: rgba(252, 80, 0, 0.06) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
}

.game-training-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--color-digital-orange) !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-right: 22px !important;
}

.game-training-calc {
    font-family: var(--font-dm-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 0 4px 0 !important;
}

.game-training-total {
    font-family: var(--font-dm-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(7, 6, 7, 0.6) !important;
}

.game-training-total b {
    color: var(--color-digital-orange) !important;
    font-weight: 800 !important;
}

.game-training-remove {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: 10px !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--color-abyssal-ink) !important;
}

.game-training-remove:hover {
    background: var(--color-digital-orange) !important;
    border-color: var(--color-digital-orange) !important;
    transform: scale(1.1) !important;
}

/* Card footer / remove */
.game-card-footer {
    margin-top: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.game-card-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.game-card-remove:hover {
    background: #ef4444 !important;
    color: var(--color-pure-white) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Summary sidebar */
.gamecart-summary {
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.gamecart-summary-body {
    padding: var(--spacing-32) !important;
}

.gamecart-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.gamecart-summary-row.items {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(7, 6, 7, 0.08) !important;
}

.gamecart-summary-row .label {
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(7, 6, 7, 0.5) !important;
}

.gamecart-summary-row .value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
}

.gamecart-summary-row.total {
    padding-top: 18px !important;
    margin-top: 18px !important;
    border-top: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.gamecart-summary-row.total .label {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    text-transform: uppercase !important;
}

.gamecart-summary-row.total .value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--color-digital-orange) !important;
    line-height: 1 !important;
}

.gamecart-summary-row.total .value small {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(7, 6, 7, 0.5) !important;
    margin-left: 4px !important;
}

.gamecart-purchase-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    padding: 16px 24px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
}

.gamecart-purchase-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
}

/* Empty state */
.gamecart-empty {
    text-align: center !important;
    padding: var(--spacing-64) var(--spacing-32) !important;
    background: var(--color-pure-white) !important;
    border-radius: 20px !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
}

.gamecart-empty-icon {
    width: 80px !important;
    height: 80px !important;
    background: rgba(252, 80, 0, 0.1) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto var(--spacing-24) !important;
}

.gamecart-empty h3 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    text-transform: uppercase !important;
    margin-bottom: var(--spacing-12) !important;
}

.gamecart-empty p {
    color: rgba(7, 6, 7, 0.6) !important;
    font-size: 15px !important;
    margin-bottom: var(--spacing-28) !important;
}

.gamecart-empty-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-buttons) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
    transition: all 0.2s ease !important;
}

.gamecart-empty-btn:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .gamecart-section {
        padding: 0 !important;
        margin: var(--spacing-16);
    }
    .game-card {
        flex-direction: column !important;
    }
    .game-card-media {
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 16 / 10 !important;
        border-right: none !important;
        border-bottom: 3px solid var(--color-abyssal-ink) !important;
    }
    .game-card-footer {
        justify-content: flex-start !important;
    }
    .game-card-remove {
        width: 100% !important;
    }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\login.blade.php (.page-pages-login)
   ========================================================================== */
.page-pages-login {
/* ============================================================================
   CALDERA LOGIN PAGE — Premium Gaming Theme Style
   ============================================================================ */

.polygamez-auth-page {
  padding: 0;
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Auth console layout */
.auth-section-box {
  background: var(--color-pure-white);
  margin: var(--spacing-56) auto;
  max-width: 650px;
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
  border: 3px solid var(--color-abyssal-ink);
}

.auth-console {
  display: block;
}

/* Form Panel */
.auth-form-panel {
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  background: var(--color-pure-white);
}

.auth-form-panel h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-12);
  line-height: 1.1;
  text-align: center;
}

.auth-form-panel p {
  font-size: 15px;
  color: rgba(7, 6, 7, 0.7);
  margin-bottom: var(--spacing-32);
  text-align: center;
}

/* Field styling */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  position: relative;
}

.auth-field label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-abyssal-ink);
}

/* Input design */
.auth-input-wrap {
  position: relative;
  width: 100%;
}

.auth-input-wrap input {
  padding-left: 48px; /* space for icon */
  border-radius: var(--radius-inputs);
  border: 2px solid var(--color-abyssal-ink);
  font-size: 15px;
  height: 48px;
  width: 100%;
}

.auth-input-wrap i {
  position: absolute;
  left: 20px;
  top: 15px;
  color: rgba(7, 6, 7, 0.4);
  font-size: 16px;
  pointer-events: none;
}

/* Options row: remember & forgot pwd link */
.auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-24);
  font-size: 14px;
}

.auth-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  cursor: pointer;
  user-select: none;
}

.auth-check input {
  cursor: pointer;
  accent-color: var(--color-digital-orange);
  width: 16px;
  height: 16px;
}

.auth-check span {
  color: var(--color-abyssal-ink);
  font-weight: 500;
}

.auth-options a {
  color: var(--color-digital-orange);
  font-weight: 600;
  text-decoration: none;
}

.auth-options a:hover {
  color: var(--color-abyssal-ink);
}

/* Submit button */
.auth-submit-btn-caldera {
  width: 100%;
  min-height: 50px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-buttons);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25);
}

.auth-submit-btn-caldera:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(7, 6, 7, 0.2);
}

.auth-submit-btn-caldera:active {
  transform: scale(0.98);
}

/* Validation styles matching standard error message output */
.text-danger {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #b45309 !important; /* warning amber */
  margin-top: 6px;
}

.auth-switch-link {
  margin-top: var(--spacing-24);
  text-align: center;
  font-size: 14px;
}

.auth-switch-link p {
  color: rgba(7, 6, 7, 0.6);
  margin: 0;
}

.auth-switch-link a {
  color: var(--color-digital-orange);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch-link a:hover {
  color: var(--color-abyssal-ink);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .auth-section-box {
    margin: var(--spacing-40) auto;
  }
}

@media (max-width: 768px) {
  .auth-section-box {
    margin: var(--spacing-32) var(--spacing-16);
    border-radius: var(--radius-3xl-2);
  }

  .auth-form-panel {
    padding: var(--spacing-24) var(--spacing-16);
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\order-failed.blade.php (.page-pages-order-failed)
   ========================================================================== */
.page-pages-order-failed {
/* Order Failed - Gaming HUD Theme */
.order-result-section {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40);
    margin-top: var(--spacing-56);
}

/* Hero / Title Band */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

.order-result-card {
    max-width: 720px !important;
    margin: 0 auto !important;
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
    position: relative !important;
}

.order-result-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: #ef4444 !important;
}

.order-result-head {
    text-align: center !important;
    padding: var(--spacing-48) var(--spacing-40) var(--spacing-32) !important;
}

.order-result-icon {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    background: #ef4444 !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3) !important;
}

.order-result-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 0 10px !important;
}

.order-result-subtitle {
    font-size: 15px !important;
    color: rgba(7, 6, 7, 0.6) !important;
    margin: 0 !important;
}

.order-result-body {
    padding: 0 var(--spacing-40) var(--spacing-48) !important;
}

/* Status box */
.order-status-box {
    background: rgba(239, 68, 68, 0.07) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 16px !important;
    padding: var(--spacing-20) !important;
    margin-bottom: 28px !important;
    text-align: center !important;
}

.order-status-label {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 12px !important;
    color: rgba(7, 6, 7, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.order-status-value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #ef4444 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.order-result-message {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.order-result-message h3 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 14px !important;
    text-transform: uppercase;
}

.order-result-message h5 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    color: var(--color-abyssal-ink) !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase;
}

.order-result-message ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px auto !important;
    text-align: left !important;
    max-width: 460px !important;
}

.order-result-message ul li {
    padding: 10px 0 !important;
    color: rgba(7, 6, 7, 0.65) !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    border-bottom: 1px solid rgba(7, 6, 7, 0.06) !important;
}

.order-result-message ul li:before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
}

.order-result-message p {
    font-size: 14.5px !important;
    color: rgba(7, 6, 7, 0.55) !important;
    margin-top: 14px !important;
}

.order-result-message a {
    color: var(--color-digital-orange) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.order-result-message a:hover {
    text-decoration: underline !important;
}

/* Actions */
.order-result-actions {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.btn-result-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 30px !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    color: var(--color-pure-white) !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-result-primary:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    transform: translateY(-2px) !important;
}

.btn-result-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 30px !important;
    background: transparent !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-result-secondary:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .order-result-section { padding: var(--spacing-24) 0 !important; }
    .order-result-card { margin: 0 16px !important; }
    .order-result-head { padding: 36px 24px 24px !important; }
    .order-result-body { padding: 0 24px 36px !important; }
    .order-result-title { font-size: 24px !important; }
    .order-status-value { font-size: 20px !important; }
    .order-result-actions { flex-direction: column !important; }
    .btn-result-primary, .btn-result-secondary { width: 100% !important; justify-content: center !important; }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\order-success.blade.php (.page-pages-order-success)
   ========================================================================== */
.page-pages-order-success {
/* Order Success - Gaming HUD Theme */
.order-result-section {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40);
    margin-top: var(--spacing-56);
}

/* Hero / Title Band */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

.order-result-card {
    max-width: 720px !important;
    margin: 0 auto !important;
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    overflow: hidden !important;
    position: relative !important;
}

.order-result-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: #22c55e !important;
}

.order-result-head {
    text-align: center !important;
    padding: var(--spacing-48) var(--spacing-40) var(--spacing-32) !important;
}

.order-result-icon {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    background: #22c55e !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3) !important;
}

.order-result-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 0 10px !important;
}

.order-result-subtitle {
    font-size: 15px !important;
    color: rgba(7, 6, 7, 0.6) !important;
    margin: 0 !important;
}

.order-result-body {
    padding: 0 var(--spacing-40) var(--spacing-48) !important;
}

/* Status box */
.order-status-box {
    background: rgba(34, 197, 94, 0.07) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 16px !important;
    padding: var(--spacing-20) !important;
    margin-bottom: 28px !important;
    text-align: center !important;
}

.order-status-label {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 12px !important;
    color: rgba(7, 6, 7, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.order-status-value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #22c55e !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.order-result-message {
    text-align: center !important;
    margin-bottom: 32px !important;
}

.order-result-message h3 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: 14px !important;
    text-transform: uppercase;
}

.order-result-message h5 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    color: var(--color-abyssal-ink) !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
}

.order-result-message p {
    font-size: 14.5px !important;
    color: rgba(7, 6, 7, 0.55) !important;
    margin-top: 14px !important;
}

/* Actions */
.order-result-actions {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.btn-result-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 30px !important;
    background: var(--color-digital-orange) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    color: var(--color-pure-white) !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-result-primary:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    transform: translateY(-2px) !important;
}

.btn-result-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 15px 30px !important;
    background: transparent !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-inputs) !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-result-secondary:hover {
    background: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .order-result-section { padding: var(--spacing-24) 0 !important; }
    .order-result-card { margin: 0 16px !important; }
    .order-result-head { padding: 36px 24px 24px !important; }
    .order-result-body { padding: 0 24px 36px !important; }
    .order-result-title { font-size: 24px !important; }
    .order-status-value { font-size: 20px !important; }
    .order-result-actions { flex-direction: column !important; }
    .btn-result-primary, .btn-result-secondary { width: 100% !important; justify-content: center !important; }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\page.blade.php (.page-pages-page)
   ========================================================================== */
.page-pages-page {
/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Legal / CMS Page - Gaming HUD Theme */
.legal-section {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40) !important;
    margin-top: var(--spacing-56) !important;
    margin-bottom: var(--spacing-80) !important;
    min-height: 50vh !important;
}

@media (max-width: 768px) {
    .legal-section {
        margin: var(--spacing-16) !important;
        margin-top: var(--spacing-32) !important;
        margin-bottom: var(--spacing-48) !important;
    }
}

.legal-content-card {
    max-width: var(--page-max-width) !important;
    margin: 0 auto !important;
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
    padding: var(--spacing-48) var(--spacing-40) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Prose typography */
.legal-prose {
    color: var(--color-abyssal-ink) !important;
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    font-family: var(--font-dm-sans) !important;
}

.legal-prose h1,
.legal-prose h2,
.legal-prose h3,
.legal-prose h4,
.legal-prose h5,
.legal-prose h6 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    color: var(--color-abyssal-ink) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin: 32px 0 16px !important;
    text-transform: uppercase !important;
}

.legal-prose h1 { font-size: 30px !important; }
.legal-prose h2 { font-size: 25px !important; }
.legal-prose h3 { font-size: 21px !important; }
.legal-prose h4 { font-size: 18px !important; }
.legal-prose h5 { font-size: 16px !important; }
.legal-prose h6 { font-size: 14px !important; letter-spacing: 0.5px !important; }

.legal-prose h1:first-child,
.legal-prose h2:first-child,
.legal-prose h3:first-child {
    margin-top: 0 !important;
}

.legal-prose p {
    margin: 0 0 16px !important;
}

.legal-prose ul,
.legal-prose ol {
    padding-left: 24px !important;
    margin: 0 0 20px !important;
}

.legal-prose li {
    margin-bottom: 10px !important;
}

.legal-prose ul li::marker {
    color: var(--color-digital-orange) !important;
}

.legal-prose ol li::marker {
    color: var(--color-digital-orange) !important;
    font-weight: 700 !important;
}

.legal-prose ol li:has(h1)::marker {
    font-size: 30px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}
.legal-prose ol li:has(h2)::marker {
    font-size: 25px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}
.legal-prose ol li:has(h3)::marker {
    font-size: 21px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}
.legal-prose ol li:has(h4)::marker {
    font-size: 18px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}
.legal-prose ol li:has(h5)::marker {
    font-size: 16px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}
.legal-prose ol li:has(h6)::marker {
    font-size: 14px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-weight: 800 !important;
}

.legal-prose a {
    color: var(--color-digital-orange) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.legal-prose a:hover {
    color: var(--color-abyssal-ink) !important;
    text-decoration: underline !important;
}

.legal-prose strong,
.legal-prose b {
    color: var(--color-abyssal-ink) !important;
    font-weight: 800 !important;
}

.legal-prose blockquote {
    margin: 24px 0 !important;
    padding: 16px 22px !important;
    background: rgba(252, 80, 0, 0.06) !important;
    border-left: 4px solid var(--color-digital-orange) !important;
    border-top: 2px solid var(--color-abyssal-ink) !important;
    border-bottom: 2px solid var(--color-abyssal-ink) !important;
    border-right: 2px solid var(--color-abyssal-ink) !important;
    border-radius: 0 12px 12px 0 !important;
    color: var(--color-abyssal-ink) !important;
    font-style: italic !important;
    font-family: var(--font-dm-sans) !important;
}

.legal-prose img {
    max-width: 100% !important;
    height: auto !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: 12px !important;
    margin: 16px 0 !important;
}

.legal-prose hr {
    border: none !important;
    border-top: 2px solid rgba(7, 6, 7, 0.1) !important;
    margin: 32px 0 !important;
}

/* Tables inside CMS content - Clean Borderless Horizontal Layout */
.legal-prose table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    background: transparent !important;
    border: none !important;
}

.legal-prose table thead th {
    background: transparent !important;
    color: var(--color-digital-orange) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 0 !important;
    border: none !important;
    border-bottom: 2px solid var(--color-abyssal-ink) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.legal-prose table tbody tr {
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.legal-prose table tbody tr:hover {
    background: rgba(252, 80, 0, 0.04) !important;
}

.legal-prose table tbody td {
    padding: 14px 0 !important;
    padding-right: 20px !important;
    border: none !important;
    border-bottom: 1px solid rgba(7, 6, 7, 0.08) !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}

.legal-prose table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Responsive table wrapper */
.legal-prose .table-responsive,
.legal-prose figure.table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 24px 0 !important;
}

.legal-prose .table-responsive table,
.legal-prose figure.table table {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .legal-content-card {
        margin: 0 16px !important;
        padding: 30px 22px !important;
    }
    .legal-prose { font-size: 14.5px !important; }
    .legal-prose table { display: table !important; width: 100% !important; }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\product-lists.blade.php (.page-pages-product-lists)
   ========================================================================== */
.page-pages-product-lists {
/* ============================================================================
   CALDERA PRODUCT CATALOG — Premium Gaming Theme Style
   ============================================================================ */

.product-grid-section {
  padding: 0 !important;
  background: transparent !important;
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Category Spotlight Section */
.category-spotlight-section {
  margin: var(--spacing-40);
  margin-top: var(--spacing-56);
  padding: 0 !important;
}

.category-spotlight-card {
  background: var(--color-ash-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06) !important;
  padding: var(--spacing-40) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-16);
}

.spotlight-title {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  color: var(--color-abyssal-ink) !important;
  text-transform: uppercase;
  margin-bottom: var(--spacing-12);
}

.spotlight-summary {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--color-abyssal-ink) !important;
}

/* Catalog Layout Adjustments */
.product-catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32);
  align-items: flex-start;
}

/* Horizontal Products Grid */
.products-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-24) !important;
}

.product-card-new {
  background: var(--color-pure-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 10px 40px rgba(7, 6, 7, 0.05) !important;
  overflow: hidden;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 200px;
  width: 100%;
}

.product-card-new:hover {
  transform: translateY(-4px) !important;
  border-color: var(--color-digital-orange) !important;
  box-shadow: 0 15px 45px rgba(252, 80, 0, 0.2) !important;
}

.product-card-image {
  position: relative;
  width: 300px !important;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-basalt-canvas);
  border-bottom: none !important;
  border-right: 3px solid var(--color-abyssal-ink) !important;
  flex-shrink: 0;
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease !important;
}

.product-card-new:hover .product-card-image img {
  transform: scale(1.04) !important;
}

.product-card-body {
  padding: var(--spacing-24) !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1;
  justify-content: space-between !important;
}

.product-card-title {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--color-abyssal-ink) !important;
  margin: 0 0 var(--spacing-12) 0 !important;
  line-height: 1.3 !important;
  height: auto !important;
  overflow: visible !important;
  text-transform: uppercase;
  text-align: left !important;
}

.product-card-summary {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: rgba(7, 6, 7, 0.6) !important;
  margin: 0 0 var(--spacing-20) 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-align: left !important;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-16) !important;
  border-top: 1px solid rgba(7, 6, 7, 0.08) !important;
  margin-top: auto;
  width: 100%;
}

.product-card-price {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.product-card-price-label {
  font-size: 10px !important;
  font-weight: 700;
  color: rgba(7, 6, 7, 0.5) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.product-card-price-value {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--color-abyssal-ink) !important;
  line-height: 1.1;
  margin-top: 2px;
}

/* Explore and Add to Cart Action Buttons */
.product-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.product-explore-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-8) !important;
  background: transparent !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-inputs) !important;
  color: var(--color-abyssal-ink) !important;
  padding: 8px 16px !important;
  font-family: var(--font-dm-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.product-explore-btn:hover {
  background: var(--color-abyssal-ink) !important;
  color: var(--color-pure-white) !important;
}

.product-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-8) !important;
  background: var(--color-digital-orange) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-inputs) !important;
  color: var(--color-pure-white) !important;
  padding: 8px 16px !important;
  font-family: var(--font-dm-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(252, 80, 0, 0.15) !important;
  transition: var(--transition) !important;
}

.product-card-btn:hover {
  background: var(--color-abyssal-ink) !important;
  color: var(--color-pure-white) !important;
  box-shadow: 0 4px 12px rgba(7, 6, 7, 0.15) !important;
}

.product-card-btn i {
  font-size: 13px !important;
}

/* Empty states styling */
.no-products {
  background: var(--color-pure-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-cards) !important;
  box-shadow: 0 15px 45px rgba(7, 6, 7, 0.05) !important;
  padding: var(--spacing-64) var(--spacing-32) !important;
  text-align: center;
}

.no-products-icon {
  background: rgba(252, 80, 0, 0.1) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-24) !important;
}

.no-products-icon i {
  color: var(--color-digital-orange) !important;
  font-size: 40px !important;
}

.no-products h3 {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 24px !important;
  color: var(--color-abyssal-ink) !important;
  text-transform: uppercase;
  margin-bottom: var(--spacing-12);
}

.no-products p {
  color: rgba(7, 6, 7, 0.6) !important;
  font-size: 15px !important;
}

/* Section Title with Line */
.section-title-with-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-40);
}

.title-square {
  width: 20px;
  height: 20px;
  background: var(--color-digital-orange);
  border-radius: 3px;
  flex-shrink: 0;
}

.section-title-with-line h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title-underline {
  flex: 1;
  height: 2px;
  background: var(--color-abyssal-ink);
  margin-left: var(--spacing-24);
}

/* Responsive Grid Adapters */
@media (max-width: 991px) {
  .product-grid-section,
  .category-spotlight-section {
    margin: var(--spacing-24);
    margin-top: var(--spacing-40);
  }
  .product-card-image {
    width: 240px !important;
  }
}

@media (max-width: 768px) {
  .product-card-new {
    flex-direction: column !important;
  }
  .product-card-image {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 3px solid var(--color-abyssal-ink) !important;
    aspect-ratio: 16/10 !important;
  }
  .product-grid-section,
  .category-spotlight-section {
    margin: var(--spacing-16);
    margin-top: var(--spacing-32);
  }
  .category-spotlight-card {
    padding: var(--spacing-24) !important;
    gap: var(--spacing-20);
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\product_detail.blade.php (.page-pages-product-detail)
   ========================================================================== */
.page-pages-product-detail {
/* Premium Gaming HUD Product Detail Styles */
.pg-product-detail-page {
    padding: 0 !important;
    background: transparent !important;
    margin: var(--spacing-40);
    margin-top: var(--spacing-56);
}

/* Hero / Breadcrumb Title Band */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

.pg-product-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pg-product-breadcrumb a {
    color: rgba(7, 6, 7, 0.6);
    text-decoration: none;
    transition: color 0.3s;
}

.pg-product-breadcrumb a:hover {
    color: var(--color-digital-orange);
}

.pg-product-breadcrumb span {
    color: rgba(7, 6, 7, 0.3);
}

.pg-product-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
}

@media (max-width: 991px) {
    .pg-product-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Gallery Styling */
.pg-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pg-product-main-image {
    background: var(--color-pure-white);
    border: 3px solid var(--color-abyssal-ink);
    border-radius: var(--radius-cards);
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06);
    overflow: hidden;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pg-product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-basalt-canvas);
}

.pg-product-thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 0 12px 0;
}

.pg-product-thumb {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 2px solid var(--color-abyssal-ink);
    background: var(--color-pure-white);
    padding: 3px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(7, 6, 7, 0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.pg-product-thumb:hover,
.pg-product-thumb.active {
    border-color: var(--color-digital-orange);
    transform: translateY(-2px) scale(1.04);
}

/* Panel Styling */
.pg-product-panel {
    background: var(--color-pure-white);
    border: 3px solid var(--color-abyssal-ink);
    border-radius: var(--radius-cards);
    padding: var(--spacing-40);
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 576px) {
    .pg-product-panel {
        padding: var(--spacing-24);
    }
}

.pg-product-kicker {
    align-self: flex-start;
    background: rgba(252, 80, 0, 0.15);
    border: 1px solid rgba(252, 80, 0, 0.15);
    color: var(--color-digital-orange);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pg-product-panel h1 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 30px;
    font-weight: 900;
    color: var(--color-abyssal-ink);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.pg-product-price {
    display: flex;
    flex-direction: column;
    background: var(--color-basalt-canvas);
    border-left: 4px solid var(--color-digital-orange);
    padding: 16px 20px;
    border-radius: 0 16px 16px 0;
}

.pg-product-price span {
    font-size: 11px;
    font-weight: 700;
    color: rgba(7, 6, 7, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pg-product-price strong {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 32px;
    font-weight: 900;
    color: var(--color-abyssal-ink);
    line-height: 1.1;
    margin-top: 4px;
}

.pg-product-summary {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(7, 6, 7, 0.65);
    margin: 0;
}

/* Cart Button */
.pg-product-cart-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-digital-orange);
    border: 2px solid var(--color-abyssal-ink);
    border-radius: var(--radius-inputs);
    color: var(--color-pure-white);
    padding: 18px 24px;
    font-family: var(--font-dm-sans);
    font-size: 14.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(252, 80, 0, 0.15);
    transition: all 0.35s ease;
}

.pg-product-cart-btn:hover {
    background: var(--color-abyssal-ink);
    color: var(--color-pure-white);
    box-shadow: 0 15px 30px rgba(7, 6, 7, 0.25);
    transform: translateY(-2px);
}

.pg-product-cart-btn i {
    font-size: 16px;
}

/* Accordion Info Cards */
.pg-product-info-card {
    border: 2px solid var(--color-abyssal-ink);
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-pure-white);
    transition: border-color 0.3s ease;
}

.pg-product-info-card:focus-within,
.pg-product-info-card:hover {
    border-color: var(--color-digital-orange);
}

.pg-product-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pg-product-accordion-toggle i {
    font-size: 14px;
    color: rgba(7, 6, 7, 0.35);
    transition: transform 0.3s ease;
}

.pg-product-accordion-toggle.active i {
    transform: rotate(180deg);
    color: var(--color-digital-orange);
}

.pg-product-accordion-panel {
    display: none;
    padding: 0 24px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(7, 6, 7, 0.6);
}

.pg-product-accordion-panel.active {
    display: block;
}

.pg-product-accordion-panel p {
    margin: 0 0 12px 0;
}

.pg-product-accordion-panel p:last-child {
    margin-bottom: 0;
}

/* Optional Training / Range Slider Styling */
.pg-training-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.pg-training-toggle-row p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(7, 6, 7, 0.45);
    margin: 0;
}

.optional-training-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.optional-training-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.optional-training-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(7, 6, 7, 0.08);
    transition: .4s;
    border-radius: 34px;
}

.optional-training-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(7, 6, 7, 0.12);
}

.optional-training-toggle input:checked + .optional-training-slider {
    background-color: var(--color-digital-orange);
}

.optional-training-toggle input:checked + .optional-training-slider:before {
    transform: translateX(24px);
}

.training-slider-section {
    background: var(--color-basalt-canvas);
    border-radius: 14px;
    padding: 18px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s ease;
}

.training-slider-section.hidden {
    display: none !important;
}

.training-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.training-slider-title {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 11.5px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
}

.training-slider-value {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 13.5px;
    font-weight: 900;
    color: var(--color-digital-orange);
    background: var(--color-pure-white);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(252, 80, 0, 0.12);
}

.training-slider-wrapper {
    position: relative;
    padding: 10px 0;
}

.training-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(7, 6, 7, 0.08);
    outline: none;
}

.training-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-abyssal-ink);
    border: 3px solid var(--color-digital-orange);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(7, 6, 7, 0.15);
    transition: transform 0.1s ease;
}

.training-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.training-slider-tooltip {
    position: absolute;
    top: -24px;
    transform: translateX(-50%);
    background: var(--color-abyssal-ink);
    color: var(--color-digital-orange);
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.training-slider-wrapper:hover .training-slider-tooltip {
    opacity: 1;
}

.pg-training-price {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    text-align: right;
}

.pg-training-price span {
    font-size: 16px;
    color: var(--color-digital-orange);
    font-weight: 900;
    margin-left: 4px;
}

.pg-product-readmore {
    display: inline-flex;
    align-items: center;
    color: var(--color-digital-orange);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 12px;
}

.pg-product-readmore:hover {
    text-decoration: underline;
}

/* Shipping Grid */
.pg-product-shipping-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-top: 1px solid rgba(7, 6, 7, 0.05);
    padding-top: 24px;
    margin-top: 8px;
}

.pg-product-shipping-grid div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-basalt-canvas);
    border: 2px solid var(--color-abyssal-ink);
    padding: 12px 16px;
    border-radius: var(--radius-inputs);
}

.pg-product-shipping-grid i {
    font-size: 16px;
    color: var(--color-digital-orange);
}

.pg-product-shipping-grid span {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Steps and What you Get section */
.pg-product-detail-bands {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-bottom: 64px;
}

.pg-detail-band {
    background: var(--color-pure-white);
    border: 3px solid var(--color-abyssal-ink);
    border-radius: var(--radius-cards);
    padding: 40px;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.06);
}

@media (max-width: 576px) {
    .pg-detail-band {
        padding: 24px;
    }
}

.pg-detail-band h2 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 22px;
    font-weight: 900;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    margin: 0 0 20px 0;
    border-left: 4px solid var(--color-digital-orange);
    padding-left: 12px;
}

.pg-detail-band p {
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(7, 6, 7, 0.6);
    margin: 0;
}

.pg-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

@media (max-width: 768px) {
    .pg-steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.pg-steps-grid > div {
    background: var(--color-basalt-canvas);
    border: 2px solid var(--color-abyssal-ink);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.pg-steps-grid strong {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 36px;
    font-weight: 900;
    color: rgba(252, 80, 0, 0.15);
    line-height: 1;
    position: absolute;
    top: 16px;
    right: 20px;
}

.pg-steps-grid span {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pg-steps-grid p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(7, 6, 7, 0.5);
    margin: 0;
}

/* Related Products */
.pg-related-products {
    border-top: 1px solid rgba(7, 6, 7, 0.05);
    padding-top: 48px;
}

.pg-related-products h2 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 22px;
    font-weight: 900;
    color: var(--color-abyssal-ink);
    text-transform: uppercase;
    margin-bottom: 28px;
    border-left: 4px solid var(--color-digital-orange);
    padding-left: 12px;
}

.pg-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 991px) {
    .pg-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .pg-related-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.pg-related-card {
    background: var(--color-pure-white);
    border: 3px solid var(--color-abyssal-ink);
    border-radius: var(--radius-cards);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 20px 50px rgba(7, 6, 7, 0.02);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pg-related-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-digital-orange);
    box-shadow: 0 15px 45px rgba(252, 80, 0, 0.25);
}

.pg-related-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    background: var(--color-basalt-canvas);
}

.pg-related-card span {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-abyssal-ink);
    line-height: 1.35;
    height: 38px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pg-related-card strong {
    font-family: var(--font-pp-neue-corp-compact-ultrabold);
    font-size: 15.5px;
    font-weight: 900;
    color: var(--color-digital-orange);
}
}



/* ==========================================================================
   SCOPED STYLES FOR: pages\register.blade.php (.page-pages-register)
   ========================================================================== */
.page-pages-register {
/* ============================================================================
   CALDERA REGISTER PAGE — Premium Gaming Theme Style
   ============================================================================ */

.polygamez-auth-page {
  padding: 0;
  background-color: var(--color-basalt-canvas);
  color: var(--color-abyssal-ink);
  font-family: var(--font-dm-sans);
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative;
  margin: var(--spacing-40);
  margin-top: 150px; /* offset for navbar floating transformation */
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  background: var(--color-ash-white);
  border: 3px solid var(--color-abyssal-ink);
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40);
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  line-height: 1.1;
  margin-bottom: var(--spacing-16);
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-12);
  background: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  padding: var(--spacing-8) var(--spacing-20);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink);
  text-decoration: none;
  transition: var(--transition);
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange);
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4);
  font-size: 10px;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange);
  font-weight: 600;
}

/* Auth console layout */
.auth-section-box {
  background: var(--color-pure-white);
  margin: var(--spacing-56) auto;
  max-width: 650px;
  border-radius: var(--radius-3xl-3);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08);
  border: 3px solid var(--color-abyssal-ink);
}

.auth-console {
  display: block;
}

/* Form Panel */
.auth-form-panel {
  padding: var(--spacing-48);
  display: flex;
  flex-direction: column;
  background: var(--color-pure-white);
}

.auth-form-panel h2 {
  font-size: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  color: var(--color-abyssal-ink);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  margin-bottom: var(--spacing-12);
  line-height: 1.1;
  text-align: center;
}

.auth-form-panel p {
  font-size: 15px;
  color: rgba(7, 6, 7, 0.7);
  margin-bottom: var(--spacing-32);
  text-align: center;
}

/* Field styling */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  position: relative;
}

.auth-field label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-abyssal-ink);
}

/* Dual-field grid row */
.auth-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-20);
}

/* Input design */
.auth-input-wrap {
  position: relative;
  width: 100%;
}

.auth-input-wrap input {
  padding-left: 48px; /* space for icon */
  border-radius: var(--radius-inputs);
  border: 2px solid var(--color-abyssal-ink);
  font-size: 15px;
  height: 48px;
  width: 100%;
}

.auth-input-wrap i {
  position: absolute;
  left: 20px;
  top: 15px;
  color: rgba(7, 6, 7, 0.4);
  font-size: 16px;
  pointer-events: none;
}

/* Captcha row styles */
.auth-captcha-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-16);
  align-items: center;
  margin-bottom: var(--spacing-24);
}

.auth-captcha-image {
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-inputs);
  overflow: hidden;
  height: 48px;
  display: flex;
  align-items: center;
}

.auth-captcha-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* Submit button */
.auth-submit-btn-caldera {
  width: 100%;
  min-height: 50px;
  background: var(--color-digital-orange);
  color: var(--color-pure-white);
  border: 2px solid var(--color-abyssal-ink);
  border-radius: var(--radius-buttons);
  font-family: var(--font-pp-neue-corp-compact-ultrabold);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25);
}

.auth-submit-btn-caldera:hover {
  background: var(--color-abyssal-ink);
  color: var(--color-pure-white);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(7, 6, 7, 0.2);
}

.auth-submit-btn-caldera:active {
  transform: scale(0.98);
}

/* Validation styles matching standard error message output */
.text-danger {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #b45309 !important; /* warning amber */
  margin-top: 6px;
}

.auth-switch-link {
  margin-top: var(--spacing-24);
  text-align: center;
  font-size: 14px;
}

.auth-switch-link p {
  color: rgba(7, 6, 7, 0.6);
  margin: 0;
}

.auth-switch-link a {
  color: var(--color-digital-orange);
  font-weight: 600;
  text-decoration: none;
}

.auth-switch-link a:hover {
  color: var(--color-abyssal-ink);
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .auth-section-box {
    margin: var(--spacing-40) auto;
  }
}

@media (max-width: 768px) {
  .auth-section-box {
    margin: var(--spacing-32) var(--spacing-16);
    border-radius: var(--radius-3xl-2);
  }

  .auth-form-panel {
    padding: var(--spacing-24) var(--spacing-16);
  }

  .auth-field-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .auth-captcha-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
  }

  .auth-captcha-image {
    width: 100%;
    justify-content: center;
  }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: user\dashboard.blade.php (.page-user-dashboard)
   ========================================================================== */
.page-user-dashboard {
/* Dashboard - single-panel layout */
.auth-dashboard-page {
    padding: 0 !important;
    background-color: var(--color-basalt-canvas) !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
}

/* About Title Band / Hero */
.about-hero-section {
  position: relative !important;
  margin: var(--spacing-40) !important;
  margin-top: 150px !important;
  border-radius: var(--radius-3xl-3) !important;
  overflow: hidden !important;
  background: var(--color-ash-white) !important;
  border: 3px solid var(--color-abyssal-ink) !important;
  box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08) !important;
}

.about-hero-wrapper {
  padding: var(--spacing-80) var(--spacing-40) !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
}

.about-hero-title {
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: var(--color-abyssal-ink) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  line-height: 1.1 !important;
  margin-bottom: var(--spacing-16) !important;
}

/* Breadcrumb styling */
.about-breadcrumb-capsule {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--spacing-12) !important;
  background: var(--color-pure-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  padding: var(--spacing-8) var(--spacing-20) !important;
  border-radius: var(--radius-full) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.about-breadcrumb-capsule a {
  color: var(--color-abyssal-ink) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.about-breadcrumb-capsule a:hover {
  color: var(--color-digital-orange) !important;
}

.about-breadcrumb-separator {
  color: rgba(7, 6, 7, 0.4) !important;
  font-size: 10px !important;
}

.about-breadcrumb-current {
  color: var(--color-digital-orange) !important;
  font-weight: 600 !important;
}

.auth-dashboard-page .auth-shell {
    max-width: var(--page-max-width) !important;
    margin: var(--spacing-56) auto !important;
    background: var(--color-pure-white) !important;
    border: 3px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: 0 40px 100px rgba(7, 6, 7, 0.08) !important;
    overflow: hidden !important;
}

.auth-dashboard-page .auth-form-panel {
    background: var(--color-pure-white) !important;
    padding: var(--spacing-48) var(--spacing-40) !important;
}

.auth-dashboard-page .auth-form-panel h1 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: clamp(24px, 3vw, 36px) !important;
    text-transform: uppercase !important;
    color: var(--color-abyssal-ink) !important;
    margin-bottom: var(--spacing-12) !important;
    line-height: 1.1 !important;
}

/* Tab navigation pills */
.dashboard-nav-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-12) !important;
    margin: var(--spacing-8) 0 var(--spacing-32) !important;
    padding-bottom: var(--spacing-24) !important;
    border-bottom: 2px solid rgba(7, 6, 7, 0.08) !important;
}

.dashboard-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-8) !important;
    background: var(--color-ash-white) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    border-radius: var(--radius-buttons) !important;
    padding: 10px 20px !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
}

.dashboard-nav-link i { font-size: 14px !important; }

.dashboard-nav-link:hover {
    border-color: var(--color-digital-orange) !important;
    color: var(--color-digital-orange) !important;
}

.dashboard-nav-link.active {
    background: var(--color-digital-orange) !important;
    border-color: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
    box-shadow: 0 6px 20px rgba(252, 80, 0, 0.25) !important;
}

.dashboard-nav-link.dashboard-logout {
    margin-left: auto !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.dashboard-nav-link.dashboard-logout:hover {
    background: #ef4444 !important;
    border-color: var(--color-abyssal-ink) !important;
    color: var(--color-pure-white) !important;
}

/* Tabs */
.dashboard-tab { display: none !important; }
.dashboard-tab.active { display: block !important; animation: dash-fade 0.4s ease !important; }

@keyframes dash-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-tab > h2 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 0 0 22px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dashboard-subtitle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
    margin: 34px 0 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dashboard-subtitle::before {
    content: '' !important;
    width: 4px !important;
    height: 16px !important;
    background: var(--color-digital-orange) !important;
    border-radius: 2px !important;
}

.dashboard-subtitle-first { margin-top: 0 !important; }

.dashboard-note {
    margin: 0 0 8px !important;
    padding: 16px 18px !important;
    background: var(--color-ash-white) !important;
    border: 2px dashed rgba(7, 6, 7, 0.12) !important;
    border-radius: 16px !important;
    color: rgba(7, 6, 7, 0.6) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Invalid input (matches JS .is-invalid on confirm field) */
.auth-input-wrap .form-control.is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

/* Field styling */
.auth-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-8) !important;
  margin-bottom: var(--spacing-20) !important;
  position: relative !important;
}

.auth-field label {
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--color-abyssal-ink) !important;
}

/* Input design */
.auth-input-wrap {
  position: relative !important;
  width: 100% !important;
}

.auth-input-wrap input {
  padding-left: 48px !important; /* space for icon */
  border-radius: var(--radius-inputs) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  font-size: 15px !important;
  height: 48px !important;
  width: 100% !important;
  background-color: var(--color-pure-white) !important;
  color: var(--color-abyssal-ink) !important;
  font-family: var(--font-dm-sans) !important;
}

.auth-input-wrap input:focus {
  outline: none !important;
  border-color: var(--color-digital-orange) !important;
  box-shadow: 0 0 0 3px rgba(252, 80, 0, 0.1) !important;
}

.auth-input-wrap i {
  position: absolute !important;
  left: 20px !important;
  top: 15px !important;
  color: rgba(7, 6, 7, 0.4) !important;
  font-size: 16px !important;
  pointer-events: none !important;
}

/* Submit button */
.auth-submit-btn {
  width: 100% !important;
  min-height: 50px !important;
  background: var(--color-digital-orange) !important;
  color: var(--color-pure-white) !important;
  border: 2px solid var(--color-abyssal-ink) !important;
  border-radius: var(--radius-buttons) !important;
  font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-8) !important;
  margin-top: var(--spacing-8) !important;
  box-shadow: 0 10px 30px rgba(252, 80, 0, 0.25) !important;
}

.auth-submit-btn:hover {
  background: var(--color-abyssal-ink) !important;
  color: var(--color-pure-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(7, 6, 7, 0.2) !important;
}

.auth-submit-btn:active {
  transform: scale(0.98) !important;
}

/* Tables */
.dashboard-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

.dashboard-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 8px !important;
    background: transparent !important;
    border: none !important;
}

.dashboard-table thead th {
    background: transparent !important;
    color: var(--color-digital-orange) !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    padding: 12px 15px !important;
    border: none !important;
    border-bottom: 2px solid var(--color-abyssal-ink) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.dashboard-table td {
    padding: 14px 15px !important;
    border: none !important;
    border-bottom: 1px solid rgba(7, 6, 7, 0.08) !important;
    color: var(--color-abyssal-ink) !important;
    font-family: var(--font-dm-sans) !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.dashboard-table tbody tr {
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.dashboard-table tbody tr:hover {
    background: rgba(252, 80, 0, 0.04) !important;
}

.dashboard-table tbody tr:last-child td { border-bottom: none !important; }

.dashboard-table .order-number {
    display: block !important;
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--color-abyssal-ink) !important;
}

.dashboard-table small {
    display: block !important;
    font-size: 11px !important;
    color: rgba(7, 6, 7, 0.5) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

/* Status badges */
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-family: var(--font-dm-sans) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.status-badge.completed,
.status-badge.success,
.status-badge.paid,
.status-badge.delivered {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #16a34a !important;
    border: 2px solid var(--color-abyssal-ink) !important;
}

.status-badge.pending,
.status-badge.processing {
    background: rgba(249, 115, 22, 0.1) !important;
    color: #ea580c !important;
    border: 2px solid var(--color-abyssal-ink) !important;
}

.status-badge.failed,
.status-badge.cancelled,
.status-badge.canceled {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border: 2px solid var(--color-abyssal-ink) !important;
}

/* Action button */
.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    background: rgba(252, 80, 0, 0.08) !important;
    border: 2px solid var(--color-abyssal-ink) !important;
    color: var(--color-digital-orange) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.action-btn:hover {
    background: var(--color-digital-orange) !important;
    color: var(--color-pure-white) !important;
    border-color: var(--color-abyssal-ink) !important;
}

/* Empty state */
.dashboard-empty {
    text-align: center !important;
    padding: 48px 24px !important;
}

.dashboard-empty i {
    font-size: 52px !important;
    color: rgba(7, 6, 7, 0.15) !important;
    margin-bottom: 14px !important;
}

.dashboard-empty h3 {
    font-family: var(--font-pp-neue-corp-compact-ultrabold) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: rgba(7, 6, 7, 0.5) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .auth-dashboard-page .auth-shell {
        margin: var(--spacing-32) var(--spacing-16) !important;
        border-radius: var(--radius-3xl-2) !important;
    }
    .auth-form-panel {
        padding: var(--spacing-32) var(--spacing-24) !important;
    }
}

@media (max-width: 575px) {
    .dashboard-nav-link.dashboard-logout { margin-left: 0 !important; }
}
}



/* ==========================================================================
   SCOPED STYLES FOR: user\order\index.blade.php (.page-user-order-index)
   ========================================================================== */
.page-user-order-index {
div.dataTables_wrapper div.dataTables_paginate{
          display: none;
      }
}



/* ==========================================================================
   SCOPED STYLES FOR: user\order\pdf.blade.php (.page-user-order-pdf)
   ========================================================================== */
.page-user-order-pdf {
.invoice-header {
    background: #f7f7f7;
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid gray;
  }
  .site-logo {
    margin-top: 20px;
  }
  .invoice-right-top h3 {
    padding-right: 20px;
    margin-top: 20px;
    color: green;
    font-size: 30px!important;
    font-family: serif;
  }
  .invoice-left-top {
    border-left: 4px solid green;
    padding-left: 20px;
    padding-top: 20px;
  }
  .invoice-left-top p {
    margin: 0;
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 3px;
  }
  thead {
    background: green;
    color: #FFF;
  }
  .authority h5 {
    margin-top: -10px;
    color: green;
  }
  .thanks h4 {
    color: green;
    font-size: 25px;
    font-weight: normal;
    font-family: serif;
    margin-top: 20px;
  }
  .site-address p {
    line-height: 6px;
    font-weight: 300;
  }
  .table tfoot .empty {
    border: none;
  }
  .table-bordered {
    border: none;
  }
  .table-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
  }
  .table td, .table th {
    padding: .30rem;
  }
}



/* ==========================================================================
   SCOPED STYLES FOR: user\order\show.blade.php (.page-user-order-show)
   ========================================================================== */
.page-user-order-show {
/* Order Detail - Gaming HUD Theme */
.order-detail-section {
    padding: 64px 0 96px !important;
    background-color: #f6f7f2 !important;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(223, 255, 0, 0.04) 0%, transparent 80%),
        repeating-linear-gradient(90deg, rgba(8, 10, 12, 0.015) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(0deg, rgba(8, 10, 12, 0.015) 0 1px, transparent 1px 40px) !important;
    position: relative !important;
    min-height: 60vh !important;
}

.order-detail-card {
    max-width: 900px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid rgba(8, 10, 12, 0.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 45px rgba(8, 10, 12, 0.03) !important;
    overflow: hidden !important;
}

.order-detail-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    background: #0b0d10 !important;
    border-bottom: 2px solid #6d7f00 !important;
    padding: 22px 28px !important;
}

.order-detail-head h2 {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #dfff00 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.order-detail-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.order-detail-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.order-detail-btn.primary {
    background: #dfff00 !important;
    border: 1px solid #dfff00 !important;
    color: #0b0d10 !important;
}

.order-detail-btn.primary:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.order-detail-btn.ghost {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.order-detail-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

.order-detail-body {
    padding: 32px 28px !important;
}

/* Summary table */
.order-detail-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

.order-detail-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 0 32px !important;
    border: 1px solid rgba(8, 10, 12, 0.1) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    font-size: 13.5px !important;
}

.order-detail-table thead th {
    background: #0b0d10 !important;
    color: #dfff00 !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    padding: 13px 16px !important;
    border-bottom: 2px solid #6d7f00 !important;
    white-space: nowrap !important;
}

.order-detail-table thead th.text-right { text-align: right !important; }

.order-detail-table td {
    padding: 14px 16px !important;
    border-bottom: none !important;
    color: rgba(11, 13, 16, 0.8) !important;
    vertical-align: middle !important;
}

.order-detail-table td.text-right { text-align: right !important; }

.order-detail-table td.amount {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 900 !important;
    color: #6d7f00 !important;
    font-size: 15px !important;
}

/* Info block */
.order-info-title {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0b0d10 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.order-info-title::before {
    content: '' !important;
    width: 4px !important;
    height: 18px !important;
    background: #6d7f00 !important;
    border-radius: 2px !important;
}

.order-info-table {
    width: 100% !important;
    border: 1px solid rgba(8, 10, 12, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f6f7f2 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.order-info-table tr td {
    padding: 13px 18px !important;
    border-bottom: 1px solid rgba(8, 10, 12, 0.06) !important;
    font-size: 14px !important;
    vertical-align: top !important;
}

.order-info-table tr:last-child td { border-bottom: none !important; }

.order-info-table tr td:first-child {
    font-family: 'Chakra Petch', sans-serif !important;
    font-weight: 700 !important;
    color: rgba(11, 13, 16, 0.55) !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    width: 42% !important;
    white-space: nowrap !important;
}

.order-info-table tr td:last-child {
    color: #0b0d10 !important;
    font-weight: 600 !important;
}

.order-info-table tr:nth-child(even) { background: rgba(255, 255, 255, 0.6) !important; }

/* Status badge */
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: 50px !important;
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: rgba(34, 197, 94, 0.1) !important;
    color: #16a34a !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
}

.status-badge.pending,
.status-badge.processing {
    background: rgba(234, 179, 8, 0.12) !important;
    color: #a16207 !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}

.status-badge.failed,
.status-badge.cancelled,
.status-badge.canceled {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

@media (max-width: 768px) {
    .order-detail-section { padding: 40px 0 64px !important; }
    .order-detail-card { margin: 0 16px !important; }
    .order-detail-head { padding: 18px 20px !important; }
    .order-detail-body { padding: 24px 20px !important; }
    .order-info-table tr td:first-child { width: auto !important; }
}
}

/* ============================================================
   Logo hover light effect (header + footer)
   - radial light bloom behind the logo
   - diagonal shine streak sweeping across
   ============================================================ */
header.large-screens .navbar-brand,
header.small-screen .navbar-brand,
.footer-logo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.footer-logo {
  display: inline-block;
  border-radius: 12px;
}

/* Soft radial light that blooms behind the logo on hover */
header.large-screens .navbar-brand:hover::before,
header.small-screen .navbar-brand:hover::before,
.footer-logo:hover::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center,
              rgba(252, 80, 0, 0.38) 0%,
              rgba(252, 80, 0, 0.14) 35%,
              transparent 70%);
  z-index: 0;
  pointer-events: none;
  display: block !important;
  animation: logoGlowBloom 1.1s ease-out forwards;
}

/* Diagonal shine streak sweeping across the logo on hover */
header.large-screens .navbar-brand:hover::after,
header.small-screen .navbar-brand:hover::after,
.footer-logo:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(115deg,
              transparent 0%,
              rgba(255, 255, 255, 0.65) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  z-index: 3;
  pointer-events: none;
  display: block !important;
  animation: logoShineSweep 0.85s ease-out forwards;
}

/* Keep the logo image above the glow and give it a subtle lift + glow */
header.large-screens .navbar-brand img,
header.small-screen .navbar-brand img,
.footer-logo img {
  position: relative;
  z-index: 2;
  transition: transform 0.35s ease, filter 0.35s ease;
}

header.large-screens .navbar-brand:hover img,
header.small-screen .navbar-brand:hover img,
.footer-logo:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(252, 80, 0, 0.55)) brightness(1.08);
}

@keyframes logoGlowBloom {
  0%   { opacity: 0; transform: scale(0.55); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes logoShineSweep {
  0%   { left: -120%; }
  100% { left: 120%; }
}

@media (prefers-reduced-motion: reduce) {
  header.large-screens .navbar-brand:hover::before,
  header.small-screen .navbar-brand:hover::before,
  .footer-logo:hover::before,
  header.large-screens .navbar-brand:hover::after,
  header.small-screen .navbar-brand:hover::after,
  .footer-logo:hover::after { animation: none; }
}