/* ============================================================
   LADRITTA.COM - REDESIGN CSS (Pixel-perfect from Figma)
   Figma: 2vDatByNHWnp7T4vGYNnxS
   ============================================================ */

:root {
  --color-primary: #FD7F00;
  --color-primary-hover: #FF9A33;
  --color-primary-dark: #E06F00;
  --color-gold: #FFD831;
  --color-gold-hover: #FFE566;
  --color-gold-text: #052200;
  --color-dark: #052200;
  --color-black: #0A0A0A;
  --color-bg-page: #FAFAFA;
  --color-bg-white: #FFFFFF;
  --color-bg-muted: #F5F5F5;
  --color-bg-hover: #E9E9E9;
  --color-bg-hover-alt: #F3F4F6;
  --color-border: #E5E5E5;
  --color-border-strong: #CBCED4;
  --color-text-secondary: #717182;
  --color-selected: #AEE69D;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-heading);
  background-color: var(--color-bg-page);
  color: var(--color-black);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   HEADER - Figma: 1280x72, rounded-16, shadow, at x=80 y=59
   ============================================================ */
/* Social row scrolls away with the page (DOCX-A) */
.ld-social-row {
  padding: 16px 80px 0;
}

.ld-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 8px 80px 0;
  background: transparent;
}

.ld-header__social-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 0 8px;
  height: 48px;
  position: relative;
  z-index: 1;
}

.ld-header__social-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ld-header__social-icons {
  display: flex;
  gap: 8px;
}

.ld-header__social-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-header__social-icon i,
.ld-header__social-icon svg {
  font-size: 14px;
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
}

.ld-header__bar {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
  padding: 17px 41px;
}

.ld-header__logo {
  width: 396px;
  display: flex;
  align-items: center;
}

.ld-header__logo img {
  height: 32px;
  width: auto;
}

.ld-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ld-header__nav a {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 22.5px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color 0.2s;
}

.ld-header__nav a:hover,
.ld-header__nav a.active {
  color: var(--color-black);
}

.ld-header__actions {
  width: 396px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ld-header__actions .user-menu,
.ld-header__actions .dropdown {
  position: relative;
}

.ld-header__actions .dropdown>a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-black) !important;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
  flex-shrink: 0;
  line-height: 0;
}

.ld-header__actions .dropdown>a:hover {
  color: var(--color-primary) !important;
}

.ld-header__actions .user-menu img,
.ld-header__actions .dropdown-toggle img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.ld-header__actions .ld-user-icon--wrap {
  width: 40px;
  height: 40px;
}

.ld-header__actions .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 200px;
  z-index: 300;
  list-style: none;
}

.ld-header__actions .dropdown-menu.show {
  display: block;
}

.ld-header__actions .dropdown-menu a,
.ld-header__actions .dropdown-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-black);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.ld-header__actions .dropdown-menu a:hover,
.ld-header__actions .dropdown-menu button:hover {
  background: var(--color-bg-muted);
}

.ld-header__actions .dropdown-menu li {
  list-style: none;
}

.ld-header__actions .dropdown-menu .dropdown-divider {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* Buttons */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.ld-btn--outline {
  padding: 8px 24px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-black);
}

.ld-btn--outline:hover {
  background: var(--color-bg-muted);
  color: var(--color-black);
}

.ld-btn--primary {
  padding: 8px 20px;
  border-radius: 8px;
  background: var(--color-primary);
  color: white;
}

.ld-btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0px 2px 12px 0px rgba(253, 127, 0, 0.3);
  color: white;
}

.ld-btn--primary-lg {
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.ld-btn--primary-lg:hover {
  background: var(--color-primary-dark);
  box-shadow: 0px 4px 16px 0px rgba(253, 127, 0, 0.3);
  color: white;
}

.ld-btn--gold {
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-gold);
  transition: all 0.2s;
}

.ld-btn--gold:hover {
  background: var(--color-gold-hover);
  box-shadow: var(--shadow-gold-hover);
  color: var(--color-dark);
}

.ld-btn--full {
  width: 100%;
}

/* Icon buttons (mobile header) */
.ld-header__icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0.529px solid #717182;
  background: var(--color-bg-white);
  color: var(--color-black);
  font-size: 18px;
}

.ld-header__icon-btn--primary {
  background: #F67C00;
  border-color: #F67C00;
  color: white;
}

.ld-header__mobile-only {
  display: none;
}

.ld-header__desktop-only {
  display: inline-flex;
}

/* Mobile header */
.ld-header__mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.ld-header__mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 16px;
  right: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0px 12px 40px 0px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 200;
}

.ld-header__mobile-menu.is-open {
  display: block;
}

.ld-header__mobile-menu a {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-black);
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}

.ld-header__mobile-menu a:last-child {
  border-bottom: none;
}

.ld-header__mobile-menu a:hover {
  background: var(--color-bg-muted);
}

/* ============================================================
   HERO - Figma: 1440x1014, two columns 850+414
   ============================================================ */
.ld-hero {
  padding: 0 80px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(40, 142, 8, 0.10), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(40, 142, 8, 0.08), transparent 60%),
    linear-gradient(180deg, #FAFAFA 0%, #F2F8EE 100%);
}

.ld-hero__inner {
  position: relative;
  z-index: 1;
}

.ld-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 850px 414px;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
  padding: 100px 0 80px;
  min-height: 755px;
  align-items: start;
}

/* Two-column grid:
   col 1 = left text (row 1) + matchcard (row 2)
   col 2 = chatwidget spans both rows (matches the full hero height) */
.ld-hero__inner > .ld-hero__left {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.ld-hero__inner > .ld-hero__matchcard {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin-top: 0;
  width: 100%;
}

.ld-hero__inner > .ld-chatwidget {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  height: 100%;
}

.ld-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Live pill (small status indicator above title) */
.ld-hero__livepill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(40, 142, 8, 0.08);
  border: 1px solid rgba(40, 142, 8, 0.22);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  color: #1F6E06;
  text-transform: uppercase;
  width: fit-content;
}

.ld-hero__livedot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FB30B;
  box-shadow: 0 0 0 0 rgba(47, 179, 11, 0.55);
  animation: ldLiveDot 1.6s ease-out infinite;
}

@keyframes ldLiveDot {
  0%   { box-shadow: 0 0 0 0 rgba(47, 179, 11, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(47, 179, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 179, 11, 0); }
}

/* Metrics strip — high-impact stat block below CTAs */
.ld-hero__metrics {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(242,248,238,0.96) 100%);
  border: 1px solid rgba(40, 142, 8, 0.18);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(5, 34, 0, 0.06);
  backdrop-filter: blur(6px);
}

.ld-hero__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ld-hero__metric-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.5px;
  color: var(--color-dark);
  background: linear-gradient(180deg, #052200 0%, #1F6E06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ld-hero__metric-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.ld-hero__metric-sep {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, transparent 0%, rgba(40, 142, 8, 0.30) 50%, transparent 100%);
}

@media (max-width: 1024px) {
  .ld-hero__metrics {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
  }
  .ld-hero__metric-sep {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(40, 142, 8, 0.30) 50%, transparent 100%);
  }
  .ld-hero__metric { flex-direction: row; align-items: baseline; gap: 12px; }
  .ld-hero__metric-value { font-size: 28px; line-height: 32px; }
}

/* Badges (legacy - kept for other pages) */
.ld-hero__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ld-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
}

.ld-hero__badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.ld-hero__title {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-black);
  margin: 8px 0;
}

.ld-hero__subtitle {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #3A3F4A;
  max-width: 720px;
}

.ld-hero__subtitle strong,
.ld-hero__subtitle b {
  color: var(--color-black);
  font-weight: 700;
}

.ld-hero__ctas {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ld-hero__ctas .ld-btn {
  padding: 16px 24px;
  font-size: 16px;
  line-height: 21px;
}

/* ============================================================
   MATCH CARD - Figma: 850x433, in hero
   ============================================================ */
.ld-match-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
}

.ld-match-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-border);
}

.ld-match-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
}

.ld-match-card__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #288E0A;
}

.ld-match-card__header-meta {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ld-match-card__body {
  padding: 24px 32px;
}

.ld-match-card__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 16px;
}

.ld-match-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 130px;
}

.ld-match-card__team-logo {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: contain;
}

.ld-match-card__team-name {
  font-weight: 600;
  font-size: 14px;
}

.ld-match-card__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ld-match-card__prono-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--color-primary);
  color: white;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.ld-match-card__confidence {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

.ld-match-card__advantage {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  margin: 12px 0;
}

.ld-match-card__advantage span {
  color: var(--color-primary);
}

.ld-match-card__bookmakers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 12px;
}

.ld-match-card__bm-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.ld-match-card__bookmaker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.ld-match-card__bookmaker img {
  height: 20px;
  width: auto;
}

/* ============================================================
   CHAT WIDGET - Figma: 414x755, right column hero
   ============================================================ */
.ld-hero__chat {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
  overflow: hidden;
}

.ld-hero__chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.ld-hero__chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ld-hero__chat-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #288E0A;
  border-radius: 50%;
  border: 2px solid white;
}

.ld-hero__chat-avatar svg {
  width: 20px;
  height: 20px;
  fill: white;
}

.ld-hero__chat-avatar--logo {
  background: white;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.ld-hero__chat-avatar--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.ld-hero__chat-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
}

.ld-hero__chat-subtitle {
  font-size: 12px;
  line-height: 17px;
  color: var(--color-text-secondary);
}

.ld-hero__chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

/* Chat messages */
.ld-chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld-chat-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
}

.ld-chat-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ld-chat-msg__bubble {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 21px;
}

.ld-chat-msg--bot .ld-chat-msg__bubble {
  background: var(--color-bg-muted);
  color: var(--color-black);
}

.ld-chat-msg--user .ld-chat-msg__bubble {
  background: var(--color-primary);
  color: white;
}

.ld-chat-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
}

.ld-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: chatTyping 1.4s infinite ease-in-out both;
}

.ld-chat-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ld-chat-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatTyping {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.ld-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.ld-chat-input input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-black);
  background: transparent;
}

.ld-chat-input input::placeholder {
  color: var(--color-text-secondary);
}

.ld-chat-input button {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   TUTORIAL - Figma: 1440x666, content 1120px at px-160
   ============================================================ */
.ld-tutorial {
  background: var(--color-bg-white);
  padding: 80px 160px;
}

.ld-tutorial__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 444px 1fr;
  gap: 48px;
  align-items: start;
}

.ld-tutorial__video {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 444/419;
  background: var(--color-black);
}

.ld-tutorial__video iframe,
.ld-tutorial__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ld-tutorial__benefits {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ld-tutorial__benefit {
  flex: 1;
  padding: 12px 16px;
  background: var(--color-bg-muted);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.ld-tutorial__content h2 {
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 8px;
}

.ld-tutorial__content h2 span {
  color: #288E08;
}

.ld-tutorial__content>p {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.ld-tutorial__divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 24px;
}

.ld-tutorial__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld-tutorial__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ld-tutorial__step-icon {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: none;
  border-radius: 0;
}

.ld-tutorial__step-icon svg {
  width: 62px;
  height: 62px;
}

.ld-tutorial__step-icon i {
  font-size: 24px;
  color: var(--color-primary);
}

.ld-tutorial__step-number {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-tutorial__step-text h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 24px;
}

.ld-tutorial__step-text p {
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   PRONOSTICI - Figma: 1440x1408, sidebar 333+table 740
   ============================================================ */
.ld-pronostici {
  padding: 80px 160px;
}

.ld-pronostici__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.ld-pronostici__title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}

.ld-pronostici__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 48px;
}

.ld-pronostici__layout {
  display: grid;
  grid-template-columns: 333px 1fr;
  gap: 16px;
}

/* Riccardo #9: "la tabella con i pronostici sulla home è tagliata sulla
   destra". The match-table grid column defaulted to min-width:auto, so its
   min-content (date nav + match rows) forced the track wider than the
   viewport on mobile — the date tabs and the orange "Pronostico" button were
   clipped on the right. Allowing the grid item to shrink fixes both. */
.ld-pronostici__layout > * {
  min-width: 0;
}
.ld-tabs.weekly_matches,
.ld-tabs.weekly_matches .tab-content,
.ld-tabs.weekly_matches .tab-pane,
.ld-tabs.weekly_matches .ld-match-list {
  min-width: 0;
  max-width: 100%;
}

/* Sidebar */
.ld-sidebar {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
  padding: 16px;
  align-self: start;
}

.ld-sidebar__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.ld-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
}

.ld-sidebar__item:hover {
  background: var(--color-bg-hover-alt);
}

.ld-sidebar__item.is-selected {
  background: white;
  color: var(--color-black);
}

.ld-sidebar__item-flag {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  /* background: #262626; */
  object-fit: cover;
}

.ld-sidebar__item-flag--real {
  width: 26px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.ld-sidebar__item-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  transition: transform 0.2s;
}

/* Date Tabs */
.ld-date-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.ld-tabs .nav-pills,
.ld-tabs .nav {
  display: flex !important;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0;
  /* margin-bottom: 24px !important; */
  list-style: none;
  border: none !important;
}

.ld-tabs .nav-item {
  margin: 0 !important;
}

.ld-date-tab,
.ld-tabs .nav-link {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  background: var(--color-bg-muted) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid #ededed !important;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 !important;
}

.ld-date-tab:hover,
.ld-tabs .nav-link:hover {
  background: var(--color-bg-hover) !important;
}

.ld-date-tab.is-active,
.ld-tabs .nav-link.active,
.ld-tabs .nav-link:hover {
  background: var(--color-primary) !important;
  color: white !important;
  box-shadow: 0px 2px 12px 0px rgba(253, 127, 0, 0.25);
}

/* ============================================================
   MATCH LIST - Figma: 2115:592 (Pronostici table)
   ============================================================ */
.ld-match-list {
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
  margin-bottom: 24px;
}

.ld-match-list__league {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--color-bg-page);
}

.ld-match-list__league-left {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: color 0.15s ease;
}

a.ld-match-list__league-left:hover .ld-match-list__league-name strong,
a.ld-match-list__league-left:hover .ld-match-list__league-name {
  color: var(--color-primary);
}

.ld-match-list__flag {
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.ld-match-list__flag img {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

.ld-match-list__flag i {
  color: var(--color-text-secondary) !important;
}

.ld-match-list__flag-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-dark);
  background: linear-gradient(135deg, #F2F8EE 0%, #E2EBDC 100%);
  letter-spacing: 0.5px;
}

.ld-match-list__league-name {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22.5px;
  color: var(--color-text-secondary);
}

.ld-match-list__league-name strong {
  font-weight: 600;
  color: var(--color-black);
}

.ld-match-list__hint {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.ld-match-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid #F3F3F5;
  background: var(--color-bg-white);
  transition: background-color 0.15s ease;
}

.ld-match-list__row--alt {
  background: #F3F3F5;
}

.ld-match-list__row:hover {
  background: #FFF6EC;
}

.ld-match-list__row:hover .ld-match-list__team span {
  color: var(--color-primary);
}

.ld-match-list__row-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ld-match-list__time {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 70px;
}

.ld-match-list__time i {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ld-match-list__time span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
}

.ld-match-list__teams {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld-match-list__team {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ld-match-list__team:hover span {
  color: var(--color-primary);
}

.ld-match-list__team-logo {
  width: 36px;
  height: 36px;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

.ld-match-list__team-logo img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.ld-match-list__team span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-black);
  transition: color 0.15s;
}

.ld-match-list__row-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ld-match-list__edge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(40, 142, 8, 0.12);
  border: 1px solid rgba(40, 142, 8, 0.35);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #1F6E06;
  white-space: nowrap;
}

.ld-match-list__edge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #288E08;
}

.ld-match-list__prono-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--color-primary);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 19.5px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.ld-match-list__prono-btn:hover {
  background: var(--color-primary-hover);
  box-shadow: 0px 2px 12px 0px rgba(253, 127, 0, 0.3);
  color: white;
}

/* Riccardo #1: colore del bottone pronostico — verde = prono gratis/sbloccato,
   arancione = prono premium/bloccato. */
.ld-match-list__prono-btn--free {
  background: #288E0A;
}
.ld-match-list__prono-btn--free:hover {
  background: #2FA80C;
  box-shadow: 0px 2px 12px 0px rgba(40, 142, 10, 0.3);
}
.ld-match-list__prono-btn--locked {
  background: var(--color-primary);
}

/* Mobile responsive for match list */
@media (max-width: 640px) {
  .ld-match-list__league {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .ld-match-list__row {
    padding: 10px 12px;
    gap: 8px;
  }

  .ld-match-list__row-left {
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
  }

  .ld-match-list__row-right {
    gap: 8px;
    flex-shrink: 0;
  }

  .ld-match-list__time {
    min-width: 42px;
    gap: 4px;
  }

  .ld-match-list__time span {
    font-size: 12px;
  }

  .ld-match-list__team-logo {
    width: 28px;
    height: 28px;
  }

  .ld-match-list__team-logo img {
    width: 26px;
    height: 26px;
  }

  .ld-match-list__teams {
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
  }

  .ld-match-list__team {
    gap: 8px;
    min-width: 0;
  }

  .ld-match-list__team span {
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
  }

  .ld-match-list__prono-btn {
    padding: 3px 5px;
    font-size: 11px;
    line-height: 14px;
  }

  .ld-match-list__edge {
    padding: 3px 7px;
    font-size: 10px;
    line-height: 14px;
  }
}

/* ============================================================
   PRICING - Figma: 1440x988, two cards 429px each
   ============================================================ */
.ld-pricing {
  background: var(--color-bg-page);
  padding: 80px 160px;
}

.ld-pricing__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.ld-pricing__title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

.ld-pricing__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 48px;
}

.ld-pricing__banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1F6E06 0%, #288E08 50%, #2FB30B 100%);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 24px rgba(40, 142, 8, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 auto 48px;
  text-align: center;
}

.ld-pricing__banner i {
  color: var(--color-gold);
}

.ld-pricing__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ld-pricing-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  .ld-pricing-card {
    padding: 24px 10px;
  }
}

.ld-pricing-card--premium {
  border: 2px solid var(--color-primary);
  position: relative;
}

.ld-pricing-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  padding: 5px 17px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.ld-pricing-card__top-badge {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-dark);
  color: var(--color-gold);
  padding: 8px 20px;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.ld-pricing-card__title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}

.ld-pricing-card__price {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.ld-pricing-card__period {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 24px;
}

.ld-pricing-card__divider {
  height: 1px;
  background: var(--color-border);
  margin-bottom: 24px;
}

.ld-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.ld-pricing-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 21px;
}

.ld-pricing-card__features li .check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #288E0A;
}

.ld-pricing-card__features li .lock {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 1;
}

.ld-pricing-card__features li .ld-icon-check,
.ld-pricing-card__features li .ld-icon-x {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ld-pricing-card__features li.ld-pricing-card__feature--locked {
  color: #DC2626;
}

.ld-pricing-card--premium .ld-pricing-card__price {
  color: var(--color-primary);
}

.ld-pricing-card__subtitle {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 8px;
}

.ld-pricing-card .ld-btn {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ld-pricing-card__separator {
  font-size: 12px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.ld-pricing-card__separator::before,
.ld-pricing-card__separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ============================================================
   LA DRITTA DEL GIORNO PAGE
   Figma: sidebar 254px + main content, padded layout
   ============================================================ */
.ld-dritta-page {
  padding: 0 80px;
}

.ld-dritta-page__layout {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 254px 1fr 320px;
  gap: 24px;
  padding: 100px 0 80px;
  align-items: start;
}

.ld-dritta-page__layout:not(:has(.ld-dritta-page__sidebar--right)) {
  grid-template-columns: 254px 1fr;
}

.ld-dritta-page__sidebar {
  position: sticky;
  top: 100px;
}

.ld-dritta-page__sidebar .ld-sidebar {
  width: 100%;
}

.ld-dritta-page__main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: hidden;
}

.ld-dritta-page__header h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  color: var(--color-black);
  margin: 0 0 8px;
}

.ld-dritta-page__header p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.ld-dritta-page__empty {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-secondary);
}

/* Dritta Page Tabs */
.ld-dritta-tabs {
  display: flex;
  gap: 8px;
  /* Riccardo: "diminuisci lo spazio tra i bottoni in alto e la box la dritta del giorno" */
  margin-bottom: 0px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}

.ld-dritta-tabs::-webkit-scrollbar {
  display: none;
}

.ld-dritta-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  background: var(--color-bg-white);
  /* border: 1px solid var(--color-border); */
 
  border: 1px solid #71718266;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

a.ld-dritta-tab:hover {
  background: var(--color-bg-white) !important;
  color: #288E0A !important;
  border-color: #288E0A !important;
  box-shadow: 0 2px 12px rgba(40, 142, 10, 0.15);
}

a.ld-dritta-tab:focus-visible {
  outline: 2px solid #288E0A;
  outline-offset: 2px;
}

a.ld-dritta-tab--active {
  background: #288E0A !important;
  color: white !important;
  border-color: #288E0A !important;
}

a.ld-dritta-tab--active:hover {
  background: #1f7008 !important;
  color: white !important;
  border-color: #1f7008 !important;
  box-shadow: 0 2px 12px rgba(40, 142, 10, 0.3);
}

.ld-dritta-tab i {
  font-size: 14px;
}

.ld-dritta-page__analysis {
  text-align: center;
  margin-top: 16px;
}

.ld-dritta-page__analysis-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 8px;
  text-transform: uppercase;
}

.ld-dritta-page__analysis-subtitle {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0 0 24px;
}

.ld-dritta-page__history {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ld-dritta-page__history-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-black);
  text-align: center;
  margin: 0;
}

.ld-match-card--full {
  max-width: 100%;
}

.ld-match-card__meta {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.ld-match-card__team-logo--lg {
  width: 80px;
  height: 80px;
}

.ld-match-card__prediction-center {
  text-align: center;
}

.ld-match-card__bookmakers-section {
  text-align: center;
  margin-top: 16px;
}

.ld-match-card__bookmakers-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.ld-match-row__result {
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ld-match-row__result--win {
  background: var(--color-selected);
  color: var(--color-dark);
}

.ld-match-row__result--loss {
  background: #ffcdd2;
  color: #b71c1c;
}

/* ============================================================
   LOGIN - Figma: 3 columns 308+flex+308, rounded-24 center
   ============================================================ */
.ld-login {
  padding: 0 80px;
}

.ld-login__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 308px 1fr 308px;
  gap: 16px;
  padding: 100px 0 80px;
  align-items: start;
}

.ld-login__sidebar .ld-sidebar {
  width: 100%;
}

.ld-login__form-wrapper {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.ld-login__logo {
  text-align: center;
}

.ld-login__logo img {
  height: 36px;
  width: auto;
}

.ld-login__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  text-align: center;
}

.ld-login__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-secondary);
  text-align: center;
}

.ld-login__benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ld-login__benefit {
  background: var(--color-bg-page);
  border: 1px solid var(--color-bg-page);
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
}

.ld-login__benefit-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-login__benefit span {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15.6px;
  color: var(--color-black);
}

.ld-login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld-login__field label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  color: var(--color-black);
  margin-bottom: 8px;
}

.ld-login__field input[type="email"],
.ld-login__field input[type="password"],
.ld-login__field input[type="text"] {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.ld-login__field input:focus {
  border-color: var(--color-primary);
}

.ld-login__field input::placeholder {
  color: var(--color-text-secondary);
  font-weight: 400;
}

.ld-login__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

.ld-login__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
}

.ld-login__remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
}

.ld-login__forgot {
  color: var(--color-primary);
  font-weight: 500;
}

.ld-login__forgot:hover {
  color: var(--color-primary-hover);
}

.ld-login__submit {
  width: 100%;
  padding: 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

.ld-login__submit:hover {
  background: var(--color-primary-dark);
  box-shadow: 0px 4px 16px 0px rgba(253, 127, 0, 0.3);
}

.ld-login__divider {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ld-login__divider::before,
.ld-login__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-text-secondary);
}

.ld-login__divider span {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.ld-login__register {
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ld-login__register a {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 16px;
}

.ld-login__video {
  background: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
  min-height: 400px;
}

.ld-login__video-play {
  width: 56px;
  height: 56px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(253, 127, 0, 0.4);
}

/* ============================================================
   REGISTER PAGE - follows login layout pattern
   ============================================================ */
.ld-register {
  padding: 0 80px;
}

.ld-register__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 254px 1fr 254px;
  gap: 16px;
  padding: 100px 0 80px;
  align-items: start;
}

.ld-register__sidebar .ld-sidebar {
  width: 100%;
}

.ld-register__form-wrapper {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.ld-register__logo {
  text-align: center;
}

.ld-register__logo img {
  height: 36px;
  width: auto;
}

.ld-register__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  text-align: center;
  margin: 0;
}

.ld-register__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0;
}

.ld-register__steps {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

.ld-register__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.ld-register__step--active {
  color: var(--color-primary);
  font-weight: 600;
}

.ld-register__step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.ld-register__step--active .ld-register__step-num {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.ld-register__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ld-register__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ld-register__field-msg {
  font-size: 12px;
  color: #dc3545;
  margin-top: 4px;
}

.ld-register__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ld-register__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1.4;
}

.ld-register__checkbox input[type="checkbox"],
.ld-register__checkbox input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--color-primary);
}

.ld-register__mandatory {
  font-size: 12px;
  color: #dc3545;
  margin: 0;
}

/* ============================================================
   CONTENT PAGES (base-page layout for privacy, terms, etc.)
   Sidebar + main content, design system consistent
   ============================================================ */
.ld-content-page {
  padding: 0 80px;
}

.ld-content-page__layout {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 254px 1fr;
  gap: 24px;
  padding: 100px 0 80px;
  align-items: start;
}

.ld-content-page__layout--3col {
  grid-template-columns: 254px 1fr 320px;
}

/* Wide right rail — used by /storico-risultati and /value-bets so the
   chatbot has more horizontal room for full sentences and quote lists. */
.ld-content-page__layout--3col.ld-content-page__layout--wide-right {
  grid-template-columns: 254px 1fr 380px;
}

.ld-content-page__sidebar {
  position: sticky;
  top: 100px;
}

.ld-content-page__sidebar--right {
  position: sticky;
  top: 100px;
}

.ld-content-page__sidebar .ld-sidebar {
  width: 100%;
}

.ld-content-page__main {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-black);
  min-width: 0;
  overflow: hidden;
}

.ld-content-page__main h1,
.ld-content-page__main .title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 24px;
  text-align: left;
}

.ld-content-page__main h2,
.ld-content-page__main h5 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
}

.ld-content-page__main p {
  margin-bottom: 12px;
}

.ld-content-page__main ul {
  padding-left: 24px;
  margin-bottom: 12px;
}

.ld-content-page__main ul li {
  margin-bottom: 6px;
}

.ld-content-page__main a:not(.ld-dritta-tab):not(.btn-teams-stats):not(.box-hover-grey):not(.btn-slide-prev):not(.btn-slide-next):not(.badge) {
  color: var(--color-secondary);
}

.ld-content-page__main a:not(.ld-dritta-tab):not(.btn-teams-stats):not(.box-hover-grey):not(.btn-slide-prev):not(.btn-slide-next):not(.badge):hover {
  /* color: white !important; */
}

/* Override old classes in content pages */
.ld-content-page__main .disclaimer {
  text-align: left;
}

.ld-content-page__main .disclaimer .title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
}

.ld-content-page__main .tutorial {
  text-align: left;
}

.ld-content-page__main .inner-content {
  padding: 0;
  max-width: 100%;
}

.ld-content-page__main #content {
  text-align: left;
  padding: 0;
  overflow: visible;
}

/* When dritta inner or prediction is inside content-page, remove card styling */
.ld-content-page__main:has(.ld-dritta-inner),
.ld-content-page__main:has(.ld-prediction) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ============================================================
   FOOTER - Figma: bg #052200, px-160 py-40, 1120px content
   ============================================================ */
.ld-footer {
  background: var(--color-dark);
  color: white;
  padding: 40px 160px;
  overflow: clip;
}

.ld-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ld-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ld-footer__logo img {
  height: 36px;
  width: 96px;
  object-fit: cover;
}

.ld-footer__disclaimer {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 19.6px;
  color: white;
  text-align: center;
}

.ld-footer__social {
  display: flex;
  gap: 12px;
}

.ld-footer__social a {
  width: 36px;
  height: 36px;
  background: var(--color-bg-white);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-footer__social a i,
.ld-footer__social a svg {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-black);
}

.ld-footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.ld-footer__nav {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}

.ld-footer__nav a {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 21px;
  color: white;
  transition: opacity 0.2s;
}

.ld-footer__nav a:hover {
  opacity: 0.7;
}

.ld-footer__copyright {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 18.2px;
  color: white;
  text-align: center;
}

.ld-footer__copyright a {
  color: white;
  text-decoration: underline;
}

.ld-footer__copyright a:hover {
  opacity: 0.7;
}

/* ============================================================
   MATCH CARD (Dark Green) - Figma: 850x433
   ============================================================ */
.ld-matchcard {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.25);
  /* Overlay scuro più forte in basso così l'immagine non "si vede a metà"
     quando la card è corta (es. testa-a-testa senza quotes/advantage).
     bg-position: top per mostrare sempre lo stadio in alto. */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(5, 34, 0, 0.55) 60%, rgba(5, 34, 0, 0.85) 100%),
    url('/images/bg/sfondopronostici.png') center top / cover no-repeat;
  position: relative;
  margin-top: 0px;
  color: white;
  padding-bottom: 20px;
}

.ld-matchcard::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 0;
}

.ld-matchcard--coppahero::before {
  background-image: url('/images/bg/coppahero.png');
  opacity: 0.35;
  mix-blend-mode: lighten;
}

.ld-matchcard > * {
  position: relative;
  z-index: 1;
}

a.ld-matchcard--link {
  display: block;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.ld-matchcard--link:hover {
  transform: translateY(-2px);
  box-shadow: 0px 14px 50px 0px rgba(5, 34, 0, 0.32), 0 0 0 1px rgba(255, 216, 49, 0.35);
  color: white;
}

a.ld-matchcard--link:hover .ld-matchcard__prono-badge {
  background: var(--color-primary-hover);
  box-shadow: 0 0 0 4px rgba(253, 127, 0, 0.18);
}

.ld-matchcard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 0;
}

.ld-matchcard__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld-matchcard__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

.ld-matchcard__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 20px;
}

.ld-matchcard__header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 18px;
  opacity: 0.8;
}

.ld-matchcard__sep {
  font-size: 16px;
}

.ld-matchcard__divider {
  height: 1px;
  margin: 24px 32px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 50%, transparent);
}

/* FASE C #7: Campionato spostato in alto, riga separata sopra i loghi */
.ld-matchcard__tournament-info {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 32px 8px;
}

.ld-matchcard__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Loghi più vicini fra loro per dare più spazio ai nomi */
  gap: 16px;
  padding: 8px 32px 0;
}

.ld-matchcard__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
}

.ld-matchcard__team-circle {
  /* DEBUG2 #1: NO cerchio bianco dietro lo stemma (cliente: "li ho fatti togliere da emidio,
     occhio se rifai le ultime correzioni, altrimenti poi riescono fuori"). Stemmi su bg trasparente. */
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-matchcard__team-circle img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.ld-matchcard__team-name {
  /* Nomi più grandi, più vicini ai loghi */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  margin-top: 6px;
}

/* Riccardo #12: stemma + nome squadra come link alle statistiche.
   color:inherit mantiene identico l'aspetto del vecchio <span>. */
a.ld-matchcard__team-circle {
  text-decoration: none;
  cursor: pointer;
}
a.ld-matchcard__team-circle img {
  transition: transform 0.15s ease;
}
a.ld-matchcard__team-circle:hover img {
  transform: scale(1.05);
}
a.ld-matchcard__team-name {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
a.ld-matchcard__team-name:hover {
  color: var(--color-primary);
}

.ld-matchcard__center {
  /* DEBUG2 #5: fixed min-width prevents the % count-up animation from shifting
     adjacent team stemmi (cliente: "tremano gli stemmi delle squadre"). */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  flex: 0 0 auto;
}

.ld-matchcard__info {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 19.5px;
  text-align: center;
}

.ld-matchcard__time {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ld-matchcard__prono-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld-matchcard__prono-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.7;
}

.ld-matchcard__prono-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--color-primary);
  border-radius: 10px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 1px;
  color: white;
  text-transform: uppercase;
  box-shadow: 0px 4px 16px 0px rgba(253, 127, 0, 0.4);
}

.ld-matchcard__perc {
  /* DEBUG2 #5: tabular-nums + fixed min-width prevents the count-up text from
     widening the badge as it animates 0% → 70%, eliminating sibling shake. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  background: var(--color-gold);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--color-black);
  box-shadow: 0px 0px 12px 0px rgba(255, 216, 49, 0.45);
  animation: ldPercPulse 2.4s ease-in-out infinite;
}

@keyframes ldPercPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 49, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 216, 49, 0); transform: scale(1.04); }
}

.ld-matchcard__advantage {
  text-align: center;
  padding: 18px 32px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.ld-matchcard__advantage-val {
  font-weight: 800;
  font-size: 26px;
  color: var(--color-gold);
  letter-spacing: 0;
  margin-left: 8px;
}

.ld-matchcard__quotes {
  margin: 0 32px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0 25px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.ld-matchcard__quotes-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ld-matchcard__quotes-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 13px;
  text-align: center;
}

.ld-matchcard__quote {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 27.5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.ld-matchcard__quote--best {
  background: var(--color-gold);
  box-shadow: 0px 0px 10px 0px rgba(255, 216, 49, 0.2);
  color: var(--color-black);
}

.ld-matchcard__quote-val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
}

.ld-matchcard__quote-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8px;
}

.ld-matchcard__quote-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.ld-matchcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: var(--color-gold);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0A0A0A !important;
  box-shadow: 0px 2px 16px 0px rgba(255, 216, 49, 0.25);
  text-decoration: none;
  flex-shrink: 0;
}

.ld-matchcard__cta:hover,
.ld-matchcard__cta:focus,
.ld-matchcard__cta:active,
.ld-matchcard__cta:visited {
  background: var(--color-gold-hover);
  box-shadow: 0px 4px 24px 0px rgba(255, 216, 49, 0.35);
  color: #0A0A0A !important;
  text-decoration: none;
}

/* ============================================================
   STANDINGS SIDEBAR (Right sidebar - Classifica)
   Figma: 254px wide, node 2067:5138
   ============================================================ */
.ld-dritta-page__sidebar--right {
  position: sticky;
  top: 100px;
}

.ld-standings {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
}

/* Next matches in right sidebar (DOCX-J) */
.ld-next-matches {
  margin-top: 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
}

.ld-next-matches__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-dark);
  color: white;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.ld-next-matches__title {
  flex: 1;
}

.ld-next-matches__round {
  padding: 8px 16px;
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ld-next-matches__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}

.ld-next-matches__teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--color-black);
}

.ld-next-matches__teams:hover {
  color: var(--color-primary);
}

.ld-next-matches__time {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.ld-next-matches__team {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld-next-matches__team img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.ld-next-matches__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--color-primary);
  color: white;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.ld-next-matches__btn:hover {
  background: var(--color-primary-hover);
  color: white;
}

/* Riccardo #9: da loggato il pronostico è sbloccato -> verde */
.ld-next-matches__btn--free {
  background: #288E0A;
}
.ld-next-matches__btn--free:hover {
  background: #2FA80C;
  box-shadow: 0px 2px 12px 0px rgba(40, 142, 10, 0.3);
}

.ld-standings {
  margin-bottom: 28px;
}

.ld-standings__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-dark);
  border-radius: 12px 12px 0 0;
}

.ld-standings__flag {
  width: 18px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ld-standings__flag img {
  width: 18px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.ld-standings__flag i {
  font-size: 14px;
  color: white;
}

.ld-standings__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: white;
  letter-spacing: 0.2px;
}

.ld-standings__country {
  display: inline-block;
  font-weight: 500;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 10px;
  margin-right: 4px;
}

/* User profile icon (DOCX-B) */
.ld-user-icon {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-black);
  transition: color 0.15s ease;
}

.ld-user-toggle:hover .ld-user-icon,
.ld-header__icon-btn:hover .ld-user-icon {
  color: var(--color-primary);
}

/* Self-contained user-icon wrapper — sized by the SPAN, image just fills it.
   Bulletproof against global `img { max-width:100%; height:auto }` rules. */
.ld-user-icon--wrap {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  vertical-align: middle;
  line-height: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.ld-user-icon--wrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.ld-user-toggle:hover .ld-user-icon--wrap,
.ld-user-toggle:focus .ld-user-icon--wrap {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.15);
}

.ld-standings__table {
  width: 100%;
}

.ld-standings__table-header {
  display: grid;
  grid-template-columns: 32px 1fr 40px 40px;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
}

.ld-standings__table-header .ld-standings__col {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ld-standings__row {
  display: grid;
  grid-template-columns: 32px 1fr 40px 40px;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.ld-standings__row:last-child {
  border-bottom: none;
}

.ld-standings__row:hover {
  background: var(--color-bg-hover-alt);
}

.ld-standings__row--highlight {
  background: rgba(253, 127, 0, 0.06);
}

.ld-standings__row--highlight:hover {
  background: rgba(253, 127, 0, 0.1);
}

.ld-standings__col--pos {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.ld-standings__row--highlight .ld-standings__col--pos {
  color: var(--color-primary);
  font-weight: 700;
}

.ld-standings__col--team {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--color-black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ld-standings__col--team a {
  color: inherit;
  text-decoration: none;
}

.ld-standings__col--team a:hover {
  color: var(--color-primary);
}

.ld-standings__row--highlight .ld-standings__col--team {
  font-weight: 700;
  color: var(--color-primary);
}

.ld-standings__row--highlight .ld-standings__col--team a {
  color: var(--color-primary);
}

.ld-standings__col--games,
.ld-standings__col--pts {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 18px;
  color: var(--color-text-secondary);
  text-align: center;
}

.ld-standings__col--pts {
  font-weight: 700;
  color: var(--color-black);
}

.ld-standings__row--highlight .ld-standings__col--pts {
  color: var(--color-primary);
}

/* ============================================================
   CHAT WIDGET (Hero right column) - Figma: 414px
   ============================================================ */
.ld-chatwidget {
  width: 414px;
  flex-shrink: 0;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
}

.ld-chatwidget__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--color-bg-muted);
  border-bottom: 1px solid white;
}

.ld-chatwidget__avatar {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.ld-chatwidget__avatar img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}

.ld-chatwidget__online {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #288E08;
  border: 1px solid white;
  border-radius: 50%;
}

.ld-chatwidget__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  display: block;
}

.ld-chatwidget__status {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 16.5px;
  color: #288E08;
  display: block;
}

.ld-chatwidget__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  align-items: flex-end;
  overflow-y: auto;
  cursor: pointer;
}

.ld-chatwidget__msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}

.ld-chatwidget__msg--user {
  justify-content: flex-end;
}

.ld-chatwidget__msg--bot {
  align-self: flex-start;
}

.ld-chatwidget__bubble {
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 19.6px;
}

.ld-chatwidget__bubble--user {
  background: var(--color-dark);
  color: white;
  border-radius: 12px 12px 4px 12px;
}

.ld-chatwidget__bubble--bot {
  background: #ECECF0;
  color: var(--color-black);
  border-radius: 12px 12px 12px 4px;
}

.ld-chatwidget__bot-avatar {
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ld-chatwidget__bot-avatar img {
  width: 18px !important;
  height: 18px !important;
}

.ld-chatwidget__typing {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #ECECF0;
  border-radius: 12px 12px 12px 4px;
}

.ld-chatwidget__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: ldTyping 1.4s infinite ease-in-out both;
}

.ld-chatwidget__typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.ld-chatwidget__typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ldTyping {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.ld-chatwidget__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.ld-chatwidget__chip {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-black);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ld-chatwidget__chip:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.ld-chatwidget__inline-link {
  color: #1F6E06;
  text-decoration: underline;
  font-weight: 600;
}

.ld-chatwidget__inline-link:hover {
  color: var(--color-primary);
}

.ld-chatwidget__footer {
  padding: 16px;
  border-top: 1px solid white;
}

.ld-chatwidget__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #ECECF0;
  border-radius: 10px;
}

.ld-chatwidget__input-wrap input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-secondary);
  outline: none;
}

.ld-chatwidget__send {
  width: 24px;
  height: 24px;
  background: var(--color-dark);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* Hero left column — text content stack */
.ld-hero__left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Badge update - green style from Figma */
.ld-hero__badge {
  background: #AEE69D;
  border: 1px solid rgba(40, 142, 8, 0.25);
  border-radius: 300px;
  padding: 8px 16px 8px 8px;
  height: auto;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--color-dark);
}

.ld-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-dark);
  display: inline-block;
}

.ld-hero__title-green {
  color: #288E08;
}

/* Responsive for new components */
@media (max-width: 1024px) {
  .ld-chatwidget {
    width: 100%;
  }

  .ld-matchcard__teams {
    gap: 16px;
  }

  .ld-matchcard__team-circle {
    width: 80px;
    height: 80px;
  }

  .ld-matchcard__team-circle img {
    width: 40px;
    height: 40px;
  }

  .ld-matchcard__quotes {
    flex-direction: column;
    height: auto;
    padding: 16px;
  }

  .ld-matchcard__quotes-inner {
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    justify-content: space-between;
  }

  .ld-matchcard__quotes-inner .ld-matchcard__quotes-label {
    flex: 0 0 auto;
    margin-right: 4px;
  }

  .ld-matchcard__quotes-inner .ld-matchcard__quote {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    height: 32px;
    justify-content: center;
  }

  .ld-matchcard__quotes-inner .ld-matchcard__quote-val {
    font-size: 12px;
  }

  .ld-matchcard__quotes-inner .ld-matchcard__quote-name {
    font-size: 7px;
  }

  .ld-matchcard__quote-logo {
    width: 20px;
    height: 20px;
    border-radius: 3px;
  }
}

@media (max-width: 640px) {
  /* Riduci padding interno della card su mobile: 32px laterali su una card da ~345px
     mangiavano lo spazio dei team, spingendoli fuori dal viewport. */
  .ld-matchcard__header {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding: 16px 16px 0;
  }

  .ld-matchcard__header-right {
    font-size: 11px;
    flex-wrap: wrap;
  }

  .ld-matchcard__divider {
    margin: 14px 16px;
  }

  .ld-matchcard__tournament-info {
    padding: 10px 16px 4px;
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  /* TEAMS row: lascia che team + center si distribuiscano in modo elastico
     invece di forzare width:130px + min-width:280px (che totalizzava ~564px
     su 345px di card → team off-screen). */
  .ld-matchcard__teams {
    gap: 6px;
    padding: 8px 12px 0;
    align-items: flex-start;
  }

  .ld-matchcard__team {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .ld-matchcard__team-circle {
    width: 56px;
    height: 56px;
  }

  .ld-matchcard__team-circle img {
    width: 44px;
    height: 44px;
  }

  .ld-matchcard__team-name {
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-top: 4px;
  }

  .ld-matchcard__center {
    min-width: 0;
    flex: 0 1 auto;
    gap: 8px;
  }

  .ld-matchcard__prono-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .ld-matchcard__prono-badge {
    font-size: 14px;
    padding: 6px 14px;
  }

  .ld-matchcard__perc {
    min-width: 52px;
    height: 24px;
    font-size: 12px;
  }

  .ld-matchcard__advantage {
    padding: 14px 16px 10px;
    font-size: 13px;
    letter-spacing: 1px;
  }

  .ld-matchcard__advantage-val {
    font-size: 20px;
    margin-left: 6px;
  }

  .ld-matchcard__quotes {
    margin: 0 16px 16px;
    padding: 10px 12px;
    flex-direction: column;
    height: auto;
    gap: 10px;
  }

  .ld-matchcard__quotes-inner {
    gap: 4px;
    width: 100%;
  }

  .ld-matchcard__quotes-inner .ld-matchcard__quote {
    padding: 0 6px;
    height: 28px;
  }

  .ld-matchcard__cta {
    align-self: center;
  }
}

/* ============================================================
   ODDS ANALYSIS TABLE - Figma: 740px wide, rounded-16
   ============================================================ */
.ld-odds-table {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
  width: 100%;
  text-align: left;
}

.ld-odds-table__header {
  background: var(--color-dark);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.ld-odds-table__header-row {
  display: grid;
  grid-template-columns: 90px 1fr repeat(6, 70px);
  gap: 0;
  width: 100%;
  align-items: center;
  background: var(--color-dark);
  padding: 14px 20px;
}

.ld-odds-table__header-cell {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 16.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  text-align: center;
}

.ld-odds-table__header-cell:first-child {
  text-align: left;
}

.ld-odds-table__section-header {
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  padding: 13px 20px 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-black);
  text-align: left;
}

.ld-odds-table__section-title {
  display: block;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-black);
}

.ld-odds-table__row {
  display: grid;
  grid-template-columns: 90px 1fr repeat(6, 70px);
  gap: 0;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-white);
}

.ld-odds-table__row--highlight,
.ld-odds-table__row--highlighted {
  background: rgba(40, 142, 8, 0.06);
  border-top: 1px solid rgba(40, 142, 8, 0.18);
}

.ld-odds-table__cell {
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  text-align: center;
  font-weight: 400;
}

.ld-odds-table__cell:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19.5px;
  color: var(--color-black);
}

/* Only the suggested (highlighted) row shows bold % and bold Valore in green */
.ld-odds-table__row--highlight .ld-odds-table__cell--perc,
.ld-odds-table__row--highlighted .ld-odds-table__cell--perc {
  font-weight: 700;
  color: #288E08;
}

.ld-odds-table__row--highlight .ld-odds-table__cell--value,
.ld-odds-table__row--highlighted .ld-odds-table__cell--value {
  font-weight: 700;
  color: var(--color-black);
}

/* Non-highlighted rows: Valore not bold, plain color */
.ld-odds-table__row:not(.ld-odds-table__row--highlight):not(.ld-odds-table__row--highlighted) .ld-odds-table__cell--value {
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* Non-highlighted rows: keep all numeric cells (perc, gain) at normal weight.
   Bold + green is reserved for the suggested (highlighted) row only. */
.ld-odds-table__row:not(.ld-odds-table__row--highlight):not(.ld-odds-table__row--highlighted) .ld-odds-table__cell--perc,
.ld-odds-table__row:not(.ld-odds-table__row--highlight):not(.ld-odds-table__row--highlighted) .ld-odds-table__cell--gain-positive,
.ld-odds-table__row:not(.ld-odds-table__row--highlight):not(.ld-odds-table__row--highlight) .ld-odds-table__cell--gain-negative {
  font-weight: 400;
}

.ld-odds-table__cell--label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ld-odds-table__cell--value {
  font-weight: 700;
  color: var(--color-black);
}

.ld-odds-table__cell--highlight {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.ld-odds-table__cell--value {
  color: var(--color-black);
}

.ld-odds-table__cell--gain-positive {
  font-weight: 700;
  color: #288E08;
}

.ld-odds-table__cell--gain-negative {
  font-weight: 700;
  color: #D4183D;
}

.ld-odds-table__vb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: var(--color-primary);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: white;
  text-transform: uppercase;
}

.ld-odds-table__vb-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  background: var(--color-primary);
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  color: white;
  text-transform: uppercase;
}

.ld-odds-table__edge {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: #288E08;
}

/* ============================================================
   STORICO RISULTATI - Figma: past results cards
   ============================================================ */
/* Dritta Inner wrapper (for match-del-giorno inside base-page) */
.ld-dritta-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Probable Result */
.ld-probable-result {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 10px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7FBF4 100%);
  border: 1px solid rgba(40, 142, 8, 0.18);
  border-left: 4px solid #288E08;
  border-radius: 14px;
  box-shadow: 0px 4px 18px 0px rgba(5, 34, 0, 0.06);
}

/* Riccardo #6: icona-bersaglio rimossa; il blocco parte dall'etichetta */
.ld-probable-result__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #288E08;
  margin-right: 4px;
  flex-shrink: 0;
}

.ld-probable-result__values {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.ld-probable-result__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-width: 64px; */
  padding: 5px 10px;
  background: var(--color-dark);
  border-radius: 8px;
  font-family: 'Inter Tight', var(--font-heading), sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  color: white;
  box-shadow: 0px 2px 8px 0px rgba(5, 34, 0, 0.18);
  /* Riccardo #6: il punteggio (es. 2-1) non deve mai spezzarsi su due righe */
  white-space: nowrap;
}

/* Riccardo #6: su mobile etichetta sopra e punteggi in riga sotto,
   tutto CENTRATO (richiesta 11/07) */
@media (max-width: 640px) {
  .ld-probable-result {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-top: 20px;
    text-align: center;
  }
  .ld-probable-result__label {
    margin-right: 0;
  }
  .ld-probable-result__values {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }
}

.ld-probable-result__sep {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0.7;
}

.ld-past-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld-past-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ld-past-results__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 31.2px;
  color: var(--color-black);
}

.ld-past-results__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: var(--color-gold);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-black);
  text-decoration: none;
}

.ld-past-results__cta:hover {
  background: var(--color-gold-hover);
}

.ld-past-result {
  border: 1px solid rgba(40, 142, 8, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.ld-past-result--loss {
  border-color: rgba(220, 38, 38, 0.2);
}

.ld-past-result__date {
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #288E08;
  background: rgba(40, 142, 8, 0.06);
  border-left: 3px solid #288E08;
}

.ld-past-result--loss .ld-past-result__date {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.04);
  border-left-color: #DC2626;
}

.ld-past-result__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg-white);
}

.ld-past-result__teams {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19.5px;
  color: var(--color-black);
}

.ld-past-result__details {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ld-past-result__score {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  min-width: 36px;
  text-align: center;
}

.ld-past-result__type {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-black);
  text-align: center;
  min-width: 64px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ld-past-result__minute {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-align: center;
  min-width: 32px;
}

.ld-past-result__odds {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-align: center;
  min-width: 40px;
}

.ld-past-result__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-past-result__icon--win {
  background: rgba(40, 142, 8, 0.15);
  color: #288E08;
}

.ld-past-result__icon--loss {
  background: #FADEDE;
  color: #DC2626;
}

.ld-past-result__icon svg,
.ld-past-result__icon i {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* ============================================================
   PRICING CARD FIXES - Figma: gold CTA for premium
   ============================================================ */
.ld-pricing-card {
  background: var(--color-bg-white);
}

.ld-pricing-card--premium .ld-btn--primary-lg {
  background: var(--color-gold);
  color: var(--color-dark);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ld-pricing-card--premium .ld-btn--primary-lg:hover {
  background: var(--color-gold-hover);
  box-shadow: 0px 4px 24px 0px rgba(255, 216, 49, 0.35);
  color: var(--color-dark);
}

/* ============================================================
   PRONOSTICI TABLE - Bootstrap compatibility overrides
   ============================================================ */
/* Match table overrides for Bootstrap compatibility */
.ld-tabs .tab-content {
  width: 100%;
}

.ld-tabs .nav-tabs {
  display: flex;
  gap: 8px;
  border: none;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.ld-tabs .tab-pane {
  width: 100%;
}

.ld-tabs .table,
.ld-pronostici .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ld-pronostici .match-table,
.ld-pronostici .weekly_matches {
  width: 100%;
  overflow-x: auto;
}

/* Weekly matches table styling */
.ld-pronostici .week-table,
.ld-tabs .week-table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
}

.ld-pronostici .week-table td {
  padding: 10px 12px !important;
  border-top: 1px solid var(--color-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: var(--color-bg-white) !important;
  font-family: var(--font-heading);
  font-size: 13px;
  vertical-align: middle;
}

.ld-pronostici .week-table tr:first-child td {
  border-top: none !important;
}

.ld-pronostici .week-table tr:hover td {
  background: var(--color-bg-hover-alt) !important;
}

.ld-pronostici .week-table img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: contain;
}

.ld-pronostici h3.h5 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
  margin: 24px 0 8px;
  padding: 10px 16px;
  background: var(--color-bg-muted);
  border-radius: 8px;
}

.ld-pronostici .td-prono {
  padding: 6px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ld-pronostici p.fw-semibold {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

/* Override Bootstrap table styles in redesign context */
.ld-redesign .table>thead>tr>th,
.ld-redesign .table>tbody>tr>td {
  font-family: var(--font-heading);
  font-size: 13px;
  padding: 12px 8px;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}

.ld-redesign .table>thead>tr>th {
  background: var(--color-dark);
  color: white;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
}

.ld-redesign .table>thead>tr>th:first-child {
  border-radius: 12px 0 0 0;
}

.ld-redesign .table>thead>tr>th:last-child {
  border-radius: 0 12px 0 0;
}

.ld-redesign .table>tbody>tr:hover {
  background: var(--color-bg-hover-alt);
}

.ld-redesign .table>tbody>tr>td a {
  color: var(--color-black);
}

.ld-redesign .table>tbody>tr>td a:hover {
  color: var(--color-primary);
}

/* Match row styling */
.ld-redesign .match_row td {
  padding: 10px 8px;
}

.ld-redesign .match_row .match-teams {
  font-weight: 500;
}

.ld-redesign .match_row .badge,
.ld-redesign .match_row .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}

/* League header rows */
.ld-redesign .league-header td,
.ld-redesign .league_row td {
  background: var(--color-bg-muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px;
  color: var(--color-black);
}

/* Value bet indicator */
.ld-redesign .value-bet,
.ld-redesign .vb-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================
   ODDS ANALYSIS TABLE (flex layout) - Figma: 2067:4794
   ============================================================ */
.ld-odds-table__header-labels {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 16.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
}

.ld-odds-table__header-labels span:first-child {
  flex: 1;
  text-align: left;
}

.ld-odds-table__header-labels span {
  width: 56px;
  text-align: center;
  flex-shrink: 0;
}

.ld-odds-table__header-labels span:last-child {
  width: 48px;
}

.ld-odds-table__row-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19.5px;
  color: var(--color-black);
}

.ld-odds-table__row--highlighted {
  background: rgba(253, 127, 0, 0.05);
  border-top: 0.5px solid rgba(253, 127, 0, 0.15);
}

.ld-odds-table__row--highlighted .ld-odds-table__row-label {
  color: var(--color-primary);
  font-weight: 600;
}

.ld-odds-table__vb-pct {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  color: #288E08;
}

.ld-odds-table__row-values {
  display: flex;
  align-items: center;
}

.ld-odds-table__row-values span {
  width: 56px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.ld-odds-table__row-values span:last-child {
  width: 48px;
}

.ld-odds-table__row-values .ld-odds-val--bold {
  color: var(--color-black);
  font-weight: 700;
}

.ld-odds-table__row-values .ld-odds-val--green {
  color: #288E08;
  font-weight: 700;
}

.ld-odds-table__row-values .ld-odds-val--red {
  color: #D4183D;
  font-weight: 700;
}

/* ============================================================
   PAST RESULTS (flex layout) - Figma: 2067:5011
   ============================================================ */
.ld-past-results__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld-past-results__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  background: var(--color-gold);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 18px;
  color: #0A0A0A !important;
  text-decoration: none;
  box-shadow: 0px 2px 8px 0px rgba(255, 216, 49, 0.2);
  white-space: nowrap;
}

.ld-past-results__btn:hover,
.ld-past-results__btn:focus,
.ld-past-results__btn:active,
.ld-past-results__btn:visited {
  background: var(--color-gold-hover);
  box-shadow: 0px 4px 16px 0px rgba(255, 216, 49, 0.3);
  color: #0A0A0A !important;
  text-decoration: none;
}

/* ============================================================
   PRICING CARD - premium gold CTA full-width
   ============================================================ */
.ld-pricing-card--premium .ld-btn--gold {
  padding: 16px 24px;
  width: 100%;
}

/* ============================================================
   Override old styles when .ld-redesign is active
   ============================================================ */
.ld-redesign header.shadow {
  display: none !important;
}

.ld-redesign .hero-home {
  display: none !important;
}

.ld-redesign .membership-banner {
  display: none !important;
}

.ld-redesign #footer {
  display: none !important;
}

.ld-redesign .twich-promo {
  display: none !important;
}

.ld-redesign #main {
  background: var(--color-bg-page);
}

.ld-redesign #content {
  background: transparent !important;
  padding: 0 !important;
}

.ld-redesign #content .inner-content {
  padding: 0 !important;
  max-width: 100%;
}

/* Legacy color compat */
.bg-ld-orange {
  background-color: var(--color-primary) !important;
}

.bg-ld-yellow {
  background-color: var(--color-gold) !important;
}

.c-ld-yellow {
  color: var(--color-gold) !important;
}

/* Global table styling for all redesigned pages */
.ld-redesign table,
.ld-redesign .table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  font-family: var(--font-heading);
  font-size: 13px;
  table-layout: auto;
}

/* Table containers must scroll horizontally */
.ld-redesign .table-shadow,
.ld-redesign .ld-data-tables,
.ld-redesign .inner-content,
.ld-redesign #content {
  overflow-x: auto !important;
  max-width: 100%;
}

/* Swiper slides: constrain width so tables don't expand infinitely */
.ld-redesign .swiper-slide {
  overflow-x: auto !important;
  max-width: 100%;
  min-width: 0;
}

.ld-redesign .swiper {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

/* Override text-nowrap on table cells to allow wrapping when needed */
.ld-redesign .text-nowrap td,
.ld-redesign .text-nowrap th,
.ld-redesign table.text-nowrap td,
.ld-redesign table.text-nowrap th {
  white-space: normal !important;
}

/* Keep header cells nowrap */
.ld-redesign table thead th {
  white-space: nowrap;
}

.ld-redesign table thead th,
.ld-redesign .table thead th,
.ld-redesign table>thead>tr>th,
.ld-redesign .table>thead>tr>th {
  background: var(--color-dark) !important;
  color: white !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 12px 16px;
  border: none !important;
  white-space: nowrap;
}

.ld-redesign table thead th:first-child,
.ld-redesign .table thead th:first-child {
  border-radius: 0px 0 0 0;
}

.ld-redesign table thead th:last-child,
.ld-redesign .table thead th:last-child {
  border-radius: 0 0px 0 0;
}

.ld-redesign table tbody td,
.ld-redesign .table tbody td,
.ld-redesign table>tbody>tr>td,
.ld-redesign .table>tbody>tr>td {
  padding: 5px 5px;
  border-top: 1px solid var(--color-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  text-align: left;
  text-wrap: nowrap !important;
  font-family: var(--font-heading);
  font-size: 13px;
  vertical-align: middle;
  color: var(--color-black);
  background: var(--color-bg-white) !important;
}

.ld-redesign table tbody tr:hover td,
.ld-redesign .table tbody tr:hover td {
  background: var(--color-bg-hover-alt) !important;
}

.ld-redesign .league_row td,
.ld-redesign .league-header td {
  background: var(--color-bg-muted) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-black) !important;
}

/* Badge/label overrides in tables */
.ld-redesign .badge-success,
.ld-redesign .bg-success {
  background-color: #288E08 !important;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

.ld-redesign .badge-warning,
.ld-redesign .bg-warning {
  background-color: var(--color-gold) !important;
  color: var(--color-black) !important;
  border-radius: 4px;
}

.ld-redesign .badge-danger,
.ld-redesign .bg-danger {
  background-color: #D4183D !important;
  border-radius: 4px;
}

.ld-redesign .badge-primary,
.ld-redesign .bg-primary {
  background-color: var(--color-primary) !important;
  border-radius: 4px;
}

/* Value bet styling in tables */
.ld-redesign .value_bet,
.ld-redesign .vbet {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  /* Tablet/large-mobile: hide the left rail, keep the right rail with
     standings + next-matches visible BUT widened (relative to a shrunk
     center) so team names and the pts column fit without truncation. */
  .ld-dritta-page__layout {
    grid-template-columns: 1fr 320px;
  }

  .ld-dritta-page__sidebar:not(.ld-dritta-page__sidebar--right) {
    display: none;
  }

  .ld-dritta-page__layout:not(:has(.ld-dritta-page__sidebar--right)) {
    grid-template-columns: 1fr;
  }

  .ld-content-page__layout--3col {
    grid-template-columns: 1fr 320px;
  }

  .ld-content-page__layout--3col > .ld-content-page__sidebar:not(.ld-content-page__sidebar--right) {
    display: none;
  }

  /* Exception: when the right rail contains our chatbot, keep it visible
     and stack it below the content area instead of hiding it. The chat
     module is a primary feature on these pages; hiding it on small
     viewports would surprise users. */
  .ld-content-page__layout--3col:has(.ld-chatwidget--sidebar) {
    grid-template-columns: 1fr;
  }
  .ld-content-page__sidebar--right:has(.ld-chatwidget--sidebar) {
    display: block;
    position: static;
    grid-column: 1 / -1;
    margin-top: 0px;
  }
}

@media (max-width: 1024px) {
  .ld-social-row {
    padding: 16px 16px 0;
  }

  .ld-header {
    padding: 8px 16px 0;
  }

  .ld-header__social-strip {
    display: none;
  }

  .ld-header__nav {
    display: none;
  }

  .ld-header__bar {
    display: grid;
    grid-template-columns: 85px 1fr 85px;
    align-items: center;
    height: 70px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: none;
  }

  .ld-header__mobile-menu {
    box-shadow: none;
  }

  .ld-header__mobile-toggle {
    display: flex;
    justify-self: start;
  }

  .ld-header__logo {
    width: auto;
    justify-self: center;
  }

  .ld-header__actions {
    width: auto;
    justify-self: end;
    gap: 8px;
  }

  .ld-header__mobile-only {
    display: flex;
  }

  .ld-header__desktop-only {
    display: none !important;
  }

  .ld-header__actions .ld-btn--outline {
    display: none;
  }

  .ld-header__actions .ld-btn--primary:not(.ld-header__desktop-only) {
    display: none;
  }

  .ld-hero {
    padding: 0 16px;
  }

  .ld-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 40px 0;
  }

  .ld-hero__chat,
  .ld-chatwidget:not(.ld-chatwidget--page):not(.ld-chatwidget--sidebar),
  .ld-hero__chat-header,
  .ld-hero__chat-body {
    display: none !important;
  }

  .ld-hero__title {
    font-size: 32px;
    line-height: 40px;
  }

  .ld-tutorial {
    padding: 48px 16px;
  }

  .ld-tutorial__inner {
    grid-template-columns: 1fr;
  }

  .ld-pronostici {
    padding: 48px 10px;
  }

  i.fa-regular.fa-clock {
    display: none;
  }

  .ld-pronostici__layout {
    grid-template-columns: 1fr;
  }

  .ld-sidebar {
    display: none;
  }

  .ld-pricing {
    padding: 48px 10px;
  }

  .ld-pricing__cards {
    grid-template-columns: 1fr;
  }

  .ld-content-page {
    padding: 0 10px;
  }

  .ld-content-page__layout {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }

  .ld-content-page__sidebar:not(.ld-content-page__sidebar--right) {
    display: none;
  }

  /* On tablet/large-mobile keep the standings right rail visible beside
     the (now narrower) main content; hide it only on actual phones via
     the @media 768px rule below. Chatbot pages override this with their
     own `:has(.ld-chatwidget--sidebar)` rule (stacked full-width). */
  .ld-content-page__layout--3col {
    grid-template-columns: 1fr 300px;
  }

  .ld-content-page__main {
    padding: 10px;
  }

  .ld-dritta-page {
    padding: 0 16px;
  }

  .ld-dritta-page__layout {
    grid-template-columns: 1fr 300px;
  }

  .ld-dritta-page__layout:not(:has(.ld-dritta-page__sidebar--right)) {
    grid-template-columns: 1fr;
  }

  .ld-dritta-page__sidebar:not(.ld-dritta-page__sidebar--right) {
    display: none;
  }

  .ld-login {
    padding: 0 16px;
  }

  .ld-login__inner {
    grid-template-columns: 1fr;
    padding: 40px 0;
    gap: 16px;
  }

  .ld-login__sidebar {
    display: none;
  }

  .ld-login__video {
    min-height: 300px;
    border-radius: 16px;
  }

  .ld-login__form-wrapper {
    padding: 24px;
    border-radius: 16px;
  }

  .ld-register {
    padding: 0 16px;
  }

  .ld-register__inner {
    grid-template-columns: 1fr;
    padding: 40px 0;
  }

  .ld-register__sidebar {
    display: none;
  }

  .ld-register__inner .ld-login__video {
    display: none;
  }

  .ld-register__form-wrapper {
    padding: 24px;
    border-radius: 16px;
  }

  .ld-register__form-row {
    grid-template-columns: 1fr;
  }

  .ld-footer {
    padding: 40px 16px;
  }

  .ld-footer__top {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }

  .ld-footer__nav {
    gap: 16px;
  }

  .ld-footer__social {
    justify-content: center;
  }

  .ld-odds-table__header-row,
  .ld-odds-table__row {
    grid-template-columns: 76px 1fr repeat(6, 56px);
    gap: 0;
    padding: 12px 14px;
  }

  .ld-odds-table__header-row {
    padding: 12px 14px;
  }

  .ld-odds-table__header-cell {
    font-size: 10px;
  }

  .ld-odds-table__cell {
    font-size: 11px;
  }

  .ld-past-result__content {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .ld-header__bar {
    height: 70px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: none;
  }

  .ld-hero__title {
    font-size: 28px;
    line-height: 36px;
  }

  .ld-hero__badges {
    gap: 6px;
  }

  .ld-hero__badge {
    font-size: 12px;
    height: 36px;
    padding: 0 12px 0 6px;
  }

  .ld-match-card__body {
    padding: 16px;
  }

  .ld-match-card__teams {
    gap: 16px;
  }

  .ld-match-card__team-logo {
    width: 48px;
    height: 48px;
  }

  .ld-matchcard {
    border-radius: 12px;
  }

  .ld-matchcard__header {
    padding: 16px;
  }

  .ld-matchcard__divider {
    margin: 16px;
  }

  .ld-matchcard__teams {
    padding: 0 16px;
  }

  .ld-matchcard__quotes {
    margin: 0 16px 16px;
    padding: 12px;
    gap: 12px;
    height: auto;
    flex-direction: column;
  }

  .ld-matchcard__advantage {
    padding: 8px 16px;
  }

  .ld-login__benefits {
    grid-template-columns: 1fr;
  }

  .ld-footer__nav {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .ld-odds-table {
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ld-odds-table__header-row,
  .ld-odds-table__row {
    grid-template-columns: 78px 100px repeat(6, 52px);
    min-width: 490px;
    padding: 10px 0;
    position: relative;
  }

  /* Frozen col 1: value-bet badge stays in place during horizontal scroll */
  .ld-odds-table__cell--vb,
  .ld-odds-table__header-cell--vb {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-bg-white);
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 38px;
  }

  /* Highlighted-row variant keeps the green tint when sticky */
  .ld-odds-table__row--highlighted .ld-odds-table__cell--vb {
    background: #F0F8EC;
  }

  /* Header sticky cell — match the dark header bg */
  .ld-odds-table__header-cell--vb {
    background: var(--color-dark);
  }

  /* Sign column (col 2) — left-align, no wrap */
  .ld-odds-table__cell--sign {
    text-align: left !important;
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Section header (UNDER/OVER 0,5 etc.) spans all cols so its muted
     background covers the full scroll width. NB: making the full-width row
     sticky does NOT pin it — a sticky box as wide as the scroll content has
     no travel room. We pin the narrow TITLE instead (below). */
  /* Flex (come le righe in grid) così il titolo-figlio può agganciarsi in
     sticky: un figlio sticky di un blocco semplice non "viaggia", mentre un
     item di un contenitore flex/grid largo quanto lo scroll sì. */
  .ld-odds-table__section-header {
    display: flex;
    align-items: center;
    min-width: 490px;
    padding: 10px 0;
    /* overflow:hidden su questo contenitore romperebbe lo sticky del titolo
       (si aggancerebbe a questa box che scorre, non alla tabella). */
    overflow: visible;
  }

  /* Riccardo: il titolo di sezione (1X2, Under/Over...) deve restare fisso
     mentre la tabella scorre a dx/sx. Sticky a sinistra: essendo stretto ha
     spazio per "agganciarsi" e resta visibile durante lo scroll. */
  .ld-odds-table__section-title {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding: 0 5px;
    background: var(--color-bg-muted);
  }

  /* Restore per-cell horizontal padding (we zeroed the row's left/right) */
  .ld-odds-table__cell:not(.ld-odds-table__cell--vb):not(.ld-odds-table__cell--sign) {
    padding: 0 4px;
  }

  .ld-past-result__details {
    gap: 8px;
  }

  .ld-past-result__type {
    min-width: 40px;
  }

  .ld-odds-table__header-cell {
    font-size: 9px;
  }

  .ld-odds-table__cell {
    font-size: 10px;
  }

  .ld-odds-table__cell--label {
    font-size: 11px;
  }

  .ld-past-result__content {
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
  }

  .ld-past-result__details {
    width: 100%;
    justify-content: flex-end;
  }

  /* On real phone widths the 1fr / 300px split crushes the main content,
     so stack the standings rail under the content instead. */
  .ld-content-page__layout--3col:not(.ld-content-page__layout--wide-right) {
    grid-template-columns: 1fr;
  }
  .ld-content-page__layout--3col:not(.ld-content-page__layout--wide-right) .ld-content-page__sidebar--right {
    position: static;
    margin-top: 16px;
  }

  .ld-dritta-page__layout:has(.ld-dritta-page__sidebar--right) {
    grid-template-columns: 1fr;
  }
  .ld-dritta-page__layout:has(.ld-dritta-page__sidebar--right) .ld-dritta-page__sidebar--right {
    position: static;
    margin-top: 16px;
  }
}

/* ============================================================
   VALUE BETS PAGE
   ============================================================ */
.ld-valuebets {
  padding: 0;
}

.ld-valuebets__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -0.5px;
  color: var(--color-black);
  margin: 0 0 24px 0;
  text-align: left;
}

/* Type selector tabs (Under/Over, Gol/Nogol, 1X2, Tutti) */
.ld-valuebets__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.ld-valuebets__type-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.ld-valuebets__type-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-black);
}

.ld-valuebets__type-tab.is-active {
  /* C9 bug fix: era bg --color-dark che, su sezioni col bg scuro del legacy layout,
     risultava "nero su nero" e illeggibile. Ora usiamo l'arancio primary che
     mantiene contrasto su QUALSIASI sfondo. */
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0px 2px 12px 0px rgba(253, 127, 0, 0.35);
}
.ld-valuebets__type-tab.is-active:hover {
  /* Bonus: non rendere "bianca su bianca" l'hover dell'active */
  background: var(--color-primary-hover, #FF9A33);
  color: #fff;
}
.ld-valuebets__type-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Day navigation tabs */
.ld-valuebets__day-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.ld-valuebets__day-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.ld-valuebets__day-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-black);
}

.ld-valuebets__day-tab.is-active {
  background: var(--color-dark);
  color: #fff;
  box-shadow: 0px 2px 12px 0px rgba(5, 34, 0, 0.25);
}

/* Cards list */
.ld-valuebets__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Empty state */
.ld-valuebets__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary);
}

.ld-valuebets__empty i {
  font-size: 32px;
  margin-bottom: 12px;
  display: block;
  opacity: 0.4;
}

.ld-valuebets__empty p {
  font-family: var(--font-heading);
  font-size: 15px;
  margin: 0;
}

/* Value Bets Card */
.ld-valuebets-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.ld-valuebets-card__header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--color-border);
}

.ld-valuebets-card__match {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 4px 0;
  text-align: left;
}

.ld-valuebets-card__match a {
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.15s;
}

.ld-valuebets-card__match a:hover {
  color: var(--color-primary);
}

.ld-valuebets-card__meta {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
}

.ld-valuebets-card__meta:hover {
  color: var(--color-primary);
}

/* Table */
.ld-valuebets-card__table-wrap {
  overflow-x: auto;
  position: relative;
  /* Riccardo #4: scroll-shadow per indicare che la tabella quote scorre
     orizzontalmente (le colonne bookmaker erano tagliate a destra). */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.10), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.10), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.ld-valuebets-card__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
}

.ld-valuebets-card__table thead {
  background: var(--color-dark);
  color: #fff;
}

.ld-valuebets-card__table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  white-space: nowrap;
}

.ld-valuebets-card__table tbody td {
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  vertical-align: middle;
  border-bottom: none;
}

.ld-valuebets-card__prediction {
  font-weight: 700;
}

.ld-valuebets-card__value-cell {
  font-weight: 700;
}

.ld-valuebets-card__badge {
  display: inline-block;
  background: var(--color-bg-muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}

.ld-valuebets-card__badge--pct {
  background: rgba(40, 142, 10, 0.1);
  color: #288E0A;
  font-weight: 700;
}

/* FASE C #3: Sub-tabs Testa a testa / Casa-Trasferta / Scontri Diretti */
.ld-h2h-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
  justify-content: center;
}
.ld-h2h-subtab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  /* Stato inattivo su fondo CHIARO (es. head-to-head sopra #FAFAFA): pill grigia
     come le date-tab del design system — niente più "bianco su bianco". */
  border: 1px solid var(--color-border);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
}
.ld-h2h-subtab:hover {
  background: var(--color-bg-hover);
  color: var(--color-black);
  border-color: var(--color-border-button);
}
.ld-h2h-subtab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 12px rgba(253, 127, 0, 0.25);
}
.ld-h2h-subtab i { font-size: 12px; }

/* Variante su fondo SCURO: nella card "Confronta squadre" i subtab stanno sopra
   la foto dello stadio. Le pill chiare sparivano sulle zone luminose della foto
   ("bianco su bianco"): qui usano un fill traslucido frosted con bordo netto. */
.ld-matchcard .ld-h2h-subtab {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ld-matchcard .ld-h2h-subtab:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #fff;
  color: #fff;
}
.ld-matchcard .ld-h2h-subtab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 2px 14px rgba(253, 127, 0, 0.45);
}

/* ── Confronta squadre — layout DESKTOP della card ──
   I subtab erano stretti nella colonna centrale (~280px) tra i due loghi e
   andavano a capo. Qui i due team restano affiancati in alto e i subtab passano
   su una riga piena sotto, centrati (su mobile ≤640px resta il layout a griglia).*/
@media (min-width: 641px) {
  .ld-matchcard--compare .ld-matchcard__teams {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 12px;
  }
  .ld-matchcard--compare .ld-matchcard__team {
    order: 1;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .ld-matchcard--compare .ld-matchcard__center {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
  }
  .ld-matchcard--compare .ld-h2h-subtabs {
    width: 100%;
    margin: 4px auto 0;
  }
}

/* FASE C #3: Pronostico button inside testa-a-testa matchcard center */
.ld-matchcard__prono-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: var(--color-primary);
  color: white !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease;
}
.ld-matchcard__prono-btn:hover {
  background: var(--color-primary-hover, #FF9A33);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(253, 127, 0, 0.35);
}

/* C9 bug 3: empty state per quando tutti i pronostici sono gain<=0 (filtrati) */
.ld-valuebets__empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 24px;
  background: var(--color-bg-muted);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: 15px;
  margin: 16px 0;
}
.ld-valuebets__empty i {
  color: var(--color-primary);
  font-size: 20px;
  flex-shrink: 0;
}

/* C9 bug 2: quota più alta evidenziata con badge gold (era sempre Snai = bookmaker[0]) */
.ld-valuebets-card__badge--best {
  background: linear-gradient(135deg, rgba(255, 216, 49, 0.18) 0%, rgba(255, 216, 49, 0.32) 100%);
  color: var(--color-dark);
  font-weight: 800;
  border: 1px solid rgba(255, 216, 49, 0.55);
  box-shadow: 0 0 12px rgba(255, 216, 49, 0.25);
  position: relative;
}
.ld-valuebets-card__badge--best::before {
  content: '\f005'; /* fa-star */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  color: var(--color-gold);
  margin-right: 5px;
  vertical-align: middle;
}

.ld-valuebets-card__gain {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
}

.ld-valuebets-card__gain.is-positive {
  background: rgba(40, 142, 10, 0.1);
  color: #288E0A;
}

.ld-valuebets-card__gain.is-negative {
  background: rgba(205, 3, 3, 0.1);
  color: #cd0303;
}

/* Mobile responsive for value bets */
@media (max-width: 768px) {
  .ld-valuebets__title {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 16px;
  }

  /* Each nav becomes a labeled, scrollable, color-coded pill bar.
     - Orange family identifies the prediction-type row
     - Dark-green family identifies the date row
     This makes the two control rows visually unmistakable on a small screen. */
  .ld-valuebets__nav,
  .ld-valuebets__day-nav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .ld-valuebets__nav::-webkit-scrollbar,
  .ld-valuebets__day-nav::-webkit-scrollbar { display: none; }

  .ld-valuebets__nav {
    background: linear-gradient(135deg, rgba(253, 127, 0, 0.07) 0%, rgba(253, 127, 0, 0.02) 100%);
    border: 1px solid rgba(253, 127, 0, 0.22);
  }
  .ld-valuebets__day-nav {
    background: linear-gradient(135deg, rgba(5, 34, 0, 0.055) 0%, rgba(5, 34, 0, 0.015) 100%);
    border: 1px solid rgba(5, 34, 0, 0.16);
    margin-bottom: 24px;
  }

  .ld-valuebets__nav::before,
  .ld-valuebets__day-nav::before {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    flex-shrink: 0;
    padding-right: 10px;
    margin-right: 2px;
    line-height: 1;
    border-right: 1px solid currentColor;
    opacity: 0.85;
  }
  .ld-valuebets__nav::before {
    content: 'PRONO';
    color: var(--color-primary-dark);
  }
  .ld-valuebets__day-nav::before {
    content: 'DATA';
    color: var(--color-dark);
  }

  /* Riccardo #4: "serve qualcosa sopra a prono (una freccia?) per capire
     che scorrendo ci sono altri tipi di value bet e altre date". Chevron
     pinned all'estremità destra di ciascuna riga scrollabile, con leggera
     animazione di richiamo. position:sticky lo tiene visibile mentre si scrolla. */
  .ld-valuebets__nav::after,
  .ld-valuebets__day-nav::after {
    content: '\203A';
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: 18px;
    margin-left: -6px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    animation: ldVbNudge 1.3s ease-in-out infinite;
  }
  .ld-valuebets__nav::after {
    color: var(--color-primary);
    background: linear-gradient(to right, rgba(255, 245, 235, 0) 0%, #fdf3ea 70%);
  }
  .ld-valuebets__day-nav::after {
    color: var(--color-dark);
    background: linear-gradient(to right, rgba(240, 245, 240, 0) 0%, #eef3ee 70%);
  }
  @keyframes ldVbNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }

  /* Type tabs: orange family */
  .ld-valuebets__type-tab {
    flex-shrink: 0;
    background: #fff;
    color: var(--color-primary-dark);
    border: 1px solid rgba(253, 127, 0, 0.30);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 12px;
    box-shadow: 0 1px 2px rgba(253, 127, 0, 0.05);
  }
  .ld-valuebets__type-tab:hover {
    background: rgba(253, 127, 0, 0.08);
    color: var(--color-primary-dark);
  }
  .ld-valuebets__type-tab.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(253, 127, 0, 0.32);
  }

  /* Day tabs: dark-green family */
  .ld-valuebets__day-tab {
    flex-shrink: 0;
    background: #fff;
    color: var(--color-dark);
    border: 1px solid rgba(5, 34, 0, 0.20);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 12px;
    box-shadow: 0 1px 2px rgba(5, 34, 0, 0.04);
  }
  .ld-valuebets__day-tab:hover {
    background: rgba(5, 34, 0, 0.06);
    color: var(--color-dark);
  }
  .ld-valuebets__day-tab.is-active {
    background: var(--color-dark);
    color: #fff;
    border-color: var(--color-dark);
    box-shadow: 0 4px 14px rgba(5, 34, 0, 0.28);
  }

  .ld-valuebets-card__header {
    padding: 12px 16px 10px;
  }

  .ld-valuebets-card__match {
    font-size: 14px;
  }

  .ld-valuebets-card__table {
    font-size: 12px;
  }

  .ld-valuebets-card__table thead th {
    font-size: 10px;
    padding: 8px 6px;
  }

  .ld-valuebets-card__table tbody td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .ld-valuebets-card__badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .ld-valuebets-card__gain {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* ============================================================
   TOURNAMENT NAV (reused across prediction, stats pages)
   ============================================================ */
.ld-tournament-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ld-tournament-nav .ld-dritta-tab img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: filter 0.2s;
}

/* Inactive: tint icon to text-secondary so it's visible on white bg */
.ld-tournament-nav .ld-dritta-tab:not(.ld-dritta-tab--active) img {
  filter: brightness(0) saturate(100%) invert(50%) sepia(11%) saturate(98%) hue-rotate(202deg) brightness(91%) contrast(86%);
}

/* Tint icon green to match text on hover (non-active) */
.ld-tournament-nav .ld-dritta-tab:not(.ld-dritta-tab--active):hover img {
  filter: brightness(0) saturate(100%) invert(33%) sepia(89%) saturate(601%) hue-rotate(74deg) brightness(94%) contrast(97%);
}

/* Invert icon to white for active tab */
.ld-tournament-nav .ld-dritta-tab--active img {
  filter: brightness(0) invert(1);
}

/* ============================================================
   PREDICTION PAGE (single match pronostico)
   ============================================================ */
.ld-prediction {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ld-prediction__nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ld-prediction__section {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  overflow: hidden;
}

.ld-prediction__section-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-black);
  margin: 0 0 4px 0;
  text-align: center;
}

.ld-prediction__section-subtitle {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 24px 0;
}

.ld-prediction__section-subtitle strong {
  color: #288E0A;
}

/* Prediction Analysis Table */
.ld-prediction__table-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.ld-prediction__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14px;
}

.ld-prediction__table thead {
  background: var(--color-dark);
  color: #fff;
}

.ld-prediction__table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 12px;
  white-space: nowrap;
}

.ld-prediction__table-th--wide {
  min-width: 160px;
}

.ld-prediction__table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-black);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.ld-prediction__table-group td {
  background: var(--color-bg-muted);
}

.ld-prediction__table-group-title {
  font-weight: 700;
  text-align: left;
}

.ld-prediction__table-evidence {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.ld-prediction__margin {
  color: #288E0A;
  font-weight: 700;
  font-size: 13px;
}

.ld-prediction__vb-badge {
  display: inline-block;
  background: rgba(255, 216, 49, 0.15);
  color: var(--color-gold-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Probable Result */
.ld-prediction__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ld-prediction__result-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-dark);
  padding: 8px 24px;
  border-radius: 8px 8px 0 0;
}

.ld-prediction__result-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: #288E0A;
  border: 2px solid rgba(40, 142, 10, 0.3);
  padding: 10px 32px;
  border-radius: 0 0 8px 8px;
}

.ld-prediction__nav-mobile {
  display: none;
}

/* Mobile for prediction page */
@media (max-width: 768px) {
  .ld-prediction__section {
    padding: 20px 16px;
  }

  .ld-prediction__section-title {
    font-size: 16px;
  }

  .ld-prediction__table thead th {
    font-size: 10px;
    padding: 8px 6px;
  }

  .ld-prediction__table tbody td {
    padding: 8px 6px;
    font-size: 12px;
  }

  .ld-prediction__table-th--wide {
    min-width: 120px;
  }

  /* Riccardo #2: "quando scorri da destra a sinistra scorre anche il tipo
     di pronostico, quello dovrebbe rimanere fisso". Freeze the two leftmost
     columns (value-bet evidence + the Pronostico selection) so you always
     know which prono you're reading while scrolling to the bookmaker odds. */
  .ld-prediction__table th:first-child,
  .ld-prediction__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
    background: #fff;
  }
  .ld-prediction__table thead th:first-child {
    background: var(--color-dark);
  }
  .ld-prediction__table-group td:first-child {
    background: var(--color-bg-muted);
  }
  .ld-prediction__table tbody tr:not(.ld-prediction__table-group) td:nth-child(2),
  .ld-prediction__table thead th:nth-child(2) {
    position: sticky;
    left: 120px;
    z-index: 3;
    min-width: 84px;
    background: #fff;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
  }
  .ld-prediction__table thead th:nth-child(2) {
    background: var(--color-dark);
  }
  /* Stack the value-bet evidence vertically inside the now-narrow frozen
     column so "+8.70% / VALUE BET" stays legible. */
  .ld-prediction__table-evidence {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  /* Riccardo #11: sulle pagine "pronostico" interne mancava il menu
     (testa a testa / classifica / calendario / sequenze) su mobile: i tab
     belli (.ld-prediction__nav → .ld-dritta-tabs) erano nascosti e restava
     solo la vecchia barra flottante in basso, spesso invisibile. Mostriamo
     i tab subito sotto la match card, come sulle pagine campionato. */
  .ld-prediction__nav {
    display: block;
  }

  .ld-prediction__nav-mobile {
    display: none;
  }
}

/* ============================================================
   ELEVENLABS WIDGET — compact, less invasive on mobile
   ============================================================ */
elevenlabs-convai#ld-elevenlabs-widget,
body > elevenlabs-convai {
  --ldd-widget-z: 9999;
}

@media (max-width: 768px) {
  /* On mobile, scale the entire widget down so the welcome card / texts
     occupy less than half the previous footprint. Anchored bottom-right.
     Note: ElevenLabs widget renders most chrome via shadow DOM; transform
     is the most reliable lever from the host CSS. */
  elevenlabs-convai#ld-elevenlabs-widget,
  body > elevenlabs-convai {
    transform: scale(0.65) !important;
    transform-origin: bottom right !important;
  }
}

/* ============================================================
   TOURNAMENT / TEAM PAGES (campionati, calendario, sequenze,
   confronta-squadre, squadra) — adapt legacy markup to the
   new design system.
   ============================================================ */

.ld-redesign #content {
  text-align: left !important;
  padding: 0 !important;
}

.ld-redesign #content > .inner-content {
  padding: 0 !important;
  max-width: 100%;
}

/* Tournament page header (used on campionati, calendario, sequenze) */
.ld-redesign .ld-tournament-nav {
  margin-bottom: 24px;
}

.ld-redesign #content .inner-content > h1.h6,
.ld-redesign #content .inner-content > .banner-page h1.h6,
.ld-redesign #content .ld-page-header__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 12px 0 6px;
  text-align: left;
}

.ld-redesign #content .inner-content > h2.h4,
.ld-redesign #content .inner-content > h2.h3,
.ld-redesign #content .ld-page-header__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-black);
  margin: 0 0 28px;
  text-align: left;
}

#float-buttons{
  display: none;
}

/* Season / generic selector inside tournament pages */
.ld-redesign #content .inner-content .form-select,
.ld-redesign .historic-teams .form-select,
.ld-redesign select.selectslides {
  min-width: 300px !important;
  height: 42px;
  padding: 0 36px 0 16px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-black) !important;
  background-color: var(--color-bg-white) !important;
  border: 1px solid #CBCED4 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 20px;
  max-width: 100%;
}

@media (max-width: 480px) {
  .ld-redesign #content .inner-content .form-select,
  .ld-redesign .historic-teams .form-select,
  .ld-redesign select.selectslides {
    min-width: 100% !important;
    padding: 0 16px !important;
  }
}

.ld-redesign #content .inner-content .form-select:hover {
  border-color: var(--color-primary) !important;
}

.ld-redesign #content .inner-content .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.12) !important;
  outline: none;
}

/* Override slider mini selector */
.ld-redesign .slider-top-green .bc-navigation .form-select {
  border: 1px solid var(--color-border-button) !important;
  font-weight: 500 !important;
  color: var(--color-black) !important;
  font-size: 13px !important;
  height: 36px;
  padding: 0 28px 0 12px !important;
  margin: 0 8px 0 0 !important;
}

/* Slider prev/next buttons */
.ld-redesign .slider-top-green .btn-slide-prev,
.ld-redesign .slider-top-green .btn-slide-next {
  background: var(--color-bg-white) !important;
  border: 1px solid var(--color-border-button);
  color: var(--color-black) !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  transition: all 0.2s;
}

.ld-redesign .slider-top-green .btn-slide-prev:hover,
.ld-redesign .slider-top-green .btn-slide-next:hover {
  background: var(--color-bg-muted) !important;
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
}

.ld-redesign .slider-top-green .btn-slide-prev i,
.ld-redesign .slider-top-green .btn-slide-next i {
  color: var(--color-text-secondary) !important;
}

.ld-redesign .slider-top-green .btn-slide-prev:hover i,
.ld-redesign .slider-top-green .btn-slide-next:hover i {
  color: var(--color-primary) !important;
}

/* Round header on top of each match table */
.ld-redesign .slider-top-green .swiper-slide .table-wrapper > h3,
.ld-redesign .table-wrapper > h3.bg-ld-green,
.ld-redesign h3.bg-ld-green {
  background: var(--color-dark) !important;
  color: white !important;
  font-family: var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0 !important;
  padding: 13px 16px !important;
  margin: 0;
}

/* Tables inside slider/sequences should not have the global bordered look on top */
.ld-redesign .slider-top-green .table,
.ld-redesign .table-wrapper > .table {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
}

/* Match prediction pill buttons */
.ld-redesign .badge.bg-ld-green,
.ld-redesign .badge.bg-ld-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px !important;
  border-radius: 999px !important;
  text-decoration: none;
  transition: all 0.2s;
  color: white !important;
}

.ld-redesign .badge.bg-ld-green {
  background: #288E0A !important;
}

.ld-redesign .badge.bg-ld-orange {
  background: var(--color-primary) !important;
}

.ld-redesign .badge.bg-ld-green:hover,
.ld-redesign .badge.bg-ld-orange:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Standings — small position chip */
.ld-redesign .td-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

.ld-redesign .bg-ld-position-norm { background: var(--color-text-secondary) !important; color: white; }
.ld-redesign .bg-ld-position-green { background: #288E0A !important; color: white; }
.ld-redesign .bg-ld-position-yellow { background: var(--color-gold) !important; color: var(--color-gold-text) !important; }
.ld-redesign .bg-ld-position-blue { background: #2563EB !important; color: white; }
.ld-redesign .bg-ld-position-red { background: #D4183D !important; color: white; }
.ld-redesign .bg-ld-position-orange { background: var(--color-primary) !important; color: white; }

/* Standings team-name link */
.ld-redesign #content .inner-content table td a,
.ld-redesign .table-shadow-2 td a {
  color: var(--color-black) !important;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.ld-redesign #content .inner-content table td a:hover {
  color: var(--color-primary) !important;
}

/* Last 5 matches icon column */
.ld-redesign .c-ld-green { color: #288E0A !important; }
.ld-redesign .c-ld-yellow { color: var(--color-gold) !important; }
.ld-redesign .c-ld-red { color: #D4183D !important; }
.ld-redesign .c-ld-grey { color: var(--color-text-secondary) !important; }
.ld-redesign .c-ld-white { color: white !important; }

/* Standings legend */
.ld-redesign .table-shadow-2 + .mx-auto {
  margin-top: 16px !important;
}

.ld-redesign .table-shadow-2 + .mx-auto .row {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 8px 16px;
  margin: 0;
}

.ld-redesign .table-shadow-2 + .mx-auto .col {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--color-black) !important;
  padding: 8px !important;
  text-align: left;
}

/* ----------------------------------------------------------
   PAGE BANNER (compare-teams, team-historical)
   Replace stadium image with clean dark green banner card.
   ---------------------------------------------------------- */
.ld-redesign #content .banner-page {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(5, 34, 0, 0.55) 60%, rgba(5, 34, 0, 0.85) 100%), url('/images/bg/sfondopronostici.png') center top / cover no-repeat;
}
.ld-redesign #content .banner-page,
.ld-redesign #content .banner-page.compare-teams,
.ld-redesign #content .banner-page.head-tohead-1,
.ld-redesign #content .banner-page.head-tohead-2,
.ld-redesign #content .banner-page.team-prospect {
  position: relative;
/*
  background-color: var(--color-dark) !important;
  background-image: linear-gradient(135deg, var(--color-dark) 0%, #073400 100%) !important;
*/
  border-radius: 16px;
  padding: 32px 32px 40px !important;
  margin-bottom: 32px;
  overflow: hidden;
  color: white;
}

.ld-redesign #content .banner-page::after {
  display: none !important;
}

.ld-redesign #content .banner-page .inner-banner-page {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.ld-redesign #content .banner-page .ld-tournament-nav {
  margin-bottom: 32px;
  justify-content: flex-start;
}

/* Pills inside dark banner — bg-white pills become outlined to keep contrast */
.ld-redesign #content .banner-page .ld-dritta-tab {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}

.ld-redesign #content .banner-page .ld-dritta-tab:hover {
  background: rgba(255, 255, 255, 0.16);
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.ld-redesign #content .banner-page .ld-dritta-tab--active {
  background: var(--color-gold) !important;
  color: var(--color-gold-text) !important;
  border-color: var(--color-gold);
}

.ld-redesign #content .banner-page .ld-dritta-tab--active:hover {
  background: var(--color-gold-hover) !important;
  color: var(--color-gold-text) !important;
  border-color: var(--color-gold-hover);
}

.ld-redesign #content .banner-page .ld-tournament-nav .ld-dritta-tab img {
  filter: brightness(0) invert(1);
}

.ld-redesign #content .banner-page .ld-tournament-nav .ld-dritta-tab--active img {
  filter: brightness(0) saturate(100%) invert(11%) sepia(67%) saturate(2400%) hue-rotate(95deg) brightness(95%) contrast(98%);
}

.ld-redesign #content .banner-page .content-banner-page {
  text-align: center;
  margin-top: 8px;
}

.ld-redesign #content .banner-page h1.h6 {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 8px !important;
  text-align: center;
}

.ld-redesign #content .banner-page h2.h3,
.ld-redesign #content .banner-page h2.h4 {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  color: white !important;
  margin: 0 0 32px !important;
  text-align: center;
}

.ld-redesign #content .banner-page h2.h3 a,
.ld-redesign #content .banner-page h2.h4 a {
  color: white !important;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 216, 49, 0.4);
  transition: border-color 0.2s;
}

.ld-redesign #content .banner-page h2.h3 a:hover,
.ld-redesign #content .banner-page h2.h4 a:hover {
  border-color: var(--color-gold);
}

/* Compare teams: two team headers */
.ld-redesign #content .banner-page .bp-teams {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.ld-redesign #content .banner-page .bp-teams .col-5,
.ld-redesign #content .banner-page .bp-teams .col-md-4 {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px 16px !important;
  flex: 0 0 auto;
  width: 200px;
  max-width: 45%;
  text-align: center;
}

.ld-redesign #content .banner-page .bp-teams img {
  max-width: 96px !important;
  height: auto;
  width: 96px !important;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

.ld-redesign #content .banner-page .bp-teams .form-select,
.ld-redesign #content .banner-page .form-select {
  width: 100%;
  margin: 0 !important;
  background-color: var(--color-bg-white) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* Single-team banner (team-historical) */
.ld-redesign #content .banner-page .bp-single-team {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.ld-redesign #content .banner-page .bp-single-team .col-8,
.ld-redesign #content .banner-page .bp-single-team .col-sm-6,
.ld-redesign #content .banner-page .bp-single-team .col-md-5 {
  text-align: center;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.ld-redesign #content .banner-page .bp-single-team img {
  max-width: 140px !important;
  width: 140px !important;
  height: auto !important;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.3));
}

.ld-redesign #content .banner-page .bp-single-team p {
  font-family: var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: white !important;
  margin: 0 !important;
}

/* Compare teams: H2H / HOME-AWAY / DIRECT MATCHES buttons */
.ld-redesign #content .banner-page .btn-teams-stats,
.ld-redesign .btn-teams-stats {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
  transition: all 0.2s;
  margin: 0 6px !important;
}

.ld-redesign #content .banner-page .btn-teams-stats:hover,
.ld-redesign .btn-teams-stats:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.ld-redesign #content .banner-page .btn-teams-stats.bg-ld-yellow,
.ld-redesign .btn-teams-stats.bg-ld-yellow {
  background: var(--color-gold) !important;
  color: var(--color-gold-text) !important;
  border-color: var(--color-gold) !important;
  box-shadow: var(--shadow-gold);
}

.ld-redesign #content .banner-page .btn-teams-stats.bg-ld-yellow:hover,
.ld-redesign .btn-teams-stats.bg-ld-yellow:hover {
  background: var(--color-gold-hover) !important;
  border-color: var(--color-gold-hover) !important;
  box-shadow: var(--shadow-gold-hover);
}

/* Historic teams grid (results-and-schedule page) */
.ld-redesign .historic-teams {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px;
  margin-top: 32px;
}

.ld-redesign .historic-teams h3 {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  line-height: 28px;
  font-weight: 700 !important;
  color: var(--color-black) !important;
  margin: 0 0 24px !important;
  text-align: center;
}

.ld-redesign .historic-teams h3 .c-ld-green {
  color: var(--color-primary) !important;
}

.ld-redesign .historic-teams .box-hover-grey {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 110px;
  padding: 16px 12px !important;
  margin: 8px !important;
  border-radius: 12px !important;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  transition: all 0.2s;
  text-decoration: none;
  color: var(--color-black) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.ld-redesign .historic-teams .box-hover-grey:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.ld-redesign .historic-teams .box-hover-grey img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  margin-bottom: 8px;
}

.ld-redesign .historic-teams .box-hover-grey span {
  display: block;
}

/* Sequences page columns */
.ld-redesign .ld-redesign #content .row {
  margin-left: 0;
  margin-right: 0;
}

/* Tournament-nav-mobile — hide on desktop, show simplified on mobile */
.ld-redesign .ld-tournament-nav-mobile {
  display: none;
}

/* Compare-teams page: stat buttons row */
.ld-redesign .bp-stat-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ----------------------------------------------------------
   Compare-teams banner: use the same stadium "matchcard" look
   as /ladritta-del-giorno (stadium image bg + dark overlay,
   circular team logos with white fill).
   ---------------------------------------------------------- */
.ld-redesign #content .banner-page.compare-teams {
  background-color: var(--color-dark) !important;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(5, 34, 0, 0.55) 60%, rgba(5, 34, 0, 0.85) 100%),
    url('/images/bg/sfondopronostici.png') !important;
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  border-radius: 16px;
  box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.25);
  padding: 24px 32px 32px !important;
  margin-bottom: 32px;
  overflow: hidden;
  color: white;
}

.ld-redesign #content .banner-page.compare-teams::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
}

.ld-redesign #content .banner-page.compare-teams .content-banner-page {
  text-align: center;
}

/* "CONFRONTA SQUADRE" label — match matchcard label style */
.ld-redesign #content .banner-page.compare-teams h1.h6 {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 6px !important;
  position: relative;
  padding-left: 14px;
  display: inline-block;
}

.ld-redesign #content .banner-page.compare-teams h1.h6::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Tournament line — match matchcard tournament-info style */
.ld-redesign #content .banner-page.compare-teams h2.h3 {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 24px !important;
  text-align: center;
  border: 0 !important;
}

/* Team containers: transparent, no inner card — circular logos do the work */
.ld-redesign #content .banner-page.compare-teams .bp-teams {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 24px;
}

.ld-redesign #content .banner-page.compare-teams .bp-teams .col-5,
.ld-redesign #content .banner-page.compare-teams .bp-teams .col-md-4 {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 200px;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Make each team logo image render at matchcard size — NO white circle behind (DEBUG2 #1) */
.ld-redesign #content .banner-page.compare-teams .bp-teams img {
  width: 120px !important;
  max-width: 120px !important;
  height: 120px !important;
  background: transparent;
  border-radius: 0;
  border: 0;
  padding: 0;
  object-fit: contain;
  filter: none;
  margin: 0 !important;
}

.ld-redesign #content .banner-page.compare-teams .bp-teams p {
  margin: 0 !important;
  width: 100%;
}

/* Team-name dropdown sits below the logo, semi-transparent on the dark bg */
.ld-redesign #content .banner-page.compare-teams .bp-teams .form-select {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--color-dark) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
  text-align: center;
}

@media (max-width: 768px) {
  .ld-redesign #content .banner-page.compare-teams {
    padding: 20px 16px 24px !important;
  }
  .ld-redesign #content .banner-page.compare-teams .bp-teams {
    gap: 16px;
  }
  .ld-redesign #content .banner-page.compare-teams .bp-teams img {
    width: 88px !important;
    max-width: 88px !important;
    height: 88px !important;
    padding: 8px;
  }
}

/* Compare-teams page: charts grid container */
.ld-redesign .slider-vs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 !important;
}

/* Riccardo #10: intestazione con nome+stemma squadra sopra ogni blocco
   statistiche, così si capisce a quale squadra appartengono (prima erano
   impilate senza riferimento, specie su mobile). */
.ld-redesign .ld-h2h-team-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--color-dark);
  border-radius: 10px;
  color: #fff;
}
.ld-redesign .ld-h2h-team-heading img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.ld-redesign .ld-h2h-team-heading span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}

/* Beat the grid !important when JS toggles d-none to hide the row */
.ld-redesign .slider-vs.d-none {
  display: none !important;
}

.ld-redesign .slider-vs > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ld-redesign .slider-vs .colvs-1,
.ld-redesign .slider-vs .colvs-2 {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px !important;
}

/* ============================================================
   H2H — carosello squadre su MOBILE (Riccardo): le due colonne
   diventano 2 slide scorrevoli (swipe nativo via scroll-snap) con
   frecce + indicatore squadre. Desktop invariato (2 colonne grid).
   ============================================================ */
.ld-h2h-carousel-nav {
  display: none; /* solo mobile (attivato nella media query sotto) */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ld-h2h-carousel-nav.is-hidden {
  display: none !important;
}
.ld-h2h-carousel-nav__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-button);
  border-radius: 10px;
  color: var(--color-black);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
}
.ld-h2h-carousel-nav__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.ld-h2h-carousel-nav__arrow:not(:disabled):hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.ld-h2h-carousel-nav__teams {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
}
.ld-h2h-carousel-nav__team {
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
  cursor: pointer;
  transition: color 0.18s;
}
.ld-h2h-carousel-nav__team.is-active {
  color: var(--color-primary);
}
.ld-h2h-carousel-nav__sep {
  color: var(--color-border-button);
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .ld-h2h-carousel-nav {
    display: flex;
  }
  /* Le due colonne diventano slide a tutta larghezza: scroll orizzontale
     con snap = swipe nativo. ID + !important per battere il grid del redesign. */
  .ld-redesign #div-teams-stats-graph.slider-vs {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ld-redesign #div-teams-stats-graph.slider-vs::-webkit-scrollbar {
    display: none;
  }
  .ld-redesign #div-teams-stats-graph.slider-vs > .colvs-1,
  .ld-redesign #div-teams-stats-graph.slider-vs > .colvs-2 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }
}

/* Direct matches table wrapper */
.ld-redesign #div-teams-stats-direct-matches {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Team-historical page selectors row */
.ld-redesign #content .inner-content > .d-flex.justify-content-center.flex-nowrap {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px !important;
  gap: 12px;
  flex-wrap: wrap !important;
}

.ld-redesign #content .inner-content > .d-flex.justify-content-center.flex-nowrap .form-select {
  margin: 0 !important;
  flex: 1 1 200px;
  min-width: 160px;
}

@media (max-width: 768px) {
  .ld-redesign #content .banner-page,
  .ld-redesign #content .banner-page.compare-teams {
    padding: 24px 16px !important;
  }
  .ld-redesign #content .banner-page h2.h3,
  .ld-redesign #content .banner-page h2.h4 {
    font-size: 22px !important;
    line-height: 28px !important;
    margin-bottom: 24px !important;
  }
  .ld-redesign #content .banner-page .bp-teams {
    gap: 8px;
  }
  .ld-redesign #content .banner-page .bp-teams .col-5,
  .ld-redesign #content .banner-page .bp-teams .col-md-4 {
    width: 48%;
    padding: 12px 8px !important;
  }
  .ld-redesign #content .banner-page .bp-teams img {
    max-width: 64px !important;
    width: 64px !important;
  }
  .ld-redesign #content .banner-page .btn-teams-stats,
  .ld-redesign .btn-teams-stats {
    font-size: 10px !important;
    padding: 8px 12px !important;
    margin: 0 4px !important;
  }
  .ld-redesign .slider-vs {
    grid-template-columns: 1fr;
  }
  .ld-redesign #content .inner-content > h2.h4,
  .ld-redesign #content .inner-content > h2.h3 {
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 22px;
  }
  .ld-redesign .table-wrapper .table tbody tr td {
    font-size: 12px;
  }
  .ld-redesign .table-wrapper > h3,
  .ld-redesign .table-wrapper > h3.bg-ld-green {
    font-size: 11px !important;
    padding: 12px 12px !important;
  }
  .ld-redesign .ld-standings__table-header,
  .ld-redesign .ld-standings__row {
    padding: 12px 14px;
    grid-template-columns: 28px 1fr 36px 36px;
  }
  .ld-redesign .ld-standings__col--team {
    font-size: 12px;
  }
  .ld-redesign .historic-teams {
    padding: 20px 16px;
  }
  .ld-redesign .historic-teams .box-hover-grey {
    width: calc(50% - 16px);
  }
}

/* ============================================================
   PREVIEW HEADER — glassmorphic over cinematic hero
   Brand-dark (#052200) base, gold accents, smooth scroll behavior
   ============================================================ */
.ld-header-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(5, 34, 0, 0.55) 0%, rgba(5, 34, 0, 0.15) 100%);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}

.ld-header-preview.is-scrolled,
.ld-redesign .ld-header-preview--solid,
.ld-redesign .ld-header-preview--solid.is-scrolled {
  background: linear-gradient(180deg, rgba(5, 34, 0, 0.96) 0%, rgba(5, 34, 0, 0.92) 100%);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 216, 49, 0.18);
  border-bottom-color: rgba(255, 216, 49, 0.12);
}

/* Solid variant: when not over a cinematic hero (internal pages), keep always dark+opaque */
.ld-redesign .ld-header-preview--solid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid rgba(255, 216, 49, 0.12);
}
.ld-redesign .ld-header-preview--solid .ld-header-preview__accent {
  opacity: 1;
  transform: scaleX(1);
}
/* Body offset so the fixed solid header doesn't cover the page content */
.ld-redesign:not(.ld-preview) main {
  padding-top: 50px;
}

/* Hide legacy internal header (used by layouts/internal.blade.php via value-bets etc.)
   when the unified dark header is active. Same for legacy main header on auth pages. */
.ld-redesign #gen-header,
.ld-redesign .gen-header-style-2,
.ld-redesign #header,
.ld-redesign .mobyf-header,
.ld-redesign .ld-social-row,
.ld-redesign .ld-header__social-strip {
  display: none !important;
}

/* On internal layouts (legacy markup with .innerpage), give content room for the fixed header */
.ld-redesign .innerpage {
  padding-top: 90px;
}

/* Thin gold accent line that pulses on scroll */
.ld-header-preview__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 216, 49, 0) 15%,
    rgba(255, 216, 49, 0.6) 50%,
    rgba(255, 216, 49, 0) 85%,
    transparent 100%);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.ld-header-preview.is-scrolled .ld-header-preview__accent {
  opacity: 1;
  transform: scaleX(1);
}

.ld-header-preview__bar {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 100; /* stay above the fullscreen mobile menu (z-index 99) so toggle stays clickable */
  flex-wrap: nowrap;
}

.ld-header-preview.is-scrolled .ld-header-preview__bar {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Custom 3-line hamburger (replaces FA icon for cleaner look) */
.ld-header-preview__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  cursor: pointer;
  gap: 5px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ld-header-preview__mobile-toggle:hover,
.ld-header-preview__mobile-toggle:focus-visible {
  background: rgba(255, 216, 49, 0.12);
  border-color: rgba(255, 216, 49, 0.4);
  outline: none;
}
.ld-header-preview__mobile-toggle-bar {
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.ld-header-preview__mobile-toggle[aria-expanded="true"] .ld-header-preview__mobile-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--color-gold);
}
.ld-header-preview__mobile-toggle[aria-expanded="true"] .ld-header-preview__mobile-toggle-bar:nth-child(2) {
  opacity: 0;
}
.ld-header-preview__mobile-toggle[aria-expanded="true"] .ld-header-preview__mobile-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--color-gold);
}

.ld-header-preview__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ld-header-preview__logo:hover {
  transform: translateY(-1px);
}

.ld-header-preview__logo img {
  height: 54px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.1));
  transition: height 0.35s ease, filter 0.35s ease;
}
.ld-header-preview.is-scrolled .ld-header-preview__logo img {
  height: 46px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

.ld-header-preview__nav {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.ld-header-preview__nav a {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Slide-in underline (gold) — animates from left */
.ld-header-preview__nav a::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 1.5px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 216, 49, 0.5);
}

.ld-header-preview__nav a:hover,
.ld-header-preview__nav a:focus-visible {
  color: var(--color-gold);
  outline: none;
}
.ld-header-preview__nav a:hover::after,
.ld-header-preview__nav a:focus-visible::after {
  transform: scaleX(1);
}

.ld-header-preview__nav a.active {
  color: var(--color-gold);
  background: rgba(255, 216, 49, 0.1);
}
.ld-header-preview__nav a.active::after {
  transform: scaleX(0.6);
}

.ld-header-preview__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ld-header-preview__btn { white-space: nowrap; flex-shrink: 0; }

/* Visibility helpers — desktop/mobile-only */
.ld-header-preview__desktop-only { display: inline-flex; }
.ld-header-preview__mobile-only { display: none; }

/* User dropdown in preview header (logged-in state) */
.ld-header-preview__actions .dropdown {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.ld-header-preview__actions .ld-user-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  flex-shrink: 0;
}

.ld-header-preview__actions .ld-user-icon--wrap {
  width: 40px;
  height: 40px;
  background: white;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.ld-header-preview__actions .ld-user-toggle:hover .ld-user-icon--wrap,
.ld-header-preview__actions .ld-user-toggle:focus .ld-user-icon--wrap {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.25), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.ld-header-preview__actions .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 12px !important;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 8px;
  min-width: 200px;
  list-style: none;
  z-index: 300;
}

.ld-header-preview__actions .dropdown-menu.show {
  display: block;
}

.ld-header-preview__actions .dropdown-menu li {
  list-style: none;
}

.ld-header-preview__actions .dropdown-menu .dropdown-divider {
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 4px 6px;
}

.ld-header-preview__actions .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ld-header-preview__actions .dropdown-menu .dropdown-item:hover,
.ld-header-preview__actions .dropdown-menu .dropdown-item:focus {
  background: rgba(253, 127, 0, 0.15);
  color: var(--color-primary);
}

.ld-header-preview__actions .dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 4px 6px;
}

@media (max-width: 1024px) {
  .ld-header-preview__actions .ld-user-icon--img {
    width: 36px;
    height: 36px;
  }
}

/* ----------------------------------------------------------------
   CTA buttons — shared base + accedi (outline) + abbonati (gold)
   ---------------------------------------------------------------- */
.ld-header-preview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
  white-space: nowrap;
}

/* ACCEDI — minimal outline, brand neutrale, hover gold */
.ld-header-preview__btn--accedi {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 1.2px;
  font-weight: 600;
  text-transform: none;
  font-size: 14px;
  padding: 10px 20px;
}
.ld-header-preview__btn--accedi:hover,
.ld-header-preview__btn--accedi:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-gold);
  color: var(--color-gold);
  transform: translateY(-1px);
  outline: none;
}

/* ABBONATI — gold gradient with crown, premium feel */
.ld-header-preview__btn--abbonati {
  background: linear-gradient(135deg, #FFD831 0%, #FFE566 100%);
  color: var(--color-dark);
  box-shadow:
    0 4px 16px rgba(255, 216, 49, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset;
  position: relative;
  overflow: hidden;
}

/* Sheen sweep on hover */
.ld-header-preview__btn--abbonati::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ld-header-preview__btn--abbonati:hover::before,
.ld-header-preview__btn--abbonati:focus-visible::before {
  left: 130%;
}

.ld-header-preview__btn--abbonati:hover,
.ld-header-preview__btn--abbonati:focus-visible {
  background: linear-gradient(135deg, #FFE566 0%, #FFF0A0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(255, 216, 49, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset;
  outline: none;
}
.ld-header-preview__btn--abbonati:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255, 216, 49, 0.45);
}

.ld-header-preview__btn--abbonati .fa-crown {
  font-size: 11px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

/* ----------------------------------------------------------------
   Campionati drawer trigger button (always visible: desktop + mobile,
   auth + guest). Desktop shows label + icon, mobile collapses to icon only.
   ---------------------------------------------------------------- */
.ld-header-preview__champ-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.ld-header-preview__champ-btn:hover,
.ld-header-preview__champ-btn:focus-visible {
  background: rgba(255, 216, 49, 0.14);
  border-color: rgba(255, 216, 49, 0.45);
  color: var(--color-gold);
  transform: translateY(-1px);
  outline: none;
}
.ld-header-preview__champ-btn i { font-size: 14px; }
/* Riccardo (header A): "Da desktop non deve comparire il testo Campionati" — icon-only ovunque */
.ld-header-preview__champ-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ld-header-preview__champ-btn {
  padding: 0;
  width: 40px;
  height: 40px;
  gap: 0;
}
@media (max-width: 1024px) {
  .ld-header-preview__champ-btn { width: 42px; height: 42px; }
}
@media (max-width: 480px) {
  .ld-header-preview__champ-btn { width: 38px; height: 38px; }
}

/* ----------------------------------------------------------------
   Campionati drawer (slide-in panel from the LEFT)
   ---------------------------------------------------------------- */
.ld-champ-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.35s;
}
.ld-champ-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.ld-champ-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ld-champ-drawer.is-open .ld-champ-drawer__backdrop { opacity: 1; }

.ld-champ-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 86vw;
  background: var(--color-bg-page);
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ld-champ-drawer.is-open .ld-champ-drawer__panel { transform: translateX(0); }

.ld-champ-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(135deg, #052200 0%, #0a3b00 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 216, 49, 0.18);
  flex-shrink: 0;
}
.ld-champ-drawer__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ld-champ-drawer__title i { color: var(--color-gold); font-size: 16px; }
.ld-champ-drawer__close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ld-champ-drawer__close:hover,
.ld-champ-drawer__close:focus-visible {
  background: rgba(255, 216, 49, 0.16);
  border-color: var(--color-gold);
  color: var(--color-gold);
  outline: none;
}
.ld-champ-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
/* Reset inner sidebar — force visible inside drawer (was 0x0 on mobile because
   .ld-sidebar default has no explicit width and inherits 0 in this context) */
.ld-champ-drawer__body .ld-content-page__sidebar,
.ld-champ-drawer__body .ld-competitions {
  margin: 0;
  padding: 0;
  width: 100%;
}
.ld-champ-drawer__body .ld-sidebar {
  display: block !important;
  width: 100% !important;
  max-width: 100%;
  background: white;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 4px;
  align-self: stretch;
}
.ld-champ-drawer__body .ld-sidebar__title {
  color: var(--color-text-secondary);
  padding: 0 8px;
}
.ld-champ-drawer__body .ld-sidebar__country {
  display: block;
  width: 100%;
}
.ld-champ-drawer__body .ld-sidebar__item {
  width: 100%;
  color: var(--color-black);
}

/* ----------------------------------------------------------------
   Mobile icon buttons (campionati / abbonati gold)
   ---------------------------------------------------------------- */
.ld-header-preview__icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: white;
  text-decoration: none;
  font-size: 17px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.ld-header-preview__icon-btn:hover,
.ld-header-preview__icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
.ld-header-preview__icon-btn--gold {
  background: linear-gradient(135deg, #FFD831 0%, #FFE566 100%);
  border-color: rgba(255, 216, 49, 0.6);
  color: var(--color-dark);
  box-shadow: 0 4px 14px rgba(255, 216, 49, 0.4),
              0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.ld-header-preview__icon-btn--gold:hover,
.ld-header-preview__icon-btn--gold:focus-visible {
  background: linear-gradient(135deg, #FFE566 0%, #FFF0A0 100%);
  border-color: var(--color-gold);
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 216, 49, 0.55),
              0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

/* ----------------------------------------------------------------
   Mobile fullscreen menu
   ---------------------------------------------------------------- */
.ld-header-preview__mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(5, 34, 0, 0.98) 0%, rgba(3, 20, 0, 0.99) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  z-index: 99;
  padding: 100px 24px 32px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  overflow-y: auto;
}
.ld-header-preview__mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ld-header-preview__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ld-header-preview__mobile-nav a {
  display: flex;
  align-items: center;
  padding: 18px 8px;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, padding-left 0.25s ease, background 0.2s ease;
}
.ld-header-preview__mobile-nav a:hover,
.ld-header-preview__mobile-nav a:active,
.ld-header-preview__mobile-nav a.active {
  color: var(--color-gold);
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(255, 216, 49, 0.08) 0%, transparent 100%);
}

.ld-header-preview__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.ld-header-preview__mobile-cta .ld-header-preview__btn {
  width: 100%;
  justify-content: center;
  padding: 16px 20px;
  font-size: 14px;
}

/* Riccardo #5: account section (Profilo + Logout) nel menu mobile loggato. */
.ld-header-preview__mobile-account {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ld-header-preview__mobile-account-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 8px;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, padding-left 0.25s ease, background 0.2s ease;
}
.ld-header-preview__mobile-account-link i {
  width: 22px;
  text-align: center;
}
.ld-header-preview__mobile-account-link:hover {
  color: var(--color-gold);
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(255, 216, 49, 0.08) 0%, transparent 100%);
}
.ld-header-preview__mobile-account-link--logout {
  color: #FF8A8A;
}
.ld-header-preview__mobile-account-link--logout:hover {
  color: #FF6B6B;
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.10) 0%, transparent 100%);
}

/* ----------------------------------------------------------------
   Responsive — mobile collapses to icon-bar layout
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ld-header-preview__bar {
    /* 1fr | auto | 1fr keeps the logo geometrically centered regardless of
       how wide the left toggle vs the right actions group is. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 14px 16px;
    max-width: 100%;
  }
  .ld-header-preview__mobile-toggle { display: inline-flex; justify-self: start; }
  .ld-header-preview__nav { display: none; }
  .ld-header-preview__logo { justify-self: center; margin: 0; }
  .ld-header-preview__logo img { height: 40px; }
  .ld-header-preview.is-scrolled .ld-header-preview__logo img { height: 36px; }
  .ld-header-preview__actions { justify-self: end; gap: 8px; }
  .ld-header-preview__desktop-only { display: none; }
  .ld-header-preview__mobile-only { display: inline-flex; }
  .ld-header-preview__icon-btn { display: inline-flex; }
  /* Remove shadow on mobile — looks bad on small screens */
  .ld-header-preview.is-scrolled,
  .ld-redesign .ld-header-preview--solid,
  .ld-redesign .ld-header-preview--solid.is-scrolled {
    box-shadow: none;
  }
  .ld-header-preview__mobile-menu {
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .ld-header-preview__bar {
    padding: 12px 12px;
    column-gap: 8px;
  }
  .ld-header-preview__logo img { height: 36px; }
  .ld-header-preview.is-scrolled .ld-header-preview__logo img { height: 32px; }
  .ld-header-preview__mobile-toggle,
  .ld-header-preview__icon-btn {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px;
  }
  .ld-header-preview__mobile-menu {
    padding: 88px 20px 28px;
  }
  .ld-header-preview__mobile-nav a {
    font-size: 16px;
    padding: 16px 8px;
  }
}

/* ============================================================
   CINEMATIC HERO — preview only
   ============================================================ */
/* Riccardo: homepage (preview) NON deve scorrere orizzontalmente su mobile.
   Clip a livello root in caso lo scroll sia sull'elemento html. overflow-x:clip
   non crea un contenitore di scroll, quindi non rompe eventuali sticky. */
html.ld-preview {
  overflow-x: clip;
  max-width: 100%;
}

.ld-hero-cinematic {
  position: relative;
  width: 100%;
  min-height: 720px;
  overflow: hidden;
  background: #050505;
  color: white;
  padding-top: 120px;
}

.ld-hero-cinematic__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ld-hero-cinematic__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.ld-hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.ld-hero-cinematic__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 80px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ld-hero-cinematic__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 0 0 32px 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Brand logo PNG replaces the "Ladritta" wordmark */
.ld-hero-cinematic__title-logo {
  display: block;
  width: auto;
  height: 92px;
  max-width: 100%;
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.55))
          drop-shadow(0 2px 10px rgba(255, 216, 49, 0.2));
}

.ld-hero-cinematic__title--white {
  display: block;
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: -0.6px;
}

.ld-hero-cinematic__title--orange {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
  text-shadow: 0 4px 32px rgba(253, 127, 0, 0.4), 0 4px 24px rgba(0, 0, 0, 0.5);
}

.ld-hero-cinematic__subtitle {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 36px 0;
  max-width: 560px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.ld-hero-cinematic__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  background: linear-gradient(90deg, #FFD831 0%, #FFB422 50%, #FF9A33 100%);
  color: #1a0e00;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 6px;
  text-decoration: none;
  box-shadow:
    0 8px 32px rgba(253, 127, 0, 0.45),
    0 2px 8px rgba(255, 216, 49, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  min-width: 480px;
}

.ld-hero-cinematic__cta i {
  font-size: 14px;
  opacity: 0.85;
}

.ld-hero-cinematic__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 12px 40px rgba(253, 127, 0, 0.55),
    0 4px 12px rgba(255, 216, 49, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ld-hero-cinematic__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.ld-hero-cinematic__note-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #288E08;
  color: white;
  font-size: 9px;
}

@media (max-width: 1024px) {
  .ld-hero-cinematic {
    min-height: 600px;
    padding-top: 90px;
  }
  .ld-hero-cinematic__inner {
    padding: 60px 24px 80px;
  }
  .ld-hero-cinematic__title {
    font-size: 48px;
    letter-spacing: -1px;
  }
  .ld-hero-cinematic__title-logo {
    height: 64px;
    margin-bottom: 6px;
  }
  .ld-hero-cinematic__subtitle {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .ld-hero-cinematic__cta {
    min-width: 0;
    width: 100%;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 1px;
  }
  .ld-hero-cinematic__bg img {
    object-position: 70% center;
  }
}

@media (max-width: 600px) {
  .ld-hero-cinematic__title {
    font-size: 38px;
  }
  .ld-hero-cinematic__title-logo {
    height: 52px;
  }
}

/* ============================================================
   PREVIEW DRITTA + CHAT (under cinematic hero, on /home-preview)
   ============================================================ */
.ld-preview .ld-preview-dritta {
  background: var(--color-bg-page);
  padding: 64px 80px 32px;
}

.ld-preview .ld-preview-dritta__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 414px;
  gap: 24px;
  /* `start` keeps matchcard at its natural height — was `stretch`, which
     coupled it to the chat and made it grow with every new message. */
  align-items: start;
}

.ld-preview .ld-preview-dritta__matchcard {
  margin-top: 0;
  width: 100%;
}

.ld-preview .ld-preview-dritta__chat {
  width: 100%;
  /* Fixed height, independent from message count and from matchcard.
     Internal body still scrolls when conversation gets long. */
  height: 560px;
}

@media (max-width: 1024px) {
  .ld-preview .ld-preview-dritta {
    padding: 10px;
  }

  span.ld-odds-table__cell.ld-odds-table__cell--sign {
    text-align: center !important; 
  }

  .ld-preview .ld-preview-dritta__inner {
    grid-template-columns: 1fr;
  }
  .ld-preview .ld-preview-dritta__chat {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ============================================================
   TUTORIAL TEASER STRIP — in-page anchor to bottom tutorial
   (FASE C4: stripe between Dritta and Pronostici with "Guarda tutorial" CTA)
   ============================================================ */
.ld-tutorial-teaser {
  background: linear-gradient(90deg, #052200 0%, #0a3b00 100%);
  padding: 20px 80px;
}
.ld-tutorial-teaser__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ld-tutorial-teaser__left {
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-heading);
  font-size: 15px;
}
.ld-tutorial-teaser__left strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.ld-tutorial-teaser__sub {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.ld-tutorial-teaser__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 216, 49, 0.18);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 216, 49, 0.3);
  flex-shrink: 0;
}
.ld-tutorial-teaser__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 216, 49, 0.3),
              0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  flex-shrink: 0;
}
.ld-tutorial-teaser__btn:hover,
.ld-tutorial-teaser__btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 216, 49, 0.45),
              0 1px 0 rgba(255, 255, 255, 0.7) inset;
  color: var(--color-dark);
  text-decoration: none;
  outline: none;
}
.ld-tutorial-teaser__btn .fa-arrow-down {
  font-size: 11px;
  animation: ld-tutorial-bob 1.8s ease-in-out infinite;
}
@keyframes ld-tutorial-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Smooth scroll for the in-page anchor */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

@media (max-width: 768px) {
  .ld-tutorial-teaser {
    padding: 16px 16px;
  }
  .ld-tutorial-teaser__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 14px;
  }
  .ld-tutorial-teaser__left {
    justify-content: center;
    flex-direction: column;
    gap: 8px;
  }
  .ld-tutorial-teaser__btn {
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ============================================================
   PAGINA ABBONATI — CTA + Pricing + Rimborso + FAQ (FASE C7)
   ============================================================ */
.ld-abbonati-cta {
  background: linear-gradient(135deg, #052200 0%, #0a3b00 50%, #052200 100%);
  padding: 72px 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ld-abbonati-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(255, 216, 49, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ld-abbonati-cta__inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ld-abbonati-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 216, 49, 0.16);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 216, 49, 0.32);
  margin-bottom: 20px;
}
.ld-abbonati-cta__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: white;
  margin: 0 0 18px 0;
}
.ld-abbonati-cta__title strong {
  color: var(--color-gold);
  font-weight: 800;
}
.ld-abbonati-cta__body {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  margin: 0 auto;
}
.ld-abbonati-cta__body strong {
  color: white;
  font-weight: 600;
}

.ld-pricing--on-abbonati {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ============================================================
   FAQ Section (FASE C7)
   ============================================================ */
.ld-faq {
  background: var(--color-bg-page);
  padding: 72px 80px;
  border-top: 1px solid var(--color-border);
}
.ld-faq__inner {
  max-width: 820px;
  margin: 0 auto;
}
.ld-faq__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.5px;
  color: var(--color-black);
  text-align: center;
  margin: 0 0 8px 0;
}
.ld-faq__subtitle {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 36px 0;
}
.ld-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ld-faq__item {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.ld-faq__item[open] {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(253, 127, 0, 0.08);
}
.ld-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-black);
  user-select: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.ld-faq__item summary::-webkit-details-marker { display: none; }
.ld-faq__item summary::marker { content: ''; }
.ld-faq__item summary:hover { background: rgba(253, 127, 0, 0.03); }
.ld-faq__item summary i {
  color: var(--color-text-secondary);
  font-size: 14px;
  transition: transform 0.3s ease, color 0.2s ease;
}
.ld-faq__item[open] summary i {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.ld-faq__answer {
  padding: 0 24px 20px;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.65;
  color: #3a3a3a;
}
.ld-faq__answer strong { color: var(--color-black); }

@media (max-width: 768px) {
  .ld-abbonati-cta { padding: 48px 16px 36px; }
  .ld-abbonati-cta__title { font-size: 28px; }
  .ld-abbonati-cta__body { font-size: 15px; }
  .ld-pricing--on-abbonati { padding-left: 16px; padding-right: 16px; }
  .ld-faq { padding: 48px 16px; }
  .ld-faq__title { font-size: 24px; }
  .ld-faq__item summary { padding: 16px 18px; font-size: 15px; }
  .ld-faq__answer { padding: 0 18px 16px; font-size: 14px; }
}

/* ============================================================
   LADRITTA CHATWIDGET — runtime states (added by chat module)
   ============================================================ */

.ld-chatwidget__msg--user {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}
.ld-chatwidget__bubble--user {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  max-width: 80%;
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.ld-chatwidget__bubble--bot a {
  color: var(--color-primary);
  text-decoration: underline;
}
.ld-chatwidget__bubble--bot ul,
.ld-chatwidget__bubble--bot ol {
  margin: 6px 0 6px 18px;
  padding: 0;
}

/* Force wrap inside every bubble (bot AND user). Some legacy site-wide
   rules apply `white-space: nowrap` + `text-overflow: ellipsis` to
   table cells / list items / paragraphs and accidentally clip the
   chatbot bubble content. Reset that behaviour explicitly so long
   answers reflow to multiple lines instead of being truncated. */
.ld-chatwidget__bubble,
.ld-chatwidget__bubble * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.ld-chatwidget__typing {
  display: inline-flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--color-bg-muted);
  border-radius: 14px;
  width: fit-content;
  margin: 8px 0;
}
.ld-chatwidget__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  animation: ld-typing 1.2s infinite ease-in-out;
}
.ld-chatwidget__typing span:nth-child(2) { animation-delay: 0.15s; }
.ld-chatwidget__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-chatwidget__typing span { animation: none; opacity: 0.7; }
}

.ld-chatwidget__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #FEE2E2;
  color: #7F1D1D;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  margin: 8px 12px;
}
.ld-chatwidget__error-retry {
  background: #DC2626;
  color: #fff;
  border: 0;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
.ld-chatwidget__error-retry:hover { background: #B91C1C; }

.ld-chatwidget[aria-busy="true"] .ld-chatwidget__input {
  opacity: 0.6;
  cursor: wait;
}

.ld-chatwidget__body {
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* ============================================================
   CHAT HEIGHT FIX — prevent message growth from pushing layout
   The widget is `display: flex; flex-direction: column;` with body
   `flex: 1; overflow-y: auto`. Without `min-height: 0` on the flex
   children, the body defaults to min-content (its actual content
   size), so overflow-y never triggers — the body grows with messages
   and pushes the parent taller. Setting min-height: 0 lets the body
   shrink below content, enabling the internal scroll bar.
   ============================================================ */
.ld-chatwidget,
.ld-chatwidget__body {
  min-height: 0;
}

/* Embedded contexts (homepage hero, preview-hero): cap the chat at a
   fixed height so messages scroll inside it instead of stretching
   the parent grid rows. The dedicated /chatbot page opts out via the
   --page modifier and uses its own sizing. */
.ld-chatwidget:not(.ld-chatwidget--page) {
  max-height: 720px;
}

@media (max-width: 768px) {
  .ld-chatwidget:not(.ld-chatwidget--page) {
    max-height: 70vh;
  }
}

/* ============================================================
   /chatbot — dedicated full-page chat
   ============================================================ */
.ld-chatbot-page {
  background: var(--color-bg-page);
  padding: 48px 24px 64px;
  min-height: calc(100vh - 220px);
}
.ld-chatbot-page__inner {
  max-width: 760px;
  margin: 0 auto;
}
.ld-chatbot-page__intro {
  text-align: center;
  margin-bottom: 32px;
}
.ld-chatbot-page__title {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -0.5px;
  margin: 0 0 12px;
}
.ld-chatbot-page__subtitle {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}
.ld-chatwidget--page {
  width: 100%;
  height: calc(100vh - 320px);
  min-height: 520px;
  max-height: 820px;
}
@media (max-width: 768px) {
  .ld-chatbot-page {
    padding: 32px 16px 48px;
  }
  .ld-chatbot-page__title {
    font-size: 28px;
  }
  .ld-chatwidget--page {
    height: calc(100vh - 280px);
    min-height: 440px;
  }
}

/* ============================================================
   LEGACY TABLE WRAPPER restyling (sequenze, calendario, classifica)
   Riccardo #5: blocco IMBATTIBILITÀ/VITTORIE deve essere diviso verde+nero
   ============================================================ */
.ld-redesign .table-wrapper {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ld-redesign .table-wrapper > h3,
.ld-redesign .table-wrapper > h3.bg-ld-green {
  background-color: #288E0A !important;
  color: white !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 13px 16px !important;
  margin: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  line-height: 1.2 !important;
}
.ld-redesign .table-wrapper .table {
  margin-bottom: 0 !important;
  width: 100%;
}
.ld-redesign .table-wrapper .table thead.bg-dark,
.ld-redesign .table-wrapper .table thead {
  background-color: #0A0A0A !important;
  color: white !important;
}
.ld-redesign .table-wrapper .table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 11px 16px !important;
  border: none !important;
  color: white !important;
}
.ld-redesign .table-wrapper .table tbody tr td {
  padding: 13px 16px !important;
  font-size: 12.5px;
  line-height: 1.45;
  border-color: var(--color-border) !important;
  vertical-align: middle;
}
.ld-redesign .table-wrapper .table tbody tr:nth-child(odd) td {
  background: var(--color-bg-page);
}
.ld-redesign .table-wrapper .table tbody tr td a {
  color: var(--color-black);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.ld-redesign .table-wrapper .table tbody tr td a:hover {
  color: var(--color-primary);
}

/* ============================================================
   CALENDARIO day/round selector — Riccardo #1: bordi bianco-su-bianco
   ============================================================ */
.ld-redesign .slider-top-green .bc-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ld-redesign .slider-top-green .selectslides,
.ld-redesign .slider-top-green select.form-select {
  background: white !important;
  border: 1px solid var(--color-border-button) !important;
  border-radius: 8px !important;
  padding: 9px 32px 9px 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--color-black) !important;
  height: auto !important;
  width: auto !important;
  min-width: 180px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ld-redesign .slider-top-green .selectslides:hover,
.ld-redesign .slider-top-green .selectslides:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.12) !important;
  outline: none;
}
.ld-redesign .slider-top-green .btn-slide-prev,
.ld-redesign .slider-top-green .btn-slide-next,
.ld-redesign .slider-top-green .btn.bg-ld-grey {
  background: var(--color-bg-muted) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-border-button) !important;
  border-radius: 8px !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 14px !important;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ld-redesign .slider-top-green .btn-slide-prev:hover,
.ld-redesign .slider-top-green .btn-slide-next:hover {
  background: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
}
.ld-redesign .slider-top-green .btn-slide-prev i,
.ld-redesign .slider-top-green .btn-slide-next i {
  color: inherit !important;
}

/* ============================================================
   ROUND 4 — sticky tabs + season selector borders
   ============================================================ */

/* Tabs estese FUORI dal box .ld-content-page__main (Riccardo "sbagliato dentro al box").
   Negative margin per coprire il padding 20px/24px del box.
   overflow VISIBLE per evitare clipping dei tab attivi (border + outline). */
.ld-content-page__main .ld-dritta-tabs {
  background: var(--color-bg-page);
  padding: 10px 0px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 16px 16px 0 0;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Stato STUCK: position fixed sotto l'header. Padding IDENTICO al non-stuck per altezza
   coerente (evita layout jump quando la classe si toggle on/off durante lo scroll). */
.ld-dritta-tabs.is-stuck {
  position: fixed !important;
  top: 76px !important;
  left: var(--stick-left, 0) !important;
  width: var(--stick-width, 100%) !important;
  z-index: 90 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  padding: 16px 24px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Placeholder che mantiene lo spazio esatto quando le tabs sono fixed.
   JS aggiorna placeholder.style.height con l'offsetHeight delle tabs (incluso bordo). */
.ld-dritta-tabs__placeholder {
  display: none;
  margin: -20px -24px 20px -24px;
}
.ld-dritta-tabs__placeholder.is-active {
  display: block;
}

/* Sul preview hero NO sticky (rovinerebbe la home cinematic) */
.ld-preview .ld-dritta-tabs,
.ld-preview .ld-content-page__main .ld-dritta-tabs {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 16px 0 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ----------------------------------------------------------------
   MOBILE — tabs compatte, horizontal scroll smooth, snap to start
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Mobile: 4 bottoni a larghezza piena, layout verticale icona+testo,
     identico allo stato .is-stuck — niente scroll orizzontale. */
  .ld-content-page__main .ld-dritta-tabs {
    padding: 8px 8px !important;
    gap: 6px;
    overflow: hidden !important;
    flex-wrap: nowrap;
    box-sizing: border-box;
  }
  .ld-content-page__main .ld-dritta-tabs::-webkit-scrollbar { display: none; }
  .ld-content-page__main .ld-dritta-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: 0 !important;
    border-radius: 8px !important;
  }
  .ld-content-page__main .ld-dritta-tab i {
    font-size: 17px !important;
    margin-right: 0 !important;
    line-height: 1 !important;
  }
  /* STUCK su mobile: 4 bottoni in larghezza piena, layout verticale icona+testo,
     niente scroll orizzontale — l'intera barra entra in 100vw. */
  .ld-dritta-tabs.is-stuck {
    top: 80px !important;
    padding: 8px 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }
  .ld-dritta-tabs.is-stuck .ld-dritta-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: 0 !important;
    scroll-snap-align: none !important;
  }
  .ld-dritta-tabs.is-stuck .ld-dritta-tab i {
    font-size: 17px !important;
    margin-right: 0 !important;
    line-height: 1 !important;
  }
  .ld-dritta-tabs__placeholder {
    margin: -16px -16px 16px -16px;
  }
}

/* Riccardo Round 4 #2: Season selector (combo-box-seasons) — bordi bianco-su-bianco.
   Specificity boosted con html.ld-redesign + duplicate class per vincere le regole
   .ld-redesign #content .inner-content .form-select esistenti. */
html.ld-redesign select.form-select.form-select {
  background-color: white !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--color-border-button) !important;
  border-radius: 8px !important;
  padding: 9px 36px 9px 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-black) !important;
  height: auto !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0A0A' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
html.ld-redesign select.form-select.form-select:hover,
html.ld-redesign select.form-select.form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.12) !important;
  outline: none;
}

/* Round 4 #2 — wrapper around <select> (combo-box-seasons).
   Il bordo è sul DIV (immune da regole legacy che azzerano border sul select),
   il <select> è trasparente sopra. Soluzione finale dopo che !important e
   inline style sono stati sconfitti da regole con higher specificity. */
.ld-season-wrap {
  display: inline-block !important;
  position: relative !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: #CBCED4 !important;
  border-radius: 8px !important;
  background: white !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  margin: 8px 0 16px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.ld-season-wrap:hover,
.ld-season-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(253, 127, 0, 0.12);
}
.ld-season-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-black);
  font-size: 12px;
  font-weight: 700;
}
.ld-season-wrap select.ld-season-select {
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  padding: 9px 36px 9px 14px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-black) !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 160px;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   3-tier pricing layout (Free / Registrato / Premium)
   ═══════════════════════════════════════════════════════════ */
.ld-pricing__cards--3up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .ld-pricing__cards--3up {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Free (guest) card — neutral */
.ld-pricing-card--free {
  border: 1px solid var(--color-border);
}

/* Newsletter (middle) card — subdued neutral, lighter than Premium.
   Visually aligned with the Free card so only Premium stands out. */
.ld-pricing-card--newsletter {
  border: 1px solid var(--color-border);
  position: relative;
  background: var(--color-bg-white);
}
.ld-pricing-card__badge--newsletter {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
.ld-pricing-card__top-badge--newsletter {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Ghost button — used for "Continua senza account" */
.ld-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border-button);
  padding: 14px 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ld-btn--ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-black);
  border-color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   Register page — plan-selected banner
   ═══════════════════════════════════════════════════════════ */
.ld-register__plan-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(253, 127, 0, 0.08);
  border: 1px solid rgba(253, 127, 0, 0.24);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}
.ld-register__plan-banner[data-plan="premium"] {
  background: rgba(255, 216, 49, 0.12);
  border-color: rgba(255, 216, 49, 0.45);
}
.ld-register__plan-banner-label {
  color: var(--color-text-secondary);
}
.ld-register__plan-banner-name {
  color: var(--color-black);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   Abbonati / Payment page (redesign layout)
   ═══════════════════════════════════════════════════════════ */
.ld-abbonati {
  background: var(--color-bg-page);
  padding: 56px 80px 80px;
}
.ld-abbonati__inner {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--color-bg-white);
  border-radius: var(--radius-3xl);
  padding: 40px;
  box-shadow: var(--shadow-header);
}
.ld-abbonati__payment-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 24px;
  color: var(--color-black);
}
.ld-abbonati__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ld-abbonati__plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-muted);
}
.ld-abbonati__plan-input {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}
.ld-abbonati__plan-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-black);
  margin: 0;
}
.ld-abbonati__secure {
  text-align: center;
}
.ld-abbonati__secure p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.ld-abbonati__secure img {
  max-width: 320px;
  height: auto;
}

@media (max-width: 768px) {
  .ld-abbonati {
    padding: 32px 16px 48px;
  }
  .ld-abbonati__inner {
    padding: 24px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Free-tier "Allora goditi la dritta" toast
   Triggered by [data-ld-free-toast] CTAs on the pricing cards.
   ═══════════════════════════════════════════════════════════ */
.ld-free-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: var(--color-dark);
  color: var(--color-bg-white);
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.ld-free-toast i {
  color: var(--color-gold);
  font-size: 14px;
}
.ld-free-toast--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ═══════════════════════════════════════════════════════════
   DEBUG2 #5 — elevenlabs widget: hide ONLY before custom element
   is upgraded by the async script. After upgrade, leave positioning
   100% to the widget's own internal styles (do NOT override position
   on the host — its shadow DOM expects the host to be a normal box).
   ═══════════════════════════════════════════════════════════ */
elevenlabs-convai:not(:defined) {
  display: none;
}

/* ============================================================
   CALENDARIO / RISULTATI — matchday tables (slider-top-green)
   Fix: score "0 - 0" was wrapping into a vertical column because
   the global override at line ~4593 forces white-space:normal on
   every td inside a .text-nowrap table. Re-enable nowrap on all
   cells here except the team-name cell (.trunc), which keeps its
   ellipsis truncation. Also tighten padding for a denser look.
   ============================================================ */
.ld-redesign .slider-top-green .table-wrapper {
  margin-bottom: 18px;
}
/* Keep each matchday slide exactly one viewport wide so the swiper never
   shows the "accrocco" (two half-slides peeking). The table fills the slide
   and the team-name column wraps instead of overflowing. */
.ld-redesign .slider-top-green .swiper {
  overflow: hidden;
  width: 100%;
}
.ld-redesign .slider-top-green .swiper-slide {
  width: 100%;
  box-sizing: border-box;
}

/* Carosello giornate con scroll-snap NATIVO (sostituisce Swiper nel redesign):
   swipe orizzontale fluido del browser, zero lag. JS gestisce Prec/Succ + select. */
.ld-redesign .slider-top-green .swiper.ld-snap-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ld-redesign .slider-top-green .swiper.ld-snap-carousel::-webkit-scrollbar {
  display: none;
}
.ld-redesign .slider-top-green .swiper.ld-snap-carousel > .swiper-wrapper {
  display: flex;
  align-items: flex-start;
  transform: none !important;
}
.ld-redesign .slider-top-green .swiper.ld-snap-carousel > .swiper-wrapper > .swiper-slide {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100%;
  scroll-snap-align: start;
}
.ld-redesign .slider-top-green .table-wrapper .table {
  width: 100%;
  table-layout: auto;
}
/* Compact columns (date / time / score / prono) stay narrow and never wrap. */
.ld-redesign .slider-top-green table.text-nowrap td:not(.trunc),
.ld-redesign .slider-top-green table.text-nowrap th:not(.trunc) {
  white-space: nowrap !important;
  width: 1%;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* Team-name cell takes the remaining width and WRAPS so full
   "Home - Away" names are always readable (Riccardo: "non si leggono"). */
.ld-redesign .slider-top-green table.text-nowrap td.trunc,
.ld-redesign .slider-top-green table.text-nowrap th.trunc {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  width: auto !important;
  color: var(--color-black);
}
.ld-redesign .slider-top-green table.text-nowrap td.trunc a {
  white-space: normal !important;
}
/* Score / prono button column stays compact and bold. */
.ld-redesign .slider-top-green .table-wrapper .table tbody tr td:last-child {
  width: 1%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-black);
}
.ld-redesign .slider-top-green .table-wrapper .table tbody tr td:last-child .badge {
  white-space: nowrap;
}
.ld-redesign .slider-top-green .table-wrapper > h3 {
  padding: 9px 14px !important;
}
.ld-redesign .slider-top-green .table-wrapper .table tbody tr td {
  padding: 5px 5px !important;
  font-size: 10px;
  line-height: 1.3;
}

/* ============================================================
   SEQUENZE — green title + black thead alignment (Riccardo:
   "il layout nero verde non è preciso"). The wrapper clips to a
   rounded rect; the green <h3> and the black <thead> must read as
   one continuous header with NO rounded corners or inset between
   them. Force the green band square at the bottom, the thead square
   on top, both edge-to-edge, no gap.
   ============================================================ */
.ld-redesign .table-wrapper > h3,
.ld-redesign .table-wrapper > h3.bg-ld-green {
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
  width: 100%;
}
.ld-redesign .table-wrapper > .table {
  border: 0 !important;
}
.ld-redesign .table-wrapper > .table > thead,
.ld-redesign .table-wrapper > .table > thead tr,
.ld-redesign .table-wrapper > .table > thead th {
  border-radius: 0 !important;
  border: 0 !important;
}
.ld-redesign .table-wrapper > .table > thead th {
  vertical-align: middle;
}
/* First/last header cells must reach the wrapper edges (no inset that
   reveals the green band beside the black thead). */
.ld-redesign .table-wrapper > .table > thead th:first-child {
  padding-left: 16px !important;
}
.ld-redesign .table-wrapper > .table > thead th:last-child {
  padding-right: 16px !important;
}
/* The wrapper's own overflow:hidden already rounds outer corners, so the
   table itself must never add its own radius/margin at the top. */
.ld-redesign .table-wrapper > .table {
  margin-top: 0 !important;
  border-collapse: collapse;
}

/* ============================================================
   STORICO RISULTATI — selettori anno/mese (Riccardo #3: "il menu
   della stagione in alto a sinistra è tagliato e non si vede l'anno,
   anche il mese è tagliato"). I select ereditavano min-width:300px
   + padding:20px da #content .inner-content .form-select: su mobile
   i due menu uscivano dallo schermo e il testo veniva tagliato.
   Qui li rendiamo flessibili, affiancati e con padding corretto.
   Specificità allineata (#content .inner-content) per battere la regola.
   ============================================================ */
.ld-redesign #content .inner-content .ld-data-tables .form-select {
  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  padding: 8px 34px 8px 14px !important;
  text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
  .ld-redesign #content .inner-content .ld-data-tables .row > div > .d-flex,
  .ld-redesign #content .inner-content .ld-data-tables .row .d-flex.col-12 {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  .ld-redesign #content .inner-content .ld-data-tables .form-select {
    /* flex: 1 1 40%; */
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* ============================================================
   CHATBOT SIDEBAR VARIANT — narrower & fixed height for right rail
   ============================================================ */
.ld-chatwidget--sidebar {
  width: 100%;
  max-width: 100%;
  height: 600px;
}

@media (max-width: 1024px) {
  .ld-chatwidget--sidebar {
    height: 520px;
  }
}

@media (max-width: 768px) {
  .ld-chatwidget--sidebar {
    height: 480px;
    max-width: 560px;
    margin: 0 auto;
  }
}

.ld-chatwidget--sidebar .ld-chatwidget__bubble {
  max-width: 300px;
}

/* ============================================================
   TUTORIAL SIDEBAR VARIANT — vertical layout for right rail
   (under the chatbot on pages with chatbot-sidebar).
   ============================================================ */
.ld-tutorial--sidebar {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04);
}

.ld-tutorial--sidebar .ld-tutorial__inner {
  display: block;
  max-width: none;
  margin: 0;
}

.ld-tutorial--sidebar .ld-tutorial__video {
  aspect-ratio: 16/9;
  border-radius: 10px;
}

.ld-tutorial--sidebar .ld-tutorial__benefits {
  margin-top: 8px;
  margin-bottom: 16px;
}

.ld-tutorial--sidebar .ld-tutorial__benefit {
  padding: 8px 10px;
  font-size: 12px;
}

.ld-tutorial--sidebar .ld-tutorial__content h2 {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 12px;
}

.ld-tutorial--sidebar .ld-tutorial__steps {
  gap: 12px;
}

.ld-tutorial--sidebar .ld-tutorial__step {
  gap: 10px;
}

.ld-tutorial--sidebar .ld-tutorial__step-number {
  position: static;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.ld-tutorial--sidebar .ld-tutorial__step-text h3 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 2px;
}

.ld-tutorial--sidebar .ld-tutorial__step-text p {
  font-size: 13px;
  line-height: 18px;
}

@media (max-width: 768px) {
  .ld-tutorial--sidebar {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   VALUE BETS — defensive color overrides (legacy bootstrap was
   sometimes winning specificity, "nero su nero" on Oggi tab and
   unreadable hover on type tabs).
   ============================================================ */
.ld-redesign .ld-valuebets__type-tab,
.ld-valuebets__type-tab {
  color: var(--color-text-secondary) !important;
  background: var(--color-bg-muted) !important;
}
.ld-redesign .ld-valuebets__type-tab:hover,
.ld-valuebets__type-tab:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-black) !important;
}
.ld-redesign .ld-valuebets__type-tab.is-active,
.ld-valuebets__type-tab.is-active,
.ld-redesign .ld-valuebets__type-tab.is-active:hover,
.ld-valuebets__type-tab.is-active:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.ld-redesign .ld-valuebets__day-tab,
.ld-valuebets__day-tab {
  color: var(--color-text-secondary) !important;
  background: var(--color-bg-muted) !important;
}
.ld-redesign .ld-valuebets__day-tab:hover,
.ld-valuebets__day-tab:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-black) !important;
}
.ld-redesign .ld-valuebets__day-tab.is-active,
.ld-valuebets__day-tab.is-active,
.ld-redesign .ld-valuebets__day-tab.is-active:hover,
.ld-valuebets__day-tab.is-active:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0px 2px 12px 0px rgba(253, 127, 0, 0.35) !important;
}

/* ============================================================
   SUPPORT PAGE — email links were turning invisible on hover
   (legacy `a:hover { color: #fff }` from bootstrap/legacy CSS
   winning on the white content area).
   ============================================================ */
.ld-support-content {
  font-family: var(--font-heading);
  color: var(--color-black);
  line-height: 1.55;
  font-size: 15px;
}
.ld-support-content a,
.ld-support-content a:link,
.ld-support-content a:visited {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  font-weight: 600;
  background: transparent !important;
}
.ld-support-content a:hover,
.ld-support-content a:focus {
  color: var(--color-primary-dark, #E06F00) !important;
  background: transparent !important;
  text-decoration: underline !important;
}
.ld-support-content h4 {
  font-weight: 700;
  font-size: 18px;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--color-dark);
  text-transform: none;
}
.ld-support-content hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}
.ld-support-content ul,
.ld-support-content ol {
  margin: 8px 0 12px 22px;
  padding: 0;
}
.ld-support-content li {
  margin-bottom: 4px;
}
.ld-support-content p {
  margin: 8px 0;
}

/* ============================================================
   LOGIN — right column stacks video + chatbot
   ============================================================ */
.ld-login__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld-login__right .ld-login__video {
  min-height: 240px;
}
.ld-login__right .ld-chatwidget--sidebar {
  height: 520px;
}
@media (max-width: 1024px) {
  .ld-login__right {
    flex-direction: column;
  }
  .ld-login__right .ld-chatwidget--sidebar {
    height: 460px;
  }
}

/* ============================================================
   MOBILE LAYOUT FIXES — 2026-05-27 (Task 5)
   Matchcard vertical layout: title centered+big, big team logos in
   a row on top, prono/time/advantage stacked below.
   Applies to ALL .ld-matchcard instances.
   ============================================================ */
@media (max-width: 640px) {
  /* Title row: centered + bigger */
  .ld-matchcard__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 16px 0;
  }

  .ld-matchcard__header-left {
    justify-content: center;
    width: 100%;
  }

  .ld-matchcard__label {
    font-size: 18px;
    letter-spacing: 1.2px;
    line-height: 22px;
  }

  .ld-matchcard__header-right {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  /* TEAMS row → 2-col grid: BIG logos on top, center column spans below */
  .ld-matchcard__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "homeTeam awayTeam"
      "centerCol centerCol";
    gap: 16px 12px;
    padding: 14px 16px 0;
    align-items: start;
  }

  .ld-matchcard__teams > .ld-matchcard__team:nth-of-type(1) { grid-area: homeTeam; }
  .ld-matchcard__teams > .ld-matchcard__team:nth-of-type(2) { grid-area: awayTeam; }
  .ld-matchcard__teams > .ld-matchcard__center             { grid-area: centerCol; }

  /* Big logos */
  .ld-matchcard__team {
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ld-matchcard__team-circle {
    width: 84px;
    height: 84px;
  }
  span.ld-odds-table__cell.ld-odds-table__cell--vb{
    
  }
  .ld-matchcard__team-circle img {
    width: 108px;
    height: 108px;
  }

  .ld-matchcard__team-name {
    font-size: 13px;
    line-height: 17px;
    margin-top: 8px;
  }

  /* Center column (now BELOW the two logos): full width, centered */
  .ld-matchcard__center {
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding: 4px 0 0;
    gap: 8px;
  }

  /* Confronta squadre: subtab compatti sotto i loghi, su una sola riga */
  .ld-h2h-subtabs {
    gap: 6px;
    margin: 8px 0 4px;
    width: 100%;
  }
  .ld-h2h-subtab {
    flex: 1 1 0;
    justify-content: center;
    padding: 8px 8px;
    font-size: 11px;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  .ld-matchcard__time {
    font-size: 18px;
    font-weight: 700;
  }

  .ld-matchcard__prono-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  /* Tournament-info row (head-to-head card) — center it */
  .ld-matchcard__tournament-info {
    text-align: center;
  }
}

/* ============================================================
   VALUE BETS — mobile color-coding (must come AFTER the legacy
   !important defensive block so it wins the cascade).
   PRONO row = orange family / DATA row = dark-green family.
   ============================================================ */
@media (max-width: 768px) {
  .ld-redesign .ld-valuebets__type-tab,
  .ld-valuebets__type-tab {
    color: var(--color-primary-dark) !important;
    background: #fff !important;
    border: 1px solid rgba(253, 127, 0, 0.30) !important;
  }
  .ld-redesign .ld-valuebets__type-tab:hover,
  .ld-valuebets__type-tab:hover {
    background: rgba(253, 127, 0, 0.08) !important;
    color: var(--color-primary-dark) !important;
  }
  .ld-redesign .ld-valuebets__type-tab.is-active,
  .ld-valuebets__type-tab.is-active,
  .ld-redesign .ld-valuebets__type-tab.is-active:hover,
  .ld-valuebets__type-tab.is-active:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 14px rgba(253, 127, 0, 0.32) !important;
  }

  .ld-redesign .ld-valuebets__day-tab,
  .ld-valuebets__day-tab {
    color: var(--color-dark) !important;
    background: #fff !important;
    border: 1px solid rgba(5, 34, 0, 0.20) !important;
  }
  .ld-redesign .ld-valuebets__day-tab:hover,
  .ld-valuebets__day-tab:hover {
    background: rgba(5, 34, 0, 0.06) !important;
    color: var(--color-dark) !important;
  }
  .ld-redesign .ld-valuebets__day-tab.is-active,
  .ld-valuebets__day-tab.is-active,
  .ld-redesign .ld-valuebets__day-tab.is-active:hover,
  .ld-valuebets__day-tab.is-active:hover {
    background: var(--color-dark) !important;
    color: #fff !important;
    border-color: var(--color-dark) !important;
    box-shadow: 0 4px 14px rgba(5, 34, 0, 0.28) !important;
  }
}

/* ============================================================
   ODDS TABLE — inline % + Value-Bet badge + tighter PRONOSTICO
   column (desktop, tablet, mobile).
   Keeps the existing sticky-on-scroll behavior on mobile.
   ============================================================ */
.ld-odds-table__header-row,
.ld-odds-table__row {
  grid-template-columns: 130px 130px repeat(6, 1fr);
}

.ld-odds-table__cell--vb {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ld-odds-table__header-row,
  .ld-odds-table__row {
    grid-template-columns: 124px 92px repeat(6, 54px);
  }
}

@media (max-width: 640px) {
  .ld-odds-table__header-row,
  .ld-odds-table__row {
    grid-template-columns: 122px 84px repeat(6, 50px);
    min-width: 506px;
  }

  /* Override the earlier column-stack so % + badge sit on one row.
     Sticky-left + bg behaviour from the original rule is preserved
     because we only re-declare the flex axis + alignment here. */
  .ld-odds-table__cell--vb,
  .ld-odds-table__header-cell--vb {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
  }

  .ld-odds-table__vb-pct {
    font-size: 11px;
    line-height: 1;
  }
  .ld-odds-table__vb-badge {
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1.2;
  }

  .ld-odds-table__section-header {
    min-width: 506px;
  }

  /* Align min-width with the actual sum of grid tracks (122+84+6×50 = 506px)
     so the dark header bg and row bg span the FULL scroll width — no white
     sliver visible when scrolled to the far right. */
  .ld-odds-table__header-row,
  .ld-odds-table__row {
    min-width: 506px;
  }

  /* Sticky VB column: match the row's actual background so the frozen cell
     blends into the row (was light-green on a peach-tinted row → visible
     mismatch). Highlighted-row variant uses the same orange tint as the row. */
  .ld-odds-table__cell--vb {
    background: var(--color-bg-white);
    /* Right-edge shadow gives the frozen column visual lift over the
       scrolled content underneath. */
    box-shadow: 6px 0 10px -4px rgba(0, 0, 0, 0.12);
  }
  .ld-odds-table__row--highlighted .ld-odds-table__cell--vb {
    background: rgb(255 236 217);
  }
  /* Sticky header VB cell: dark + matching shadow */
  .ld-odds-table__header-cell--vb {
    background: var(--color-dark);
    box-shadow: 6px 0 10px -4px rgba(0, 0, 0, 0.22);
  }

  /* CRITICAL: move the row's vertical padding INTO the cells.
     Before, `padding: 10px 0` on .ld-odds-table__row sat OUTSIDE the grid
     tracks. The sticky VB cell filled only its track height (≈38px) and
     left 10px gaps above/below where horizontally-scrolled cells were
     visible. By zeroing the row's vertical padding and pushing 10px onto
     every cell, the grid track now spans the full visual row height, so
     the sticky cell's background covers it completely with no bleed. */
  .ld-odds-table__header-row,
  .ld-odds-table__row {
    padding-top: 0;
    padding-bottom: 0;
  }

  .ld-odds-table__cell--vb,
  .ld-odds-table__header-cell--vb {
    align-self: stretch;
    min-height: 0;
    padding: 6px 6px;
  }

  .ld-odds-table__cell--sign {
    padding: 6px 4px;
  }

  .ld-odds-table__cell:not(.ld-odds-table__cell--vb):not(.ld-odds-table__cell--sign),
  .ld-odds-table__header-cell:not(.ld-odds-table__header-cell--vb) {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 3px;
    padding-right: 3px;
  }

  /* Bump normal-cell font to 12px on mobile (header row stays compact). */
  .ld-odds-table__cell:not(.ld-odds-table__cell--vb),
  .ld-odds-table__cell--label,
  .ld-odds-table__cell--sign {
    font-size: 12px;
  }
  .ld-odds-table__header-cell {
    font-size: 10px;
  }

  /* Riccardo: i titoli di sezione (1X2, UNDER/OVER 0,5, …) devono restare
     fissi a sinistra mentre la tabella scorre a dx/sx.
     FIX: il precedente `overflow:hidden` su .section-header ROMPEVA lo sticky
     (il titolo si agganciava a quella box che però scorre con la tabella,
     invece che alla tabella stessa). Serve overflow visibile + un contenitore
     flex (come le righe in grid) così il titolo-figlio "viaggia" e si aggancia. */
  .ld-odds-table__section-header {
    display: flex;
    align-items: center;
    overflow: visible;
  }
  .ld-odds-table__section-title {
    position: sticky;
    left: 0;
    flex: 0 0 auto;
    z-index: 2;
    padding: 0 5px;
    background: var(--color-bg-muted);
  }
}

/* ============================================================
   MATCHCARD QUOTES — mobile structural wrap.
   Desktop keeps the original inline (label + 3 quotes on one row)
   thanks to `display: contents` on the .quotes-row wrapper.
   Mobile (≤768px) stacks: label on top, 3-quotes row below.
   ============================================================ */
.ld-matchcard__quotes-row {
  display: contents;
}

@media (max-width: 768px) {
  .ld-matchcard__quotes-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ld-matchcard__quotes-inner .ld-matchcard__quotes-label {
    text-align: center;
    flex: 0 0 auto;
    margin-right: 0;
  }
  .ld-matchcard__quotes-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: space-between;
  }
  .ld-matchcard__quotes-row .ld-matchcard__quote {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
}

/* ============================================================
   #1 LIVESCORE — indicatore LIVE pulsante + minuto
   Sostituisce l'orario/orologio quando la partita è in corso.
   Attivato dal JS liveScore(): aggiunge .is-live agli elementi
   con [data-match-id] presenti nel poll MatchLive::GetLiveScore().
   ============================================================ */
@keyframes ld-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 35, 27, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(229, 35, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 35, 27, 0); }
}
/* Hero match card (Dritta del Giorno / Testa a Testa) */
.ld-matchcard__live { display: none; align-items: center; justify-content: center; gap: 7px; }
.ld-matchcard.is-live .ld-matchcard__time { display: none; }
.ld-matchcard.is-live .ld-matchcard__live { display: inline-flex; }
.ld-matchcard__live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #e5231b;
  animation: ld-live-pulse 1.2s infinite;
}
.ld-matchcard__live-min {
  color: #e5231b; font-family: var(--font-body); font-weight: 700;
  font-size: 16px; letter-spacing: 0.5px; line-height: 1;
}
/* Liste partite: orologio -> pallino pulsante + minuto quando live */
.ld-live-dot {
  display: none; width: 8px; height: 8px; border-radius: 50%; background: #e5231b;
  animation: ld-live-pulse 1.2s infinite; margin-right: 5px; flex: 0 0 auto;
}
.ld-match-list__row.is-live .ld-match-list__time > i.fa-clock { display: none; }
.ld-match-list__row.is-live .ld-live-dot { display: inline-block; }
.ld-match-list__row.is-live .ld-match-list__time { color: #e5231b; font-weight: 700; }

/* #1 Livescore liste: quando live, nascondi anche l'orario e mostra il minuto (non solo il pallino) */
.ld-match-list__row.is-live .ld-match-list__time-text { display: none; }
.ld-match-list__live-min { display: none; color: #e5231b; font-weight: 700; }
.ld-match-list__row.is-live .ld-match-list__live-min { display: inline; }

/* Punteggio LIVE sulla matchcard (Dritta del Giorno, homepage + pagina dedicata):
   due tabelloni con i gol tra le squadre, visibili solo a partita in corso. */
.ld-matchcard__score {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0 4px;
}
.ld-matchcard.is-live .ld-matchcard__score { display: flex; }
.ld-matchcard__score-h,
.ld-matchcard__score-a {
  min-width: 44px;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  animation: ld-score-glow 1.6s ease-in-out infinite;
}
.ld-matchcard__score-sep {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
}
@media (max-width: 640px) {
  .ld-matchcard__score { gap: 10px; }
  .ld-matchcard__score-h,
  .ld-matchcard__score-a { font-size: 24px; min-width: 38px; padding: 2px 10px; }
  .ld-matchcard__score-sep { font-size: 18px; }
}

/* Livescore in risalto: il punteggio non si taglia MAI — è il nome squadra a
   troncarsi con ellipsis. Il punteggio diventa un chip scoreboard animato. */
.ld-match-list__team { min-width: 0; }
.ld-match-list__team .ld-match-list__team-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ld-match-list__score { display: none; }
.ld-match-list__row.is-live .ld-match-list__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  background: #052200;
  color: #FFFFFF;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: ld-score-glow 1.6s ease-in-out infinite;
}
@keyframes ld-score-glow {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(229, 35, 27, 0.55), 0 2px 8px rgba(5, 34, 0, 0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(229, 35, 27, 0.22), 0 2px 12px rgba(5, 34, 0, 0.4); }
}

/* Riga live evidenziata nella lista: barra rossa a sinistra + tinta calda */
.ld-match-list__row.is-live {
  background: linear-gradient(90deg, rgba(229, 35, 27, 0.07) 0%, #FFF6EC 45%, var(--color-bg-white) 100%);
  box-shadow: inset 3px 0 0 #e5231b;
}

/* Pallone che rotola-rimbalza al posto del pallino, accanto al minuto */
.ld-match-list__row.is-live .ld-live-dot { display: none; }
.ld-match-list__row.is-live .ld-match-list__time::before {
  content: '⚽';
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  animation: ld-ball-bounce 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
@keyframes ld-ball-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(-5px) rotate(72deg); }
  70%      { transform: translateY(0) rotate(144deg); }
  85%      { transform: translateY(-2px) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-match-list__row.is-live .ld-match-list__time::before,
  .ld-match-list__row.is-live .ld-match-list__score { animation: none; }
}

/* Mobile: tutto deve entrare — chip e pallone compatti, colonne che non spingono */
@media (max-width: 640px) {
  .ld-match-list__row.is-live .ld-match-list__score {
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: 6px;
    margin-right: 2px;
  }
  .ld-match-list__row.is-live .ld-match-list__time::before { font-size: 12px; }
  .ld-match-list__row.is-live .ld-match-list__time { min-width: 46px; }
  .ld-match-list__row.is-live .ld-match-list__live-min { font-size: 12px; }
}