/* Selling screens (docs/20, stage 3): restaurant cards, menu, dish sheet, checkout, tracking.
   Uses only tokens.css. Loaded after the page styles on customer pages. */

/* Missing photos: a warm branded tile instead of a grey box. */
.product-photo-placeholder{background:linear-gradient(140deg,#FFE7D2 0%,#FDD3BD 100%)!important;color:var(--cbz-coral)}
.product-photo-placeholder .icon{opacity:.55}

/* 3.1 Restaurant card on the list */
.restaurant-photo.no-photo{display:grid;place-items:center;background:linear-gradient(140deg,var(--cbz-coral) 0%,#F7774F 100%)!important}
.restaurant-initial{font-family:var(--cbz-font-display);font-weight:900;font-size:72px;line-height:1;color:var(--cbz-cream);opacity:.95;letter-spacing:-.02em;text-shadow:0 4px 18px rgba(41,29,34,.18)}
.restaurant-status{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.restaurant-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cbz-success)}
.restaurant-status.closed{color:var(--cbz-muted)}
.restaurant-status.closed::before{background:var(--cbz-muted)}
.restaurant-card{transition:transform var(--cbz-duration-fast) var(--cbz-ease),box-shadow var(--cbz-duration) var(--cbz-ease)}
.restaurant-card:active{transform:scale(.985)}

/* 3.2 Restaurant page: dish card counter */
.menu-product.in-cart{border-color:var(--cbz-coral);box-shadow:inset 0 0 0 1px var(--cbz-coral)}
.add-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:var(--cbz-radius-pill);background:var(--cbz-coral);color:#fff;font:700 11px/18px var(--cbz-font-body);text-align:center}
.card-stepper{position:absolute;bottom:12px;right:126px;display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--cbz-radius-pill);background:var(--cbz-ink);color:var(--cbz-cream);box-shadow:var(--cbz-shadow-sm);animation:cbzPop var(--cbz-duration) var(--cbz-ease)}
.card-stepper button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:400 22px/1 var(--cbz-font-body);cursor:pointer}
.card-stepper button:hover{background:rgba(255,244,232,.14)}
.card-stepper button:disabled{opacity:.35}
.card-stepper span{min-width:22px;text-align:center;font:700 var(--cbz-text-md)/1 var(--cbz-font-body)}
@keyframes cbzPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

@media(max-width:900px){
  /* Category chips stay on top while scrolling the menu. */
  .menu-navigation{position:sticky;top:0;z-index:15;margin:0 calc(-1 * var(--page-gutter,20px));padding:var(--cbz-space-2) var(--page-gutter,20px);background:rgba(255,244,232,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--cbz-line);scrollbar-width:none}
  .menu-navigation::-webkit-scrollbar,.menu-navigation nav::-webkit-scrollbar{display:none}
  .menu-navigation nav{overflow-x:auto;scrollbar-width:none;gap:var(--cbz-space-2)}
  .menu-navigation a{flex:none;min-height:40px;display:inline-flex;align-items:center;padding:0 var(--cbz-space-4);border:1px solid var(--cbz-line);border-radius:var(--cbz-radius-pill);background:var(--cbz-surface-raised);font-weight:600;transition:background var(--cbz-duration-fast),color var(--cbz-duration-fast)}
  .menu-navigation a[aria-current]{border-color:var(--cbz-ink)}
  .menu-section{scroll-margin-top:72px}
}
@media(max-width:600px){
  .card-stepper{right:114px;bottom:10px}
  .restaurant-initial{font-size:64px}
}

/* 3.3 Dish sheet: bigger photo, the add button with price stays visible. */
@media(max-width:700px){
  .product-dialog{padding-top:0!important}
  .product-dialog-photo{height:220px;margin:0 calc(-1 * var(--cbz-space-5)) var(--cbz-space-5);border-radius:var(--cbz-radius-xl) var(--cbz-radius-xl) 0 0}
  .product-dialog h2{font-size:var(--cbz-text-3xl);line-height:1.05;margin:0 0 var(--cbz-space-2)}
  #product-dialog-add{position:sticky;bottom:calc(-1 * var(--cbz-space-6) - env(safe-area-inset-bottom));z-index:2;min-height:56px;margin-top:var(--cbz-space-5);border-radius:var(--cbz-radius-lg);font-size:var(--cbz-text-md);box-shadow:0 -12px 24px var(--cbz-cream)}
  .product-dialog .close-button{z-index:3;background:rgba(255,250,244,.92);border-radius:50%}
}

/* 3.5 Checkout: sticky "order" bar on phones */
.checkout-mobile-bar{display:none}
@media(max-width:700px){
  .checkout-mobile-bar{position:fixed;left:var(--cbz-space-3);right:var(--cbz-space-3);z-index:30;bottom:calc(var(--cbz-tabbar-height) + var(--cbz-space-3) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:var(--cbz-space-3);padding:var(--cbz-space-2) var(--cbz-space-2) var(--cbz-space-2) var(--cbz-space-4);border-radius:var(--cbz-radius-lg);background:var(--cbz-ink);color:var(--cbz-cream);box-shadow:var(--cbz-shadow-lg)}
  .checkout-mobile-bar span{display:grid;line-height:1.15}
  .checkout-mobile-bar small{font-size:var(--cbz-text-xs);opacity:.8}
  .checkout-mobile-bar strong{font:400 var(--cbz-text-xl)/1 var(--cbz-font-display)}
  .checkout-mobile-bar button{margin-left:auto;min-height:48px;padding:0 var(--cbz-space-4);border:0;border-radius:var(--cbz-radius-md);background:var(--cbz-coral);color:#fff;font:700 var(--cbz-text-sm)/1.2 var(--cbz-font-body);cursor:pointer}
  .checkout-mobile-bar button:disabled{opacity:.5;cursor:not-allowed}
  body.basket-page .basket-main{padding-bottom:calc(var(--cbz-tabbar-height) + 110px)}
  .checkout-submit{display:none}
}

/* 3.5 / 3.6 Order sent + tracking */
.order-celebrate{display:flex;align-items:center;gap:var(--cbz-space-4);margin:0 0 var(--cbz-space-4);padding:var(--cbz-space-5);border-radius:var(--cbz-radius-xl);background:var(--cbz-coral);color:#fff;box-shadow:var(--cbz-shadow-md);animation:cbzPop var(--cbz-duration-slow) var(--cbz-ease)}
.order-celebrate-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18)}
.order-celebrate-icon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:cbzDraw .6s .25s var(--cbz-ease) forwards}
.order-celebrate h2{margin:0;font:900 var(--cbz-text-2xl)/1.05 var(--cbz-font-display);color:#fff}
.order-celebrate p{margin:var(--cbz-space-1) 0 0;font-size:var(--cbz-text-sm);line-height:1.45;color:rgba(255,255,255,.92)}
@keyframes cbzDraw{to{stroke-dashoffset:0}}
.order-eta{display:flex;align-items:center;gap:var(--cbz-space-3);margin:var(--cbz-space-4) 0 0;padding:var(--cbz-space-3) var(--cbz-space-4);border-radius:var(--cbz-radius-lg);background:var(--cbz-coral-soft)}
.order-eta b{display:block;font:900 var(--cbz-text-2xl)/1 var(--cbz-font-display);color:var(--cbz-ink)}
.order-eta span{font-size:var(--cbz-text-sm);color:var(--cbz-ink-soft)}
.order-live{display:inline-flex;align-items:center;gap:6px;margin-top:var(--cbz-space-3);font-size:var(--cbz-text-xs);color:var(--cbz-muted)}
.order-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cbz-success);animation:cbzPulse 1.6s ease-in-out infinite}
@keyframes cbzPulse{50%{opacity:.3}}

/* 3.4 Home page: clear sign-up for new visitors */
.home-join{display:none;margin:var(--cbz-space-5) 0 0;padding:var(--cbz-space-5);border-radius:var(--cbz-radius-xl);background:var(--cbz-ink);color:var(--cbz-cream)}
.home-join.visible{display:block}
.home-join h2{margin:0 0 var(--cbz-space-2);font:900 var(--cbz-text-2xl)/1.05 var(--cbz-font-display);color:var(--cbz-cream)}
.home-join p{margin:0 0 var(--cbz-space-4);font-size:var(--cbz-text-sm);line-height:1.5;color:rgba(255,244,232,.82)}
.home-join-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--cbz-space-2)}
.home-join a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:var(--cbz-radius-md);font-weight:700;text-decoration:none}
.home-join .primary{background:var(--cbz-coral);color:#fff}
.home-join .secondary{border:1.5px solid rgba(255,244,232,.5);color:var(--cbz-cream)}
.home-perks{display:grid;gap:var(--cbz-space-2);margin:var(--cbz-space-4) 0 0;padding:0;list-style:none}
.home-perks li{display:flex;align-items:center;gap:var(--cbz-space-2);font-size:var(--cbz-text-sm);color:rgba(255,244,232,.92)}
.home-perks li::before{content:'';flex:none;width:18px;height:18px;border-radius:50%;background:var(--cbz-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23291D22' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
@media(prefers-reduced-motion:reduce){.card-stepper,.order-celebrate{animation:none}.order-celebrate-icon svg{animation:none;stroke-dashoffset:0}.order-live::before{animation:none}}

/* 4.4 Registration in two steps (konto.html) */
.signup-progress{display:flex;align-items:center;gap:var(--cbz-space-3);margin:0 0 var(--cbz-space-2)}
.signup-progress-bar{flex:1;height:6px;border-radius:var(--cbz-radius-pill);background:var(--cbz-line);overflow:hidden}
.signup-progress-bar i{display:block;height:100%;width:50%;border-radius:inherit;background:var(--cbz-coral);transition:width var(--cbz-duration-slow) var(--cbz-ease)}
.signup-steps[data-step="2"] .signup-progress-bar i{width:100%}
.signup-progress b{font-size:var(--cbz-text-xs);font-weight:700;color:var(--cbz-muted);white-space:nowrap}
.signup-step{display:grid;gap:inherit;margin:0;padding:0;border:0;min-width:0;animation:cbzStepIn var(--cbz-duration) var(--cbz-ease)}
.signup-step[hidden]{display:none}
.signup-step legend{padding:0;margin:0 0 var(--cbz-space-2);font:900 var(--cbz-text-xl)/1.1 var(--cbz-font-display);color:var(--cbz-ink)}
.signup-back{justify-self:center;min-height:var(--cbz-touch)}
.password-strength[data-level=short]{color:var(--cbz-danger)}
.password-strength[data-level=ok]{color:var(--cbz-success)}
.password-strength[data-level=strong]{color:var(--cbz-success);font-weight:700}
@keyframes cbzStepIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.signup-step{animation:none}}

/* 5.2–5.3 Notifications and "add to home screen" next to an active order */
.order-app{display:grid;gap:var(--cbz-space-2);margin-top:var(--cbz-space-4)}
.order-app[hidden]{display:none}
.order-app-button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--cbz-space-4);border:0;border-radius:var(--cbz-radius-md);background:var(--cbz-coral);color:#fff;font:700 var(--cbz-text-sm)/1.2 var(--cbz-font-body);cursor:pointer}
.order-app-button.secondary{background:transparent;color:var(--cbz-ink);border:1.5px solid var(--cbz-ink)}
.order-app-button[hidden]{display:none}
.order-app-button:disabled{opacity:.6;cursor:progress}
.order-app-note{margin:0;font-size:var(--cbz-text-sm);color:var(--cbz-danger)}
/* Restaurant panel: turn on new-order notifications */
.pn-push{display:flex;align-items:center;gap:var(--cbz-space-3);padding:var(--cbz-space-3) var(--cbz-space-4);border-radius:var(--cbz-radius-md);background:#FFE8B7;color:var(--cbz-ink);font-size:var(--cbz-text-sm)}
.pn-push[hidden]{display:none}
.pn-push p{flex:1;margin:0;line-height:1.45}
.pn-push button{flex:none;min-height:40px;padding:0 var(--cbz-space-4);border:0;border-radius:var(--cbz-radius-sm);background:var(--cbz-ink);color:var(--cbz-cream);font:700 var(--cbz-text-sm)/1 var(--cbz-font-body);cursor:pointer}
@media(max-width:560px){.pn-push{flex-direction:column;align-items:stretch}}
/* Offline page */
.offline-page{min-height:100dvh;display:grid;place-items:center;padding:var(--cbz-space-6)}
.offline-main{max-width:420px;text-align:center;display:grid;gap:var(--cbz-space-4);justify-items:center}
.offline-main .brand-mark{width:200px;height:60px}
.offline-main h1{margin:0;font:900 var(--cbz-text-4xl)/1 var(--cbz-font-display)}
.offline-main p{margin:0;color:var(--cbz-ink-soft);line-height:1.55}
/* Owner 5.11.2026: "Zaloguj się" (and the other account views) slide in like "Utwórz konto".
   The register form already animates its steps, so only the other views get it here. */
.account-card [data-auth-view]:not([data-auth-view=register]):not([hidden]) form{animation:cbzStepIn var(--cbz-duration) var(--cbz-ease)}
@media(prefers-reduced-motion:reduce){.account-card [data-auth-view] form{animation:none}}