/* ============================================================
   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;
}

/* 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: 8px;
  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: none !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;
}

/* 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: 12px;
  }

  .ld-match-list__time {
    min-width: 50px;
  }

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

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

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

/* ============================================================
   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;
}

.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 254px;
  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;
  margin-bottom: 24px;
  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);
  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;
}

.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: 1280px;
  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 254px;
}

.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: 40px 48px;
  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);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%),
    url('/ladritta/images/bg/sfondopronostici.png') center / cover no-repeat;
  position: relative;
  margin-top: 16px;
  color: white;
}

.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('/ladritta/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: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 16px;
}

.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);
}

.ld-matchcard__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 32px;
}

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

.ld-matchcard__team-circle {
  width: 130px;
  height: 130px;
/*
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-matchcard__team-circle img {
/*
  width: 64px;
  height: 64px;
*/
  width: 130px;
  height: 130px;
  object-fit: contain;
}

.ld-matchcard__team-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
}

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

.ld-matchcard__info {
  font-family: var(--font-body);
  font-size: 16px;
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  background: var(--color-gold);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  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__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;
}

.ld-standings__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  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: 14px;
  line-height: 18px;
  color: white;
}

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

/* 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: 28px 1fr 36px 36px;
  align-items: center;
  padding: 10px 16px;
  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: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ld-standings__row {
  display: grid;
  grid-template-columns: 28px 1fr 36px 36px;
  align-items: center;
  padding: 10px 16px;
  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: 12px;
  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: 13px;
  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: 12px;
  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;
  }
}

@media (max-width: 640px) {
  .ld-matchcard__header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .ld-matchcard__teams {
    gap: 12px;
  }

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

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

  .ld-matchcard__team-name {
    font-size: 12px;
  }

  .ld-matchcard__prono-row {
    flex-wrap: wrap;
    justify-content: 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: 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: 1fr repeat(6, 70px);
  gap: 0;
  align-items: center;
  padding: 12px 20px;
  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: 48px;
}

/* Probable Result */
.ld-probable-result {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 20px 28px;
  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);
}

.ld-probable-result__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #288E08 0%, #1F7008 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 18px;
  box-shadow: 0px 4px 12px 0px rgba(40, 142, 8, 0.25);
}

.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: 10px 18px;
  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);
}

.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 {
  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: 12px 0 0 0;
}

.ld-redesign table thead th:last-child,
.ld-redesign .table thead th:last-child {
  border-radius: 0 12px 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: 10px 16px;
  border-top: 1px solid var(--color-border) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !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) {
  .ld-dritta-page__layout {
    grid-template-columns: 254px 1fr;
  }

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

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

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

@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;
  }

  .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,
  .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 16px;
  }

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

  .ld-sidebar {
    display: none;
  }

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

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

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

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

  .ld-content-page__sidebar {
    display: none;
  }

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

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

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

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

  .ld-dritta-page__sidebar {
    display: none;
  }

  .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: 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: wrap;
    gap: 8px;
  }
}

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

  .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;
  }

  .ld-odds-table__header-row,
  .ld-odds-table__row {
    grid-template-columns: 100px repeat(6, 48px);
    min-width: 388px;
    padding: 10px 12px;
  }

  .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: column;
    gap: 8px;
    align-items: flex-start;
  }

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

/* ============================================================
   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 {
  background: var(--color-dark);
  color: #fff;
  box-shadow: 0px 2px 12px 0px rgba(5, 34, 0, 0.25);
}

/* 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;
}

.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;
}

.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;
  }

  .ld-valuebets__nav {
    gap: 6px;
  }

  .ld-valuebets__type-tab {
    font-size: 13px;
    padding: 7px 12px;
  }

  .ld-valuebets__day-tab {
    font-size: 12px;
    padding: 6px 10px;
  }

  .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;
  }

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

  .ld-prediction__nav {
    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: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 8px 0 4px;
  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: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-black);
  margin: 0 0 24px;
  text-align: left;
}

/* Season / generic selector inside tournament pages */
.ld-redesign #content .inner-content .form-select,
.ld-redesign .historic-teams .form-select,
.ld-redesign select.selectslides {
  height: 44px;
  padding: 0 36px 0 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-black) !important;
  background-color: var(--color-bg-white) !important;
  border: 1px solid var(--color-border-button) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin: 0 0 24px !important;
  max-width: 100%;
}

.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: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0 !important;
  padding: 12px 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: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 12px !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,
.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;
background-image:url(/ladritta/images/bg/Back-stadium-homepage.jpg) !important;
}

.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 page: charts grid container */
.ld-redesign .slider-vs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 !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;
}

/* 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: 24px;
    line-height: 30px;
  }
  .ld-redesign .historic-teams {
    padding: 20px 16px;
  }
  .ld-redesign .historic-teams .box-hover-grey {
    width: calc(50% - 16px);
  }
}

/* ============================================================
   PREVIEW HEADER — transparent over cinematic hero
   ============================================================ */
.ld-preview .ld-header-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.ld-preview .ld-header-preview.is-scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.ld-preview .ld-header-preview__bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 80px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.ld-preview .ld-header-preview__mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

.ld-preview .ld-header-preview__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ld-preview .ld-header-preview__logo img {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.ld-preview .ld-header-preview__nav {
  display: flex;
  gap: 36px;
  align-items: center;
  margin-left: auto;
}

.ld-preview .ld-header-preview__nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.ld-preview .ld-header-preview__nav a:hover,
.ld-preview .ld-header-preview__nav a.active {
  color: var(--color-primary);
}

.ld-preview .ld-header-preview__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* User dropdown in preview header (logged-in state) */
.ld-preview .ld-header-preview__actions .dropdown {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.ld-preview .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-preview .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-preview .ld-header-preview__actions .ld-user-toggle:hover .ld-user-icon--wrap,
.ld-preview .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-preview .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-preview .ld-header-preview__actions .dropdown-menu.show {
  display: block;
}

.ld-preview .ld-header-preview__actions .dropdown-menu li {
  list-style: none;
}

.ld-preview .ld-header-preview__actions .dropdown-menu .dropdown-divider {
  height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 4px 6px;
}

.ld-preview .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-preview .ld-header-preview__actions .dropdown-menu .dropdown-item:hover,
.ld-preview .ld-header-preview__actions .dropdown-menu .dropdown-item:focus {
  background: rgba(253, 127, 0, 0.15);
  color: var(--color-primary);
}

.ld-preview .ld-header-preview__actions .dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 4px 6px;
}

@media (max-width: 1024px) {
  .ld-preview .ld-header-preview__actions .ld-user-icon--img {
    width: 36px;
    height: 36px;
  }
}

.ld-preview .ld-header-preview__btn--accedi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: white;
  text-decoration: none;
  transition: all 0.18s ease;
  background: transparent;
}

.ld-preview .ld-header-preview__btn--accedi:hover {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 4px 16px rgba(253, 127, 0, 0.4);
}

.ld-preview .ld-header-preview__mobile-menu {
  display: none;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ld-preview .ld-header-preview__mobile-menu.is-open {
  display: block;
}

.ld-preview .ld-header-preview__mobile-menu a {
  display: block;
  padding: 16px 24px;
  color: white;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
  /* Mobile bar: balanced 3-column grid → [hamburger][logo centered][actions] */
  .ld-preview .ld-header-preview__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 14px 16px;
    max-width: 100%;
  }
  .ld-preview .ld-header-preview__mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: white;
    font-size: 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .ld-preview .ld-header-preview__mobile-toggle:hover,
  .ld-preview .ld-header-preview__mobile-toggle:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
  }
  .ld-preview .ld-header-preview__nav {
    display: none;
  }
  .ld-preview .ld-header-preview__logo {
    justify-self: center;
    margin: 0;
  }
  .ld-preview .ld-header-preview__logo img {
    height: 40px;
  }
  .ld-preview .ld-header-preview__actions {
    justify-self: end;
    gap: 8px;
  }
  .ld-preview .ld-header-preview__btn--accedi {
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .ld-preview .ld-header-preview__bar {
    padding: 12px 12px;
    column-gap: 8px;
  }
  .ld-preview .ld-header-preview__logo img {
    height: 34px;
  }
  .ld-preview .ld-header-preview__btn--accedi {
    padding: 7px 12px;
    font-size: 11px;
    letter-spacing: 0.8px;
  }
  .ld-preview .ld-header-preview__mobile-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* ============================================================
   CINEMATIC HERO — preview only
   ============================================================ */
.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: 900;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -1.5px;
  margin: 0 0 32px 0;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.ld-hero-cinematic__title--white {
  display: block;
  color: #FFFFFF;
}

.ld-hero-cinematic__title--orange {
  display: block;
  color: var(--color-primary);
  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__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;
  }
}

/* ============================================================
   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;
  align-items: stretch;
}

.ld-preview .ld-preview-dritta__matchcard {
  margin-top: 0;
  width: 100%;
  align-self: stretch;
}

.ld-preview .ld-preview-dritta__chat {
  width: 100%;
  align-self: stretch;
}

@media (max-width: 1024px) {
  .ld-preview .ld-preview-dritta {
    padding: 40px 24px 24px;
  }
  .ld-preview .ld-preview-dritta__inner {
    grid-template-columns: 1fr;
  }
  .ld-preview .ld-preview-dritta__chat {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}