/**
 * tangible-marketeer structural CSS — ported from the design scarecrow
 * (tangible-app design-preview/pricing-blocks.html, normative).
 * TUI-token consumer: every visual decision is var(--tui-*, stock-TUI
 * fallback); the blocks paint no brand of their own.
 */

.tgbl-pricing {
  --_bg:           var(--tui-color-bg, oklch(0.995 0.003 260));
  --_surface:      var(--tui-color-bg-surface, oklch(0.977 0.01 260));
  --_fg:           var(--tui-color-fg, oklch(0.18 0.01 260));
  --_fg-secondary: var(--tui-color-fg-secondary, oklch(0.42 0.01 260));
  --_fg-muted:     var(--tui-color-fg-muted, oklch(0.55 0.01 260));
  --_border:       var(--tui-color-border, oklch(0.9 0.01 260));
  --_divider:      var(--tui-color-divider, oklch(0.94 0.01 260));
  --_primary:          var(--tui-theme-primary-base, oklch(0.52 0.19 268));
  --_primary-strong:   var(--tui-theme-primary-strong, oklch(0.44 0.19 268));
  --_primary-subtle:   var(--tui-theme-primary-subtle, oklch(0.93 0.057 268));
  --_primary-subtlest: var(--tui-theme-primary-subtlest, oklch(0.97 0.029 268));
  --_on-accent:    var(--tui-color-fg-on-accent, #fff);
  --_success:      var(--tui-theme-success-base, oklch(0.52 0.15 148));
  --_radius-md:    var(--tui-radius-md, 8px);
  --_radius-lg:    var(--tui-radius-lg, 12px);
  --_radius-xl:    var(--tui-radius-xl, 16px);
  --_border-width: var(--tui-border-width, 1px);
  --_font-body:    var(--tgbl-font-body, var(--tui-typography-font-family, inherit));
  --_font-display: var(--tgbl-font-display, var(--_font-body));

  font-family: var(--_font-body);
  color: var(--_fg);
  background: var(--_surface);
  border-radius: var(--_radius-xl);
  padding: 2rem;
  transition: background-color 0.3s, color 0.3s;
}

.tgbl-grid { display: grid; gap: 1.5rem; max-width: 42rem; margin: 0 auto; }
@media (min-width: 640px) { .tgbl-grid { grid-template-columns: 1fr 1fr; } }

.tgbl-card {
  display: flex; flex-direction: column; position: relative;
  background: var(--_bg);
  border: var(--_border-width) solid var(--_border);
  border-radius: var(--_radius-lg);
  padding: 1.5rem;
  box-shadow: var(--tgbl-shadow-card, none);
}
.tgbl-card--highlight { border-color: var(--_primary); box-shadow: 0 0 0 1px var(--_primary), 0 10px 24px -12px var(--_primary); }
.tgbl-badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--_primary); color: var(--_on-accent);
  border-radius: 999px; padding: 0.15rem 0.75rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
/* color:inherit guards against host heading rules (e.g. wp-admin's h3 color) */
.tgbl-card h3 { font-family: var(--_font-display); font-size: 1.25rem; font-weight: 700; margin: 0; color: inherit; }
.tgbl-price-row { margin: 1rem 0 0; }
.tgbl-price { font-family: var(--_font-display); font-size: 2.5rem; font-weight: 700; }
.tgbl-per { color: var(--_fg-muted); }
.tgbl-ppp-note { margin: 0.25rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--_success); display: none; }
.tgbl-features { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.tgbl-features li { display: flex; gap: 0.5rem; }
.tgbl-features .tick { color: var(--_success); }
.tgbl-cta { margin-top: auto; padding-top: 1.5rem; }
.tgbl-btn {
  display: block; text-align: center; font-size: 0.875rem; font-weight: 700;
  border-radius: var(--_radius-md); padding: 0.65rem 1rem; text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tgbl-btn--solid { background: var(--_primary); color: var(--_on-accent); }
.tgbl-btn--solid:hover { background: var(--_primary-strong); color: var(--_on-accent); }
.tgbl-btn--outline { border: 2px solid var(--_primary); color: var(--_primary); }
.tgbl-btn--outline:hover { background: var(--_primary); color: var(--_on-accent); }
.tgbl-upsell {
  max-width: 42rem; margin: 1.5rem auto 0; text-align: center;
  background: var(--_primary-subtlest); border-radius: var(--_radius-md);
  padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--_fg-secondary);
}
.tgbl-upsell a { color: var(--_primary-strong); font-weight: 700; }

/* ── table preset ── */
.tgbl-table-wrap { background: var(--_bg); border: var(--_border-width) solid var(--_border); border-radius: var(--_radius-lg); overflow-x: auto; box-shadow: var(--tgbl-shadow-card, none); }
.tgbl-table { width: 100%; text-align: left; font-size: 0.875rem; border-collapse: collapse; }
.tgbl-table th, .tgbl-table td { padding: 1rem; border-bottom: var(--_border-width) solid var(--_divider); }
.tgbl-table tr:last-child td { border-bottom: none; }
.tgbl-table thead th { font-family: var(--_font-display); font-size: 1.1rem; }
.tgbl-table .hi { background: var(--_primary-subtle); }
.tgbl-table .rowlabel { font-weight: 600; }
.tgbl-table .tick { color: var(--_success); }
.tgbl-table .tgbl-btn { display: inline-block; }
.tgbl-pill { margin-left: 0.35rem; background: var(--_primary); color: var(--_on-accent); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }

/* ── strip preset ── */
.tgbl-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--_bg); border: var(--_border-width) solid var(--_border); border-radius: var(--_radius-lg); padding: 1.25rem; box-shadow: var(--tgbl-shadow-card, none); }
.tgbl-strip__id { display: flex; align-items: center; gap: 1rem; }
.tgbl-strip__logo { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; background: var(--_primary); color: var(--_on-accent); border-radius: var(--_radius-md); font-family: var(--_font-display); font-size: 1.1rem; font-weight: 700; }
.tgbl-strip__name { font-family: var(--_font-display); font-size: 1.1rem; font-weight: 700; margin: 0; }
.tgbl-strip__meta { font-size: 0.875rem; color: var(--_fg-secondary); margin: 0; }
.tgbl-strip__ctas { display: flex; gap: 0.5rem; }
.tgbl-strip .tgbl-btn { padding: 0.5rem 1rem; }

/* ── rows preset ── */
.tgbl-rows { display: grid; gap: 0.75rem; max-width: 46rem; margin: 0 auto; }
.tgbl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.25rem; background: var(--_bg); border: var(--_border-width) solid var(--_border); border-radius: var(--_radius-lg); padding: 1rem 1.25rem; box-shadow: var(--tgbl-shadow-card, none); }
.tgbl-row--highlight { border-color: var(--_primary); box-shadow: 0 0 0 1px var(--_primary); }
.tgbl-row__name { font-family: var(--_font-display); font-size: 1.05rem; font-weight: 700; margin: 0; }
.tgbl-row__flag { display: inline-block; margin-left: 0.5rem; background: var(--_primary-subtle); color: var(--_primary-strong); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; vertical-align: middle; }
.tgbl-row__meta { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--_fg-muted); }
.tgbl-row .tgbl-price { font-size: 1.4rem; }
.tgbl-row .tgbl-per { font-size: 0.8rem; }
.tgbl-row .tgbl-btn { padding: 0.5rem 1.1rem; }
@media (max-width: 600px) { .tgbl-row { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ── seat-slider preset ── */
.tgbl-seat { max-width: 30rem; margin: 0 auto; background: var(--_bg); border: var(--_border-width) solid var(--_border); border-radius: var(--_radius-xl); padding: 2rem; box-shadow: var(--tgbl-shadow-card, none); }
.tgbl-seat__q { font-family: var(--_font-display); font-size: 1.15rem; font-weight: 700; margin: 0; }
.tgbl-seat__count { color: var(--_primary); }
.tgbl-seat input[type="range"] { width: 100%; margin-top: 1.25rem; accent-color: var(--_primary); }
.tgbl-seat__scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--_fg-muted); }
.tgbl-seat__result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: var(--_border-width) solid var(--_divider); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tgbl-seat__tier { font-family: var(--_font-display); font-weight: 700; margin: 0; }
.tgbl-seat__meta { font-size: 0.8rem; color: var(--_fg-muted); margin: 0.15rem 0 0; }
.tgbl-seat .tgbl-btn { padding: 0.55rem 1.25rem; }

/* ── featured preset ── */
.tgbl-featured { max-width: 28rem; margin: 0 auto; background: var(--_bg); border: var(--_border-width) solid var(--_border); border-radius: var(--_radius-xl); padding: 2rem; box-shadow: var(--tgbl-shadow-card, none); }
.tgbl-featured__kicker { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--_primary); margin: 0; }
.tgbl-featured .tgbl-price { font-size: 3rem; }
.tgbl-featured__meta { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--_fg-secondary); }
.tgbl-featured .tgbl-btn { margin-top: 1.5rem; display: block; text-align: center; }