/* ====== Quota Maggiorata – Conflict-safe CSS ====== */
.qm-card, .qm-card * { box-sizing: border-box; }

/* Base card */
.qm-card {
  --qm-radius: 18px;
  --qm-gap: 14px;
  --qm-pad: 16px;
  --qm-shadow: 0 8px 24px rgba(0,0,0,0.08);
  --qm-border: 1px solid rgba(0,0,0,0.06);

  display: block;
  position: relative;
  background: #ffffff;
  border: var(--qm-border);
  border-radius: var(--qm-radius);
  box-shadow: var(--qm-shadow);
  padding: var(--qm-pad);
  max-width: 720px;
  margin: 12px auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  overflow: hidden;
}

/* Normalize basics */
.qm-card h1, .qm-card h2, .qm-card h3 { margin: 0; font-weight: 700; line-height: 1.2; color: #111; }
.qm-card p { margin: 0 0 8px 0; }
.qm-card img { display: block; max-width: 100%; height: auto; }

/* Header */
.qm-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--qm-gap) !important; margin-bottom: var(--qm-gap) !important; }
.qm-title-wrap { display: flex !important; align-items: center !important; gap: 10px !important; }
.qm-title { font-size: 1.3rem !important; font-weight: 700 !important; }

/* Verified icon next to title */
.qm-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 6px;
}

.qm-verified-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}


/* Hide badge by design */
.qm-badge { display: none !important; }

/* Bookmaker */
.qm-bookmaker { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0; }
.qm-logo {
  width: 75px !important; height: 75px !important; max-width: 75px !important; max-height: 75px !important;
  object-fit: contain !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.06) !important; background: #fff !important; flex: 0 0 75px !important;
}
.qm-bookmaker-name { font-weight: 600 !important; font-size: 1rem !important; color: #111 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Body */
.qm-body { display: grid !important; gap: var(--qm-gap) !important; }

/* Two boxes: left is EVENT (or fallback original), right is boosted */
.qm-odds { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--qm-gap) !important; }
.qm-odd { background: #f7f7f9 !important; border: 1px solid rgba(0,0,0,0.05) !important; border-radius: 14px !important; padding: 12px !important; }
.qm-odd .qm-label { display: block !important; font-size: 0.85rem !important; color: #555 !important; }
.qm-odd .qm-value { font-size: 1.2rem !important; font-weight: 800 !important; color: #111 !important; line-height: 1.3; }
.qm-odd-left { background: #fafafa !important; } /* event/original box */
.qm-odd-boosted { background: #eef9f1 !important; border-color: rgba(0,128,0,0.15) !important; }
.qm-odd-boosted .qm-value { font-size: 1.5rem !important; }

/* Centered offer + timer */
.qm-offerta { font-size: 1rem !important; line-height: 1.55 !important; text-align: center !important; margin-top: 6px !important; color: #111 !important; }
.qm-timer { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 8px !important; }
.qm-timer-label { font-size: 0.95rem !important; color: #444 !important; }
.qm-countdown { font-variant-numeric: tabular-nums !important; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace !important; font-weight: 800 !important; font-size: 1.05rem !important; color: #111 !important; }

/* Footer + CTA */
.qm-footer { margin-top: 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; justify-content: center !important; }

/* Fluorescent gradient CTA with stronger hover color shift */
.qm-cta {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  text-decoration: none !important; font-weight: 800 !important; padding: 14px 22px !important; border-radius: 14px !important; border: 0 !important; cursor: pointer !important;

  /* base gradient */
  background: linear-gradient(90deg, #ff00f7, #ff8a00, #ffe600, #00f5d4) !important;
  background-size: 300% 300% !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  box-shadow: 0 8px 18px rgba(255, 0, 247, 0.25) !important;

  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .3s ease !important;
  position: relative !important; overflow: hidden !important;
}

/* sheen */
.qm-cta::after {
  content: "" !important; position: absolute !important; top: 0; left: -150% !important; width: 120% !important; height: 100% !important;
  transform: skewX(-20deg) !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%) !important;
  transition: left .6s ease !important;
}

/* hover: different gradient palette + animation */
.qm-cta:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background: linear-gradient(90deg, #00f5d4, #00e5ff, #7cff00, #ffe600) !important; /* alternate palette */
  background-size: 300% 300% !important;
  animation: qmGradientShift 2s linear infinite !important;
  box-shadow: 0 10px 24px rgba(0, 229, 255, 0.35), 0 6px 16px rgba(124, 255, 0, 0.25) !important;
}
.qm-cta:hover::after { left: 150% !important; }
.qm-cta:active { transform: translateY(0) scale(0.995) !important; filter: brightness(0.95) !important; }

@keyframes qmGradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Accordion */
.qm-accordion { margin-top: 12px !important; border-top: 1px dashed rgba(0,0,0,0.12) !important; padding-top: 10px !important; }
.qm-accordion summary { list-style: none !important; cursor: pointer !important; user-select: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 8px 0 !important; font-weight: 800 !important; font-size: 1rem !important; color: #111 !important; }
.qm-accordion summary::-webkit-details-marker { display: none !important; }
.qm-accordion summary::after { content: "" !important; width: 10px !important; height: 10px !important; border-right: 2px solid rgba(0,0,0,0.6) !important; border-bottom: 2px solid rgba(0,0,0,0.6) !important; transform: rotate(-45deg) !important; transition: transform .2s ease !important; }
.qm-accordion[open] summary::after { transform: rotate(45deg) !important; }
.qm-accordion .qm-accordion-content { padding: 10px 0 6px !important; color: #333 !important; font-size: 0.95rem !important; line-height: 1.55 !important; border-top: 1px solid rgba(0,0,0,0.06) !important; }
.qm-accordion a { color: #0a7cff !important; text-decoration: underline !important; }

/* Expired */
.qm-card.qm-expired { opacity: 0.7 !important; }
.qm-card.qm-expired .qm-cta { pointer-events: none !important; filter: grayscale(1) !important; }

/* Responsive */
@media (max-width: 540px) {
  .qm-title { font-size: 1.2rem !important; }
  .qm-logo { width: 64px !important; height: 64px !important; }
  .qm-odds { grid-template-columns: 1fr !important; }
  .qm-offerta { font-size: 1rem !important; }
  .qm-countdown { font-size: 1.05rem !important; }
  .qm-cta { width: 100% !important; }
}
@media (min-width: 768px) {
  .qm-title { font-size: 1.4rem !important; }
  .qm-offerta { font-size: 1.1rem !important; }
  .qm-timer-label { font-size: 1rem !important; }
  .qm-countdown { font-size: 1.15rem !important; }
  .qm-cta { font-size: 1.05rem !important; padding: 16px 26px !important; }
}