/* v50e deal banner (WO-35), after v48/fixes.css. --ann-h unchanged. Default = final state.
   html.ann-play (waiting) / html.ann-stage (Wito's stage, first page per session): the words keep
   their boxes at opacity 0. Both have a CSS backstop that shows the words even if ann.js dies. */

/* Title biggest, offer next, terms smaller and lighter on their own line. */
@media (min-width: 641px) {
  .ann-deal .ann-text { display: block; overflow: visible; white-space: normal; -webkit-line-clamp: unset; font-size: .95rem; line-height: 1.22; }
  .ann-deal .ann-title { display: inline-block; font-size: 1.125rem; font-weight: 800; letter-spacing: 0; line-height: 1.2; }
  .ann-deal .ann-offer { font-size: .95rem; }
  .ann-deal .ann-reg { display: inline-block; opacity: .8; text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .ann-deal .ann-terms { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; line-height: 1.3; color: rgba(255, 255, 255, .82); text-wrap: balance; }
  /* Keep the space before "Mon"/"Lunes" in the accessibility tree (as in v50d); the indent cancels its width. */
  .ann-deal .ann-terms { white-space: pre-wrap; text-indent: -.29em; }
  .ann-deal .ann-terms .ann-more { color: inherit; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .ann-deal .ann-title { font-size: 1rem; }
  .ann-deal .ann-text, .ann-deal .ann-offer { font-size: .875rem; }
}
/* 641-1023: one inline flow so the fee line stays in the bar. */
@media (min-width: 641px) and (max-width: 1023px) {
  .ann-deal .ann-terms { display: inline; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ann-deal .ann-title { font-size: .9375rem; }
  .ann-deal .ann-text, .ann-deal .ann-offer { font-size: .8125rem; line-height: 1.2; }
  .ann-deal .ann-terms { font-size: .75rem; }
}
/* Phones: fee line >= 12px. */
@media (max-width: 374px) {
  .ann-deal .ann-text { font-size: .75rem; letter-spacing: -.01em; }
  .ann-deal .ann-tag { margin-right: .3rem; padding: .16rem .32rem; letter-spacing: .05em; }
  .ann-deal .ann-inner { padding-right: 3rem; }
}

/* Words hidden while waiting (max 1.2 s) or while the stage plays (2.6 s); backstops at 1.25 s / 3 s. */
.ann-play #order-banner .ann-text { opacity: 0; animation: ann-a 1ms 1.25s both; }
.ann-stage #order-banner .ann-text { opacity: 0; animation: ann-b 1ms 3s both; }
@keyframes ann-a { from { opacity: 0 } to { opacity: 1 } }
@keyframes ann-b { from { opacity: 0 } to { opacity: 1 } }

/* The stage (aria-hidden, over the text area only; ann.js sets every box in px). */
.ann-st { position: absolute; top: 0; bottom: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ann-deal .ann-close { z-index: 2; }
.ann-st > * { position: absolute; display: block; margin: 0; }
.ann-st .st-p { box-sizing: border-box; border-radius: .25em; background: #facd12; color: #5e1a1a; font-weight: 900; font-style: normal; white-space: nowrap; text-align: center; letter-spacing: 0; }
.ann-st .st-p::before { content: attr(data-t); }
.ann-st .st-a { clip-path: polygon(0 0, 100% 0, 100% 22%, 0 78%); }
.ann-st .st-b { clip-path: polygon(0 78%, 100% 22%, 100% 100%, 0 100%); }
.ann-st .st-s { border-radius: 2px; background: linear-gradient(90deg, #facd12, #ffe27a 45%, #fff2b8 60%, #facd12); box-shadow: 0 0 0 1px rgba(94, 26, 26, .8), 0 0 5px rgba(250, 205, 18, .9); }
.ann-st .st-g { display: block; width: 100%; height: 100%; transform-origin: 0 100%; }
.ann-st .st-k { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  .ann-st { display: none; }
  .ann-play #order-banner .ann-text, .ann-stage #order-banner .ann-text { opacity: 1; animation: none; }
}
@media print { .ann-st { display: none; } }