/* DRAFT / USER_NOT_APPROVED — shared side rail and inherited Side Tab contract. */
@font-face { font-family:Im7vtMascotMontserrat; src:url('../images/mascot/montserrat.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
:root { --im7vt-purchase-anchor-y:50%; }

#im7vt-side-rail {
  --tab-scale:1;
  --side-tab-width:52px;
  --mascot-tab-height:177px;
  --survey-tab-height:212px;
  --side-tab-radius:14px;
  --side-rail-gap:20px;
  --rail-anchor-offset:calc(var(--mascot-tab-height) / 2);
  position:fixed;
  right:0;
  top:var(--im7vt-purchase-anchor-y);
  display:flex;
  flex-direction:column;
  gap:var(--side-rail-gap);
  width:var(--side-tab-width);
  opacity:1;
  transform:translateY(calc(-1 * var(--rail-anchor-offset))) scale(var(--mascot-landscape-scale,1));
  transform-origin:right var(--rail-anchor-offset);
  z-index:90000;
  touch-action:pan-y;
  transition:transform 260ms cubic-bezier(.4,0,.2,1),translate 260ms cubic-bezier(.4,0,.7,1),opacity 210ms ease-in;
}
#im7vt-side-rail[hidden], #im7vt-side-rail [hidden] { display:none !important; }
#im7vt-side-rail[data-mascot-visible='false'] { --rail-anchor-offset:calc(var(--survey-tab-height) / 2); }
#im7vt-side-rail, #im7vt-side-rail * { box-sizing:border-box; }
#im7vt-side-rail .im7vt-side-rail__slot { position:relative; width:var(--side-tab-width); opacity:1; transition:translate 260ms cubic-bezier(.4,0,.7,1),opacity 210ms ease-in; }
#im7vt-side-rail .im7vt-side-rail__slot--mascot { height:var(--mascot-tab-height); flex:0 0 var(--mascot-tab-height); }
#im7vt-side-rail .im7vt-side-rail__slot--survey { height:var(--survey-tab-height); flex:0 0 var(--survey-tab-height); }
#im7vt-side-rail .im7vt-side-tab { position:relative; display:block; width:var(--side-tab-width); height:100%; min-width:0; min-height:0; margin:0; padding:0; border:0; border-radius:var(--side-tab-radius) 0 0 var(--side-tab-radius); background:none; color:#433228; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; appearance:none; -webkit-appearance:none; }
#im7vt-side-rail .im7vt-side-tab__face { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; background:#faa61a; color:#433228; transform-origin:right center; transition:background-color 180ms ease,color 180ms ease; }
#im7vt-side-rail .im7vt-side-tab__label { position:absolute; left:50%; top:50%; display:block; white-space:nowrap; font:600 22px/1 Im7vtMascotMontserrat,Arial,sans-serif; letter-spacing:0; text-transform:none; transform:translate(-50%,-50%) rotate(-90deg); }
#im7vt-side-rail .im7vt-side-tab--survey .im7vt-side-tab__face { background-color:#00973a; color:#fff; }
#im7vt-side-rail .purchase-side-tab__bear { position:absolute; width:calc(213px / 1.7 * var(--tab-scale)); height:auto; max-width:none; right:calc(-36px * var(--tab-scale)); bottom:calc(100% - 76px * var(--tab-scale)); transform:rotate(15deg); transform-origin:center; pointer-events:none; }
#im7vt-side-rail .purchase-side-tab__dismiss { position:absolute; z-index:3; display:grid; place-items:center; width:24px; height:24px; min-width:0; min-height:0; left:calc(-30px * var(--tab-scale)); top:calc(-90px * var(--tab-scale)); margin:0; padding:0; border:1px solid rgb(67 50 40 / 32%); border-radius:50%; background:#fff; color:#433228; font:400 18px/1 Arial,sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; }
#im7vt-side-rail button:focus { outline:none; box-shadow:none; }
#im7vt-side-rail button:focus-visible { outline:3px solid #433228; outline-offset:3px; }
#im7vt-side-rail[data-input-modality='pointer'] button:focus-visible { outline:none; box-shadow:none; }
@media (hover:hover) and (pointer:fine) {
  #im7vt-side-rail .im7vt-side-tab--mascot:hover .im7vt-side-tab__face { background:#ba1b1e; color:#fff; }
  #im7vt-side-rail .im7vt-side-tab--survey:hover .im7vt-side-tab__face { background-color:#008834; color:#fff; }
  #im7vt-side-rail .purchase-side-tab__dismiss:hover { background:#ba1b1e; color:#fff; }
}
#im7vt-side-rail .purchase-side-tab__dismiss:active { background:#a31114; color:#fff; }

#im7vt-side-rail[data-motion='exit'] { pointer-events:none; }
#im7vt-side-rail[data-motion='exit'] .purchase-side-tab__dismiss { visibility:hidden; opacity:0; pointer-events:none; }
#im7vt-side-rail[data-motion='enter'] .im7vt-side-tab { animation:im7vt-side-tab-enter 260ms ease-out both; }
#im7vt-side-rail[data-motion='exit'] .im7vt-side-tab__face { animation:im7vt-side-tab-exit 420ms cubic-bezier(.4,0,.7,1) both; }
#im7vt-side-rail[data-motion='exit'] .purchase-side-tab__bear { animation:im7vt-side-bear-exit 420ms ease-in both; }
#im7vt-side-rail .im7vt-side-rail__slot--mascot[data-motion='hide'] { translate:180% 0; opacity:0; pointer-events:none; }

@keyframes im7vt-side-tab-enter { from { transform:translateX(160%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes im7vt-side-tab-exit {
  0% { transform:none; }
  18% { transform:scale(.94,.97); }
  42% { transform:scaleX(1.076923077); }
  55% { transform:scaleX(1.076923077); opacity:1; }
  100% { transform:translateX(180%) scaleX(.98); opacity:0; }
}
@keyframes im7vt-side-bear-exit {
  0%,18% { transform:rotate(15deg); opacity:1; }
  100% { transform:translate(130%,65%) rotate(15deg); opacity:0; }
}

@media (max-width:760px) {
  #im7vt-side-rail {
    --tab-scale:.576923077;
    --side-tab-width:30px;
    --mascot-tab-height:126px;
    --survey-tab-height:144px;
    --side-tab-radius:8px;
    --side-rail-gap:20px;
  }
  #im7vt-side-rail .im7vt-side-tab__label { font-size:calc(22px * .576923077); }
  #im7vt-side-rail .purchase-side-tab__dismiss { left:calc(-45px * var(--tab-scale)); top:calc(-100px * var(--tab-scale)); width:20px; height:20px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
  #im7vt-side-rail, #im7vt-side-rail .im7vt-side-rail__slot { transition-duration:1ms; }
  #im7vt-side-rail .im7vt-side-tab, #im7vt-side-rail .im7vt-side-tab__face, #im7vt-side-rail .purchase-side-tab__bear { animation-duration:1ms !important; transition:none; }
}
