/* Direction is CSS's job, not PHP's: the four values below used to be
   computed in PHP, which made the whole top-bar stylesheet vary per
   request for nothing. `to <side>` in a gradient and an animation NAME
   have no logical form, so they are tokens flipped by one static rule. */
:root      { --ytb-fade-to-end: right; --ytb-fade-to-start: left;  --ytb-marquee: ytb-marquee-ltr; --ytb-dir: ltr; }
[dir="rtl"]{ --ytb-fade-to-end: left;  --ytb-fade-to-start: right; --ytb-marquee: ytb-marquee-rtl; --ytb-dir: rtl; }
#yalo-topbar {
    position: sticky;
    top: var(--ytb-top);
    z-index: 210;
    height: var(--topbar-h);
    /* ONE fill for the whole bar. The merchant sets --ytb-bg (Settings ›
       Store Identity › Top Marquee) and every part of the bar is that
       colour or a derivative of it — nothing paints itself separately. */
    background: var(--ytb-bg);
    /* The days/hours end, a shade deeper. Mixed toward black rather than
       toward a second stored colour, so there is still only one thing to
       configure and the pair can never fall out of harmony. */
    --ytb-bg-deep: color-mix(in srgb, var(--ytb-bg) 86%, #000);
    color: var(--ytb-fg);
    overflow: hidden;
}

#ytb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    display: flex;
    align-items: stretch;
}

/* The days/hours end sits ONE SHADE deeper than the bar, so the two
   halves read as a single surface with a quiet division rather than as
   two panels stitched together. Derived from --ytb-bg with color-mix,
   never stored: the merchant picks one colour and this stays in step
   with it automatically, at any hue and at any lightness. */
#ytb-slider {
    flex: 0 0 240px;
    width: 240px;
    position: relative;
    overflow: hidden;
    background: var(--ytb-bg-deep);
    border-inline-end: 1px solid rgba(255,255,255,.08);
}

#ytb-slider::before {
    content: '';
    position: absolute;
    inset: 5px 8px;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 2;
}

#ytb-slider::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    right: 8px;
    height: calc((var(--topbar-h) - 10px) * 0.45);
    border-radius: 20px 20px 50% 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.14), transparent);
    pointer-events: none;
    z-index: 3;
}

#ytb-slide-track {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    flex-direction: column;
    z-index: 4;
    animation: ytb-slide-up 11.2s linear infinite;
    will-change: transform;
}

/* All 4 slides: identical font-size = 11px for visual balance */
.ytb-slide {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    color: var(--ytb-fg);
    direction: var(--ytb-dir);
}

.ytb-slide i {
    font-size: 11px;
    opacity: .70;
    flex-shrink: 0;
}

/* Value slides (days text, hours text) — same size, slightly bolder */
.ytb-slide.is-value {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

@keyframes ytb-slide-up {
    0%   { transform: translateY(0); }
    21%  { transform: translateY(0); }
    25%  { transform: translateY(calc(-1 * var(--topbar-h))); }
    46%  { transform: translateY(calc(-1 * var(--topbar-h))); }
    50%  { transform: translateY(calc(-2 * var(--topbar-h))); }
    71%  { transform: translateY(calc(-2 * var(--topbar-h))); }
    75%  { transform: translateY(calc(-3 * var(--topbar-h))); }
    96%  { transform: translateY(calc(-3 * var(--topbar-h))); }
    100% { transform: translateY(calc(-4 * var(--topbar-h))); }
}

/* The lane is TRANSPARENT. The bar owns the colour (#yalo-topbar above),
   and a lane painting its own background is what produced the reported
   defect: a coloured rectangle floating inside an otherwise dark bar,
   with hard vertical seams where the lane ended. One surface, one fill. */
#ytb-marquee {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

#ytb-marquee::before,
#ytb-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 1;
    pointer-events: none;
}

#ytb-marquee::before {
    inset-inline-start: 0;
    background: linear-gradient(to var(--ytb-fade-to-end), var(--ytb-bg), transparent);
}

#ytb-marquee::after {
    inset-inline-end: 0;
    background: linear-gradient(to var(--ytb-fade-to-start), var(--ytb-bg), transparent);
}

.ytb-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: var(--ytb-marquee) var(--ytb-mq-dur, 30s) linear infinite;
    will-change: transform;
}

/* Desktop: pause on hover. Mobile touch is handled by JS below. */
@media (hover: hover) and (pointer: fine) {
    .ytb-marquee-track:hover { animation-play-state: paused; }
}

.ytb-marquee-inner {
    display: inline-flex;
    align-items: center;
    padding: 0 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--ytb-fg);
    opacity: .90;
    direction: var(--ytb-dir);
}

@keyframes ytb-marquee-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes ytb-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

/* ── Working-hours panel shape ─────────────────────────────────
   THE PANEL ALREADY EXISTS. `#ytb-slider::before` is the frosted
   capsule that wraps the days/hours ticker, and `::after` is the
   gloss along its top edge. The merchant setting chooses the SHAPE
   OF THAT PANEL — it does not introduce anything new.

   The first implementation missed this and drew a second chip
   around the value text instead, so a store with the setting on
   rendered a small box nested inside the existing capsule: two
   backgrounds, neither of them the one being configured.

   So there is exactly one background here, and the setting changes
   its corner radius — or removes it. `--ytb-hours-r` is the single
   knob; ::before and ::after both read it, which is what keeps the
   gloss following the corner it sits in instead of drifting out of
   the shape at one of the three settings.

      pill  a capsule — the shipped look, and the default
      box   a soft rectangle
      none  no panel at all: bare text on the bar                */
#yalo-topbar { --ytb-hours-r: 20px; }
#yalo-topbar.ytb-hours-pill { --ytb-hours-r: 999px; }
#yalo-topbar.ytb-hours-box  { --ytb-hours-r: 7px; }

#ytb-slider::before { border-radius: var(--ytb-hours-r); }
/* The gloss is square-cut at the bottom because it fades out there;
   only its top corners belong to the panel's silhouette. */
#ytb-slider::after  { border-radius: var(--ytb-hours-r) var(--ytb-hours-r) 50% 50%; }

/* `none` removes the panel rather than making it transparent: an
   invisible element that still carries a blur filter and a border is
   paint work for something the merchant asked not to see. */
#yalo-topbar.ytb-hours-none #ytb-slider::before,
#yalo-topbar.ytb-hours-none #ytb-slider::after { display: none; }

@media (max-width: 768px) {
    #ytb-inner { padding: 0 2px; }
    #ytb-slider { flex: 0 0 170px; width: 170px; }
}

@media (max-width: 480px) {
    #ytb-slider { flex: 0 0 148px; width: 148px; }
    .ytb-slide  { font-size: 11px; padding: 0 8px; gap: 5px; }
    .ytb-slide.is-value { font-size: 11px; }
    .ytb-marquee-inner  { font-size: 11px; padding: 0 16px; }
}

@media (max-width: 360px) {
    #ytb-slider { flex: 0 0 120px; width: 120px; }
    .ytb-slide i { display: none; }
}