/* Dark theme palette and typography helpers */
:root {
  --bg-primary: #0b1221;
  --bg-secondary: #11192b;
  --text-primary: #e2e8f0;
  --text-muted: #cbd5e1;
  --accent: #fbbf24;
  --accent-strong: #f59e0b;
}

/* Base resets to ensure mobile stability and prevent horizontal scroll */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  overflow-x: hidden; /* Prevents mobile sideways scroll; “fix the screen” */
}

/* Utility buttons styled via Tailwind base classes but refined here */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 font-semibold text-white bg-gradient-to-r from-amber-300 via-orange-400 to-rose-500 hover:from-amber-200 hover:via-orange-300 hover:to-rose-400 transition shadow-lg shadow-orange-400/30 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:ring-offset-2 focus:ring-offset-slate-900;
}

.btn-accent {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 font-semibold text-white bg-gradient-to-r from-amber-300 via-orange-400 to-rose-500 hover:from-amber-200 hover:via-orange-300 hover:to-rose-400 transition shadow-xl shadow-orange-400/40 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:ring-offset-2 focus:ring-offset-slate-900;
}

.btn-ghost {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 font-semibold text-white bg-slate-900 border border-orange-300/60 hover:bg-slate-800 transition shadow-md shadow-slate-900/40 focus:outline-none focus:ring-2 focus:ring-amber-200 focus:ring-offset-2 focus:ring-offset-slate-900;
}

/* Hero slot image styling for consistent rounded corners */
.slot-card {
  @apply w-full aspect-video object-cover rounded-xl border border-slate-800 shadow-md shadow-slate-900/40 hover:shadow-amber-300/20 transition;
}

/* Responsive table: desktop table layout, mobile stacked cards */
.responsive-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  min-width: 100%;
}

.responsive-table thead {
  background: #0f172a;
}

.responsive-table th,
.responsive-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #1f2937;
  color: var(--text-muted);
  vertical-align: top;
}

.responsive-table th {
  color: #fbbf24;
  font-weight: 700;
}

.responsive-table td:first-child {
  color: #fef3c7;
  font-weight: 700;
}

.responsive-table tr:last-child th,
.responsive-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .responsive-table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table th,
  .responsive-table td,
  .responsive-table tr {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    background: #0f172a;
    border: 1px solid #1f2937;
    border-radius: 0.75rem;
    margin: 1rem 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .responsive-table td {
    border: none;
    border-bottom: 1px solid #1f2937;
    position: relative;
    padding: 1.1rem 1.25rem 1.1rem 5.75rem;
    word-break: break-word;
    white-space: normal;
    box-sizing: border-box;
    line-height: 1.5;
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }

  .responsive-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fbbf24;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    min-width: 3.75rem;
    max-width: 5rem;
    white-space: normal;
  }
}

/* Payment logo sizing with subtle treatment on dark background */
.payment-logo {
  height: 34px;
  width: auto;
  filter: brightness(1.05);
  opacity: 0.9;
}

.payment-logo:hover {
  opacity: 1;
  filter: brightness(1.2);
}

/* Breadcrumb clarity on dark surfaces */
nav[aria-label="Maizes drupačas"] a {
  text-decoration: none;
}

/* Banner call-to-action overlay centering safeguard */
section[aria-label="Sveiciena bonusa piedāvājums"] .absolute {
  pointer-events: none;
}

section[aria-label="Sveiciena bonusa piedāvājums"] .btn-accent {
  pointer-events: auto; /* Re-enable clicks only on CTA */
}