/* MatchdayHotels V9.2.17 - Compact Away-Day Budget
   Conversion-first presentation only. Existing calculator logic remains untouched. */

[data-matchday-budget].mhd-budget-v9217-enabled {
  padding: clamp(.9rem, 1.8vw, 1.25rem) !important;
  border-radius: 1.25rem !important;
}

.mhd-budget-v9217-compact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--club-primary, #204c93) 42%, #738399);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 94% 14%, color-mix(in srgb, var(--club-secondary, #ff552d) 16%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--club-primary, #204c93) 17%, #0a1620), #0a151e 72%);
  box-shadow: 0 .8rem 2.3rem rgba(0,0,0,.14);
  color: #fff;
}

.mhd-budget-v9217-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem 1rem;
  align-items: center;
  min-width: 0;
}

.mhd-budget-v9217-badge {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: .35rem;
  box-shadow: 0 .25rem .9rem rgba(0,0,0,.18);
}

.mhd-budget-v9217-heading {
  min-width: 0;
}

.mhd-budget-v9217-heading .eyebrow {
  display: block;
  margin: 0 0 .2rem;
  color: var(--club-secondary, #ff552d);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.mhd-budget-v9217-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.8vw, 2rem) !important;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.mhd-budget-v9217-plan {
  grid-column: 1 / -1;
  margin: 0;
  color: #bdc8d2;
  font-size: .85rem;
  line-height: 1.4;
}

.mhd-budget-v9217-figures {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

.mhd-budget-v9217-main {
  display: inline-flex;
  align-items: baseline;
  gap: .42rem;
  margin-right: .2rem;
}

.mhd-budget-v9217-main strong {
  color: #fff;
  font-size: clamp(1.8rem, 4.2vw, 2.65rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.mhd-budget-v9217-main span {
  max-width: 9rem;
  color: #c9d1d8;
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.2;
}

.mhd-budget-v9217-chip {
  display: inline-flex;
  gap: .35rem;
  align-items: baseline;
  padding: .42rem .62rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  color: #dce3e8;
  font-size: .74rem;
  white-space: nowrap;
}

.mhd-budget-v9217-chip strong {
  color: #fff;
  font-size: .8rem;
}

.mhd-budget-v9217-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  width: min(18rem, 100%);
}

.mhd-budget-v9217-actions .button,
.mhd-budget-v9217-actions button {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  justify-content: center;
  margin: 0;
  text-align: center;
}

.mhd-budget-v9217-expand {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: .7rem;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.mhd-budget-v9217-expand:hover,
.mhd-budget-v9217-expand:focus-visible {
  background: rgba(255,255,255,.09);
}

.mhd-budget-v9217-details {
  display: none;
  margin-top: 1rem;
}

[data-matchday-budget].mhd-budget-v9217-enabled.is-budget-expanded .mhd-budget-v9217-details {
  display: block;
}

/* The compact header replaces the large budget ribbon. */
.mhd-budget-v9217-details > .mhd-budget-v8092-ribbon {
  display: none !important;
}

/* Expanded mode is still more refined than the old full-height presentation. */
.mhd-budget-v9217-details .mhd-budget-v1-ai-summary {
  margin-bottom: .8rem !important;
  padding: .8rem .9rem !important;
}

.mhd-budget-v9217-details .mhd-budget-v8092-primary {
  padding: clamp(.9rem, 2vw, 1.15rem) !important;
}

.mhd-budget-v9217-details .mhd-budget-v8092-primary-total .mhd-budget-v1-total strong {
  font-size: clamp(2.45rem, 6vw, 3.5rem) !important;
}

.mhd-budget-v9217-details .mhd-budget-v8092-primary-cards article {
  padding: .85rem !important;
}

.mhd-budget-v9217-details .mhd-budget-v8092-optional {
  margin-top: 1rem !important;
}

.mhd-budget-v9217-details .mhd-budget-v8092-option-grid {
  gap: .6rem !important;
}

/* Avoid old large section spacing winning when the enhancement is active. */
[data-matchday-budget].mhd-budget-v9217-enabled > .section-heading {
  display: none !important;
}

@media (max-width: 760px) {
  [data-matchday-budget].mhd-budget-v9217-enabled {
    padding: .75rem !important;
  }

  .mhd-budget-v9217-compact {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .mhd-budget-v9217-actions {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .mhd-budget-v9217-main strong {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .mhd-budget-v9217-copy {
    grid-template-columns: 1fr;
  }

  .mhd-budget-v9217-badge {
    width: 2.8rem;
    height: 2.8rem;
  }

  .mhd-budget-v9217-plan,
  .mhd-budget-v9217-figures {
    grid-column: 1;
  }

  .mhd-budget-v9217-actions {
    grid-template-columns: 1fr;
  }

  .mhd-budget-v9217-chip {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mhd-budget-v9217-details {
    animation: mhd-budget-v9217-reveal .18s ease-out;
  }

  @keyframes mhd-budget-v9217-reveal {
    from { opacity: 0; transform: translateY(-.25rem); }
    to { opacity: 1; transform: translateY(0); }
  }
}