/* Del Rio brand structural overrides — loaded after /public/shared/css/main.css,
 * wins by cascade order. Colors come from the :root tokens injected by
 * brands/delrio/brand.js (mapped from the live https://delrio.bet.ar CSS), so
 * they stay in one place. Keep only structural deltas here, scoped to .app--delrio. */

/* Live delrio body texture: a repeating tile over the dark page bg
 * (live: body{background:url(bk_original.jpg) repeat 0 0 #2b2b2b}). */
.app--delrio,
.app--delrio body {
  background-color: var(--color-bg);
  background-image: url('/public/brands/delrio/bg.jpg');
  background-repeat: repeat;
}

/* Live delrio links/accents are gold (.copyright a:hover{color:#d0aa4c}). */
.app--delrio a {
  color: var(--color-primary);
}

.app--delrio a:hover {
  color: var(--color-primary-hover);
}

/* Home slider — full-width, one slide at a time, NO prev/next peek.
 * Matches the live delrio site: the band runs full content width (edge-to-edge,
 * inside the container--fluid main) and each banner shows at its NATURAL aspect
 * ratio — the live CSS is `.flexslider .slides img { width:100%; height:auto }`
 * and the banners are 1900×500. So we drop the base fixed height + object-fit:cover
 * (which scaled/cropped the banner) and let the image height drive the band height.
 * Peek mode is never enabled (the delrio slider override omits data-slider-peek),
 * so the shared driver keeps the default full-width %-based transform. */
.app--delrio .home-slider-wrapper {
  position: relative;
  width: calc(100% + 30px);
  height: auto;             /* was fixed → let the banner's natural aspect set it */
  margin: 0 -15px;
  overflow: hidden;
}

.app--delrio .home-slider {
  position: static;
  width: 100%;
  max-width: none;          /* lift base 1200px cap → full content width */
  height: auto;
  margin: 0;
}

.app--delrio .home-slider .swiper-wrapper {
  height: auto;
}

.app--delrio .home-slider .swiper-slide,
.app--delrio .home-slider .item,
.app--delrio .home-slider .item__box,
.app--delrio .home-slider .item__image,
.app--delrio .home-slider .item__iframe {
  height: auto;
  min-height: 0;
}

.app--delrio .home-slider .item {
  padding: 0;
}

/* Show the WHOLE banner at its natural ratio — no cover/crop (online parity). */
.app--delrio .home-slider .item__image img,
.app--delrio .home-slider .item img {
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Full-height edge nav buttons with a fading gradient (vip-style -custom). */
.app--delrio .home-slider-wrapper .swiper-button-next-custom,
.app--delrio .home-slider-wrapper .swiper-button-prev-custom {
  position: absolute;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  margin: 0;
  border-radius: 0;
  opacity: 1;
  transform: none;
  cursor: pointer;
}

.app--delrio .home-slider-wrapper .swiper-button-prev-custom {
  left: 0;
  background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.5) 100%);
}

.app--delrio .home-slider-wrapper .swiper-button-next-custom {
  right: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.5) 100%);
}

.app--delrio .home-slider-wrapper .swiper-button-next-custom::before,
.app--delrio .home-slider-wrapper .swiper-button-prev-custom::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: .7;
}

.app--delrio .home-slider-wrapper .swiper-button-next-custom:hover::before,
.app--delrio .home-slider-wrapper .swiper-button-prev-custom:hover::before {
  opacity: 1;
}

.app--delrio .home-slider-wrapper .swiper-button-prev-custom::before {
  background-image: url('/public/shared/icons/arrow-left.svg');
}

.app--delrio .home-slider-wrapper .swiper-button-next-custom::before {
  background-image: url('/public/shared/icons/arrow-right.svg');
}

.app--delrio .home-slider-wrapper .swiper-button-next-custom::after,
.app--delrio .home-slider-wrapper .swiper-button-prev-custom::after {
  display: none;
}

/* Footer — static branded footer ported from the live site (.copyright block):
 * solid black band, three operator columns, gold icons/hover, +18 + legal rows.
 * Markup comes from brands/delrio/components/footer.js (DelrioFooter). */
.app--delrio .footer--delrio {
  background-color: #000;          /* live .copyright{background:black} */
  color: #fff;
}

.app--delrio .footer--delrio .footer__delrio {
  max-width: 1360px;               /* live content width */
  margin: 0 auto;
  padding: 35px;                   /* live .copyright{padding:35px} */
}

.app--delrio .footer--delrio .footer__delrio-cols {
  display: flex;
  flex-wrap: wrap;
}

.app--delrio .footer--delrio .footer__delrio-col {
  flex: 1 1 0;
  min-width: 240px;
  text-align: center;
  padding: 0 12px;
}

/* Centred logo frame (live .picture-frame-footer). */
.app--delrio .footer--delrio .picture-frame-footer {
  height: 150px;
  position: relative;
}

.app--delrio .footer--delrio .picture-frame-footer .img-footer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 115px;
  width: auto;
  height: auto;
}

.app--delrio .footer--delrio .picture-frame-footer .img-footer--wide {
  max-width: 70%;                  /* live loteria logo width="70%" */
}

/* Contact / link lines with gold icons. */
.app--delrio .footer--delrio .footer__delrio-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 0.95rem;
}

.app--delrio .footer--delrio .footer__delrio-line svg {
  color: var(--color-primary);    /* gold icons, live .copyright i{color:#d0aa4c} */
  flex: 0 0 auto;
}

.app--delrio .footer--delrio a {
  color: #fff;
  text-decoration: none;
}

.app--delrio .footer--delrio a:hover {
  color: var(--color-primary);
}

/* +18 responsible-gaming row + legal lines. */
.app--delrio .footer--delrio .footer__delrio-age {
  text-align: center;
  margin-top: 18px;
}

.app--delrio .footer--delrio .footer__delrio-age .img-footer {
  display: inline-block;
  margin-bottom: 8px;
}

.app--delrio .footer--delrio .footer__delrio-legal {
  text-align: center;
  margin-top: 8px;
  font-size: 0.9rem;
}

/* ── Winners section (home) ──────────────────────────────────────────────
 * Three auto-scrolling cards (latest / top / favorites), ported from the
 * legacy com_casino home. Scoped to delrio; colors come from brand tokens.
 * Auto-scroll + arrow nudge live in public/shared/js/main.js (.winners-scroller).
 */
.app--delrio .winners--delrio {
  max-width: 1200px;
  margin: 28px auto;
  padding: 0 12px;
}

.app--delrio .winners--delrio .index-winners {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}

.app--delrio .winners--delrio .tarjetas {
  flex: 1 1 300px;
  min-width: 0;
}

.app--delrio .winners--delrio .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Title bar */
.app--delrio .winners--delrio .cdttl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-text-white);
  border-bottom: 1px solid var(--color-border);
}

.app--delrio .winners--delrio .winners-icn {
  display: inline-flex;
  color: var(--color-primary);
}

/* Scroller viewport — fixed height, hidden overflow (JS drives scrollTop). */
.app--delrio .winners--delrio .winners-scroller {
  height: 360px;
  overflow: hidden;
  position: relative;
}

.app--delrio .winners--delrio .winners-track {
  display: block;
}

.app--delrio .winners--delrio .winners-slide {
  height: 72px;
  box-sizing: border-box;
}

.app--delrio .winners--delrio .slide-container {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-border);
}

.app--delrio .winners--delrio .winners_image_link {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-surface-2);
}

.app--delrio .winners--delrio .winners_description {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--color-text);
  overflow: hidden;
}

.app--delrio .winners--delrio .winners_description .spn {
  color: var(--color-primary);
  font-weight: 700;
}

.app--delrio .winners--delrio .winners_description .top_win_gms {
  color: var(--color-text-white);
  font-weight: 600;
}

.app--delrio .winners--delrio a.top_win_gms:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Footer ("Ver todos" + down arrow) */
.app--delrio .winners--delrio .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}

.app--delrio .winners--delrio .card-footer .top_win_gms {
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

/* Up/down nudge chevrons */
.app--delrio .winners--delrio .winners-arrow {
  background: none;
  border: 0;
  padding: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  cursor: pointer;
}

.app--delrio .winners--delrio .winners-arrow:hover {
  color: var(--color-primary);
}

.app--delrio .winners--delrio .cdttl .winners-arrow {
  margin-left: auto;
}

@media (max-width: 991px) {
  .app--delrio .winners--delrio .tarjetas { flex-basis: 100%; }
}

/* Game cards: no hover overlay (play/demo buttons) on delrio. Argentina has no
 * demo mode and the whole card is already a direct link to the game, so the
 * overlay is removed — a click goes straight to the game. */
.app--delrio .game-card__overlay { display: none; }

/* Imported delrio game art is full-bleed cover art (~4:3), not a transparent
 * logo, so fill the card instead of letterboxing it (which left grey
 * --color-surface-3 bars on the sides under the base `contain` rule). */
.app--delrio .game-card__thumb { object-fit: cover; }