/* Ultimate Slots Shortcodes — minimal component CSS */

/*
  Game demo sizing policy:
  - Width: always 100%
  - Height: responsive, with different minimums per breakpoint.
    Mobile min: 560px
    Desktop min: 560px

  We intentionally size by viewport width/height rather than iframe content (cross-origin).
  The height is controlled via the CSS custom property --ussc-demo-height.
  - Default (mobile): clamp(560px, 70vw, 90vh)
  - Desktop (>=768px): clamp(560px, 45vw, 80vh)

  If the shortcode passes a fixed height, the plugin sets --ussc-demo-height inline,
  overriding these defaults.
*/

.ussc-demo {
  --ussc-demo-height: clamp(560px, 70vw, 90vh);
}

@media (min-width: 768px) {
  .ussc-demo {
    --ussc-demo-height: clamp(560px, 45vw, 80vh);
  }
}

.ussc-demo__poster-img,
.ussc-demo__poster-placeholder {
  height: var(--ussc-demo-height);
}

.ussc-demo__frame-wrap {
  height: var(--ussc-demo-height);
}

/* ------------------------------------------------------------
   At-a-glance table layout (React parity)
   ------------------------------------------------------------ */

.ussc-glance__desktop {
  display: none;
}

@media (min-width: 1024px) {
  .ussc-glance__mobile { display: none; }
  .ussc-glance__desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
}

.ussc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 1);
  border-radius: 1rem;
  overflow: hidden;
}

.ussc-table td,
.ussc-table th {
  padding: 0.95rem 1.25rem;
  border-top: 1px solid rgba(226, 232, 240, 1);
}

.ussc-table tr:first-child td,
.ussc-table tr:first-child th {
  border-top: 0;
}

.ussc-table td:first-child {
  color: #334155;
  font-weight: 700;
}

.ussc-table td:last-child {
  text-align: right;
  color: #0f172a;
  font-weight: 800;
}

.ussc-table a {
  color: #f59e0b;
  font-weight: 800;
  text-decoration: none;
}

.ussc-table a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   FAQ (React parity)
   ------------------------------------------------------------ */

.ussc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ussc-faq__item {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 1);
  border-radius: 1.25rem;
  overflow: hidden;
}

.ussc-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #0f172a;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Only show focus ring for keyboard navigation (prevents the "yellow underline" on click/tap). */
.ussc-faq__q:focus { outline: none; }
.ussc-faq__q:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 2px;
}

.ussc-faq__chev {
  width: 1.25rem;
  height: 1.25rem;
  color: #64748b;
  transition: transform 180ms ease;
}

.ussc-faq__item.is-open .ussc-faq__chev {
  transform: rotate(180deg);
}

.ussc-faq__a {
  border-top: 1px solid rgba(226, 232, 240, 1); /* keep this slate, NOT amber */
  padding: 0.85rem 1.5rem 1.25rem;
}

.ussc-faq__a-inner > :first-child {
  margin-top: 0;
}

.ussc-faq__a-inner > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Callout spacing
   ------------------------------------------------------------ */

.ussc-callout {
  /* wpautop + Tailwind Typography can interfere with margins; force spacing. */
  margin: 1rem 0 !important;
}

.ussc-callout + .ussc-callout {
  margin-top: 0;
}