/*
 * Mobile responsive overrides
 * ===========================
 *
 * The per-page Razor scoped CSS in this project was authored with desktop-scale
 * typography and spacing. This file layers a phone-first set of overrides on top
 * so the PWA reads at native mobile sizes without rewriting hundreds of CSS files.
 *
 * Scope: applies only to viewports ≤ 767px (phones and small tablets in portrait).
 * Desktop and admin tooling at 768px+ keeps the original visuals.
 *
 * Uses `!important` deliberately because Blazor component-scoped CSS rules carry
 * an extra `[b-xxxxx]` attribute selector that out-specifies plain class selectors.
 */

@media (max-width: 767px) {

  /* ============================================================
     TYPOGRAPHY - drop the scale across the app
     ============================================================ */

  body,
  .mobile-app-layout,
  .content-body,
  main { font-size: 14px !important; }

  h1, .h1 { font-size: 1.375rem !important; line-height: 1.25 !important; }
  h2, .h2 { font-size: 1.125rem !important; line-height: 1.3 !important; }
  h3, .h3 { font-size: 1rem !important; line-height: 1.35 !important; }
  h4, .h4 { font-size: 0.9375rem !important; line-height: 1.4 !important; }
  h5, .h5 { font-size: 0.875rem !important; line-height: 1.4 !important; }
  h6, .h6 { font-size: 0.8125rem !important; line-height: 1.4 !important; }

  p, li, dd, dt, label, span, div { font-size: inherit; }

  /* Specific common patterns that page CSS oversized */
  .section-header h1,
  .section-header h2,
  .section-header h3 { font-size: 1rem !important; font-weight: 600 !important; }

  .page-title,
  .section-title,
  .card-title { font-size: 1.0625rem !important; }

  .label,
  .form-label,
  .field-label,
  .input-label { font-size: 0.8125rem !important; }

  .value,
  .field-value,
  .item-value { font-size: 0.9375rem !important; }

  .subtitle,
  .description,
  .helper-text,
  .meta,
  .timestamp { font-size: 0.8125rem !important; }

  /* Inputs - keep 16px to stop iOS zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select { font-size: 16px !important; }


  /* ============================================================
     SPACING - tighten cards, sections and gaps
     ============================================================ */

  .profile-container,
  .page-container,
  .content-container,
  .main-container { padding: 12px !important; }

  .profile-section,
  .profile-card,
  .card,
  .section,
  .info-card { padding: 14px !important; margin-bottom: 10px !important; }

  .section-header { padding: 12px 14px !important; }

  .section-content,
  .card-content { padding: 12px 14px !important; gap: 8px !important; }

  /* Action buttons strip (Profile, Edit, etc.) */
  .action-buttons { padding: 16px 12px !important; gap: 8px !important; }
  .action-buttons > * { margin-bottom: 0 !important; }

  /* Form rows */
  .form-row,
  .form-group,
  .input-group { margin-bottom: 12px !important; }

  /* Modal overrides */
  .atkv-modal-container { max-width: calc(100vw - 24px) !important; }
  .atkv-modal-header { padding: 16px 18px 8px !important; }
  .atkv-modal-header h3 { font-size: 1.0625rem !important; }
  .atkv-modal-body { padding: 0 18px 16px !important; }
  .atkv-modal-body p { font-size: 0.875rem !important; }
  .atkv-modal-footer { padding: 12px 18px 16px !important; gap: 10px !important; }
  .atkv-modal-btn { padding: 10px 16px !important; font-size: 0.9375rem !important; }


  /* ============================================================
     BUTTONS - cut the giant desktop padding
     ============================================================ */

  .atkv-btn,
  .atkv-btn-primary,
  .atkv-btn-secondary,
  .atkv-btn-tertiary,
  .landing-btn-primary,
  .btn { padding: 12px 18px !important; font-size: 0.9375rem !important; min-height: 44px !important; }

  .atkv-btn-lg { padding: 14px 20px !important; font-size: 1rem !important; }

  .atkv-btn-sm { padding: 8px 14px !important; font-size: 0.8125rem !important; min-height: 36px !important; }


  /* ============================================================
     PROFILE-SPECIFIC TIGHTENING
     ============================================================ */

  .profile-container { padding: 12px !important; gap: 10px !important; }
  .profile-header { padding: 14px !important; gap: 6px !important; }
  .profile-photo-container { width: 80px !important; height: 80px !important; }
  .avatar-fallback,
  .profile-photo { width: 80px !important; height: 80px !important; font-size: 1.5rem !important; }
  .profile-header .member-name,
  .profile-header h1,
  .profile-header h2 { font-size: 1.0625rem !important; margin: 6px 0 2px !important; }
  .profile-header .member-number { font-size: 0.8125rem !important; }
  .profile-header .member-since { font-size: 0.75rem !important; margin: 2px 0 !important; }

  /* The list-of-cards wrapper - close the giant 32px gap */
  .profile-sections { gap: 10px !important; }

  .profile-section,
  .profile-section.collapsible {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }

  .profile-section .section-header { min-height: 36px !important; padding: 0 !important; }
  .profile-section .section-header h2,
  .profile-section .section-header h3 { font-size: 0.9375rem !important; }
  .profile-section .toggle-icon { font-size: 0.75rem !important; }

  .profile-section .section-content {
    padding: 8px 0 0 !important;
    gap: 8px !important;
  }

  .info-item,
  .field-row,
  .info-row { gap: 2px !important; margin-bottom: 4px !important; }
  .info-item .label,
  .info-row .label,
  .field-row .label { font-size: 0.75rem !important; color: var(--color-gray-500, #6b7280) !important; }
  .info-item .value,
  .info-row .value,
  .field-row .value { font-size: 0.9375rem !important; }

  .section-edit-footer { padding-top: 6px !important; }
  .section-edit-footer .edit-btn,
  .pay-membership-btn { padding: 6px 12px !important; font-size: 0.8125rem !important; }

  .readonly-badge,
  .status-badge,
  .aktief,
  .active-badge { font-size: 0.6875rem !important; padding: 2px 8px !important; }


  /* ============================================================
     LANDING / AUTH
     ============================================================ */

  .landing-input { font-size: 16px !important; padding: 10px 14px 10px 40px !important; height: 46px !important; }
  .landing-label { font-size: 0.8125rem !important; margin-bottom: 4px !important; }
  .landing-input-group { margin-bottom: 14px !important; }
  .landing-btn-primary { height: 46px !important; font-size: 0.9375rem !important; }
  .landing-actions { margin-top: 16px !important; gap: 10px !important; }


  /* ============================================================
     TOP NAV
     ============================================================ */

  .top-nav,
  .top-nav-bar,
  header .navbar { padding: 8px 12px !important; }
  .top-nav .logo,
  .top-nav-logo { height: 32px !important; width: auto !important; }


  /* ============================================================
     CAROUSEL PATTERN - turn image rows into swipeable strips
     ============================================================
     Any element marked `.mobile-carousel` (or matching common
     "list of horizontal items" patterns) becomes a scroll-snap
     swipe row on phones.
  */

  .mobile-carousel,
  .horizontal-scroll,
  .scroll-x,
  .news-grid,
  .experiences-row,
  .resorts-grid,
  .featured-list,
  .related-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-left: 12px !important;
    gap: 12px !important;
    padding: 8px 12px 16px !important;
    margin: 0 -12px !important;        /* break out of container padding */
    scrollbar-width: none;
  }

  .mobile-carousel::-webkit-scrollbar,
  .horizontal-scroll::-webkit-scrollbar,
  .scroll-x::-webkit-scrollbar,
  .news-grid::-webkit-scrollbar,
  .experiences-row::-webkit-scrollbar,
  .resorts-grid::-webkit-scrollbar,
  .featured-list::-webkit-scrollbar,
  .related-items::-webkit-scrollbar { display: none; }

  .mobile-carousel > *,
  .horizontal-scroll > *,
  .scroll-x > *,
  .news-grid > *,
  .experiences-row > *,
  .resorts-grid > *,
  .featured-list > *,
  .related-items > * {
    flex: 0 0 78% !important;          /* one card + peek of next */
    scroll-snap-align: start !important;
    max-width: 78% !important;
  }


  /* ============================================================
     IMAGES - never overflow on small screens
     ============================================================ */

  img,
  picture,
  video { max-width: 100% !important; height: auto !important; }


  /* ============================================================
     TABLES - inherit body size, allow horizontal scroll
     ============================================================ */

  table { font-size: 0.8125rem !important; }
  .table-responsive,
  .scroll-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }


  /* ============================================================
     RESORTS PAGE
     ============================================================ */

  .header-section { gap: 6px !important; padding-top: 8px !important; }
  .header-title { font-size: 1.375rem !important; }
  .header-subtitle { font-size: 0.9375rem !important; font-weight: 500 !important; }

  .search-filters { gap: 10px !important; flex-wrap: nowrap !important; }
  .search-input-group { width: auto !important; flex: 1 !important; gap: 8px !important; }
  .search-input-group .search-input { height: 44px !important; border-radius: 22px !important; padding: 0 12px !important; }
  .search-input-group .search-text-input { font-size: 14px !important; }
  .search-input-group .search-icon { width: 18px !important; height: 18px !important; }

  .resort-dropdown,
  .resort-dropdown-button { height: 44px !important; padding: 0 14px !important; border-radius: 22px !important; }
  .resort-dropdown-text { font-size: 0.9375rem !important; font-weight: 600 !important; }

  .experiences-section { gap: 14px !important; }
  .experiences-title { font-size: 1.125rem !important; text-align: left !important; }

  .accommodation-grid { gap: 12px !important; padding-bottom: 8px !important; }
  /* Accommodation-card sizing now lives in css/redesign/chrome.css to
     match the new compact home cards (title-overlay + price-only, no
     amenities/book button on the card). Old min-height: 280px caused
     a tall empty band below the price - removed. */


  /* ============================================================
     NEWS LIST - tighten the news card row, keep vertical but compact
     ============================================================ */

  .news-list,
  .news-grid,
  .news-items { gap: 10px !important; padding: 0 !important; }

  .news-card,
  .news-item {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .news-card img,
  .news-item img,
  .news-image { height: 120px !important; object-fit: cover !important; }
  .news-card .content,
  .news-item .content,
  .news-card-body,
  .news-item-body { padding: 10px 12px !important; gap: 4px !important; }
  .news-card .title,
  .news-item .title,
  .news-title { font-size: 0.9375rem !important; line-height: 1.3 !important; }
  .news-card .date,
  .news-item .date,
  .news-date { font-size: 0.6875rem !important; color: var(--color-gray-500, #6b7280) !important; }


  /* ============================================================
     HOME PAGE - shrink hero, tighten welcome banner & cards
     ============================================================ */

  .home-welcome,
  .home-hero,
  .welcome-banner { padding: 14px 16px !important; }
  .home-welcome h1,
  .home-welcome h2,
  .home-hero h1,
  .welcome-banner h1 { font-size: 1.0625rem !important; margin: 0 !important; }
  .home-welcome p,
  .home-hero p,
  .welcome-banner p { font-size: 0.8125rem !important; opacity: 0.85 !important; }

  .wallet-card,
  .home-wallet-card { padding: 14px !important; border-radius: 14px !important; }
  .wallet-card .balance,
  .wallet-card .amount { font-size: 1.125rem !important; }
  .wallet-card .label { font-size: 0.6875rem !important; }


  /* ============================================================
     BOOKINGS PAGE - filter pills, hero
     ============================================================ */

  .bookings-hero { height: 140px !important; }
  .bookings-hero h1,
  .bookings-page h1 { font-size: 1.25rem !important; }
  .filter-pills,
  .booking-filters { gap: 6px !important; padding: 8px 12px !important; }
  .filter-pill,
  .filter-tab { padding: 6px 14px !important; font-size: 0.8125rem !important; }


  /* ============================================================
     HORIZONTAL TAB NAVS - fail-safe so labels never clip on phones
     ============================================================

     Pages with multi-tab horizontal navs (Bookings, Resort detail,
     etc.) define a hidden dropdown replacement that takes over below
     744px. If the per-page CSS uses an invalid @@media escape (a Blazor
     mistake we have hit twice) or the breakpoint is too low, the
     desktop nav stays visible and its rightmost labels run off-screen.

     This block converts every horizontal tab nav into a horizontally-
     scrollable strip on phones, so labels remain reachable even when
     the dropdown replacement is broken. Desktop (>= 768px) is
     unaffected. */
  .bookings-navigation,
  .resort-navigation,
  .tab-nav,
  .nav-tabs,
  [role="tablist"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .bookings-navigation > *,
  .resort-navigation > *,
  .tab-nav > *,
  .nav-tabs > *,
  [role="tablist"] > * {
    flex-shrink: 0 !important;
  }


  /* ============================================================
     WALLET PAGE
     ============================================================ */

  .wallet-cards-container { gap: 10px !important; padding: 0 !important; }
  .wallet-balance-card,
  .balance-card {
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    min-height: 140px !important;
  }
  .wallet-balance-card .balance-amount,
  .balance-card .amount { font-size: 1.5rem !important; }
  .wallet-balance-card .balance-label,
  .balance-card .label { font-size: 0.75rem !important; }
  .wallet-card-header { gap: 8px !important; }
  .wallet-card-header h3,
  .wallet-card-header h2 { font-size: 0.9375rem !important; line-height: 1.2 !important; }
  .wallet-actions,
  .quick-actions { gap: 8px !important; padding: 0 !important; }
  .quick-action-button,
  .wallet-action-button { padding: 10px !important; font-size: 0.75rem !important; }
  .quick-action-button .icon,
  .wallet-action-button .icon { font-size: 1.125rem !important; }


  /* ============================================================
     EDIT / FORM PAGES - tighten labels and field rows
     ============================================================ */

  .form-section { padding: 12px !important; margin-bottom: 10px !important; }
  .form-section-title,
  .form-section h2,
  .form-section h3 { font-size: 1rem !important; margin-bottom: 8px !important; }
  .field-group,
  .form-field { margin-bottom: 10px !important; }
  .field-group label,
  .form-field label,
  .form-label { font-size: 0.8125rem !important; margin-bottom: 4px !important; }
  .field-group input,
  .field-group select,
  .field-group textarea,
  .form-field input,
  .form-field select,
  .form-field textarea { padding: 10px 12px !important; height: 44px !important; font-size: 16px !important; }
  .form-field textarea { height: auto !important; min-height: 80px !important; }
  .helper-text,
  .field-helper { font-size: 0.6875rem !important; margin-top: 2px !important; }


  /* ============================================================
     CONTACT / SUPPORT PAGES
     ============================================================ */

  .contact-header,
  .support-header { padding: 14px !important; }
  .contact-header h1,
  .support-header h1 { font-size: 1.25rem !important; }
  .contact-method,
  .contact-card,
  .support-card { padding: 14px !important; margin-bottom: 10px !important; border-radius: 12px !important; }
  .contact-method .icon,
  .contact-card .icon { font-size: 1.25rem !important; }


  /* ============================================================
     SETTINGS / PREFERENCES PAGES
     ============================================================ */

  .settings-section,
  .preferences-section { padding: 12px !important; margin-bottom: 10px !important; }
  .settings-row,
  .preference-row { padding: 10px 12px !important; gap: 10px !important; }
  .settings-row .label,
  .preference-row .label { font-size: 0.9375rem !important; }


  /* ============================================================
     MY ATKV PAGE
     ============================================================ */

  .my-atkv-page,
  .my-atkv-container { padding: 12px !important; gap: 10px !important; }

  /* Hero / membership card */
  .my-atkv-page .hero-section,
  .my-atkv-container .hero-section { padding: 18px 14px !important; margin-bottom: 10px !important; border-radius: 14px !important; }
  .my-atkv-page .profile-photo,
  .my-atkv-page .avatar-placeholder { width: 80px !important; height: 80px !important; font-size: 1.5rem !important; border-width: 2px !important; }
  .my-atkv-page .profile-photo-container { margin-bottom: 8px !important; }
  .my-atkv-page .member-name { font-size: 1.0625rem !important; margin: 6px 0 2px !important; }
  .my-atkv-page .member-number { font-size: 0.75rem !important; margin: 0 0 8px !important; }
  .my-atkv-page .membership-badges { gap: 6px !important; }
  .my-atkv-page .status-badge,
  .my-atkv-page .tier-badge { padding: 3px 10px !important; font-size: 0.6875rem !important; letter-spacing: 0.3px !important; }
  .my-atkv-page .status-indicator { width: 14px !important; height: 14px !important; bottom: 4px !important; right: 4px !important; }

  /* Stats grid */
  .my-atkv-page .stats-grid,
  .stats-grid { gap: 10px !important; margin-bottom: 10px !important; }
  .my-atkv-page .stat-card,
  .stat-card { padding: 12px !important; border-radius: 12px !important; }
  .my-atkv-page .stat-value,
  .stat-value { font-size: 1.125rem !important; }
  .my-atkv-page .stat-label,
  .stat-label { font-size: 0.6875rem !important; }

  /* Nav cards (Profiel / Projekte / Takke / etc) */
  .my-atkv-page .nav-grid,
  .nav-grid { gap: 8px !important; margin-bottom: 10px !important; }
  .my-atkv-page .nav-card,
  .nav-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }
  .my-atkv-page .nav-card .nav-icon,
  .nav-card .nav-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; margin-bottom: 6px !important; }
  .my-atkv-page .nav-card h3,
  .nav-card h3 { font-size: 0.9375rem !important; margin: 0 0 2px !important; }
  .my-atkv-page .nav-card p,
  .nav-card p { font-size: 0.75rem !important; margin: 0 !important; }

  /* Recent activity */
  .my-atkv-page .activity-section h2,
  .activity-section h2 { font-size: 1rem !important; margin-bottom: 8px !important; }
  .my-atkv-page .activity-item,
  .activity-item { padding: 10px 12px !important; gap: 10px !important; }
  .my-atkv-page .activity-icon,
  .activity-item .activity-icon { width: 32px !important; height: 32px !important; font-size: 0.875rem !important; }
  .my-atkv-page .activity-title { font-size: 0.875rem !important; }
  .my-atkv-page .activity-date { font-size: 0.6875rem !important; }


  /* ============================================================
     HOME NEWS & EVENTS - full-width cards stacked vertically.
     Page scrolls vertically; news never scrolls horizontally
     (see feedback_no_horizontal_scroll).
     ============================================================ */

  .news-section .news-title,
  .news-section h2 { font-size: 1rem !important; }
  .news-section .news-header { padding: 8px 0 !important; }

  .news-section .card-grid,
  .news-section .card-grid--4-col {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .news-section .card-grid > * {
    scroll-snap-align: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .news-section .filter-pills,
  .news-section .category-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    margin: 0 -12px !important;
    padding: 4px 12px !important;
  }
  .news-section .filter-pills::-webkit-scrollbar,
  .news-section .category-filters::-webkit-scrollbar { display: none; }
  .news-section .filter-pill { flex: 0 0 auto !important; padding: 5px 12px !important; font-size: 0.75rem !important; }


  /* ============================================================
     FEATURED EXPERIENCES on home - already a strip, just tighten
     ============================================================ */

  .featured-experiences-section .featured-title,
  .featured-experiences-section h2 { font-size: 1rem !important; }

  .experience-card { width: 78vw !important; min-width: 78vw !important; max-width: 320px !important; border-radius: 14px !important; }
  .experience-card .experience-image,
  .experience-card img { height: 140px !important; }
  .experience-card .experience-title { font-size: 0.9375rem !important; }
  .experience-card .experience-price { font-size: 0.9375rem !important; }


  /* ============================================================
     ONBOARDING / PREFERENCES PAGES (Location, Language, Content)
     Inline <style> blocks in these Razor pages set 24px titles,
     55px tall list rows and 16px option text - too big for mobile.
     ============================================================ */

  .location-preference-page,
  .language-preference-page,
  .language-selection-page,
  .content-preference-page { max-width: 100% !important; }

  .location-preference-page .page-title,
  .language-preference-page .page-title,
  .language-selection-page .page-title,
  .content-preference-page .page-title { font-size: 1.0625rem !important; margin-bottom: 4px !important; line-height: 1.25 !important; }

  .location-preference-page .page-subtitle,
  .language-preference-page .page-subtitle,
  .language-selection-page .page-subtitle,
  .content-preference-page .page-subtitle { font-size: 0.8125rem !important; line-height: 1.4 !important; }

  .location-preference-page .atkv-logo,
  .language-preference-page .atkv-logo,
  .language-selection-page .atkv-logo,
  .content-preference-page .atkv-logo { width: 56px !important; height: 56px !important; }

  .location-preference-page .logo-container,
  .language-preference-page .logo-container,
  .language-selection-page .logo-container,
  .content-preference-page .logo-container { gap: 14px !important; }

  .location-preference-page .content-section,
  .language-preference-page .content-section,
  .language-selection-page .content-section,
  .content-preference-page .content-section { border-radius: 24px 24px 0 0 !important; min-height: 78vh !important; }

  .location-preference-page .header-section,
  .language-preference-page .header-section,
  .language-selection-page .header-section,
  .content-preference-page .header-section { padding: 18px 16px !important; gap: 14px !important; }

  .location-preference-page .list-container,
  .language-preference-page .list-container,
  .language-selection-page .list-container,
  .content-preference-page .list-container { gap: 8px !important; }

  .location-preference-page .list-item,
  .language-preference-page .list-item,
  .language-selection-page .list-item,
  .content-preference-page .list-item {
    height: 44px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    max-width: 100% !important;
  }

  .location-preference-page .list-item-text,
  .language-preference-page .list-item-text,
  .language-selection-page .list-item-text,
  .content-preference-page .list-item-text { font-size: 0.875rem !important; }

  .location-preference-page .toggle-switch,
  .language-preference-page .toggle-switch,
  .language-selection-page .toggle-switch,
  .content-preference-page .toggle-switch { width: 20px !important; height: 20px !important; }

  .location-preference-page .next-button,
  .language-preference-page .next-button,
  .language-selection-page .next-button,
  .content-preference-page .next-button {
    padding: 12px 24px !important;
    font-size: 0.9375rem !important;
    border-radius: 12px !important;
    margin: 14px auto !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
  }


  /* ============================================================
     RESORTS INDEX - hide search, filter and All-Resorts dropdown
     ATKV only has seven resorts, so the carousel is enough on mobile.
     ============================================================ */

  .resorts-desktop-controls { display: none !important; }


  /* ============================================================
     SUPPORT TICKETS / CONTACT pages
     ============================================================ */

  .tickets-page,
  .contact-page { padding: 14px 12px 60px !important; }
  .tickets-content,
  .contact-content { gap: 12px !important; }

  .tickets-page .page-header,
  .contact-page .page-header { padding: 4px 0 0 !important; }
  .tickets-page .page-title,
  .contact-page .page-title { font-size: 1.125rem !important; margin: 0 0 4px !important; }
  .tickets-page .page-subtitle,
  .contact-page .page-subtitle { font-size: 0.8125rem !important; line-height: 1.4 !important; }

  .tickets-page .tickets-actions { justify-content: stretch !important; }
  .tickets-page .tickets-actions .btn-primary { width: 100% !important; justify-content: center !important; padding: 10px 16px !important; font-size: 0.9375rem !important; border-radius: 12px !important; }
  .tickets-page .btn-primary,
  .tickets-page .btn-secondary,
  .contact-page .btn-primary,
  .contact-page .btn-secondary { padding: 10px 18px !important; font-size: 0.9375rem !important; border-radius: 12px !important; }

  .tickets-page .filter-tabs { padding: 3px !important; border-radius: 12px !important; }
  .tickets-page .filter-tab { padding: 8px 10px !important; font-size: 0.8125rem !important; gap: 6px !important; }
  .tickets-page .filter-count { font-size: 0.6875rem !important; padding: 1px 6px !important; min-width: 18px !important; }

  .tickets-page .empty-state,
  .contact-page .empty-state { padding: 28px 18px !important; gap: 10px !important; }
  .tickets-page .empty-state svg,
  .contact-page .empty-state svg { width: 56px !important; height: 56px !important; }
  .tickets-page .empty-state h3,
  .contact-page .empty-state h3 { font-size: 1.0625rem !important; }
  .tickets-page .empty-state p,
  .contact-page .empty-state p { font-size: 0.8125rem !important; }


  /* ============================================================
     AUTH LANDING / SIGN-IN / REGISTER pages share .auth-* classes
     ============================================================ */

  .auth-page .page-title,
  .auth-landing .page-title { font-size: 1.25rem !important; line-height: 1.25 !important; }
  .auth-page .page-subtitle,
  .auth-landing .page-subtitle { font-size: 0.8125rem !important; }


  /* ============================================================
     PREVENT HORIZONTAL OVERFLOW - common cause of unwanted scroll
     ============================================================ */

  html, body { overflow-x: hidden !important; }
  .mobile-app-layout,
  .content-body,
  main { overflow-x: hidden !important; }
}

/* NPO key-area detail modal (PBI 87088): lock background scroll while the modal
   is open. The <body> cannot be targeted from KeyAreaModal's scoped CSS, so the
   rule lives here. Set/cleared via window.setBodyAttribute/removeBodyAttribute. */
body[data-npo-modal='open'] {
    overflow: hidden !important;
}