/* ==========================================================================
   Application Stylesheet Map
   1. Foundations
   2. Public shell, navigation, and search
   3. Public home and discovery
   4. Public listing, promo, and tracking pages
   5. Game detail and checkout
   6. About, legal, footer, auth, and public transactions
   7. Public responsive rules
   8. Merchant shell and shared UI
   9. Merchant dashboard and reports
   10. Merchant CMS, catalog, provider, promotion, access, and game screens
   11. Merchant login and responsive rules
   ========================================================================== */

/* ==========================================================================
   1. Foundations
   ========================================================================== */
:root {
  --primary: #b71c1c;
  --primary-600: #cc0000;
  --accent: #1e88e5;
  --cyan: #00bcd4;
  --rose: #e53a35;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --soft: #f9fafb;
  --panel: #ffffff;
  --surface: #ffffff;
  --border-color: #e5e7eb;
  --text-primary: #111827;
  --text-muted: #6b7280;
  --danger: #dc2626;
  --shadow-soft: 0 12px 28px rgb(15 23 42 / 10%);
  --public-bg-start: #fcfaff;
  --public-bg-end: #f8f4ff;
  --public-primary-soft: #f5f3ff;
  --public-accent-soft: #faf5ff;
  --public-highlight-soft: #f3e8ff;
  --public-soft-line: #ede9fe;
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 8%);
  --shadow-md: 0 10px 25px rgb(15 23 42 / 8%);
  --shadow-lg: 0 18px 45px rgb(15 23 42 / 12%);
  --radius: 16px;
  --container: 1280px;
  --public-page-gutter: 32px;
  --public-page-gutter-mobile: 24px;
  --public-page-top-space: 24px;
  --public-page-top-space-sm: 18px;
  --public-page-top-space-list: 28px;
  --public-page-top-space-lg: 30px;
  --public-section-space: 54px;
  --public-section-space-quarter: 14px;
  --public-section-space-third: 18px;
  --public-section-space-small: 20px;
  --public-section-space-compact: 22px;
  --public-section-space-half: 28px;
  --public-section-space-medium: 30px;
  --public-section-space-two-thirds: 36px;
  --public-section-space-soft: 38px;
  --public-section-space-three-quarters: 42px;
  --public-section-space-four-fifths: 44px;
  --public-section-space-large: 46px;
  --public-section-space-xl: 48px;
  --public-section-space-page: 56px;
  --public-section-space-wide: 64px;
  --public-section-space-hero: 68px;
  --public-section-title-space: 36px;
  --public-section-title-space-half: 18px;
  --public-section-title-space-mobile: 26px;
  --public-section-title-space-mobile-bottom: 14px;
  --public-grid-gap: 16px;
  --public-grid-gap-tiny: 9px;
  --public-grid-gap-xs: 10px;
  --public-grid-gap-sm: 12px;
  --public-grid-gap-md: 14px;
  --public-grid-gap-roomy: 18px;
  --public-grid-gap-lg: 20px;
  --public-grid-gap-xl: 22px;
  --public-grid-gap-2xl: 24px;
  --public-grid-gap-3xl: 28px;
  --public-grid-gap-footer: 42px;
  --public-card-padding: 22px;
  --public-card-padding-xs: 14px;
  --public-card-padding-sm: 16px;
  --public-card-padding-md: 18px;
  --public-card-padding-lg: 20px;
  --public-card-padding-xl: 28px;
  --public-card-padding-2xl: 30px;
  --public-card-padding-3xl: 32px;
  --public-card-padding-empty: 48px;
  --public-card-radius: 16px;
  --public-card-radius-lg: 28px;
  --public-banner-max-width: 960px;
  --public-banner-min-height: 160px;
  --public-detail-width: 600px;
  --public-narrow-width: 720px;
  --public-header-bar-padding-y: 14px;
  --public-header-logo-height: 46px;
  --public-header-bg: #ffffff;
  --public-header-border: #e5e7eb;
  --public-footer-padding-y: 38px;
  --public-footer-logo-width: 232px;
  --public-footer-logo-mobile-width: 120px;
  --public-footer-payment-icon-height: 24px;
  --public-footer-bg-start: #f5f0ff;
  --public-footer-bg-end: #f8f4ff;
  --public-footer-text: #5b4b7a;
  --public-footer-link: #5b21b6;
  --public-button-padding-y: 14px;
  --public-button-padding-x: 22px;
  --public-button-radius: 14px;
  --public-button-font-size: 15px;
  --public-button-min-height: 44px;
  --public-button-bg: #6d28d9;
  --public-button-text: #ffffff;
  --public-button-border: #6d28d9;
  --public-button-hover-bg: #5b21b6;
  --public-button-hover-text: #ffffff;
  --public-secondary-button-bg: #ffffff;
  --public-secondary-button-text: #374151;
  --public-input-padding-y: 14px;
  --public-input-padding-x: 16px;
  --public-input-radius: 14px;
  --public-input-font-size: 15px;
  --public-input-border-width: 1px;
  --public-input-bg: #ffffff;
  --public-input-text: #111827;
  --public-input-border: #d1d5db;
  --public-input-focus-border: #6d28d9;
  --public-input-placeholder: #9ca3af;
  --public-label-font-size: 14px;
  --public-label-margin-bottom: 8px;
  --public-label-color: #111827;
  --public-body-font-size: 15px;
  --public-small-text-size: 13px;
  --public-heading-font-size: 34px;
  --public-heading-color: #111827;
  --public-link-color: #6d28d9;
  --public-form-gap: 12px;
  --public-control-margin-bottom: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--soft);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
}

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

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

button,
input {
  font: inherit;
}

.page-container {
  width: min(var(--container), calc(100% - var(--public-page-gutter)));
  margin-inline: auto;
}

.site-shell {
  min-height: 100vh;
}