/* Trade Show Booking — pricing widget (spec §5).
 * Layout from Ray's template (pricing-configurator-container.json), the right card dark like
 * Corporate Booking's pricing card. Every look is a CSS variable with the default as fallback;
 * the Elementor widget's controls set the variables on {{WRAPPER}} .tsb, so nothing changes until
 * a value is set. Stacking: --tsb-cols wins, else --tsb-cols-default (two columns, one below 860px). */
.tsb {
  --tsb-ink: #1d1d1f;
  --tsb-muted: #6e6e73;
  --tsb-cols-default: minmax(0, var(--tsb-split, 55%)) minmax(0, 1fr);
  --tsb-sticky-default: sticky;
  max-width: var(--tsb-max-width, 1040px);
  margin: 0 auto;
  color: var(--tsb-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.tsb *, .tsb *::before, .tsb *::after { box-sizing: border-box; }
#tsb-pricing { scroll-margin-top: var(--tsb-anchor-offset, 120px); } /* clears a sticky header when Back scrolls here */

/* 0.3.2: both cards the same height (Ray); the choices card spreads its groups down that height. */
.tsb-cards { display: grid; grid-template-columns: var(--tsb-cols, var(--tsb-cols-default)); gap: var(--tsb-gap, 32px); align-items: var(--tsb-cards-align, stretch); }
.tsb-card { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 60px rgba(0,0,0,.08); }

.tsb-card--choices {
  order: 1;
  display: flex; flex-direction: column; justify-content: var(--tsb-choices-justify, flex-start); gap: var(--tsb-group-gap, 32px);
  padding: var(--tsb-choices-pad, 40px);
  background: var(--tsb-choices-bg, #fff);
  border: var(--tsb-choices-border-width, 0) solid var(--tsb-choices-border, transparent);
  border-radius: var(--tsb-choices-radius, 36px);
}
.tsb-card--price {
  order: var(--tsb-price-order, 2);
  position: var(--tsb-sticky, var(--tsb-sticky-default));
  top: var(--tsb-sticky-top, 24px);
  display: flex; flex-direction: column; gap: 24px;
  padding: var(--tsb-price-pad, 40px);
  background: var(--tsb-price-bg, #1c1c1a);
  color: var(--tsb-price-text, #fff);
  border: var(--tsb-price-border-width, 0) solid var(--tsb-price-border, transparent);
  border-radius: var(--tsb-price-radius, 28px);
}

.tsb .tsb-label { margin: 0 0 var(--tsb-label-gap, 12px); font-size: 15px; font-weight: 600; color: var(--tsb-label-color, var(--tsb-ink)); }

/* Crew: segmented control */
.tsb-seg { display: flex; gap: 4px; padding: var(--tsb-seg-pad, 4px); background: var(--tsb-seg-track, #f0f0f3); border-radius: var(--tsb-seg-radius, 18px); }
.tsb button.tsb-seg__btn, .tsb button.tsb-chip, .tsb button.tsb-addon {
  -webkit-appearance: none; appearance: none; margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; cursor: pointer;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out, transform .1s ease-out, box-shadow .16s ease-out;
}
.tsb button.tsb-seg__btn {
  flex: 1 1 0; min-height: var(--tsb-seg-height, 64px); padding: 10px 12px; border: 0;
  border-radius: var(--tsb-seg-btn-radius, 14px); background: var(--tsb-seg-bg, transparent); color: var(--tsb-seg-color, var(--tsb-muted));
  font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center;
}
.tsb button.tsb-seg__btn:hover, .tsb button.tsb-seg__btn:focus { background: var(--tsb-seg-hover-bg, rgba(255,255,255,.55)); color: var(--tsb-seg-hover-color, var(--tsb-ink)); }
.tsb button.tsb-seg__btn[aria-pressed="true"], .tsb button.tsb-seg__btn[aria-pressed="true"]:hover, .tsb button.tsb-seg__btn[aria-pressed="true"]:focus {
  background: var(--tsb-seg-sel-bg, #fff); color: var(--tsb-seg-sel-color, var(--tsb-ink)); box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* Booking length: chips */
/* In a card taller than its content, the length chips grow to fill it (--tsb-chips-grow: 1, the default). */
.tsb .tsb-group--length { display: flex; flex-direction: column; flex: var(--tsb-chips-grow, 1) 1 auto; }
.tsb-chips { display: grid; grid-template-columns: repeat(var(--tsb-chip-cols, 2), minmax(0, 1fr)); grid-auto-rows: 1fr; flex: 1 1 auto; gap: var(--tsb-chip-gap, 12px); }
.tsb button.tsb-chip {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: var(--tsb-chip-height, 92px); padding: var(--tsb-chip-pad, 16px 18px);
  border: var(--tsb-chip-border-width, 1px) solid var(--tsb-chip-border, rgba(0,0,0,.14)); border-radius: var(--tsb-chip-radius, 20px);
  background: var(--tsb-chip-bg, #fff); color: var(--tsb-chip-color, var(--tsb-ink)); text-align: left;
}
.tsb button.tsb-chip[hidden] { display: none; }
.tsb button.tsb-chip:hover, .tsb button.tsb-chip:focus { background: var(--tsb-chip-hover-bg, #f5f5f7); border-color: var(--tsb-chip-hover-border, rgba(0,0,0,.26)); color: var(--tsb-chip-hover-color, var(--tsb-chip-color, var(--tsb-ink))); }
.tsb button.tsb-chip:hover .tsb-chip__price, .tsb button.tsb-chip:focus .tsb-chip__price { color: var(--tsb-chip-hover-price-color, var(--tsb-chip-price-color, var(--tsb-muted))); }
.tsb button.tsb-chip[aria-pressed="true"], .tsb button.tsb-chip[aria-pressed="true"]:hover, .tsb button.tsb-chip[aria-pressed="true"]:focus {
  background: var(--tsb-chip-sel-bg, #1d1d1f); color: var(--tsb-chip-sel-color, #fff); border-color: var(--tsb-chip-sel-border, #1d1d1f);
}
.tsb .tsb-chip__label { font-size: 15px; font-weight: 600; }
.tsb .tsb-chip__price { font-size: 24px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tsb-chip-price-color, var(--tsb-muted)); }
.tsb button.tsb-chip[aria-pressed="true"] .tsb-chip__price { color: var(--tsb-chip-sel-price-color, rgba(255,255,255,.78)); }

/* Add-ons: switch cards */
.tsb-addons { display: flex; flex-direction: column; gap: 12px; }
.tsb button.tsb-addon {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: var(--tsb-addon-border-width, 1px) solid var(--tsb-addon-border, rgba(0,0,0,.14)); border-radius: var(--tsb-addon-radius, 16px); padding: var(--tsb-addon-pad, 14px 18px);
  background: var(--tsb-addon-bg, #fff); color: var(--tsb-addon-color, var(--tsb-ink)); font-size: 15px; text-align: left;
}
.tsb button.tsb-addon:hover, .tsb button.tsb-addon:focus {
  background: var(--tsb-addon-hover-bg, var(--tsb-addon-bg, #fff)); border-color: var(--tsb-addon-hover-border, var(--tsb-addon-border, rgba(0,0,0,.14)));
  color: var(--tsb-addon-hover-color, var(--tsb-addon-color, var(--tsb-ink)));
}
.tsb button.tsb-addon:hover .tsb-addon__price, .tsb button.tsb-addon:focus .tsb-addon__price { color: var(--tsb-addon-hover-price-color, var(--tsb-addon-price-color, var(--tsb-muted))); }
.tsb button.tsb-addon[aria-pressed="true"], .tsb button.tsb-addon[aria-pressed="true"]:hover, .tsb button.tsb-addon[aria-pressed="true"]:focus {
  background: var(--tsb-addon-sel-bg, #f5f5f7); border-color: var(--tsb-addon-sel-border, var(--tsb-ink));
  color: var(--tsb-addon-sel-color, var(--tsb-addon-color, var(--tsb-ink)));
}
.tsb button.tsb-addon[aria-pressed="true"] .tsb-addon__price { color: var(--tsb-addon-sel-price-color, var(--tsb-addon-price-color, var(--tsb-muted))); }
.tsb .tsb-addon__switch { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--tsb-switch-off, #d2d2d7); transition: background-color .16s ease-out; }
.tsb .tsb-addon__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .16s ease-out; }
.tsb button.tsb-addon[aria-pressed="true"] .tsb-addon__switch { background: var(--tsb-switch-on, #34c759); }
.tsb button.tsb-addon[aria-pressed="true"] .tsb-addon__switch::after { transform: translateX(16px); }
.tsb .tsb-addon__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsb .tsb-addon__label { font-weight: 600; }
.tsb .tsb-addon__desc { font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--tsb-addon-desc-color, var(--tsb-muted)); }
.tsb button.tsb-addon:hover .tsb-addon__desc, .tsb button.tsb-addon:focus .tsb-addon__desc { color: var(--tsb-addon-hover-desc-color, var(--tsb-addon-desc-color, var(--tsb-muted))); }
.tsb button.tsb-addon[aria-pressed="true"] .tsb-addon__desc { color: var(--tsb-addon-sel-desc-color, var(--tsb-addon-desc-color, var(--tsb-muted))); }
.tsb .tsb-addon__price { font-variant-numeric: tabular-nums; color: var(--tsb-addon-price-color, var(--tsb-muted)); }

.tsb button.tsb-seg__btn:focus-visible, .tsb button.tsb-chip:focus-visible, .tsb button.tsb-addon:focus-visible, .tsb a.tsb-book:focus-visible { outline: 2px solid #0a64d8; outline-offset: 2px; }

/* Pricing card */
.tsb .tsb-crew { font-size: 15px; color: var(--tsb-crew-color, rgba(255,255,255,.7)); }
.tsb .tsb-live { display: flex; flex-direction: column; gap: 8px; }
/* 0.3.3: "2 days ... $7,500" on one line, then one line per chosen add-on. */
.tsb .tsb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tsb .tsb-len { font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--tsb-len-color, inherit); }
.tsb .tsb-line__price { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tsb-line-price-color, var(--tsb-len-color, inherit)); }
.tsb .tsb-addon-lines { display: flex; flex-direction: column; gap: 4px; }
.tsb .tsb-addon-lines:empty { display: none; }
.tsb .tsb-line--addon { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--tsb-addon-line-color, rgba(255,255,255,.75)); }
/* 0.3.4: "Total … $8,300" on its own line under the add-ons. */
.tsb .tsb-line--total { align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--tsb-total-divider, rgba(255,255,255,.14)); }
.tsb .tsb-total-label { font-size: 17px; font-weight: 600; color: var(--tsb-total-label-color, inherit); }
.tsb .tsb-total { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tsb-total-color, inherit); }
.tsb .tsb-deposit { font-size: 15px; color: var(--tsb-deposit-color, rgba(255,255,255,.7)); }

.tsb ul.tsb-list { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--tsb-divider, rgba(255,255,255,.14)); display: flex; flex-direction: column; gap: var(--tsb-list-gap, 14px); }
.tsb ul.tsb-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; font-size: 16px; line-height: 1.4; list-style: none; color: var(--tsb-list-color, inherit); }
.tsb ul.tsb-list li::before { content: none; }
.tsb ul.tsb-list li[hidden] { display: none; }
.tsb ul.tsb-list li.is-strong { font-weight: 600; }
.tsb .tsb-tick { flex: none; width: var(--tsb-tick-size, 20px); height: var(--tsb-tick-size, 20px); margin-top: 1px; color: var(--tsb-tick-color, #c4251c); }

.tsb ul.tsb-notes { list-style: none; margin: 0; padding: var(--tsb-note-pad, 0); background: var(--tsb-note-bg, transparent); border-radius: var(--tsb-note-radius, 12px); display: flex; flex-direction: column; gap: var(--tsb-note-gap, 6px); }
.tsb ul.tsb-notes li { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--tsb-note-color, rgba(255,255,255,.7)); }
.tsb ul.tsb-notes li::before { content: none; }
.tsb ul.tsb-notes li[hidden] { display: none; }

.tsb a.tsb-book {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tsb-btn-width, 100%); margin-top: auto;
  padding: var(--tsb-btn-pad, 18px 24px); border: 1px solid var(--tsb-btn-border, transparent); border-radius: var(--tsb-btn-radius, 14px);
  background: var(--tsb-btn-bg, #c8a96d); color: var(--tsb-btn-color, #1c1c1a);
  font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .16s ease-out, color .16s ease-out, transform .1s ease-out;
}
.tsb a.tsb-book:hover, .tsb a.tsb-book:focus {
  background: var(--tsb-btn-hover-bg, #d6bc86); color: var(--tsb-btn-hover-color, var(--tsb-btn-color, #1c1c1a)); border-color: var(--tsb-btn-hover-border, var(--tsb-btn-border, transparent));
}

.tsb button.tsb-seg__btn:active, .tsb button.tsb-chip:active, .tsb button.tsb-addon:active, .tsb a.tsb-book:active { transform: scale(var(--tsb-press, .97)); }

.tsb .tsb-admin-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #8a1c12; font-size: 13px; }

@media (max-width: 860px) {
  .tsb { --tsb-cols-default: minmax(0, 1fr); --tsb-sticky-default: static; }
  .tsb-card--choices { padding: var(--tsb-choices-pad, 20px); gap: var(--tsb-group-gap, 24px); border-radius: var(--tsb-choices-radius, 28px); }
  .tsb-card--price { padding: var(--tsb-price-pad, 28px 24px); border-radius: var(--tsb-price-radius, 22px); }
}
@media (max-width: 420px) {
  .tsb button.tsb-seg__btn { font-size: 14px; }
  .tsb button.tsb-chip { min-height: var(--tsb-chip-height, 84px); padding: var(--tsb-chip-pad, 14px); }
  .tsb .tsb-chip__price { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsb button.tsb-seg__btn, .tsb button.tsb-chip, .tsb button.tsb-addon, .tsb a.tsb-book, .tsb .tsb-addon__switch, .tsb .tsb-addon__switch::after { transition: none; }
  .tsb button.tsb-seg__btn:active, .tsb button.tsb-chip:active, .tsb button.tsb-addon:active, .tsb a.tsb-book:active { transform: none; }
}