/* ============================================================
   EVERUS ADVENTURES — styles.css
   Trip Cards + Filters + Layout
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --ev-bg           : #0A0A18;
  --ev-surface      : #11112A;
  --ev-surface-2    : #16163A;
  --ev-border       : rgba(255,255,255,0.08);
  --ev-green        : #16C784;
  --ev-green-dim    : rgba(22,199,132,0.15);
  --ev-orange       : #F59E0B;
  --ev-orange-dim   : rgba(245,158,11,0.15);
  --ev-red          : #EF4444;
  --ev-blue         : #3B82F6;
  --ev-text         : #E8E8F0;
  --ev-text-muted   : #8888AA;
  --ev-card-radius  : 16px;
  --ev-gradient-card: linear-gradient(135deg, #1A1A3E 0%, #0D0D22 100%);
  --ev-shadow       : 0 4px 24px rgba(0,0,0,0.5);
  --ev-shadow-hover : 0 8px 40px rgba(22,199,132,0.15);
  --ev-font-display : "Montserrat", "Segoe UI", sans-serif;
  --ev-font-body    : "Inter", "Segoe UI", sans-serif;
  --ev-transition   : all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET (scoped) ────────────────────────────────────────── */
.ev-section *, .ev-section *::before, .ev-section *::after {
  box-sizing: border-box;
}

/* ── SECTION WRAPPER ───────────────────────────────────────── */
.ev-section {
  background    : var(--ev-bg);
  padding       : 60px 0 80px;
  font-family   : var(--ev-font-body);
  color         : var(--ev-text);
  min-height    : 400px;
}

.ev-container {
  max-width  : 1280px;
  margin     : 0 auto;
  padding    : 0 20px;
}

/* ── SECTION HEADER ────────────────────────────────────────── */
.ev-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 12px;
  margin-bottom   : 32px;
}

.ev-header__left h2 {
  font-family : var(--ev-font-display);
  font-size   : clamp(22px, 4vw, 32px);
  font-weight : 700;
  color       : #fff;
  margin      : 0 0 4px;
  letter-spacing: -0.5px;
}

.ev-header__left p {
  font-size : 14px;
  color     : var(--ev-text-muted);
  margin    : 0;
}

.ev-header__right {
  display    : flex;
  align-items: center;
  gap        : 16px;
}

/* ── LIVE INDICATOR ────────────────────────────────────────── */
.ev-live {
  display     : inline-flex;
  align-items : center;
  gap         : 6px;
  font-size   : 12px;
  font-weight : 600;
  padding     : 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ev-live--live {
  background : var(--ev-green-dim);
  color      : var(--ev-green);
  border     : 1px solid rgba(22,199,132,0.3);
}

.ev-live--loading {
  background : rgba(59,130,246,0.12);
  color      : var(--ev-blue);
  border     : 1px solid rgba(59,130,246,0.3);
}

.ev-live--error {
  background : rgba(239,68,68,0.1);
  color      : var(--ev-red);
  border     : 1px solid rgba(239,68,68,0.3);
}

.ev-live-dot {
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : currentColor;
  display       : inline-block;
}

.ev-live-dot--pulse {
  animation: ev-pulse 1.2s ease-in-out infinite;
}

@keyframes ev-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

.ev-last-updated {
  font-size : 12px;
  color     : var(--ev-text-muted);
}

.ev-trip-count {
  font-size   : 13px;
  font-weight : 600;
  color       : var(--ev-text-muted);
}

/* ── FILTERS ───────────────────────────────────────────────── */
.ev-filters {
  background    : var(--ev-surface);
  border        : 1px solid var(--ev-border);
  border-radius : 12px;
  padding       : 16px 20px;
  margin-bottom : 32px;
}

.ev-filters__inner {
  display   : flex;
  flex-wrap : wrap;
  gap       : 14px;
  align-items: flex-end;
}

.ev-filter-group {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
  flex           : 1 1 160px;
  min-width      : 130px;
}

.ev-filter-label {
  font-size   : 11px;
  font-weight : 600;
  color       : var(--ev-text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ev-filter-input,
.ev-filter-select {
  background    : var(--ev-surface-2);
  border        : 1px solid var(--ev-border);
  border-radius : 8px;
  color         : var(--ev-text);
  font-family   : var(--ev-font-body);
  font-size     : 13px;
  padding       : 9px 12px;
  outline       : none;
  transition    : var(--ev-transition);
  -webkit-appearance: none;
  appearance    : none;
}

.ev-filter-select {
  cursor         : pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888AA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right : 32px;
}

.ev-filter-input:focus,
.ev-filter-select:focus {
  border-color : var(--ev-green);
  box-shadow   : 0 0 0 3px var(--ev-green-dim);
}

.ev-filter-select option {
  background : #1A1A3E;
}

.ev-filter-clear {
  background    : transparent;
  border        : 1px solid var(--ev-border);
  border-radius : 8px;
  color         : var(--ev-text-muted);
  cursor        : pointer;
  font-size     : 13px;
  padding       : 9px 16px;
  transition    : var(--ev-transition);
  white-space   : nowrap;
  align-self    : flex-end;
  height        : 38px;
}

.ev-filter-clear:hover {
  border-color : var(--ev-red);
  color        : var(--ev-red);
}

/* ── GRID ──────────────────────────────────────────────────── */
#everus-trips-container {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
  gap                   : 20px;
}

/* ── CARD ──────────────────────────────────────────────────── */
.ev-card {
  background    : var(--ev-surface);
  border        : 1px solid var(--ev-border);
  border-radius : var(--ev-card-radius);
  overflow      : hidden;
  transition    : var(--ev-transition);
  display       : flex;
  flex-direction: column;
  opacity       : 0;
  transform     : translateY(16px);
}

.ev-card--animate {
  animation: ev-cardIn 0.4s ease forwards;
}

@keyframes ev-cardIn {
  to { opacity: 1; transform: translateY(0); }
}

.ev-card:hover {
  border-color : rgba(22,199,132,0.35);
  box-shadow   : var(--ev-shadow-hover);
  transform    : translateY(-3px);
}

/* Sold Out card — dimmed */
.ev-card--status-sold-out {
  opacity: 0.7;
}
.ev-card--status-sold-out:hover {
  transform: none;
  box-shadow: none;
}

/* ── CARD HERO ─────────────────────────────────────────────── */
.ev-card__hero {
  position            : relative;
  height              : 180px;
  background-size     : cover;
  background-position : center;
  background          : var(--ev-gradient-card);
}

.ev-card__hero-overlay {
  position   : absolute;
  inset      : 0;
  background : linear-gradient(to top, rgba(10,10,24,0.8) 0%, transparent 60%);
}

.ev-card__badges {
  position   : absolute;
  top        : 12px;
  left       : 12px;
  display    : flex;
  gap        : 6px;
  flex-wrap  : wrap;
}

/* ── BADGES ────────────────────────────────────────────────── */
.ev-badge {
  font-size    : 10px;
  font-weight  : 700;
  padding      : 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ev-badge--discount {
  background : var(--ev-green);
  color      : #000;
}

.ev-badge--diff {
  background : rgba(255,255,255,0.15);
  color      : #fff;
  backdrop-filter: blur(4px);
}

/* ── STATUS PILL ───────────────────────────────────────────── */
.ev-card__status-pill {
  position      : absolute;
  bottom        : 12px;
  right         : 12px;
  font-size     : 11px;
  font-weight   : 700;
  padding       : 4px 10px;
  border-radius : 8px;
  display       : flex;
  align-items   : center;
  gap           : 5px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}

.ev-status--available {
  background : rgba(22,199,132,0.2);
  color      : var(--ev-green);
  border     : 1px solid rgba(22,199,132,0.4);
}

.ev-status--few {
  background : var(--ev-orange-dim);
  color      : var(--ev-orange);
  border     : 1px solid rgba(245,158,11,0.4);
}

.ev-status--sold {
  background : rgba(239,68,68,0.15);
  color      : var(--ev-red);
  border     : 1px solid rgba(239,68,68,0.4);
}

.ev-status--cancelled {
  background : rgba(100,100,100,0.2);
  color      : #999;
  border     : 1px solid rgba(100,100,100,0.3);
}

.ev-status--soon {
  background : rgba(59,130,246,0.15);
  color      : var(--ev-blue);
  border     : 1px solid rgba(59,130,246,0.3);
}

.ev-status-dot {
  width         : 6px;
  height        : 6px;
  border-radius : 50%;
  background    : currentColor;
  animation     : ev-pulse 2s ease-in-out infinite;
}

.ev-status--sold .ev-status-dot,
.ev-status--cancelled .ev-status-dot {
  animation: none;
}

/* ── CARD BODY ─────────────────────────────────────────────── */
.ev-card__body {
  padding        : 18px 18px 16px;
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  flex           : 1;
}

.ev-card__pin {
  margin-right: 4px;
}

.ev-card__title {
  font-family   : var(--ev-font-display);
  font-size     : 18px;
  font-weight   : 700;
  color         : #fff;
  margin        : 0;
  line-height   : 1.2;
}

.ev-card__meta {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 6px 14px;
  font-size  : 12px;
  color      : var(--ev-text-muted);
  line-height: 1.6;
}

.ev-card__notes {
  font-size  : 12px;
  color      : var(--ev-text-muted);
  background : var(--ev-surface-2);
  border-left: 3px solid var(--ev-green);
  padding    : 8px 10px;
  border-radius: 0 6px 6px 0;
  margin     : 0;
}

/* ── FOOTER ROW ────────────────────────────────────────────── */
.ev-card__footer {
  display         : flex;
  justify-content : space-between;
  align-items     : flex-end;
  gap             : 8px;
  margin-top      : auto;
}

.ev-card__pricing {
  display    : flex;
  align-items: baseline;
  gap        : 6px;
  flex-wrap  : wrap;
}

.ev-card__price {
  font-family : var(--ev-font-display);
  font-size   : 22px;
  font-weight : 800;
  color       : var(--ev-green);
  line-height : 1;
}

.ev-card__original {
  font-size          : 13px;
  color              : var(--ev-text-muted);
  text-decoration    : line-through;
  text-decoration-color: rgba(255,255,255,0.3);
}

.ev-card__per {
  font-size : 11px;
  color     : var(--ev-text-muted);
}

.ev-card__seats {
  font-size   : 12px;
  font-weight : 600;
  white-space : nowrap;
}

.ev-seats--available { color: var(--ev-green); }
.ev-seats--few       { color: var(--ev-orange); }
.ev-seats--sold      { color: var(--ev-red); }
.ev-seats--cancelled { color: #666; }
.ev-seats--soon      { color: var(--ev-blue); }

/* ── ACTIONS ───────────────────────────────────────────────── */
.ev-card__actions {
  display : flex;
  gap     : 8px;
}

.ev-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--ev-font-body);
  font-size      : 13px;
  font-weight    : 700;
  border-radius  : 8px;
  padding        : 10px 20px;
  border         : none;
  cursor         : pointer;
  text-decoration: none;
  transition     : var(--ev-transition);
  flex           : 1;
  letter-spacing : 0.3px;
}

.ev-btn--book {
  background : var(--ev-green);
  color      : #000;
}

.ev-btn--book:hover {
  background : #13A06A;
  transform  : scale(1.02);
}

.ev-btn--sold {
  background : rgba(239,68,68,0.1);
  color      : var(--ev-red);
  border     : 1px solid rgba(239,68,68,0.3);
  cursor     : not-allowed;
  opacity    : 0.7;
}

.ev-btn--cancelled {
  background : rgba(100,100,100,0.1);
  color      : #666;
  border     : 1px solid rgba(100,100,100,0.3);
  cursor     : not-allowed;
}

.ev-btn-ghost {
  background    : transparent;
  border        : 1px solid var(--ev-border);
  border-radius : 8px;
  color         : var(--ev-text-muted);
  cursor        : pointer;
  font-family   : var(--ev-font-body);
  font-size     : 13px;
  padding       : 9px 18px;
  transition    : var(--ev-transition);
}

.ev-btn-ghost:hover {
  border-color : var(--ev-green);
  color        : var(--ev-green);
}

/* ── SKELETON LOADING ──────────────────────────────────────── */
.ev-card--skeleton {
  opacity: 1 !important;
  transform: none !important;
}

.ev-skeleton {
  background           : linear-gradient(90deg, var(--ev-surface-2) 25%, #1E1E40 50%, var(--ev-surface-2) 75%);
  background-size      : 200% 100%;
  border-radius        : 6px;
  animation            : ev-shimmer 1.5s infinite;
}

.ev-skeleton--hero  { height: 180px; border-radius: 0; }
.ev-skeleton--title { height: 20px; width: 70%; margin-bottom: 8px; }
.ev-skeleton--meta  { height: 12px; margin-bottom: 6px; }
.ev-skeleton--btn   { height: 36px; margin-top: 12px; }

@keyframes ev-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── EMPTY / ERROR ─────────────────────────────────────────── */
.ev-empty, .ev-error {
  grid-column    : 1 / -1;
  text-align     : center;
  padding        : 60px 20px;
  color          : var(--ev-text-muted);
}

.ev-empty-icon, .ev-error__icon {
  font-size     : 48px;
  margin-bottom : 16px;
}

.ev-empty h3, .ev-error p {
  font-size  : 16px;
  margin     : 0 0 16px;
  color      : var(--ev-text);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ev-section { padding: 40px 0 60px; }

  .ev-header { flex-direction: column; align-items: flex-start; }

  .ev-filters__inner { flex-direction: column; }

  .ev-filter-group { flex: none; width: 100%; }

  #everus-trips-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #everus-trips-container {
    grid-template-columns: repeat(2, 1fr);
  }
}