/* ==========================================================================
   Ride or Die Guide - Shared Styles
   ========================================================================== */

/* Override accent color from NYP green to RODG red */
body[data-site="rodg"] {
  --color-accent: #e8193c;
  --color-accent-hover: #d01535;
  --color-accent-glow: rgba(232, 25, 60, 0.3);
  --gradient-accent: linear-gradient(135deg, #e8193c, #d01535);
  --gradient-accent-hover: linear-gradient(135deg, #f02040, #e8193c);
  --color-fast-pass: #1976d2;
  --color-fast-pass-glow: rgba(25, 118, 210, 0.35);
  --gradient-fast-pass: linear-gradient(135deg, #1976d2, #1565c0);
  scrollbar-gutter: stable;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 25, 60, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(162, 155, 254, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, #e0e4ea 0%, #d4dae3 40%, #cad2dd 100%);
  background-attachment: fixed;
}

[data-theme="dark"] body[data-site="rodg"] {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(232, 25, 60, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(162, 155, 254, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #0a0c0e 0%, #0c0f11 40%, #0e1113 100%);
}

.rodg-sidebar {
  max-width: 500px;
  margin: 0 auto;
  padding: 12px 16px 0;
}

.rodg-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  overflow-x: clip;
}

.rodg-header {
  text-align: center;
  margin-bottom: 12px;
}

/* Brand lockup: --logo-h drives the whole block so it scales proportionally.
   fit-content column lets the tagline span the icon+wordmark width. */
.rodg-logo {
  --logo-h: clamp(90px, 29vw, 130px);
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  color: var(--color-dark);
}

.rodg-logo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--logo-h) * 0.136);
}

.rodg-logo-icon {
  flex: none;
  height: var(--logo-h);
  width: auto;
}

/* Swap the icon by theme: light-rail PNG by default, white-rail PNG in dark mode */
.rodg-logo-icon--dark {
  display: none;
}

[data-theme="dark"] .rodg-logo-icon--dark {
  display: block;
}

[data-theme="dark"] .rodg-logo-icon--light {
  display: none;
}

.rodg-logo-wordmark {
  flex: none;
  display: block;
  height: calc(var(--logo-h) * 0.894);
  width: auto;
}

.rodg-tagline {
  width: 100%;
  margin: calc(var(--logo-h) * 0.04) 0 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: calc(var(--logo-h) * 0.127);
  text-transform: uppercase;
  letter-spacing: 0.155em;
  text-indent: 0.155em;
  transform: translateX(calc(var(--logo-h) * -0.023));
  color: #777;
  text-align: center;
  white-space: nowrap;
}

[data-theme="dark"] .rodg-tagline {
  color: #999;
}

/* Page navigation tabs + list page tabs share container styles */
.rodg-page-tabs,
.rodg-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--color-surface-dimmer);
  border-radius: var(--radius);
  padding: 4px;
}

.rodg-tab-divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: var(--color-border);
}

.rodg-tab,
.rodg-page-tab {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--color-muted);
}

.rodg-page-tab {
  padding: 10px 8px;
  font: 700 13px var(--font-display);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  text-align: center;
}

.rodg-page-tab:hover {
  color: var(--color-dark);
}

.rodg-page-tab.active,
.rodg-tab.active {
  background: var(--color-surface);
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}

.rodg-location-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.rodg-location-toggle:hover:not(:disabled) {
  color: var(--color-dark);
}

.rodg-location-toggle.active {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.rodg-location-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rodg-refresh-banner {
  text-align: center;
  padding: 8px 12px;
  margin-bottom: 0;
  font: 600 12px var(--font-display);
  color: var(--color-muted);
  background: var(--color-surface-dimmer);
  border-radius: var(--radius-sm);
}

.rodg-banner-collapsible {
  position: relative;
  padding-right: 28px;
}

.rodg-banner-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

.rodg-banner-toggle::before {
  content: "\25BE";
  font-size: 12px;
  line-height: 1;
}

.rodg-banner-collapsible.collapsed {
  padding: 4px 28px 4px 12px;
  text-align: left;
  font-size: 11px;
}

.rodg-banner-collapsible.collapsed .rodg-banner-content {
  display: none;
}

.rodg-banner-collapsible.collapsed::before {
  content: "Tips";
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}

.rodg-banner-collapsible.collapsed .rodg-banner-toggle::before {
  content: "\25B8";
}

#rodg-no-parks-banner {
  margin-bottom: 6px;
}

.rodg-view .rodg-refresh-banner {
  margin-bottom: 8px;
}

.rodg-refresh-banner a,
.rodg-empty a,
.rodg-premium-hint a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 700;
}

.rodg-loading {
  text-align: center;
  padding: 60px 16px;
  color: var(--color-muted);
  font: 600 15px var(--font-display);
}

/* Auth — flow-root prevents margin collapsing so height is predictable */
#rodg-auth-root {
  display: flow-root;
}

#rodg-auth-root:empty {
  min-height: 61px;
}

.rodg-auth {
  width: 75%;
  max-width: 325px;
  margin: 0 auto 12px;
  text-align: center;
}

.rodg-auth .modal {
  text-align: left;
}

.rodg-auth-toggle {
  width: 100%;
  padding: 12px 16px;
  font: 600 14px var(--font-display);
  color: var(--color-dark);
  background: var(--gradient-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.rodg-auth-toggle:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Parks Page
   ========================================================================== */

/* Chevron arrow from shared styles in application.css */
.rodg-picker-select {
  width: 100%;
  font: 500 14px var(--font-display);
  color: var(--color-dark);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast);
}

.rodg-picker-select option,
.rodg-picker-select optgroup {
  background-color: var(--color-surface);
  color: var(--color-dark);
}

.rodg-picker-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.rodg-picker-tier {
  margin-bottom: 8px;
}

.rodg-picker-tier:last-child {
  margin-bottom: 0;
}

.rodg-picker-add-btn {
  width: 100%;
  padding: 10px 16px;
  font: 600 13px var(--font-display);
  color: var(--color-accent);
  background: var(--gradient-surface);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 8px;
}

.rodg-picker-add-btn:hover {
  background: var(--gradient-accent);
  color: #fff;
}

.rodg-picker-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.rodg-park-card {
  align-items: flex-start;
}

.rodg-park-card-hours {
  flex-basis: 100%;
  margin-top: 6px;
  font: 600 12px var(--font-display);
  color: var(--color-accent);
}

/* Each day is its own group, so they need more air between them than the rows
   within one do. */
.rodg-park-card-hours + .rodg-park-card-hours {
  margin-top: 9px;
}

/* The day a line answers for. Uppercase and tracked out so it reads as the
   group's heading rather than as another row of hours. */
.rodg-park-card-hours-label {
  font: 700 10px var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* Ticketed events and extra hours, subordinate to the regular hours above
   them: lighter and smaller, so no row can be mistaken for a heading or for
   the park's own hours. */
.rodg-park-card-hours-event {
  margin-top: 3px;
  font: 500 11px var(--font-display);
  line-height: 1.45;
  color: var(--color-muted);
}

.rodg-park-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-muted);
  font: 700 16px/1 var(--font-display);
  cursor: pointer;
}

@media (hover: hover) {
  .rodg-park-remove-btn:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
  }
}

.rodg-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.rodg-section-toggle::after {
  content: "\25B2";
  font-size: 10px;
  display: inline-block;
  transition: transform 0.2s ease;
}

.rodg-section-toggle.collapsed::after {
  transform: rotate(180deg);
}

.rodg-picker-hint {
  margin-top: 14px;
  margin-bottom: 8px;
  font: 400 15px var(--font-display);
  color: var(--color-muted);
  line-height: 1.5;
}

.rodg-picker-hint a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}

.rodg-emphasis {
  font-weight: 700;
}

.rodg-ai-input {
  padding: 10px 12px;
  resize: none;
  margin-bottom: 8px;
}

.rodg-planning-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  margin-left: 4px;
}

.rodg-planning-row .rodg-intel-location-label {
  margin: 0;
}

.rodg-hint-message {
  margin-left: 4px;
}

.rodg-hint-message strong {
  font-weight: 700;
  color: var(--color-dark);
}

.rodg-ai-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rodg-ai-actions .btn-base {
  flex: 1;
}

.rodg-ai-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.rodg-ai-result {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  column-gap: 10px;
  min-height: 64px;
  position: relative;
  padding: 10px 42px 10px 14px;
  background: var(--gradient-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--shadow-inset-light);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.rodg-ai-result.deselected {
  opacity: 0.7;
}

.rodg-ai-result.deselected .rodg-ai-result-check {
  background: transparent;
  border-color: var(--color-border);
}

.rodg-ai-result:not(.deselected):not(.fast-pass) {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-accent-glow);
}

.rodg-ai-result.fast-pass:not(.deselected) {
  border-color: var(--color-fast-pass);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-fast-pass-glow);
}

.rodg-ai-result.fast-pass:not(.deselected) .rodg-ai-result-check {
  background: var(--gradient-fast-pass);
  border-color: var(--color-fast-pass);
}

.rodg-ai-result-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-accent);
  border: 2px solid var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.rodg-ai-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.rodg-ai-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rodg-ai-result-name {
  font: 600 14px var(--font-display);
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rodg-ai-result-meta {
  font: 700 13px var(--font-display);
  color: var(--color-accent);
  flex-shrink: 0;
  white-space: nowrap;
}

.rodg-intel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Location label — base styles shared in application.css */
.rodg-intel-location-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rodg-apply-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rodg-apply-actions .btn-base {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}

/* ==========================================================================
   List Page
   ========================================================================== */

.rodg-list-card {
  padding: 8px;
  margin-bottom: 16px;
  background: var(--color-surface-dimmer);
  border-radius: var(--radius);
}

.rodg-list-card .rodg-refresh-banner {
  margin-bottom: 8px;
}

.rodg-optimize-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.rodg-optimize-row > * {
  flex: 1;
}

.rodg-optimize-time {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  margin-bottom: 12px;
  font: 500 12px var(--font-display);
  -webkit-appearance: none;
  appearance: none;
}

.rodg-optimize-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#optimize-bar .rodg-optimize-time-row,
#plan-optimize-bar .rodg-optimize-time-row {
  width: 50%;
}

.rodg-optimize-time-row .rodg-optimize-time {
  flex: 1;
  margin-bottom: 0;
}

.rodg-optimize-time-part {
  flex: 1;
  min-width: 0;
}

.rodg-optimize-time:disabled {
  opacity: 0.5;
}

.rodg-optimize-banner {
  text-align: center;
  padding: 8px 32px 8px 16px;
  margin-bottom: 8px;
  font: 600 12px var(--font-display);
  color: var(--color-accent);
  background: var(--color-surface-dimmer);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  position: relative;
}

.rodg-eta {
  font: 700 10px var(--font-display);
  color: var(--color-accent);
  margin-top: 1px;
}

.optimizing .rodg-ai-result,
.optimizing .rodg-card {
  pointer-events: none;
  opacity: 0.6;
}

.rodg-card.past-close,
.rodg-ai-result.past-close {
  opacity: 0.5;
}

.past-close > .rodg-eta {
  text-decoration: line-through;
}

.rodg-card > .rodg-eta,
.rodg-ai-result > .rodg-eta {
  flex-basis: 100%;
  text-align: right;
  margin-top: -2px;
}

.rodg-at-time {
  flex-basis: 100%;
  text-align: right;
  font: 700 10px var(--font-display);
  color: var(--color-text-secondary);
  margin-top: -2px;
}

.rodg-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font: 700 13px var(--font-display);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--gradient-surface);
  color: var(--color-dark);
  transition: border-color var(--transition-fast);
}

.rodg-filter-toggle:hover {
  border-color: var(--color-accent);
}

.rodg-filter-toggle .rodg-chevron {
  transition: transform var(--transition-fast);
  font-size: 12px;
  color: var(--color-muted);
}

.rodg-filter-toggle.open .rodg-chevron {
  transform: rotate(180deg);
}

.rodg-filter-content {
  display: none;
  padding-top: 8px;
}

.rodg-filter-content.open {
  display: block;
}

.rodg-tab {
  padding: 10px 16px;
  font: 700 14px var(--font-display);
}

.rodg-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-surface-dimmer);
  font: 700 11px var(--font-display);
  color: var(--color-muted);
  margin-left: 6px;
}

.rodg-tab.active .rodg-tab-count {
  background: var(--color-accent);
  color: #fff;
}

.rodg-view {
  display: none;
}

.rodg-view.active {
  display: block;
}

.rodg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.rodg-card {
  display: flex;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  column-gap: 10px;
  min-height: 64px;
  padding: 10px 50px 10px 14px;
  background: var(--gradient-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), var(--shadow-inset-light);
  cursor: grab;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  position: relative;
  z-index: 1;
}

.rodg-list.drag-active .rodg-card:not(.selected):hover,
.rodg-ai-results.drag-active .rodg-ai-result.deselected:hover {
  border-color: var(--color-muted);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(122, 134, 148, 0.25);
}

.rodg-list.drag-active .rodg-card.selected:not(.fast-pass):hover,
.rodg-ai-results.drag-active .rodg-ai-result:not(.deselected):not(.fast-pass):hover {
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(232, 25, 60, 0.6);
}

.rodg-list.drag-active .rodg-card.selected.fast-pass:hover,
.rodg-ai-results.drag-active .rodg-ai-result.fast-pass:not(.deselected):hover {
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(25, 118, 210, 0.65);
}

.rodg-card.dragging,
.rodg-ai-result.dragging {
  box-shadow: var(--shadow-xl), 0 0 0 3px rgba(122, 134, 148, 0.25);
  border-color: var(--color-muted);
  z-index: 100;
  cursor: grabbing;
}

.rodg-card.swiping,
.rodg-ai-result.swiping {
  transition: none;
  z-index: 100;
}

.rodg-card.dismissing,
.rodg-card.restoring,
.rodg-ai-result.dismissing {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, height 0.3s ease-out, padding 0.3s ease-out,
    margin 0.3s ease-out, border-width 0.3s ease-out;
  opacity: 0;
  overflow: hidden;
}

.rodg-card.dismissing,
.rodg-ai-result.dismissing { transform: translateX(120%); }
.rodg-card.restoring { transform: translateX(-120%); }

.rodg-card.selected {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-accent-glow);
}

.rodg-card.selected .rodg-rank {
  background: var(--gradient-accent);
}

.rodg-card.selected.fast-pass {
  border-color: var(--color-fast-pass);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-fast-pass-glow);
}

.rodg-card.selected.fast-pass .rodg-rank {
  background: var(--gradient-fast-pass);
}

.rodg-card.done-card {
  opacity: 0.7;
}

.rodg-list.drag-active .rodg-card.done-card:hover {
  border-color: var(--color-muted);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(122, 134, 148, 0.25);
  opacity: 0.85;
}

.rodg-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-dark);
  color: #fff;
  font: 700 11px var(--font-display);
  flex-shrink: 0;
}

.rodg-card.dragging .rodg-rank {
  background: var(--gradient-dark-hover);
}

.rodg-info {
  flex: 1;
  min-width: 0;
}

.rodg-name {
  font: 600 14px var(--font-display);
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rodg-meta {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
  margin-top: 2px;
}

.rodg-ai-result > .rodg-meta,
.rodg-card > .rodg-meta {
  flex-basis: 100%;
  padding-left: 32px;
}

.rodg-park-card > .rodg-meta {
  padding-left: 0;
}

.rodg-card-btns {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.rodg-info-btn,
.rodg-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-dimmer);
  color: var(--color-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.rodg-info-btn {
  font: 700 12px var(--font-display);
}

@media (hover: hover) {
  .rodg-info-btn:hover,
  .rodg-pin-btn:hover {
    background: var(--color-accent);
    color: #fff;
  }
}

.rodg-info-btn.active,
.rodg-pin-btn.active {
  background: var(--color-accent);
  color: #fff;
}

.rodg-desc {
  display: none;
  padding: 8px 16px 12px 16px;
  margin-top: -6px;
  margin-bottom: 2px;
  font: 400 13px/1.5 var(--font-display);
  color: var(--color-text-secondary);
}

.rodg-desc.open {
  display: block;
}

.rodg-desc-details {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.rodg-desc-details + .rodg-desc-details {
  font-weight: 500;
  font-size: 12px;
  color: var(--color-muted);
}

.rodg-wait-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.rodg-wait-section-title {
  font: 700 14px var(--font-display);
  color: var(--color-dark);
  margin-bottom: 10px;
}

.rodg-wait-section.collapsible > .rodg-wait-section-title {
  cursor: pointer;
  user-select: none;
}

.rodg-wait-section.collapsible:not(.open) > .rodg-wait-section-title {
  margin-bottom: 0;
}

.rodg-wait-section-caret {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  font-size: 10px;
  color: var(--color-muted);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.rodg-wait-section.collapsible.open > .rodg-wait-section-title > .rodg-wait-section-caret {
  transform: rotate(0);
}

.rodg-wait-section.collapsible:not(.open) > .rodg-wait-section-body {
  display: none;
}

.rodg-info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-dimmer);
  color: var(--color-muted);
  font: 700 10px var(--font-display);
  cursor: pointer;
  vertical-align: middle;
}

@media (hover: hover) {
  .rodg-info-hint:hover {
    background: var(--color-accent);
    color: #fff;
  }
}

.rodg-info-hint-text {
  display: none;
  margin: -4px 0 10px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-dimmer);
  font: 500 12px/1.4 var(--font-display);
  color: var(--color-muted);
}

.rodg-info-hint-text.open {
  display: block;
}

.rodg-wait-subsection + .rodg-wait-subsection {
  margin-top: 12px;
}

.rodg-showtimes-day + .rodg-showtimes-day {
  margin-top: 10px;
}

.rodg-showtimes-day-label {
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.rodg-showtimes-empty {
  font: 400 italic 12px var(--font-display);
  color: var(--color-muted);
}

.rodg-showtimes-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rodg-showtimes-time {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font: 500 12px var(--font-display);
  color: var(--color-dark);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.rodg-showtimes-time:hover {
  border-color: var(--color-accent);
}

.rodg-showtimes-time.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.rodg-showtimes-time.past {
  opacity: 0.45;
  text-decoration: line-through;
}

.rodg-break-duration-select {
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font: 500 12px var(--font-display);
  color: var(--color-dark);
  color-scheme: dark;
  cursor: pointer;
}

.rodg-time-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rodg-time-pill-label {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
}

.rodg-time-pill-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rodg-time-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 100px;
}

.rodg-time-pill-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.rodg-time-pill-clear:hover {
  background: rgba(255, 255, 255, 0.4);
}

.rodg-break-duration-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.rodg-break-duration-label {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
}

.rodg-wait-subsection-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-dark);
  font: 600 13px var(--font-display);
  text-align: left;
}

.rodg-wait-subsection-caret {
  display: inline-block;
  transition: transform 0.15s;
  transform: rotate(-90deg);
  font-size: 10px;
  color: var(--color-muted);
}

.rodg-wait-subsection.open .rodg-wait-subsection-caret {
  transform: rotate(0);
}

.rodg-wait-subsection-body {
  display: none;
}

.rodg-wait-subsection.open .rodg-wait-subsection-body {
  display: block;
}

.rodg-historical-picker-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 4px;
}

.rodg-historical-picker-label {
  font: 600 13px var(--font-display);
  color: var(--color-text-secondary);
}

.rodg-historical-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rodg-historical-picker-pill {
  display: inline-flex;
  align-items: center;
  font: 600 13px var(--font-display);
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-dark);
  cursor: pointer;
  min-width: 130px;
}

.rodg-historical-picker-pill.placeholder {
  color: var(--color-text-secondary);
}

.rodg-historical-chart-container,
.rodg-statistics-chart-container {
  min-height: 24px;
  font: 500 13px var(--font-display);
  color: var(--color-muted);
}

.rodg-wait-chart {
  margin-top: 12px;
}

.rodg-wait-chart-title {
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 6px;
}

.rodg-wait-chart-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding-left: 26px;
  font: 500 12px var(--font-display);
  color: var(--color-text-secondary);
  margin-top: 6px;
}

.rodg-wait-chart-empty {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
  padding: 8px 0;
}

.rodg-wait-chart-summary-sep {
  color: var(--color-muted);
}

.rodg-wait-chart-body {
  display: flex;
  margin-bottom: 16px;
}

.rodg-wait-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 91px;
  flex-shrink: 0;
  text-align: right;
  border-right: 1px solid var(--color-border);
  padding-right: 4px;
}

.rodg-wait-chart-ylabel {
  font: 500 8px var(--font-display);
  color: var(--color-muted);
  line-height: 1;
}

.rodg-wait-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 91px;
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  border-bottom: 1px solid var(--color-border);
}

.rodg-wait-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
  position: relative;
}

.rodg-wait-chart-bar {
  width: 100%;
  max-width: 20px;
  border-radius: 2px 2px 0 0;
  background: var(--color-accent);
  opacity: 0.8;
  margin-top: auto;
  transition: opacity 0.15s;
}

.rodg-wait-chart-bar.busy-light { background: var(--color-success); }
.rodg-wait-chart-bar.busy-typical { background: var(--color-busy-medium); }
.rodg-wait-chart-bar.busy-heavy { background: var(--color-accent); }

.rodg-wait-chart-bar:hover {
  opacity: 1;
}

.rodg-wait-chart-bar-predicted {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 20px;
  height: 3px;
  background: var(--color-text-secondary);
  border-radius: 1px;
  z-index: 1;
}

.rodg-wait-chart-label {
  font: 500 8px var(--font-display);
  color: var(--color-muted);
  white-space: nowrap;
  position: absolute;
  bottom: -14px;
}

.rodg-wait-chart-summary-header {
  flex-basis: 100%;
  font: 600 11px var(--font-display);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rodg-ai-results .rodg-desc {
  padding-left: 16px;
  margin-top: -4px;
}

.rodg-wait {
  font: 700 13px var(--font-display);
  color: var(--color-accent);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.rodg-wait.busy-light,
.rodg-wait.busy-quiet,
.rodg-wait.busy-open,
.rodg-wait-now > .busy-light,
.rodg-wait-at > .busy-light,
.rodg-at-time.busy-light,
.rodg-ai-result-meta.busy-light {
  color: var(--color-success);
}

.rodg-wait.busy-typical,
.rodg-wait-now > .busy-typical,
.rodg-wait-at > .busy-typical,
.rodg-at-time.busy-typical,
.rodg-ai-result-meta.busy-typical {
  color: var(--color-busy-medium);
}

/* No prediction to compare against. Deliberately outside the light/typical/heavy
   scale: the unclassed colour is --color-accent, the same red as busy-heavy. */
.rodg-wait.busy-unknown,
.rodg-ai-result-meta.busy-unknown {
  color: var(--color-text-secondary);
}

.rodg-wait.busy-heavy,
.rodg-wait.busy-busy,
.rodg-wait-now > .busy-heavy,
.rodg-wait-at > .busy-heavy,
.rodg-at-time.busy-heavy,
.rodg-ai-result-meta.busy-heavy {
  color: var(--color-accent);
}

.rodg-wait.busy-closed {
  color: var(--color-error);
}

.rodg-wait-now > .busy-closed {
  color: var(--color-error);
}

.rodg-wait-now {
  font: 700 13px var(--font-display);
  margin: 4px 0 8px;
}

.rodg-wait-at {
  font: 700 13px var(--font-display);
  margin: -4px 0 8px;
}

/* Crowd calendar (per-park panel subsection) */
.rodg-crowd-cal-jump-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rodg-crowd-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rodg-crowd-cal-nav button {
  background: var(--color-surface-dim);
  border: 2px solid var(--color-border);
  color: var(--color-dark);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.rodg-crowd-cal-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.rodg-crowd-cal-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 150px;
  font: 600 13px var(--font-display);
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
}

.rodg-crowd-cal-title:hover {
  background: var(--color-surface-dim);
}

.rodg-crowd-cal-title-caret {
  font-size: 10px;
  color: var(--color-muted);
}

/* Stacked on mobile (calendar, then wait chart); side by side only once the
   content area is wide enough (matches the layout's 900px sidebar breakpoint).
   alignChartToGrid auto-disables when stacked. */
.rodg-crowd-cal-cols {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
}

.rodg-crowd-cal-gridcol {
  min-width: 0;
}

/* Two columns for every tier: the wait chart sits beside the grid, or the
   "Go premium" hint in its place, so the grid keeps one size rather than
   spanning the whole row when there is no chart. */
@media (min-width: 900px) {
  .rodg-crowd-cal-cols {
    grid-template-columns: 52% minmax(0, 1fr);
    gap: 10px;
  }
}

/* minmax(0), not 1fr: the cells' aspect-ratio gives each track a content-based
   minimum, so large OS text (iOS Dynamic Type) makes the tracks outgrow the
   container and clips the right columns. */
.rodg-crowd-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.rodg-crowd-cal-dow {
  text-align: center;
  font: 600 9px var(--font-display);
  color: var(--color-muted);
  padding-bottom: 1px;
}

.rodg-crowd-cal-cell {
  position: relative;
  aspect-ratio: 1 / 0.54;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.rodg-crowd-cal-cell.rodg-crowd-cal-empty {
  background: transparent;
  box-shadow: none;
}

.rodg-crowd-cal-cell.rodg-crowd-cal-selectable,
.rodg-crowd-cal-cell.rodg-crowd-cal-viewable {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.rodg-crowd-cal-cell.rodg-crowd-cal-selectable:hover,
.rodg-crowd-cal-cell.rodg-crowd-cal-viewable:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.rodg-crowd-cal-cell.rodg-crowd-cal-historical {
  color: var(--color-dark);
}

/* Locked = tier-gated (tappable, opens the upsell). Unavailable = past the
   forecast window for everyone, and closed = the park's schedule shows no
   hours that day; both stay inert. */
.rodg-crowd-cal-cell.rodg-crowd-cal-locked,
.rodg-crowd-cal-cell.rodg-crowd-cal-unavailable,
.rodg-crowd-cal-cell.rodg-crowd-cal-closed {
  background: var(--color-surface-dim);
  color: var(--color-muted);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.rodg-crowd-cal-cell.rodg-crowd-cal-locked {
  cursor: pointer;
}

.rodg-crowd-cal-cell.rodg-crowd-cal-today {
  box-shadow: inset 0 0 0 2px var(--color-dark);
}

/* Gold ring — stands out on the green-to-red cells in both themes. Kept inset
   and thicker than the 2px today marker: inset renders reliably on iOS Safari,
   where an OUTSET ring on a grid item with gaps gets clipped/flickers. */
.rodg-crowd-cal-cell.rodg-crowd-cal-selected {
  box-shadow: inset 0 0 0 3px #f5b301;
}

.rodg-crowd-cal-daynum {
  font: 600 10px var(--font-display);
  line-height: 1;
}

.rodg-crowd-cal-score {
  font-size: 8px;
  opacity: 0.9;
  margin-top: 1px;
  line-height: 1;
}

.rodg-crowd-cal-nodata {
  font-size: 8px;
  opacity: 0.5;
  margin-top: 1px;
}

.rodg-crowd-cal-lock,
.rodg-crowd-cal-closed-label {
  font-size: 8px;
  margin-top: 1px;
}

.rodg-crowd-cal-closed-label {
  font-size: 7px;
  line-height: 1;
}

.rodg-crowd-cal-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.rodg-crowd-cal-scale {
  display: flex;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.rodg-crowd-cal-swatch {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 11px;
  border-radius: 2px;
}

.rodg-crowd-cal-waits {
  overflow: hidden;
}

/* Taller than the standard wait charts so it better matches the calendar's
   vertical height when shown side by side. */
/* Bar/y-axis height is set from JS to match the calendar squares exactly;
   these are just the pre-alignment defaults. */
.rodg-crowd-cal-waits .rodg-wait-chart-yaxis,
.rodg-crowd-cal-waits .rodg-wait-chart-bars {
  height: 122px;
}

/* Neutral fallback; data bars get an inline green->red gradient by wait level
   (buildWaitChart's gradientBars), so the RODG-red --color-accent default never
   shows and isn't mistaken for the calendar's "busy" red. */
.rodg-crowd-cal-waits .rodg-wait-chart-bar {
  background: var(--color-muted);
}

.rodg-crowd-cal-waits .rodg-wait-chart-title {
  font-size: 9px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Upsell line where a premium feature would be (window.rodgUpsell copy). */
.rodg-premium-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
}

[data-section="wait-times"] .rodg-premium-hint {
  margin-top: 8px;
}

.rodg-sort-bar,
.rodg-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.rodg-filter-label {
  display: block;
  font: 500 10px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.rodg-optimize-tz {
  text-transform: none;
  opacity: 0.7;
}

#picks-content .subsection-label,
#filter-content .subsection-label {
  font: 500 10px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0 0 4px;
  padding: 0;
  border: none;
}

#picks-content .subsection-label.section-divider,
#filter-content .subsection-label.section-divider {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.rodg-multi-select {
  flex: 1;
  min-width: 0;
  position: relative;
}

.rodg-multi-select-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  font: 500 12px var(--font-display);
  text-align: left;
  cursor: pointer;
  gap: 6px;
}

.rodg-multi-select-btn.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.rodg-multi-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rodg-multi-select-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-muted);
  transition: transform 0.15s;
}

.rodg-multi-select.open .rodg-multi-select-chevron {
  transform: rotate(180deg);
}

.rodg-multi-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.rodg-multi-select.open .rodg-multi-select-panel {
  display: block;
}

.rodg-multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  font: 500 13px var(--font-display);
  color: var(--color-dark);
  cursor: pointer;
}

.rodg-multi-select-option:hover {
  background: var(--color-surface-dimmer);
}

.rodg-multi-select-option input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

.rodg-multi-select-empty {
  padding: 8px;
  font: 500 12px var(--font-display);
  color: var(--color-muted);
  text-align: center;
}

.rodg-sort-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  padding-inline: 8px;
}

.rodg-sort-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rodg-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--color-muted);
  font: 600 15px var(--font-display);
}

.rodg-last-updated {
  text-align: center;
  padding: 8px 16px;
  color: var(--color-muted);
  font: 500 12px var(--font-display);
}

.rodg-social {
  margin: 0;
  text-align: center;
  padding: 8px 16px;
  color: var(--color-muted);
  font: 500 13px var(--font-display);
}

.rodg-social a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.rodg-social a:hover {
  text-decoration: underline;
}

.rodg-search-wrap {
  position: relative;
}

.rodg-search-wrap .input-base {
  padding: 12px 36px 12px 16px;
}

.rodg-search-clear {
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 20px;
  padding: 0 8px;
  cursor: pointer;
}

.rodg-search-clear:hover {
  color: var(--color-dark);
}

.rodg-status-pill {
  font: 700 11px var(--font-display);
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  text-transform: uppercase;
  margin-left: auto;
}

.rodg-status-pill.open {
  color: var(--color-accent);
  background: var(--color-accent-glow);
}

.rodg-status-pill.closed {
  color: var(--color-error);
  background: rgba(162, 48, 40, 0.1);
}

/* RODG-specific: remove top padding on footer container */
.rodg-footer-container {
  padding-top: 0;
}

/* ==========================================================================
   Wheel Page
   ========================================================================== */

.rodg-wheel-tagline {
  text-align: center;
  font-size: clamp(1.15em, 4vw, 1.5em);
  font-weight: 700;
  margin: 0 0 8px;
}

.rodg-wheel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rodg-wheel-wrapper .spin-wheel-container {
  width: min(100vw - 40px, 400px);
  filter: none;
}

.rodg-wheel-colors,
.rodg-map-colors {
  margin-top: 16px;
}

button.rodg-section-toggle {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
}

button.rodg-section-toggle.collapsed {
  margin-bottom: 0;
}

.rodg-wheel-wrapper .result-display {
  margin-top: 6px;
  margin-bottom: 10px;
}

.rodg-done-btn {
  padding: 6px 20px;
  margin-bottom: 10px;
  font-size: 12px;
}

/* ==========================================================================
   Map Page
   ========================================================================== */

.rodg-map-toggle-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: var(--z-modal);
  padding: 8px 14px;
  font-size: 12px;
}

.rodg-map-done-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 10px;
  font: 600 12px var(--font-display);
  color: var(--color-accent);
  background: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.rodg-map-park-name {
  color: #666;
  font-size: 12px;
}

.rodg-map-container {
  width: 100%;
  height: 500px;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  overflow: hidden;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 900px) {
  .rodg-layout {
    display: flex;
    min-height: 100dvh;
  }

  .rodg-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 360px;
    flex-shrink: 0;
    padding: 20px 16px;
    max-height: 100dvh;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
  }

  .rodg-sidebar .rodg-header {
    margin-bottom: 20px;
    text-align: left;
  }

  .rodg-sidebar .rodg-logo {
    --logo-h: 104px;
  }

  .rodg-sidebar .rodg-auth {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .rodg-sidebar .rodg-page-tabs {
    flex-direction: column;
    background: none;
    padding: 0;
    gap: 2px;
  }

  .rodg-sidebar .rodg-page-tab {
    flex: none;
    text-align: left;
    padding: 10px 12px;
  }

  .rodg-sidebar .rodg-page-tab.active {
    background: var(--color-accent-glow);
    color: #fff;
    box-shadow: none;
  }

  .rodg-sidebar .rodg-location-toggle {
    width: auto;
    padding: 10px 12px;
    justify-content: flex-start;
    gap: 8px;
    font: 700 13px var(--font-display);
  }

  .rodg-sidebar .rodg-location-toggle::after {
    content: "Location";
  }

  .rodg-sidebar .rodg-location-toggle.active {
    background: var(--color-accent-glow);
    color: #fff;
    box-shadow: none;
  }

  .rodg-sidebar .rodg-refresh-banner {
    font-size: 11px;
    padding: 8px 10px;
    text-align: left;
  }

  .rodg-main {
    flex: 1;
    min-width: 0;
  }

  .rodg-container {
    max-width: none;
    padding-left: 64px;
    padding-right: 64px;
  }

  .rodg-name {
    white-space: normal;
  }

  .rodg-map-container {
    height: 650px;
  }

  .rodg-wheel-wrapper .spin-wheel-container {
    width: 500px;
  }
}

/* Guide page */
.rodg-guide {
  padding-top: 0;
}

.rodg-guide-card {
  background: var(--color-surface-dimmer);
  border-radius: var(--radius);
  border-left: 3px solid;
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
}

.rodg-guide-card > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.rodg-guide-card > summary::-webkit-details-marker {
  display: none;
}

.rodg-guide-card > summary::after {
  content: "▾";
  color: var(--color-muted);
  font-size: 14px;
  transition: transform 0.15s;
}

.rodg-guide-card[open] > summary {
  margin-bottom: 12px;
}

.rodg-guide-card[open] > summary::after {
  transform: rotate(180deg);
}

.rodg-guide-card h3 {
  font: 600 15px var(--font-display);
  color: var(--color-dark);
  margin: 0;
  flex: 1;
}

.rodg-guide-card-icon {
  font-size: 22px;
  line-height: 1;
}

.rodg-guide-card p {
  font: 400 13px/1.5 var(--font-display);
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.rodg-guide-card ul,
.rodg-guide-card ol {
  font: 400 13px/1.6 var(--font-display);
  color: var(--color-text-secondary);
  margin: 0;
  padding-left: 20px;
}

.rodg-guide-card li {
  margin-bottom: 4px;
}

.rodg-guide-card li strong {
  color: var(--color-dark);
}

.rodg-guide-premium-link {
  font-weight: 600;
  color: var(--color-accent);
}

.rodg-guide-parks-company + .rodg-guide-parks-company {
  margin-top: 14px;
}

.rodg-guide-parks-company h4 {
  font: 700 13px var(--font-display);
  color: var(--color-dark);
  margin: 0;
}

.rodg-guide-parks-resort {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
  margin-top: 8px;
}

.rodg-guide-parks-company ul {
  margin: 4px 0 0;
}