/* ==========================================================================
   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);
  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-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  overflow-x: hidden;
}

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

.rodg-logo {
  width: 100%;
  max-width: 340px;
  height: auto;
  color: var(--color-dark);
}

.rodg-logo-ground {
  stroke: #b0a89e;
}

[data-theme="dark"] .rodg-logo-ground {
  stroke: #303030;
}

.rodg-logo-wheel {
  fill: #000000;
}

[data-theme="dark"] .rodg-logo-wheel {
  fill: #ffffff;
}

/* Page navigation tabs */
.rodg-page-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: var(--color-surface-dimmer);
  border-radius: var(--radius);
  padding: 4px;
}

.rodg-page-tab {
  flex: 1;
  padding: 10px 8px;
  font: 700 13px var(--font-display);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
  text-align: center;
}

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

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

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

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

/* Empty state placeholder */
.rodg-placeholder-page {
  text-align: center;
  padding: 60px 16px;
  color: var(--color-muted);
  font: 600 15px var(--font-display);
}

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

/* Auth */
.rodg-auth {
  width: 75%;
  margin: 0 auto 14px;
  text-align: center;
}

.rodg-auth-toggle {
  width: 100%;
  padding: 12px 16px;
  font: 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
   ========================================================================== */

.rodg-picker-select {
  width: 100%;
  padding: 12px 36px 12px 16px;
  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);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8694' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.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-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.rodg-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: 12px var(--font-display);
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 14px;
  animation: rodgChipPop 0.2s ease;
}

@keyframes rodgChipPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.rodg-picker-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.rodg-picker-chip-remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

.rodg-picker-types {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

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

.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-type-btn {
  flex: 1;
  padding: 10px 8px;
  font: 600 12px var(--font-display);
  color: var(--color-muted);
  background: var(--gradient-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.rodg-type-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-dark);
}

.rodg-type-btn.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-glow);
}

/* AI Decide section */
.rodg-ai-input {
  padding: 10px 12px;
  resize: none;
  margin-bottom: 8px;
}

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

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

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

.rodg-ai-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 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);
  animation: rodgChipPop 0.2s ease;
  animation-fill-mode: both;
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

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

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

.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: 12px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.rodg-ai-result-name {
  font: 600 14px var(--font-display);
  color: var(--color-dark);
}

.rodg-ai-result-meta {
  font: 500 12px var(--font-display);
  color: var(--color-muted);
  margin-left: auto;
  flex-shrink: 0;
}

/* Intelligence tier + location row */
.rodg-intel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rodg-intel-tier {
  width: 50%;
  min-width: 0;
}

.rodg-intel-location-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--font-display);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.rodg-intel-location-label:hover {
  color: var(--color-dark);
}

.rodg-intel-location-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rodg-intel-location-checkbox {
  width: 16px;
  height: 16px;
  cursor: inherit;
}

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

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

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

.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);
  margin-bottom: 6px;
  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;
  margin-bottom: 12px;
}

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

.rodg-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--color-surface-dimmer);
  border-radius: var(--radius);
  padding: 4px;
}

.rodg-tab {
  flex: 1;
  padding: 10px 16px;
  font: 700 14px var(--font-display);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--color-muted);
}

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

.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;
  gap: 12px;
  padding: 14px 16px;
  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;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  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:hover {
  border-color: var(--color-muted);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(122, 134, 148, 0.25);
}

.rodg-card.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 {
  transition: none;
  z-index: 100;
}

.rodg-card.dismissing,
.rodg-card.restoring {
  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 { 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.done-card {
  cursor: grab;
  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: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-dark);
  color: #fff;
  font: 700 13px 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: 700 15px 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-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface-dimmer);
  color: var(--color-muted);
  font: 700 13px var(--font-display);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

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

.rodg-info-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-weight: 600;
  color: var(--color-dark);
  margin-bottom: 4px;
}

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

.rodg-ai-result .rodg-info-btn {
  margin-left: auto;
}

.rodg-ai-result .rodg-ai-result-meta + .rodg-info-btn {
  margin-left: 0;
}

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

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

.rodg-sort-btn {
  flex: 1;
  white-space: nowrap;
}

.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-empty a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 700;
}

.rodg-search {
  margin-bottom: 0;
}

.rodg-search .input-base {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}

.rodg-restore-bar {
  margin-bottom: 6px;
}


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

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

.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-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

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

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

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