/*
 * D-090 (owner, 29 Oct): the website as an app on phones (PWA) + micro-animations site-wide.
 *  - Phones (< 992px): the bottom app bar (partials/app-bar), the "Talk to an Expert" header button, the Solutions
 *    sheet and the install prompt. The floating Book-a-call / WhatsApp buttons are hidden there (the bar replaces them).
 *  - Everywhere: sections rise in as they scroll into view, numbers count up, buttons and cards give press feedback,
 *    pages fade between each other. JS adds html.cy-motion only when the visitor has not asked for reduced motion.
 */

/* ---------- header button (phones only) ---------- */
.cy-hdr__mcta { display: none; }
@media (max-width: 991.98px) {
  .cy-hdr__actions > .cy-hdr__mcta { display: inline-flex; height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
  .cy-hdr__mcta .cy-icon { width: 16px; height: 16px; }
}
@media (max-width: 359.98px) { .cy-hdr__actions > .cy-hdr__mcta { padding: 0 10px; font-size: 12px; } }

/* ---------- bottom app bar ----------
   Owner, 29 Oct: the same floating glass bar as My Account. Five equal columns inside a 6px inner padding; the
   coral highlight (.cy-appbar__blob) is sized and placed from the current item in app-shell.js, so the gap around it
   is the same on every side and every phone width. Call is an item with its icon in a coral circle.
   OLD: full-width bar with a raised round Call Expert button and a small top dot (see git history). */
.cy-appbar, .cy-sheet { font-family: var(--cy-font); }
.cy-appbar { display: none; }
@media (max-width: 991.98px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .cy-floating-actions { display: none !important; }
  .cookie-banner { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  .cy-appbar {
    position: fixed; z-index: 1035; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: min(380px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px;
    border-radius: 26px; background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 24px 50px -20px rgba(21, 17, 15, .45), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .04);
  }
  .cy-appbar__it {
    position: relative; z-index: 1; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 0; border: 0; border-radius: 20px; background: none; color: var(--cy-text-secondary); text-decoration: none;
    font: inherit; font-size: 10.5px; line-height: 13px; font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s;
  }
  .cy-appbar__it:hover, .cy-appbar__it:focus { color: var(--cy-text-primary); text-decoration: none; outline: none; }
  .cy-appbar__it:focus-visible { box-shadow: inset 0 0 0 2px var(--cy-brand-300); }
  .cy-appbar__it .cy-icon { width: 22px; height: 22px; transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .cy-appbar__it[aria-current="page"], .cy-appbar__it[aria-current="page"]:hover { color: #fff; }
  .cy-appbar__it[aria-current="page"] .cy-icon { transform: translateY(-1px) scale(1.06); }
  .cy-appbar__it:active .cy-icon { transform: scale(.88); }
  .cy-appbar__blob {
    position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 20px; opacity: 0;
    background: linear-gradient(150deg, #ff8a6b, #b8321f); box-shadow: 0 8px 18px -6px rgba(240, 93, 73, .45);
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), width .5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s;
  }
  .cy-appbar__call { width: 30px; height: 30px; margin-top: -4px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, #ff8a6b, var(--cy-brand-600)); box-shadow: 0 6px 12px -6px rgba(240, 93, 73, .8); position: relative; }
  .cy-appbar__call .cy-icon { width: 17px; height: 17px; }
  .cy-appbar__call::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cy-brand-600); opacity: 0; }
  html.cy-motion .cy-appbar__call::after { animation: cy-fab-ping 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 1.5s; }
  .cy-appbar__it--call { color: var(--cy-brand-700); }
  html.cy-no-scroll .cy-appbar, body.modal-open .cy-appbar { display: none; }
}
@keyframes cy-fab-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- bottom sheets (Solutions, install) ---------- */
.cy-sheet { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; }
.cy-sheet[hidden] { display: none; }
.cy-sheet__scrim { position: absolute; inset: 0; background: rgba(21, 17, 15, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: cy-fade .25s ease both; }
.cy-sheet__panel {
  position: relative; width: 100%; max-width: 560px; max-height: 86dvh; overflow: auto;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.45); animation: cy-sheet-up .45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cy-sheet__panel::before { content: ""; display: block; width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 5px; background: var(--cy-neutral-200); }
.cy-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cy-sheet__title { margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--cy-text-primary); }
.cy-sheet__x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--cy-neutral-100); color: var(--cy-text-primary); display: grid; place-items: center; cursor: pointer; }
.cy-sheet__x .cy-icon { width: 18px; height: 18px; }
.cy-sheet__group { margin: 14px 0 8px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--cy-text-secondary); }
.cy-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cy-sheet__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 12px; border-radius: 16px;
  background: var(--cy-neutral-50); box-shadow: inset 0 0 0 1px var(--cy-darken-100); color: var(--cy-text-primary);
  font-size: 12.5px; line-height: 16px; font-weight: 600; text-decoration: none;
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .2s;
}
.cy-sheet__tile:hover { color: var(--cy-text-primary); text-decoration: none; background: var(--cy-brand-50); }
.cy-sheet__tile:active { transform: scale(.96); }
.cy-sheet__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--cy-brand-50); color: var(--cy-brand-600); }
.cy-sheet__ic .cy-icon { width: 20px; height: 20px; }
html.cy-motion .cy-sheet:not([hidden]) .cy-sheet__tile { animation: cy-rise .45s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms + 120ms); }
@media (max-width: 359.98px) { .cy-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .cy-sheet { align-items: center; } .cy-sheet__panel { border-radius: 26px; max-height: 80dvh; } .cy-sheet__panel::before { display: none; } }

.cy-install__top { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.cy-install__icon img { display: block; width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 8px 16px -8px rgba(92, 23, 14, .7); }
.cy-install__sub { margin: 2px 0 0; font-size: 13px; color: var(--cy-text-secondary); }
.cy-install__perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cy-install__perks li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cy-text-body); }
.cy-install__perks .cy-icon { width: 18px; height: 18px; color: var(--cy-success-600); }
.cy-install__ios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cy-install__ios[hidden] { display: none; }
.cy-install__step { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--cy-neutral-50); font-size: 14px; color: var(--cy-text-primary); }
.cy-install__step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cy-neutral-900); color: #fff; font-size: 11px; flex: none; }
.cy-install__step .cy-icon { width: 18px; height: 18px; color: var(--cy-info-600); }
.cy-install .cy-btn + .cy-btn { margin-top: 6px; }

/* ---------- micro-animations (all screens) ---------- */
@view-transition { navigation: auto; }
@keyframes cy-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cy-fade { from { opacity: 0; } }
@keyframes cy-sheet-up { from { transform: translateY(100%); } }
/* Scroll reveal: only things below the fold at load get .cy-rv (set by app-shell.js), so nothing on screen hides. */
html.cy-motion .cy-rv { opacity: 0; transform: translateY(18px); }
html.cy-motion .cy-rv.is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(0.2, 0.8, 0.2, 1), transform .7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--rv, 0) * 70ms); }
/* Press feedback on tappable cards and tiles. */
html.cy-motion .cy-press { transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.cy-motion .cy-press:active { transform: scale(.97); }
@media (hover: hover) {
  html.cy-motion .cy-lift { transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease; }
  html.cy-motion .cy-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(21, 17, 15, 0.35); }
}
html.cy-motion .cy-btn .cy-icon { transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.cy-motion .cy-btn:hover .cy-icon:last-child:not(:first-child) { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cy-sheet__scrim, .cy-sheet__panel { animation: none; }
}

/* viewport-fit=cover (head.blade.php): keep the floating header clear of the iPhone notch / status bar. */
header.cy-hdr { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
@media (max-width: 991.98px) { header.cy-hdr { padding-top: max(8px, env(safe-area-inset-top, 0px)); } }
.cy-sheet__panel { scrollbar-width: none; }
.cy-sheet__panel::-webkit-scrollbar { display: none; }

/* ---------- scrollbars (owner, 29 Oct) ----------
   The old page scrollbar (style.css: 11px, black track, red thumb) took space on the right and made pages look
   uneven. The page's own scrollbar is now hidden and replaced by a thin coral bar that floats over the page
   (app-shell.js: .cy-scrollthumb, shows while scrolling, can be dragged). Inner scroll areas (menus, sheets,
   pop-ups) get a slim coral thumb on a clear track instead of the old black one. */
/* Page wrappers clip sideways overflow with `clip`, never `hidden`: `overflow-x: hidden` silently makes the wrapper a
   second vertical scroll box, so the wheel got stuck inside it and a second scrollbar showed (owner, 29 Oct). */
.homepage-figma-bg { overflow-x: clip !important; overflow-y: visible !important; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { -webkit-box-shadow: none; background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(240, 93, 73, .55); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--cy-brand-600); }
.cy-scrollthumb {
  position: fixed; z-index: 1050; top: 0; right: max(3px, env(safe-area-inset-right, 0px)); width: 5px; min-height: 40px;
  border-radius: 6px; background: var(--cy-brand-600); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0; transition: opacity .35s ease, width .2s ease; cursor: grab; touch-action: none; will-change: transform;
}
.cy-scrollthumb.is-on, .cy-scrollthumb:hover, .cy-scrollthumb.is-drag { opacity: .85; }
.cy-scrollthumb:hover, .cy-scrollthumb.is-drag { width: 8px; }
.cy-scrollthumb.is-drag { cursor: grabbing; }
.cy-scrollthumb-zone { position: fixed; z-index: 1049; top: 0; right: 0; bottom: 0; width: 14px; }
html.cy-no-scroll .cy-scrollthumb, body.modal-open .cy-scrollthumb { display: none; }
@media (hover: none) { .cy-scrollthumb { cursor: default; pointer-events: none; } .cy-scrollthumb-zone { display: none; } }

/* Owner, 29 Oct: a strip of empty space on the right whenever a pop-up / bottom sheet opened. Bootstrap pads the
   page and the pop-up on the right to make up for the page scrollbar it hides, and the pop-up's own scrollbar took
   a further strip. The page scrollbar no longer takes space (floating coral bar above), so neither is needed. */
body.modal-open { padding-right: 0 !important; }
.modal { padding-right: 0 !important; padding-left: 0 !important; scrollbar-width: none; }
.modal::-webkit-scrollbar { width: 0; height: 0; }