/* ======================================
   REBBLE LANDING PAGE – FINAL COMPACT PASS
====================================== */

:root {
  --bg: #bcc8d9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --radius: 14px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 18px rgba(0,0,0,0.14);
}

/* ---------- Base ---------- */

body {
  margin: 0;
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color: var(--text);
}

.landing-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 52px;
}

/* ---------- Header ---------- */

.page-header {
  background: var(--bg);
}

/* ✅ ORANGE LINE FULL WIDTH (viewport, not container) */
.page-header-divider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 4px;
  background: #ff5a17;
  margin-top: 8px;
}

.page-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.page-header-left {
  display: block;              /* stack children normally */
}

.page-title-wrap {
  margin-top: 6px;
}

.page-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2937;              /* darker but smaller */
}

.page-subtitle {
  font-size: 0.9rem;
  color: #6b7280;   /* muted */
}

.page-subtitle .huge-text {
  font-size: 1.2rem;   /* make it big */
  font-weight: bold; /* make it bold */
  color: #000;       /* optional: override muted color */
}


/* Nudge subtitle to the right */
.page-subtitle {
  padding-left: 15px;
}


.page-logo {
  height: 115px;
  width: auto;
  display: block;
}

/* ✅ TITLE + SUBTITLE STACKED UNDER LOGO */

.page-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
}

.page-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.page-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------- Nav Pills ---------- */

.page-header-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-pill {
  text-decoration: none;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #0f172a;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}

.nav-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* ---------- Feature Cards ---------- */

.feature-grid {
  margin: 30px auto 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
}

.feature-icon {
  font-size: 2.1rem;
  margin-bottom: 8px;
}

.feature-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #3b0764;
}

.feature-desc {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- Section Divider ---------- */

.section-divider {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 32px 0 26px;
}

/* ---------- Section Titles ---------- */

.section-title {
  margin: 0 auto 10px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
}

/* ---------- ✅ TIGHT APP GRIDS ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 auto 34px;
}

/* ---------- ✅ TIGHT APP CARDS ---------- */

.card {
  background: var(--card);
  border-radius: 10px;
  padding: 10px 8px 12px;
  text-align: center;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
}

.card img {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 6px;
}

.card .title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}

/* ---------- ✅ DISCLAIMER MOVED TO BOTTOM ---------- */

/* === Rebble footer + disclaimer === */

section .small.muted,
.rebble-footer,
.rebble-footer p {
  text-align: left;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;      /* tighter lines */
  max-width: 1180px;      /* align with page width */
  margin: 8px auto 4px;   /* less vertical space */
  padding: 0 18px 10px;   /* light bottom padding */
}


/* ---------- Tablet ---------- */

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

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


/* ====================== */
/* SYNC PROGRESS INDICATOR */
/* ====================== */

.sync-progress-box {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0a1c3b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  margin: 0 auto 22px;
  max-width: 380px;

  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-progress-box i {
  color: #0a1c3b;
}

/* ============================================
   📱 FINAL FIX – STOP PILL OVERFLOW + CENTER THEM
   ============================================ */
@media (max-width: 640px) {

  /* Ensure header stacks */
  .page-header-inner {
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
  }

  /* FULL-WIDTH NAV CONTAINER */
  .page-header-right {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 0 12px !important;
  }

  /* THE FIX — PILLS MUST NOT EXCEED VIEWPORT */
  .page-header-right .nav-pill {
      width: 100% !important;              /* allow responsive scaling */
      max-width: 100% !important;          /* override 420px */
      box-sizing: border-box !important;   /* include padding in width */

      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      padding: 14px 16px !important;
      border-radius: 999px !important;

      font-size: 1rem !important;
      font-weight: 700 !important;
  }

  .page-header-right .nav-pill i {
      margin-right: 10px !important;
      font-size: 1.1rem !important;
  }
}

/* ============================================
   📱 FINAL FIX – STOP PILL OVERFLOW + CENTER THEM
   ============================================ */
@media (max-width: 640px) {

  /* Ensure header stacks */
  .page-header-inner {
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
  }

  /* FULL-WIDTH NAV CONTAINER */
  .page-header-right {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 0 12px !important;
  }

  /* THE FIX — PILLS MUST NOT EXCEED VIEWPORT */
  .page-header-right .nav-pill {
      width: 100% !important;              /* allow responsive scaling */
      max-width: 100% !important;          /* override 420px */
      box-sizing: border-box !important;   /* include padding in width */

      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      padding: 14px 16px !important;
      border-radius: 999px !important;

      font-size: 1rem !important;
      font-weight: 700 !important;
  }

  .page-header-right .nav-pill i {
      margin-right: 10px !important;
      font-size: 1.1rem !important;
  }
}

/* ============================================
   📱 FINAL — MOBILE HEADER FIX (WORKING)
============================================ */
@media (max-width: 640px) {

    /* Reduce logo size */
    .page-logo {
        height: 70px !important;
    }

    /* Stack layout */
    .page-header-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100%;
        text-align: center;
    }

    /* Nav container */
    .page-header-right {
        display: flex;
        flex-direction: column;
        align-items: center; 
        width: 100%;
        gap: 12px;
    }

    /* Pills — centered but NOT full width */
    .page-header-right .nav-pill {
        width: 85% !important;                 /* narrower pills */
        max-width: 330px !important;           /* prevents huge pills */
        background: #ffffff !important;
        color: #0a1c3b !important;
        padding: 12px 16px !important;
        border-radius: 999px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;  /* 🔥 LEFT align icon + text */
        gap: 12px !important;

        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    }

    /* Icons — left aligned properly */
    .page-header-right .nav-pill i {
        font-size: 1.1rem !important;
        color: #0a1c3b !important;
        margin: 0 !important;                  /* perfect left edge alignment */
    }
}

/* ============================================
   📱 MOBILE — LEFT ALIGN HEADER ELEMENTS ONLY
   Subtitle + Nav Pills + Search
   ============================================ */
@media (max-width: 640px) {

  /* 2️⃣ Nav container — left aligned */
  .page-header-right {
    align-items: flex-start !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Pills — left aligned internally */
  .page-header-right .nav-pill {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 3️⃣ Search box — left aligned & card-aligned */
  .controls,
  .top-controls,
  .global-search,
  #global-search {
    margin-left: 0px !important;
    margin-right: 14px !important;
    align-self: flex-start !important;
  }
}

@media (max-width: 640px) {

  /* Subtitle — left align + line up with cards */
  .page-title-wrap .page-subtitle {
    text-align: left !important;
    width: 100% !important;
    padding-left: 0px !important; /* match card gutter */
    padding-right: 14px !important;
    margin-left: 0 !important;
  }

  /* Optional: if the wrapper itself is centering things */
  .page-title-wrap {
    width: 100% !important;
    text-align: left !important;
  }
}

/* ============================================================
   REBBLE MIRROR — CD PROJEKT RED COLOR OVERRIDE
   ⚠️ COLORS ONLY — SAFE DROP-IN
============================================================ */

/* ---------- Page Background ---------- */
body {
  background: #d9d9d9 !important;
  color: #111111 !important;
}

/* ---------- Header ---------- */
.page-header {
  background: #0b0b0b !important;
}

.page-header-divider {
  background: #d62d20 !important;
}

/* Title + subtitle colors */
.page-title {
  color: #ffffff !important;
}

.page-subtitle {
  color: #b5b5b5 !important;
}

.page-subtitle .huge-text {
  color: #ffffff !important;
}

/* ---------- Nav Pills ---------- */
.nav-pill {
  background: #ffffff !important;
  color: #111111 !important;
}

.nav-pill:hover {
  background: #f3f3f3 !important;
}

/* ---------- Feature Cards ---------- */
.feature-card {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Feature titles */
.feature-title {
  color: #111111 !important;
}

.feature-desc {
  color: #555555 !important;
}

/* ---------- App Cards ---------- */
.card {
  background: #ffffff !important;
  color: #111111 !important;
}

.card .title {
  color: #d62d20 !important;
}

/* ---------- Section Titles ---------- */
.section-title {
  color: #111111 !important;
}

/* ---------- Accent Links ---------- */
a {
  color: #d62d20 !important;
}

a:hover {
  color: #b82418 !important;
}

/* ---------- Shadows stay untouched ---------- */
/* (intentionally not overridden) */

/* ---------- Footer / Disclaimer ---------- */
.rebble-footer,
.rebble-footer p,
section .small.muted {
  color: #6f6f6f !important;
}

/* ============================================================
   REBBLE MIRROR — CD PROJEKT RED HEADER BLEED
   COLOR-ONLY / NO STRUCTURE CHANGES
============================================================ */

body {
  background:
    linear-gradient(
      to bottom,
      #0b0b0b 0px,
      #0b0b0b 240px,   /* header visual height */
      #d9d9d9 240px,
      #d9d9d9 100%
    ) !important;
}

/* ============================================================
   PAGINATION — ACTIVE PAGE (MATCHING CDPR RED)
   COLOR-ONLY OVERRIDE
============================================================ */

.rebble-page-current,
.pagination a.btn.active {
  background: #d62d20 !important;   /* CD Projekt Red red */
  border-color: #d62d20 !important;
  color: #ffffff !important;
}

/* ============================================
   📱 MOBILE — FULL-WIDTH HEADER BACKGROUND
   WITHOUT MOVING CONTENT
============================================ */
@media (max-width: 640px) {

  /* Header background extension only */
  .page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background: #000;
    z-index: -1;
  }

  /* Ensure header can host pseudo-element */
  .page-header {
    position: relative;
    background: transparent !important;
  }

  /* FULL-WIDTH RED DIVIDER (NO CONTENT MOVE) */
  .page-header-divider {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
  }
}

/* ============================================
   📱 MOBILE — HEADER PADDING ALIGNMENT FIX
   Matches header content to card gutter
============================================ */
@media (max-width: 640px) {

  /* Tighten header inner padding to match cards */
  .page-header-inner {
    padding-left: 14px !important;
    padding-right: 0px !important;
  }
}

/* ============================================
   📱 MOBILE — FORCE HEADER BACKGROUND FULL WIDTH
   (visual extension ONLY, no layout changes)
============================================ */
@media (max-width: 640px) {

  .page-header {
    position: relative;
    background: none !important; /* prevent double layering */
  }

  .page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #000; /* header black */
    z-index: -1;
  }
}

/* ============================================================
   END CD PROJEKT RED COLOR OVERRIDE
============================================================ */