/* RiCO! app panels: "get the app", live order updates and notification settings
   (assets/js/app.js). Shared by the menu and the separate pages; uses the menu.css tokens
   and font roles: EDO for titles, Nunito for text, Gochi Hand for small asides. */
.rapp-stack{display:grid;gap:12px}
.rapp{display:grid;gap:12px;padding:16px;border:2px solid var(--green-800);border-radius:var(--radius-lg);background:var(--green-50);box-shadow:var(--shadow-pop-sm);color:var(--text-body);text-align:left}
.rapp--install{background:var(--white);border-style:dashed}
.rapp--compact{padding:12px 14px;gap:10px}
.rapp__head{display:flex;align-items:flex-start;gap:12px}
.rapp__appicon{flex:none;width:48px;height:48px;border-radius:12px;border:2px solid var(--green-800);background:#fff;box-shadow:var(--shadow-pop-sm)}
.rapp__bell{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);border:2px solid var(--green-800);color:var(--text-on-accent);box-shadow:var(--shadow-pop-sm)}
.rapp__bell svg{width:22px;height:22px}
.rapp--compact .rapp__bell,.rapp--compact .rapp__appicon{width:40px;height:40px}
.rapp--compact .rapp__bell svg{width:19px;height:19px}
.rapp__text{flex:1;min-width:0}
.rapp__title{margin:0;font-family:var(--font-poster);font-weight:400;font-size:22px;letter-spacing:var(--tracking-poster);text-transform:uppercase;line-height:1.05;color:var(--green-800);text-shadow:none}
.rapp--compact .rapp__title{font-size:19px}
.rapp__sub{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--text-body)}
.rapp__x{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-6px -6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--green-800);cursor:pointer}
.rapp__x svg{width:18px;height:18px}
.rapp__x:focus-visible,.rapp__chip:focus-visible{outline:3px solid var(--green-500);outline-offset:2px}
.rapp__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rapp__ok{display:flex;align-items:center;gap:8px;margin:0;font-weight:800;line-height:1.35;color:var(--green-700)}
.rapp__ok svg{flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--accent);color:var(--text-on-accent);stroke-width:3.5}
.rapp__note{margin:0;font-size:14px;line-height:1.5}
.rapp__msg{margin:0;width:100%;font-size:14px;font-weight:700;color:var(--danger)}
.rapp__msg[role="status"]{color:var(--green-700)}
.rapp__msg:empty{display:none}
.rapp__steps{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.rapp__steps li{position:relative;min-height:28px;padding-left:38px;font-size:15px;line-height:1.55;counter-increment:step}
.rapp__steps li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green-800);color:#fff;font-family:var(--font-display);font-size:15px;line-height:1}
.rapp__steps b{font-weight:800}
.rapp__key{display:inline-grid;place-items:center;width:26px;height:26px;margin:0 2px;vertical-align:-7px;border:2px solid var(--green-800);border-radius:7px;background:#fff;color:var(--green-800)}
.rapp__key svg{width:15px;height:15px}
.rapp__other{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:12px;border-top:2px dashed var(--green-200)}
.rapp__other-l{margin-right:4px;font-family:var(--font-hand);font-size:18px;color:var(--green-700)}
.rapp__chip{height:34px;padding:0 13px;border:2px solid var(--green-800);border-radius:var(--radius-pill);background:#fff;color:var(--green-800);font:800 13px/1 var(--font-body);cursor:pointer}
.rapp__chip[aria-pressed="true"]{background:var(--green-800);color:#fff}
@media (hover:hover){
  .rapp__chip:hover{background:var(--green-50)}
  .rapp__chip[aria-pressed="true"]:hover{background:var(--green-900)}
  .rapp__x:hover{background:var(--green-100)}
}
/* The order confirmation can hold the update panels: it scrolls inside the screen. */
.dialog--tall{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
.dialog>.rapp-stack{padding-top:16px;border-top:2px dashed var(--green-200)}
@media (max-width:359px){.rapp{padding:12px}.rapp__steps li{font-size:14px}}