/* ==========================================
   BENEFIQ -- OFFERS PAGE
   Two-part card: issuer header + offer body
   ========================================== */

@layer pages {

  /* ==========================================
     OFFER TYPE TABS
     ========================================== */
  .offers-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--surface-200);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .offers-tabs::-webkit-scrollbar {
    display: none;
  }

  .offers-tab:first-child {
    padding-left: 0;
  }

  .offers-tab {
    position: relative;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--surface-400);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-base);
  }

  .offers-tab:hover {
    color: var(--surface-700);
  }

  .offers-tab.active {
    color: var(--surface-900);
  }

  .offers-tab.active::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: -2px;
    height: 2px;
    background: var(--surface-900);
    border-radius: 1px 1px 0 0;
  }

  .offers-tab:first-child.active::after {
    left: 0;
  }

  .offers-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-200);
    font-size: 0.6875rem;
    font-weight: var(--weight-bold);
    color: var(--surface-500);
    line-height: 1;
  }

  .offers-tab.active .offers-tab-count {
    background: var(--surface-900);
    color: #fff;
  }

  /* ==========================================
     ISSUER FILTER PILLS
     ========================================== */
  .offers-issuer-filter {
    position: relative;
    display: flex;
    gap: var(--space-2);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent calc(100% - 16px));
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent calc(100% - 16px));
  }

  .offers-issuer-filter::-webkit-scrollbar {
    display: none;
  }

  .offers-filter-pill {
    padding: 6px var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-base);
  }

  .offers-filter-pill:hover {
    border-color: var(--border-strong);
    color: var(--text);
  }

  .offers-filter-pill.active {
    background: var(--surface-900);
    border-color: var(--surface-900);
    color: #FFFFFF;
  }

  /* ==========================================
     TILE GRID
     ========================================== */
  .offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
  }

  @media (max-width: 680px) {
    .offers-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ==========================================
     COMING SOON SECTION
     ========================================== */
  .offers-coming-section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--surface-200);
  }

  .offers-coming-header {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--surface-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
  }

  /* ==========================================
     OFFER TILE — Two-part card
     ========================================== */
  .offer-tile {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .offer-tile:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* ==========================================
     CARD HEADER — Issuer branding strip
     ========================================== */
  .offer-tile-header {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    overflow: hidden;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Decorative EMV chip */
  .offer-tile-header::before {
    content: '';
    position: absolute;
    left: var(--space-4);
    bottom: calc(var(--space-3) + 3px);
    width: 28px;
    height: 20px;
    border-radius: 4px;
    background:
      linear-gradient(to right,
        transparent 30%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 33%, transparent 33%
      ),
      linear-gradient(to bottom,
        transparent 46%, rgba(255,255,255,0.1) 46%, rgba(255,255,255,0.1) 54%, transparent 54%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.28) 100%
      );
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  }

  /* Subtle wave pattern overlay */
  .offer-tile-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      -30deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.03) 8px,
      rgba(255, 255, 255, 0.03) 9px
    );
    pointer-events: none;
  }

  .offer-tile-header-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .offer-tile-issuer {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
  }

  .offer-tile-card-name-header {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    margin-top: var(--space-5);
    padding-left: 40px;
  }

  /* Urgency — soft glowing red border */
  .offer-tile--urgent {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5), 0 0 16px rgba(239, 68, 68, 0.25);
  }
  .offer-tile-urgency {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--error-500, #ef4444);
  }

  /* ==========================================
     OFFER BODY — Details section
     ========================================== */
  .offer-tile-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
  }

  /* Content grid — rate beside title/subtitle */
  .offer-tile-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    row-gap: 2px;
  }

  /* Default: rotating — rate + title share text baseline at bottom */
  .offer-tile-rate {
    grid-row: 1;
    grid-column: 1;
    font-family: var(--font-display);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.04em;
    color: var(--surface-700);
    font-size: 3rem;
    line-height: 1;
    align-self: last baseline;
  }

  .offer-tile-rate-unit {
    font-size: 0.42em;
    font-weight: var(--weight-bold);
    color: inherit;
    margin-left: 1px;
    vertical-align: baseline;
  }

  .offer-tile-title {
    grid-column: 2;
    grid-row: 1;
    align-self: last baseline;
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    color: var(--surface-700);
    line-height: 1.2;
  }

  .offer-tile-subtitle {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--surface-500);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Portal / Transfer — rate spans both rows, top-aligns with title */
  .offer-tile-content--with-sub .offer-tile-rate {
    grid-row: 1 / -1;
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: baseline;
  }

  .offer-tile-content--with-sub .offer-tile-title {
    align-self: start;
    padding-top: 0.2rem;
  }

  .offer-tile-meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .offer-tile-date,
  .offer-tile-spend-cap {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--surface-400);
  }

  .offer-tile-meta-dot::before {
    content: '\00b7';
    color: var(--surface-300);
    font-weight: var(--weight-bold);
  }

  /* ==========================================
     ACTION BUTTON
     ========================================== */
  .offer-tile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-100);
    color: var(--surface-800);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--transition-base);
    margin-top: auto;
  }

  .offer-tile-action:hover {
    background: var(--surface-200);
  }

  .offer-tile-action--active {
    background: var(--brand-50);
    color: var(--brand-700);
    cursor: default;
    border: 1px solid var(--brand-100);
  }

  /* ==========================================
     COMING SOON VARIANT
     ========================================== */
  .offer-tile--coming {
    opacity: 0.55;
  }

  .offer-tile--coming:hover {
    opacity: 0.8;
  }

  /* ==========================================
     EMPTY STATE
     ========================================== */
  .offers-empty {
    text-align: center;
    padding: var(--space-12) var(--space-5);
    margin-top: var(--space-6);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
  }

  .offers-empty h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
  }

  .offers-empty p {
    color: var(--text-muted);
    margin-bottom: var(--space-5);
  }

  .offers-empty-state {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
  }

  .offers-empty-state p {
    color: var(--text-muted);
  }

  /* ==========================================
     MOBILE RESPONSIVE — 480px
     ========================================== */
  @media (max-width: 480px) {
    .offers-tabs {
      -webkit-overflow-scrolling: touch;
    }
    .offers-issuer-filter {
      -webkit-overflow-scrolling: touch;
      margin: 0 calc(var(--space-5) * -1);
      padding: 0 calc(var(--space-5) + 24px) 0 var(--space-5); /* extra right padding for scroll arrow */
    }
    .offer-tile-body {
      padding: var(--space-3);
    }
    .offer-tile-title {
      font-size: var(--text-base);
    }
    .offer-tile-merchant {
      font-size: var(--text-sm);
    }
  }

  /* ==========================================
     SCROLL EDGE FADE INDICATORS
     ========================================== */

  /* Horizontal scroll container — wraps the filter pills row */
  .scroll-edge-h {
    position: relative;
    margin-bottom: var(--space-6);
  }

  .scroll-edge-h::before,
  .scroll-edge-h::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .scroll-edge-h::before {
    left: 0;
    background: linear-gradient(to right,
      var(--surface-primary, #faf9f6) 10%,
      transparent 100%);
  }

  .scroll-edge-h::after {
    right: 0;
    background: linear-gradient(to left,
      var(--surface-primary, #faf9f6) 10%,
      transparent 100%);
  }

  .scroll-edge-h.can-scroll-left::before { opacity: 1; }
  .scroll-edge-h.can-scroll-right::after { opacity: 1; }

  /* Subtle arrow chevrons inside the fade */
  .scroll-edge-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--text-muted);
  }

  .scroll-edge-arrow svg {
    width: 14px;
    height: 14px;
    opacity: 0.45;
  }

  .scroll-edge-arrow--left { left: 4px; }
  .scroll-edge-arrow--right { right: 4px; }

  .scroll-edge-h.can-scroll-left .scroll-edge-arrow--left { opacity: 1; }
  .scroll-edge-h.can-scroll-right .scroll-edge-arrow--right { opacity: 1; }

  /* ==========================================
     SCROLL-SNAP FOR FILTER PILLS & TABS
     ========================================== */
  .offers-issuer-filter,
  .offers-tabs {
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--space-5);
  }

  .offers-filter-pill {
    scroll-snap-align: start;
  }

  .offers-tab {
    scroll-snap-align: start;
  }

  /* Touch target compliance (44px minimum) */
  @media (pointer: coarse) {
    .offers-filter-pill {
      min-height: 44px;
      padding: var(--space-2) var(--space-4);
    }
    .offers-tab {
      min-height: 44px;
    }
  }

  /* ==========================================
     OFFER DETAIL BOTTOM SHEET (Wallet page)
     ========================================== */
  .offer-sheet-backdrop {
    z-index: calc(var(--z-fixed) + 10);
  }

  .offer-detail-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: calc(var(--z-fixed) + 11);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
  }

  .offer-detail-sheet.open {
    transform: translateY(0);
  }

  .offer-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--surface-300);
    border-radius: var(--radius-full);
    margin: var(--space-3) auto var(--space-2);
    flex-shrink: 0;
    cursor: grab;
  }

  .offer-sheet-header {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    flex-shrink: 0;
  }

  .offer-sheet-card-name {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  .offer-sheet-card-issuer {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.65);
    font-weight: var(--weight-medium);
  }

  .offer-sheet-count {
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 10px;
    border-radius: var(--radius-full);
  }

  .offer-sheet-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-3) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .offer-sheet-item {
    padding: var(--space-4);
    background: var(--surface-secondary, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .offer-sheet-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .offer-sheet-type {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-500);
  }

  .offer-sheet-deadline {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .offer-sheet-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .offer-sheet-item-info {
    flex: 1;
    min-width: 0;
  }

  .offer-sheet-item-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
  }

  .offer-sheet-item-rate {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--text);
    line-height: 1;
    margin-top: 2px;
  }

  .offer-sheet-cta {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--brand-500);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
  }

}