/* ==========================================================================
   ============================================================================
   COMPRA BORGES — MOBILE OVERHAUL (MODE IAIA v2)
   Big, legible, thumb-reachable, safe-area aware. Mobile is primary.
   Loaded AFTER main.css so these rules cascade over the desktop defaults.
   ============================================================================
   ========================================================================== */

/* =========================================================================
   DEFENSIVE ANTI-OVERFLOW (aggressive — applied globally, extra on mobile)
   ========================================================================= */
html, body {
  max-width: 100vw;
  overflow-x: hidden;          /* safer than 'clip' on older Safari/Android */
}
*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;                /* prevents flex/grid items growing past parent */
}
img, video, svg, iframe, canvas { max-width: 100%; height: auto; }
pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
table { max-width: 100%; }
.container { max-width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  *:not(.leaflet-popup):not(.leaflet-popup *):not(.leaflet-container):not(.leaflet-container *):not(.leaflet-marker-icon):not(.leaflet-marker-icon *) { max-width: 100%; }
  a, button { word-break: break-word; overflow-wrap: anywhere; }
  table { display: block; overflow-x: auto; }
  .container, main, section, article, header, footer, nav { max-width: 100%; }
  /* Neutralize any renegade 100vw widths that cause scrollbar overflow */
  [style*="width: 100vw"], [style*="width:100vw"] { max-width: 100% !important; }

  /* Leaflet popups i markers: invertir el max-width global perquè la
     llibreria sigui qui controli mides (si no, el popup es col·lapsa
     a pràcticament una paraula per línia). */
  .leaflet-popup, .leaflet-popup *,
  .leaflet-container, .leaflet-container *,
  .leaflet-marker-icon, .leaflet-marker-icon * {
    max-width: none !important;
    min-width: 0;
  }
  .leaflet-popup-content-wrapper {
    background: #fff !important;
    min-width: 260px !important;
    max-width: 320px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(14,77,100,.25) !important;
  }
  .leaflet-popup-content {
    min-width: 240px !important;
    max-width: 290px !important;
    margin: 14px 18px !important;
    line-height: 1.45 !important;
  }
  .leaflet-popup-tip {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(14,77,100,.2) !important;
  }
  .cb-popup-title { font-size: 16px !important; }
  .cb-popup-cat { font-size: 11px !important; }
  .cb-popup-addr { font-size: 13px !important; }
  .cb-popup-btn { font-size: 13px !important; padding: 8px 12px !important; }
}

/* --- Global touch + iOS polish ------------------------------------------- */
html, body { max-width: 100%; }
html { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: rgba(14,77,100,0.12); }
a, button, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: rgba(14,77,100,0.12);
}
:focus-visible {
  outline: 3px solid var(--cb-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Prevent iOS auto-zoom on focus: inputs >= 16px */
input, select, textarea { font-size: 16px; }
@media (min-width: 640px) {
  input, select, textarea { font-size: var(--text-base); }
}

/* Dynamic viewport helpers */
.min-h-screen { min-height: 100dvh; }
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Body bottom-nav spacing + safe-area */
body {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

/* Defensive overflow + media caps */
.container, main, section, footer, header { max-width: 100%; }
img, video, canvas, iframe { max-width: 100%; }

/* ========================================================================= */
/*                             HEADER MOBILE                                 */
/* ========================================================================= */
@media (max-width: 899px) {
  :root { --header-height: 60px; }
  .site-header {
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .header-inner {
    gap: 6px;
    height: 60px;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .logo {
    flex-shrink: 1;
    min-width: 0;
    max-width: 70%;
    overflow: hidden;
    align-items: center;
    gap: 8px;
  }
  .logo-icon { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; }
  /* Logo text: 2 línies "Compra / Borges" — cap text truncat */
  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.0;
    font-size: 0.95rem;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    gap: 1px;
  }
  .logo-text .logo-text-1,
  .logo-text .logo-text-2 {
    display: block;
    line-height: 1.0;
  }
  .logo-text .logo-text-1 { font-weight: 700; }
  .logo-text .logo-text-2 { font-weight: 500; }
  /* Hide desktop header extras on mobile; they live in the hamburger menu */
  .header-actions .btn-search,
  .header-actions .lang-switch,
  .header-actions .btn-text-size {
    display: none !important;
  }
  .header-actions {
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  .hamburger {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  /* The logged-in name pill is noisy on mobile — hide name, keep only icons */
  .user-pill-group .btn-enter {
    display: none !important;
  }
  .user-pill-group .btn-logout-icon {
    border-radius: 12px !important;
    border-left: 2px solid var(--cb-vermell, #C9302C) !important;
    width: 44px;
    min-height: 44px;
  }
}
@media (max-width: 399px) {
  .logo-text { display: none; }
}

/* ========================================================================= */
/*                      FULL-SCREEN MOBILE MENU                              */
/* ========================================================================= */
@media (max-width: 899px) {
  .mobile-menu {
    top: 0;
    background: rgba(26,35,50,0.55);
    backdrop-filter: blur(2px);
  }
  .mobile-menu nav {
    position: absolute;
    top: 0; right: 0;
    width: min(92vw, 420px);
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 24px);
    gap: 6px;
    border-radius: 0;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    animation: cbMenuSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .mobile-menu-link {
    padding: 18px 20px;
    min-height: 60px;
    font-size: var(--text-lg);
    font-weight: 600;
    border-bottom: 1px solid var(--cb-border);
    border-radius: 0;
  }
  .mobile-menu-link:first-child { padding-top: 24px; }
  .mobile-menu-link--cta {
    margin-top: 16px;
    border-radius: var(--radius-md);
    border-bottom: none;
  }
}
@keyframes cbMenuSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ========================================================================= */
/*                          BOTTOM NAV POLISH                                */
/* ========================================================================= */
.nav-mobile {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(26,35,50,0.06);
}
.nav-mobile-item {
  min-height: 56px;
  padding: 6px 2px;
  gap: 2px;
}
.nav-mobile-item svg { width: 26px; height: 26px; }
.nav-mobile-item span {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.nav-mobile-item:active { background: rgba(14,77,100,0.06); }

/* Help FAB — above bottom nav, respect safe area */
.help-fab {
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
  right: max(12px, env(safe-area-inset-right));
  width: 56px; height: 56px;
}
.help-fab svg { width: 24px; height: 24px; }
@media (min-width: 900px) {
  .help-fab { bottom: 24px; width: 64px; height: 64px; }
}

/* Back-to-top — on mobile, move to bottom-LEFT to avoid colliding with help-fab */
.back-to-top {
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  width: 48px; height: 48px;
}
.back-to-top svg { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .back-to-top {
    left: auto;
    right: 24px;
  }
}

/* ========================================================================= */
/*                              HERO — mobile                                */
/* ========================================================================= */
@media (max-width: 639px) {
  .hero {
    padding: 32px 0 36px;
    min-height: unset;
  }
  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 28px;
  }
  .hero-cta { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions > * { width: 100%; }

  .section, .how-it-works { padding: 24px 0; }
  .section-title { margin-bottom: 18px; font-size: clamp(1.35rem, 5vw, 1.8rem); }

  /* Step cards — slimmer on mobile */
  .step { padding: 28px 18px; }
  .step-icon { width: 64px; height: 64px; margin-bottom: 14px; }
  .step-icon svg { width: 32px; height: 32px; }
  .step-title { font-size: 1.15rem; }
  .step-number { font-size: 2.5rem; top: 10px; left: 14px; }
}

/* ========================================================================= */
/*                       CARDS — mobile full width                           */
/* ========================================================================= */
@media (max-width: 639px) {
  .shop-card-cover,
  .promo-card-visual,
  .reward-card-visual {
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .shop-card-body,
  .promo-card-body,
  .reward-card-body {
    padding: 16px 18px 18px;
  }
  .shop-card-name,
  .promo-card-title,
  .reward-card-title {
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .shop-card, .promo-card, .reward-card { position: relative; }
  .shop-card:active, .promo-card:active, .reward-card:active {
    transform: scale(0.995);
  }
  .card-grid { gap: 16px; }
}

/* Horizontal scroll-snap row (for featured shops/promos on mobile) */
.scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  padding: 4px 16px 16px;
  margin: 0 -16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * {
  flex: 0 0 82%;
  max-width: 320px;
  scroll-snap-align: start;
}
@media (min-width: 900px) {
  .scroll-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .scroll-row > * { flex: 1; max-width: none; }
}

/* ========================================================================= */
/*                          BUTTONS & FORMS                                  */
/* ========================================================================= */
@media (max-width: 639px) {
  .btn, .btn-primary, .btn-outline, .btn-ghost, .btn-secondary {
    min-height: 52px;
    padding: 14px 22px;
    font-size: 1rem;
    border-radius: 12px;
  }
  .btn-huge, .btn-large {
    min-height: 60px;
    padding: 18px 24px;
    font-size: 1.125rem;
    width: 100%;
    justify-content: center;
  }
}
.btn:active, .btn-primary:active { transform: translateY(1px) scale(0.99); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 2px solid var(--cb-border);
  border-radius: 12px;
  background: #fff;
  color: var(--cb-text);
  font-family: var(--font-body);
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (max-width: 639px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 56px;
    padding: 16px;
    font-size: 16px;
  }
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px rgba(14,77,100,0.15);
}
.field-error, .form-error {
  color: var(--cb-error);
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
}

/* ========================================================================= */
/*                PANEL LAYOUTS (user / merchant / board)                    */
/* ========================================================================= */
@media (max-width: 1023px) {
  .layout-panel { display: block; min-height: auto; }
  .panel-content { padding: 8px 0 24px; width: 100%; }
}
@media (min-width: 1024px) {
  .panel-content { padding: 24px; }
}

/* ========================================================================= */
/*               FOOTER — mobile: stack + big contact buttons                */
/* ========================================================================= */
.site-footer {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 24px);
}
@media (min-width: 900px) {
  .site-footer { padding-bottom: 48px; }
}
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-heading {
    font-size: 1.05rem;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-nav a {
    padding: 10px 0;
    display: block;
    min-height: 44px;
  }
  .footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 1.15rem;
    min-height: 52px;
  }
  .footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(37,211,102,0.16);
    color: #25D366;
    border-radius: 10px;
    min-height: 44px;
    font-size: 0.95rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ========================================================================= */
/*                    SHOP / PROMO / REWARD DETAILS                          */
/* ========================================================================= */
@media (max-width: 639px) {
  .shop-detail-cover,
  .shop-hero {
    height: 200px;
  }
  .shop-detail-name {
    font-size: 1.6rem;
    line-height: 1.15;
  }
  .gallery-grid, .shop-gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

/* ========================================================================= */
/*                              MAP — mobile                                 */
/* ========================================================================= */
@media (max-width: 899px) {
  .map-header { padding: 16px 0 12px; }
  .map-header-top {
    flex-wrap: wrap;
    gap: 12px;
  }
  .map-header h1 {
    font-size: 1.5rem;
    margin: 0;
  }
  .map-header-sub {
    font-size: 0.95rem;
    margin-top: 4px;
  }
  .map-header-stats { gap: 12px; }

  .map-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
  }
  .map-search input {
    min-height: 52px;
    font-size: 16px;
  }
  .map-cat-filter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 2px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .map-cat-filter::-webkit-scrollbar { display: none; }
  .map-cat-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.9rem;
  }

  /* Map layout: stack — big map first, then the list as a "sheet" */
  .map-section { padding: 0; }
  .map-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .map-container { width: 100%; }
  #cb-map {
    width: 100%;
    height: 55dvh;
    min-height: 360px;
    border-radius: 0;
  }
  .map-sidebar {
    width: 100%;
    max-height: none;
    border-radius: 16px 16px 0 0;
    margin-top: -16px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 -4px 18px rgba(0,0,0,0.08);
    position: relative;
    z-index: 2;
  }
  .map-sidebar::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: var(--cb-border);
    border-radius: 2px;
    margin: 0 auto 12px;
  }
  .map-shop-item {
    min-height: 64px;
    padding: 12px;
    gap: 10px;
  }
  .map-shop-name {
    font-size: 1rem;
    font-weight: 700;
  }
}

/* ========================================================================= */
/*                       QR SCANNER — merchant                               */
/* ========================================================================= */
@media (max-width: 899px) {
  #qr-reader {
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    background: #000;
  }
  #qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
}

/* ========================================================================= */
/*                      TABLES AS CARDS ON MOBILE                            */
/* ========================================================================= */
@media (max-width: 639px) {
  table.responsive-table,
  .table-responsive table {
    display: block;
    width: 100%;
  }
  table.responsive-table thead,
  .table-responsive table thead { display: none; }
  table.responsive-table tbody,
  table.responsive-table tr,
  table.responsive-table td,
  .table-responsive table tbody,
  .table-responsive table tr,
  .table-responsive table td {
    display: block;
    width: 100%;
  }
  table.responsive-table tr,
  .table-responsive table tr {
    background: var(--cb-card);
    border: 1px solid var(--cb-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  table.responsive-table td,
  .table-responsive table td {
    padding: 6px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.95rem;
  }
  table.responsive-table td::before,
  .table-responsive table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--cb-muted);
    flex: 0 0 40%;
  }
}

/* ========================================================================= */
/*                     MISC MOBILE SAFEGUARDS                                */
/* ========================================================================= */
@media (max-width: 639px) {
  .overflow-x,
  [class*="scroll-x"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Kill desktop hover transforms that feel weird on touch */
  .shop-card:hover,
  .promo-card:hover,
  .reward-card:hover,
  .step:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* =========================================================================
   DASHBOARD GRID RESCUE — inline-style grids with minmax(200px|240px)
   break at 360px. Force single column on small screens.
   En 320-380px una grid de 2 cols deixa <140px per columna i el text salta
   paraula a paraula. Per això a <420px tot va a 1 columna; entre 420-520px
   permetem 2 cols als minmax més petits (200-220px) on hi cap dignament.
   ========================================================================= */
@media (max-width: 420px) {
  [style*="grid-template-columns: repeat(auto-fit, minmax(160px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(180px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(200px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(220px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(260px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 421px) and (max-width: 520px) {
  [style*="grid-template-columns: repeat(auto-fit, minmax(160px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(180px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(200px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(260px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   STORIES BAR — hardening (horizontal scroll-snap, no overflow of page)
   ========================================================================= */
.stories-bar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stories-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.story-circle { flex: 0 0 auto; }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Large-text mode harmony */
.large-text .nav-mobile-item span { font-size: 13px; }
.large-text .mobile-menu-link     { font-size: 1.35rem; }

/* =========================================================================
   MERCHANT PANEL TABS — horizontal scrollable tabs on mobile, row on desktop
   ========================================================================= */
.merchant-tabs {
  background: #fff;
  border-bottom: 1px solid var(--cb-border, #E8E2D5);
  position: sticky;
  top: var(--header-height, 72px);
  z-index: 50;
  box-shadow: 0 2px 10px rgba(14,77,100,0.04);
}
.merchant-tabs-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 0;
}
.merchant-tabs-inner::-webkit-scrollbar { display: none; }
.merchant-tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-muted, #4A5560);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.merchant-tab:hover { background: rgba(14,77,100,0.06); color: var(--cb-primary); }
.merchant-tab.is-active {
  background: var(--cb-primary, #0E4D64);
  color: #fff;
}
.merchant-tab--logout {
  color: var(--cb-vermell, #C9302C);
  margin-left: auto;
  border: 1px solid var(--cb-vermell, #C9302C);
}
.merchant-tab--logout:hover { background: var(--cb-vermell, #C9302C); color: #fff; }
@media (max-width: 899px) {
  .merchant-tabs { top: calc(60px + env(safe-area-inset-top)); }
  .merchant-tab { font-size: 14px; padding: 8px 14px; min-height: 36px; }
}

/* =========================================================================
   EMPTY STATES unified
   ========================================================================= */
.empty-state {
  background: var(--cb-card, #fff);
  border: 1px dashed var(--cb-border, #E8E2D5);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  margin: 24px 0;
}
.empty-state-icon {
  font-size: 56px;
  margin-bottom: 12px;
  display: block;
  line-height: 1;
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cb-primary);
  margin: 0 0 8px;
}
.empty-state-desc {
  color: var(--cb-muted);
  font-size: 16px;
  margin: 0 auto 20px;
  max-width: 420px;
  line-height: 1.5;
}
.empty-state .btn { min-height: 52px; }

/* Merchant client rows: grid on desktop, card stack on mobile */
.merchant-client-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
}
@media (max-width: 639px) {
  .merchant-client-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    row-gap: 12px;
  }
  .merchant-client-row > :first-child {
    grid-column: 1 / -1;
  }
}
/* En pantalles molt estretes, 2 cols de 140px no caben bé → 1 sola col */
@media (max-width: 380px) {
  .merchant-client-row {
    grid-template-columns: 1fr;
  }
  .merchant-client-row > :first-child {
    grid-column: 1;
  }
}

/* Merchant help footer */
.merchant-help-footer {
  text-align: center;
  margin: 40px 0 24px;
  padding: 20px;
  background: var(--cb-card, #fff);
  border-radius: 14px;
  border: 1px solid var(--cb-border);
}
.merchant-help-footer a {
  color: var(--cb-primary);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

/* END mobile.css */

/* Mobile menu close (X) */
.mobile-menu-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  right: 12px;
  width: 48px; height: 48px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cb-text);
  background: var(--cb-bg);
  z-index: 2;
}
.mobile-menu-close:active { background: var(--cb-border); }

/* ───────────────────────────────────────────────
   Final mobile polish — ritme vertical i coherència
   ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Buttons */
  .btn { min-height: 52px; font-size: 16px; padding: 12px 20px; }
  .btn-large { min-height: 60px; font-size: 17px; padding: 14px 22px; }
  .btn-huge { min-height: 64px; font-size: 18px; padding: 16px 24px; }
  .btn-small { min-height: 40px; font-size: 14px; padding: 8px 14px; }

  /* Never button wider than needed unless explicit */
  .btn:not(.btn-block):not(.btn-block-always) { width: auto; max-width: 100%; }

  /* Stack action rows */
  .actions-row, .btn-group, .hero-actions { gap: 8px; }

  /* Form rhythm */
  .form-group, .field-group { margin-bottom: 14px; }
  .form-group label { font-size: 15px; margin-bottom: 6px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }  /* no iOS zoom */

  /* Checkbox + radio natural size */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; min-width: 20px; min-height: 20px;
    flex-shrink: 0; margin: 0;
  }
  label.checkbox-label, label.radio-label,
  .form-check, .check-line {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; line-height: 1.45;
  }

  /* SVGs: never let them expand */
  svg { max-width: 100%; height: auto; }
  button svg, a svg, .btn svg, .nav-link svg, .nav-mobile-item svg { width: 22px; height: 22px; flex-shrink: 0; }
  .icon-sm { width: 16px; height: 16px; }
  .icon-md { width: 22px; height: 22px; }
  .icon-lg { width: 28px; height: 28px; }

  /* Form valid check override */
  .form-valid-check, .form-check-icon {
    width: 20px !important; height: 20px !important;
    right: 14px !important; top: 50% !important;
    transform: translateY(-50%); position: absolute;
  }

  /* Card spacing */
  .card, .shop-card, .promo-card, .reward-card, .event-card, .collab-card {
    padding: 16px;
  }
  .card h2:first-child, .card h3:first-child { margin-top: 0; }

  /* Section spacing */
  section { padding-top: 28px; padding-bottom: 28px; }
  section:first-of-type { padding-top: 16px; }
  section + section { padding-top: 20px; }
  .section-title { font-size: clamp(1.35rem, 5vw, 1.7rem); margin-bottom: 16px; }
  .section-subtitle { font-size: 15px; margin-bottom: 20px; }

  /* Hero compact */
  .hero { padding-top: 24px; padding-bottom: 32px; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); margin-bottom: 12px; }
  .hero p, .hero-sub { font-size: 16px; margin-bottom: 16px; }

  /* Lists: items */
  ul li, ol li { margin-bottom: 6px; }

  /* Lateral breathing room: 20px = ~86% util en mobile (era 36px = solo ~80%
     en 360px → cada palabra saltaba de línia). Mantenim toc lateral però donem
     amplada útil al contingut. */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .container-narrow { padding-left: 20px !important; padding-right: 20px !important; }
  .hero, .hero-inner, .page-hero { padding-left: 0; padding-right: 0; }
  .hero > *:not(.container):not(.hero-inner), .page-hero > *:not(.container) { padding-left: 20px; padding-right: 20px; }

  /* Badge/pill compact */
  .badge, .pill, .chip { font-size: 12px; padding: 4px 10px; }

  /* Phone CTAs: keep large & touchable but not huge */
  .help-fab { width: 56px; height: 56px; }
  .help-fab svg { width: 28px; height: 28px; }
  .back-to-top { width: 44px; height: 44px; }
  .back-to-top svg { width: 20px; height: 20px; }
}

/* Tighter spacing on very narrow (<380px): max amplada útil */
@media (max-width: 380px) {
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  .hero > *:not(.container):not(.hero-inner), .page-hero > *:not(.container) { padding-left: 14px; padding-right: 14px; }
  .btn-huge { font-size: 16px; padding: 14px 18px; min-height: 58px; }
  .card, .shop-card, .promo-card, .reward-card { padding: 12px; }
  section { padding-top: 20px; padding-bottom: 20px; }
}

/* Vertical rhythm helpers (all viewports) */
.btn + p, .btn + span, p + .btn, h2 + .btn, h3 + .btn { margin-top: 16px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
 * SEARCH BAR /comercos — IMPLEMENTACIÓ DEFINITIVA
 * Math verificada: 320/360/375/414px → icona mai es solapa amb placeholder
 * ============================================================ */
.shops-search-form{
    display:flex;align-items:stretch;gap:10px;width:100%;max-width:100%;
    background:#fff;padding:10px;border-radius:18px;
    box-shadow:0 4px 20px rgba(14,77,100,.08);
    margin:0 0 16px;box-sizing:border-box;
}
.shops-search-field{
    position:relative;flex:1 1 auto;min-width:0;
    display:flex;align-items:center;
}
.shops-search-icon{
    position:absolute !important;
    left:16px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:20px !important;height:20px !important;
    min-width:20px !important;min-height:20px !important;
    max-width:20px !important;max-height:20px !important;
    stroke:var(--cb-verd, #2D6A4F) !important;
    pointer-events:none;z-index:2;
    flex:0 0 auto !important;
}
.shops-search-input{
    width:100%;min-width:0;
    height:54px;font-size:16px;
    padding:0 48px !important;
    border:2px solid transparent;background:#FFF8E7;
    border-radius:12px;color:var(--cb-fosc, #1B1F3A);
    transition:all .2s;outline:none;box-sizing:border-box;
    -webkit-appearance:none;appearance:none;
    font-family:inherit;
}
.shops-search-input::placeholder{color:var(--cb-muted, #5A6470);opacity:.8;}
.shops-search-input::-webkit-search-cancel-button,
.shops-search-input::-webkit-search-decoration{
    -webkit-appearance:none !important;display:none !important;
}
.shops-search-input:focus{
    border-color:var(--cb-verd, #2D6A4F);background:#fff;
    box-shadow:0 0 0 3px rgba(244,163,64,.15);
}
.shops-search-clear{
    position:absolute !important;
    right:8px !important;top:50% !important;
    transform:translateY(-50%);
    width:30px !important;height:30px !important;
    min-width:30px;max-width:30px;
    border:0;background:rgba(14,77,100,.1);
    border-radius:50%;display:grid;place-items:center;
    cursor:pointer;padding:0;z-index:3;
    color:var(--cb-fosc, #1B1F3A);
    font-size:18px;line-height:1;
}
.shops-search-clear[hidden]{display:none !important;}
.shops-search-clear:hover{background:rgba(14,77,100,.18);}
.shops-search-clear svg{
    width:12px !important;height:12px !important;
    max-width:12px;max-height:12px;
    flex:0 0 auto;
}
.shops-search-submit{
    flex:0 0 auto;min-height:54px;padding:0 22px;
    background:var(--cb-accent, #F4A340);color:#fff;
    border:0;border-radius:12px;font-size:16px;font-weight:600;
    cursor:pointer;white-space:nowrap;
}
.shops-search-submit:hover{background:#E67E22;box-shadow:0 6px 18px rgba(244,163,64,.35);}

@media (max-width: 640px){
    .shops-search-form{flex-direction:column;padding:8px;gap:8px;border-radius:14px;margin-bottom:10px;}
    .shops-search-field{width:100%;}
    .shops-search-input{height:52px;font-size:16px;padding:0 44px !important;}
    .shops-search-icon{left:14px !important;width:18px !important;height:18px !important;max-width:18px !important;max-height:18px !important;min-width:18px !important;min-height:18px !important;}
    .shops-search-clear{width:28px !important;height:28px !important;right:6px !important;}
    .shops-search-clear svg{width:11px !important;height:11px !important;}
    .shops-search-submit{width:100%;min-height:48px;font-size:15px;}
}
@media (max-width: 380px){
    .shops-search-input{padding:0 40px !important;font-size:15px;}
    .shops-search-icon{left:12px !important;width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important;min-width:16px !important;min-height:16px !important;}
}

/* ============================================================
 * FLIP CARDS — anti text-invertit
 * Desktop ≥768px: 3D flip amb doble garantia backface
 * Mobile <768px: show/hide simple (sense 3D)
 * ============================================================ */
.card-flip{perspective:1200px;position:relative;isolation:isolate;}
.card-flip .card-flip-inner{
    /* Grid stacking: ambdues cares comparteixen cel·la → contenidor
       creix fins al TALLER dels dos (el revers amb més text ja no
       queda tallat) */
    position:relative;width:100%;
    display:grid;grid-template-columns:1fr;
    transition:transform .55s cubic-bezier(.2,.9,.25,1);
    transform-style:preserve-3d;
}
.card-flip .card-face{
    grid-row:1;grid-column:1;width:100%;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    transform:translateZ(0);
}

/* ─── Desktop: flip 3D net, back sempre invisible si no is-flipped ─── */
@media (min-width: 768px){
    .card-flip .card-front{z-index:2;opacity:1;}
    .card-flip .card-back{
        transform:rotateY(180deg) translateZ(0);
        opacity:0;pointer-events:none;
        transition:opacity .25s .15s;
    }
    .card-flip.is-flipped .card-flip-inner{transform:rotateY(180deg);}
    .card-flip.is-flipped .card-front{opacity:0;pointer-events:none;transition:opacity .2s;}
    .card-flip.is-flipped .card-back{opacity:1;pointer-events:auto;transition:opacity .25s .25s;}
}

/* ─── Mobile: sense 3D. Front sempre visible, back es mostra sota ─── */
@media (max-width: 767px){
    .card-flip .card-flip-inner{transform:none !important;transition:none !important;transform-style:flat !important;}
    .card-flip .card-face{
        position:static !important;
        transform:none !important;
        opacity:1 !important;
        pointer-events:auto !important;
        backface-visibility:visible !important;
        -webkit-backface-visibility:visible !important;
    }
    .card-flip .card-back{display:none;background:inherit;box-shadow:none;border:0;}
    .card-flip.is-flipped .card-back{
        display:block;margin-top:12px;padding:12px 4px 0;
        border-top:2px solid var(--cb-or, #D4A017);
        border-radius:0;
    }
    .card-flip .card-back-close{top:6px;right:6px;}
}

/* ============================================================
 * /el-meu-qr — compactació botons
 * ============================================================ */
.qr-tip--small{
    display:inline-flex !important;align-items:center;gap:6px;
    font-size:13px !important;padding:6px 12px !important;
    background:rgba(0,0,0,.06) !important;border-radius:999px !important;
    color:var(--cb-muted,#5A6470) !important;
    font-weight:500;margin:12px auto !important;
}
.qr-print-btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:12px 24px;min-height:48px;
    background:#fff !important;border:2px solid var(--cb-verd, #2D6A4F) !important;
    color:var(--cb-verd, #2D6A4F) !important;
    border-radius:12px;font-size:15px;font-weight:600;
    text-decoration:none;
    max-width:280px;margin:12px auto;
}
.qr-print-btn:hover{background:var(--cb-verd, #2D6A4F) !important;color:#fff !important;}

/* ============================================================
 * Shop detail — compactació mòbil
 * ============================================================ */
@media (max-width: 767px){
    .shop-hero{min-height:auto !important;}
    .shop-hero-bg{max-height:180px;height:180px !important;}
    .shop-hero-overlay{max-height:180px;height:180px !important;}
    .shop-hero-inner{min-height:180px !important;padding-top:12px;padding-bottom:12px;}
    .shop-hero-title{font-size:clamp(1.3rem, 5.5vw, 1.7rem) !important;line-height:1.15;}
    .shop-hero-category{font-size:12px;}
    .shop-hero-call{padding:8px 14px;font-size:14px;}

    .shop-detail-grid{display:block !important;}
    .shop-detail-sidebar{display:block;margin-top:20px;}
    .shop-aside-card{padding:14px !important;margin-bottom:12px !important;}
    .shop-aside-card h3{font-size:1.05rem;margin-bottom:8px;}

    /* Hores compactes 2 cols */
    .shop-hours-table{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;}
    .shop-hours-row{display:contents;font-size:13px;}
    .shop-hours-row > span:first-child{font-weight:600;color:var(--cb-muted);}
    .shop-hours-row > span:last-child{text-align:right;}

    /* Gallery 3 columnes petites */
    .shop-gallery-grid{grid-template-columns:repeat(3, 1fr) !important;gap:6px !important;}
    .shop-gallery-item img{height:auto;aspect-ratio:1/1;object-fit:cover;}

    /* Related: scroll horitzontal */
    .shop-detail-body + .section .card-grid,
    section.reveal .card-grid{
        display:flex !important;
        overflow-x:auto;
        gap:12px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        padding-bottom:8px;
    }
    .shop-detail-body + .section .card-grid > *,
    section.reveal .card-grid > *{
        flex:0 0 78%;max-width:300px;scroll-snap-align:start;
    }

    /* Promo items compactes */
    .shop-promo-item{padding:10px !important;gap:10px !important;}
    .shop-promo-badge{min-width:56px !important;padding:8px 4px !important;font-size:14px !important;}
    .shop-promo-info h3{font-size:1rem !important;}
    .shop-promo-info p{font-size:13px !important;}

    /* Títols h2 dins del detail */
    .shop-detail-main h2{font-size:1.2rem !important;margin-bottom:8px;}
    .shop-detail-main article{margin-bottom:20px !important;}
}

/* =========================================================================
   COMPACT MOBILE PASS — contenidors compactes i còmodes de llegir al mòbil
   ========================================================================= */

/* 1) Container realment 86% útil al mòbil
   Bug previ: .container width:86% + padding 20px = 75% útil real. Forçant
   width:100% i mantenint padding lateral 20px aconseguim 320px útils en
   pantalla de 360px (89%). */
@media (max-width: 640px) {
  .container,
  .container-narrow {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Containers amb max-width inline (ex: dashboard) també han d'ocupar tot */
  .container[style*="max-width"] {
    max-width: 100% !important;
  }
}

/* 2) Re-mapejat de tokens d'espai a mòbil
   Inline styles del tipus padding:var(--space-2xl) i var(--space-3xl) eren
   massa grans (48px / 64px) en cards i seccions. Reduïm els tokens al body
   perquè tot el que els consumeix (inline o classes) compactitzi sense
   tocar 100+ fitxers. */
@media (max-width: 640px) {
  body {
    --space-xl:      1.25rem;  /* 20px (era 32) */
    --space-2xl:     1.5rem;   /* 24px (era 48) */
    --space-3xl:     2rem;     /* 32px (era 64) */
    --space-section: 2.5rem;   /* 40px (era 80) */
  }
}
@media (max-width: 380px) {
  body {
    --space-xl:      1rem;     /* 16px */
    --space-2xl:     1.25rem;  /* 20px */
    --space-3xl:     1.5rem;   /* 24px */
    --space-section: 2rem;     /* 32px */
  }
}

/* 3) Cards estructurals — radius i border més compactes a pantalles petites */
@media (max-width: 640px) {
  /* Cards amb border-radius inline xl (24px) → reduir a lg (16px) */
  [style*="border-radius: var(--radius-xl)"] {
    border-radius: var(--radius-lg) !important;
  }
  /* Cards interiors amb gran padding heretat de tokens encara queden
     més compactes amb regla extra: si el contingut és curt i el padding
     ve d'inline, evitem que es vegi "buit" */
  .empty-warm,
  .empty-state {
    padding: 18px 16px !important;
  }
}

/* 4) "Punts GEGANT" del dashboard ciutadà — número més contingut */
@media (max-width: 640px) {
  .panel-content [style*="font-size: 5rem"],
  .container [style*="font-size: 5rem"] {
    font-size: 3.5rem !important;
    line-height: 1 !important;
  }
}

/* 5) Merchant CTAs grans (escàner, telèfon, transaccions) — menys altura
   apilats al mòbil. 140px x 3 era ~420px d'una sola pantalla. */
@media (max-width: 640px) {
  .merchant-dashboard .btn-huge[style*="min-height: 140px"],
  a.btn-huge[style*="min-height: 140px"] {
    min-height: 96px !important;
    padding: 16px 14px !important;
    font-size: 1rem !important;
  }
  .merchant-dashboard .btn-huge[style*="min-height: 140px"] svg,
  a.btn-huge[style*="min-height: 140px"] svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 6) Rewards user banner — apilar millor a pantalles estretes
   3 fills (icona + text + CTA) que es trenquen lletjos en flex-wrap */
@media (max-width: 640px) {
  .rewards-user-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .rewards-user-banner-text {
    min-width: 0;
    width: 100%;
  }
  .rewards-user-banner .btn,
  .rewards-user-banner .btn-large {
    width: 100%;
    justify-content: center;
  }
}

/* 7) Recents/transaccions: files amb padding equilibrat (estaven a
   var(--space-md) var(--space-lg) = 16px 24px → ara 12px 14px, més aire
   per al text amb noms llargs) */
@media (max-width: 640px) {
  /* Files de transaccions/redempcions inline */
  [style*="padding: var(--space-md) var(--space-lg)"] {
    padding: 12px 14px !important;
  }
}

/* 8) Cards de fons groc/destacats amb padding alt — compactar */
@media (max-width: 640px) {
  /* Banner punts comunitaris i similars amb padding inline gran */
  [style*="padding: var(--space-lg)"][style*="background: var(--cb-yellow)"],
  [style*="padding: var(--space-lg)"][style*="background:var(--cb-yellow)"] {
    padding: 14px !important;
    gap: 12px !important;
  }
}

/* 9) Aliniació vertical extra a inputs/labels en formularis amb cards
   Reduïm el form-group margin a mòbil per evitar formularis enormes */
@media (max-width: 640px) {
  .form-group { margin-bottom: 12px; }
  .form-group + .form-group { margin-top: 0; }
}

/* 10) Panell content: més útil a mòbil sense "saltar" a sticky merchant
   tabs (ja gestionat) */
@media (max-width: 1023px) {
  .panel-content { padding: 4px 0 16px !important; }
}

/* 12) /comercos — categories: select dropdown a mòbil, cards a desktop */
.shops-cat-select-form { display: none; }
@media (max-width: 640px) {
  .shops-cat-select-form {
    display: block;
    margin-bottom: 16px;
  }
  .shops-cat-select-form select {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
    padding: 12px 18px;
    border: 2px solid var(--cb-ink);
    border-radius: 12px;
    background: var(--cb-yellow);
    color: var(--cb-ink);
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 44px;
  }
  .shops-cat-grid { display: none !important; }
}

/* 11) Llistat productes/promos del comerciant: els botons d'acció van
   a sota en mòbil (no a la dreta aplastant el text). */
@media (max-width: 640px) {
  .merchant-list-item {
    gap: 12px !important;
    padding: 14px !important;
  }
  .merchant-list-item-actions {
    width: 100%;
    flex-direction: row !important;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-top: 1px solid var(--cb-border);
    padding-top: 10px;
    margin-top: 4px;
  }
  .merchant-list-item-actions .btn,
  .merchant-list-item-actions form {
    flex: 1 1 auto;
  }
  .merchant-list-item-actions .btn {
    min-height: 44px;
    justify-content: center;
  }
}