@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Modern Ticket Platform Design - Inspired by Viagogo/Reventick */
:root {
  --green: #22C55E;
  --green-dark: #16A34A;
  --green-light: #4ADE80;
  --green-hover: #15803D;
  --text: #111827;
  --text-secondary: #374151;
  --muted: #6B7280;
  --bg: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-green: 0 10px 25px -5px rgba(34, 197, 94, 0.3);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --header-h: 80px;
  /* Page horizontal gutter: controls left/right padding for all pages and header */
  --page-gutter-mobile: 12px;
  --page-gutter-tablet: 16px;
  --page-gutter-desktop: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Enforce no horizontal page scrolling globally (exceptions below) */
html, body {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* Allow only table-like blocks to scroll horizontally when needed */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Make sure wide images/media don't force page overflow */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Defensive: ensure links/cards in lists cannot force horizontal overflow */
.dates-list .date-card, .grid .card { min-width: 0; max-width: 100%; box-sizing: border-box; }


body {
  margin: 0;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure main content grows so footer stays at the bottom on short pages */
main.container {
  flex: 1 0 auto;
}

/* Admin panel: make text inputs more visible with black borders */
.admin-area input[type="text"],
.admin-area input[type="number"],
.admin-area input[type="email"],
.admin-area input[type="datetime-local"],
.admin-area input[type="time"],
.admin-area textarea,
.admin-area select,
.admin-area .form-control {
  border: 1px solid #000 !important;
  background: #fff !important;
  color: var(--text) !important;
  border-radius: 6px !important;
}

.admin-area input:focus, .admin-area textarea:focus, .admin-area select:focus {
  outline: 3px solid rgba(0,0,0,0.06) !important;
}

body.splash-visible {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* Header - Clean */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0; /* header inner padding provided by .container to align X axis with page content */
  height: 60px;
  background: var(--green);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
  .site-header {
    padding: 0; /* keep padding 0, container provides the gutter */
    height: 70px;
    gap: 16px;
  }
}

/* For small screens keep a small outer padding so header spacing remains compact */
@media (max-width: 639px) {
  .site-header { padding: 0 12px; }
}

/* Mobile: place client-site logo flush-left with a small gap (only on non-admin pages) */
@media (max-width: 639px) {
    body:not(.admin-area) .site-header { padding-left: 0; padding-right: 0; }
    /* Keep container gutter management centralized via the global .container rules.
      Do not override container padding here to avoid moving other page content. */
    body:not(.admin-area) .site-header .brand { margin-left: 16px; }
  /* ensure the home link / other nav items keep a tiny gap from the right edge */
  body:not(.admin-area) .site-header nav { padding-right: 6px; }
}

/* Mobile client: center search and place home icon at right, logo at left */
@media (max-width: 639px) {
  /* Switch to a flexible header on mobile: logo left, search fills remaining space, nav right.
     This aligns the logo with the page content and makes the search bar end at the same
     right gutter as the main content. */
  body:not(.admin-area) .site-header .header-inner { position: relative; display: flex; align-items: center; }
  /* Nudge logo right slightly so its leftmost visible pixel aligns with page content */
  body:not(.admin-area) .site-header .brand { position: relative; z-index: 3; margin-left: 16px; }
  body:not(.admin-area) .site-header nav { position: relative; z-index: 3; }

  /* Header search becomes flexible and fills the space between logo and nav */
  body:not(.admin-area) .header-search { position: relative; flex: 1 1 auto; margin: 0 8px; width: auto; max-width: none; z-index: 2; }
  body:not(.admin-area) .header-search .search-form { width: 100%; display: flex; }
  body:not(.admin-area) .header-search input[type="search"] { width: 100%; }
  body:not(.admin-area) .header-search .search-btn { flex: 0 0 auto; }
}

/* Ensure header inner container doesn't add extra offset */
.site-header .container { max-width: 1200px; margin: 0 auto; padding-left: var(--page-gutter-mobile); padding-right: var(--page-gutter-mobile); }
@media (min-width: 640px) {
  .site-header .container { padding-left: var(--page-gutter-tablet); padding-right: var(--page-gutter-tablet); }
}
@media (min-width: 1024px) {
  .site-header .container { padding-left: var(--page-gutter-desktop); padding-right: var(--page-gutter-desktop); }
}

/* Header inner layout: space between brand and nav, aligned to page container */
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; }

/* Small safe padding for settings icon so it is not flush to the very edge */
.settings-link { display: inline-flex; align-items: center; padding: 6px 8px; color: white; }
.settings-link svg { display: block; }

/* Admin header: logo izquierda, todo lo demás ordenado a la derecha */
.admin-area .site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-area .site-header .brand {
  flex-shrink: 0;
  order: 0;
}
.admin-area .site-header .admin-header-title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-left: auto;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  order: 1;
}
.admin-area .site-header nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  order: 2;
}
.admin-area .site-header nav a {
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}
.admin-area .site-header nav a:hover {
  background: rgba(255,255,255,0.12);
}

@media (min-width: 640px) {
  .admin-area .site-header .admin-header-title { font-size: 20px; }
  .admin-area .site-header nav { gap: 10px; }
}

@media (max-width: 639px) {
  .admin-area .site-header .admin-header-title { font-size: 14px; margin-left: auto; }
  .admin-area .site-header nav a { padding: 5px 8px; font-size: 12px; }
  .admin-area .site-header .header-inner { gap: 8px; }
}

/* Admin page layout tweaks: pull content closer to header */
.admin-page main.container { padding-top: 8px; }
.admin-page .panel-block { margin-top: 8px; }
.admin-page .card.admin-card { margin-bottom: 6px; }

/* Make the first panel (Orders) sit near the header specifically */
.admin-page .panel-block:first-of-type { margin-top: 4px; }

/* Mobile: remove extra container padding and tighten margins so Orders sits close to header */
@media (max-width: 639px) {
  .admin-page main.container { padding-top: 0 !important; }
  .admin-page .panel-block { margin-top: 4px !important; }
  .admin-page .panel-block:first-of-type { margin-top: 0 !important; }
  .admin-page .card.admin-card { margin-bottom: 4px !important; }
  /* also reduce container padding overall on very small screens */
  .container { padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 639px) {
  /* Admin header: logo left, nav right - already handled above */
  .admin-area .site-header .header-inner { justify-content: space-between; }
  .admin-area .settings-link { margin-left: 0; }

  /* Keep panel headings stacked and actions left-aligned on small screens */
  .panel-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .panel-heading .events-actions { order: 2; }
}

/* Nudge the home icon a bit left on small screens so it doesn't touch the screen edge */
@media (max-width: 639px) {
  .home-link { transform: translateX(-8px); }
}

/* Keep home icon hidden on mobile homepage (do not show on client index mobile) */
@media (max-width: 639px) {
  body.home-page .home-link { display: none; }
}

/* Match Orders title size to Events section headings */
.orders-title { font-size: 18px; font-weight: 700; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.brand a {
  display: block;
  transition: opacity 0.2s ease;
}

.brand a:hover {
  opacity: 0.9;
}

.logo {
  max-height: 50px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.auth-logo {
  border-radius: 10px;
}

/* Bordes redondeados en todos los logos (MNM y clientes) */
.site-header .brand img,
.auth-brand img {
  border-radius: 10px;
}

@media (min-width: 640px) {
  .logo {
    max-height: 50px;
  }
}

/* Desktop-only: slightly reduce logo height to keep header compact */
@media (min-width: 1024px) {
  .logo {
    max-height: 50px;
  }
}

.site-header nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Only adjust the logo/brand alignment — do NOT change global container paddings.
   The goal: make the logo visually align with page content gutters by nudging the
   logo element itself across breakpoints without altering the container. */
.site-header .brand { margin-left: 0 !important; padding-left: 0 !important; }
.site-header .brand .logo { display: block; }

/* Mobile: visually nudge the logo so its left-most visible pixel aligns with content gutter */
@media (max-width: 639px) {
  /* ensure logo flush-left with container gutter on mobile */
  .site-header .brand .logo { margin-left: 0 !important; }
}

/* Tablet / Desktop: smaller or zero left offset (container provides gutter) */
@media (min-width: 640px) {
  .site-header .brand .logo { margin-left: 0 !important; }
}

/* Strong overrides to ensure the header logo is always aligned to the page container gutter
   regardless of previous mobile-specific nudges. This forces the brand and logo to sit
   flush with the `.container` padding on all pages and breakpoints. */
.site-header .brand,
.site-header .brand .logo,
body:not(.admin-area) .site-header .brand {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.site-header nav a,
.admin-lock {
  color: white;
  background: none;
  text-decoration: none;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  box-shadow: none;
}

/* Header search placement for home page */
.header-search { order: 1; flex: 1 1 480px; max-width: 800px; margin: 0 12px; }
.header-search .search-form { width: 100%; display: flex; gap: 0; }
.header-search .search-form input { padding: 10px 12px; font-size: 15px; border-radius: 20px; }

/* Ensure logo stays at the very left, search grows in middle, nav at right */
.site-header .brand { order: 0; }
.site-header nav { order: 2; }

/* Home link (filled white) placed at the far right of header - slightly larger */
.home-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.home-link svg { display: block; width: 26px; height: 26px; }

/* Tighten Eventos spacing on the homepage */
.home-page main.container { padding-top: 6px; }
.home-page .events { margin-top: 4px; }

@media (min-width: 640px) {
  .site-header nav a,
  .admin-lock {
    padding: 0;
    font-size: 13px;
  }
}

.site-header nav a:hover,
.admin-lock:hover {
  background: none;
  color: #d1fae5;
  transform: scale(1.1);
  box-shadow: none;
  border-color: transparent;
}

/* Footer social icons (use image files placed in assets/img/) */
.site-footer {
  background: var(--green);
  color: #fff;
  padding: 24px 16px;
  border-radius: 12px;
}
.footer-grid { display:flex; gap:16px; flex-wrap:wrap; }
.footer-brand h4, .footer-social h4, .footer-contact h4 { color: #fff; }
.social-list { list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-direction:column; }
.social { display:flex; gap:8px; align-items:center; text-decoration:none; color:#fff; }
.social .icon img { width:18px; height:18px; display:block; filter: invert(1) grayscale(1) brightness(2); }
.social .label { font-size:13px; color:#fff; }

.btn-expand {
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.btn-expand:hover { background: rgba(255,255,255,0.06); }

.admin-lock svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Splash Screen: solo el logo titilando, sin padding, sombra con color primario del tenant */
.splash-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeOut 0.9s cubic-bezier(0.4, 0, 0.2, 1) 2.1s forwards;
}

.splash-hidden {
  display: none !important;
}

.splash-content {
  padding: 0;
  margin: 0;
  text-align: center;
  animation: contentFadeIn 0.8s ease-out forwards;
}

.splash-logo {
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 24px;
  /* drop-shadow sigue la forma del logo, no un recuadro; evita aspecto de caja blanca */
  filter: drop-shadow(0 16px 40px var(--splash-shadow-color, rgba(135, 178, 197, 0.4))) drop-shadow(0 8px 20px var(--splash-shadow-color, rgba(135, 178, 197, 0.25)));
  animation: logoBounce 2s ease-in-out infinite;
  background: transparent;
}

/* Ocultar loading overlay cuando el splash está visible (solo logo titilando) */
body.splash-visible .loading-overlay {
  display: none !important;
}

@keyframes logoBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes logoScaleIn {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
# Admin pages: ensure action buttons in grid cards are fully visible and flow normally
.admin-area .grid .card { overflow: visible !important; }
.admin-area .grid .card .card-actions { position: static !important; margin-top: 1px !important; top: auto !important; right: auto !important; z-index: 6 !important; display: flex !important; gap: 6px !important; align-items: center !important; }
.admin-area .grid .card .card-body h3 { margin: 0 !important; }
.admin-area .grid .card .card-actions .btn { white-space: nowrap; }


/* Ensure the small footer bar can be forced to the bottom when needed (admin trash) */
.site-footer-meta.fixed-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 998 !important;
}

/* Ensure the WhatsApp trigger does not overlap the footer — keep the trigger above the footer */
#wp-trigger { bottom: 60px !important; }

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

/* Container - Mobile First */
.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  /* Use responsive gutter variables so header, breadcrumbs and content align */
  padding-left: var(--page-gutter-mobile);
  padding-right: var(--page-gutter-mobile);
}
@media (min-width: 640px) {
  .container {
    padding-left: var(--page-gutter-tablet);
    padding-right: var(--page-gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--page-gutter-desktop);
    padding-right: var(--page-gutter-desktop);
  }
}

.container.narrow {
  max-width: 800px;
}

.center {
  text-align: center;
}

/* Search Section */
.search {
  margin-bottom: 16px;
}

.search-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.search-form {
  display: flex;
  gap: 0;
  flex: 1;
  background: #FFFFFF;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0 16px;
}

.search-form:focus-within {
  /* sin cambios en focus */
}

.search-form input {
  flex: 1;
  padding: 16px 0;
  border: none;
  font-size: 16px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  outline: none;
}

.search-form input:focus {
  outline: none;
}

/* Ocultar botón de cancelación en inputs search */
.search-form input::-webkit-search-cancel-button {
  display: none;
}

.search-form input::-webkit-search-decoration {
  display: none;
}

.search-btn {
  background: transparent;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 18px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.search-btn:hover {
  color: #6B7280;
}

.filter-wrapper {
  position: relative;
}

.filter-btn {
  padding: 14px 24px;
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}

.filter-btn:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 16px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1000;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-group select {
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--card);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--green);
}

/* Events Grid - Minimalist Card Design */
.events {
  margin-top: 16px;
}

.events h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
  }
}

/* Mobile-specific: force 2 columns on phones (iOS/Android) and prevent overflow */
@media (max-width: 768px) {
  .events .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }

  /* Ensure cards fill their grid cell and do not introduce fixed widths */
  .grid .card, .grid .card-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Make sure image scales and does not force horizontal overflow */
  .card-img {
    width: 100% !important;
    max-width: 100% !important;
    background-size: cover;
    aspect-ratio: 1.2 / 1;
  }

  /* Prevent long text from causing overflow */
  .card-title, .card-meta { word-break: break-word; overflow-wrap: anywhere; }

  /* Reduce gutters inside cards slightly on small phones */
  .grid .card .card-body { padding: 6px 4px 8px 4px; }

  /* Keep overall page container padding small so two columns fit */
  .container { padding-left: 12px; padding-right: 12px; }

  /* For very small screens make fonts/padding even tighter */
  @media (max-width: 480px) {
    .events .grid { gap: 8px; }
    .card-title { font-size: 16px; }
    .card-meta { font-size: 11px; }
    .card-img { aspect-ratio: 1.1 / 1; }
    .grid .card .card-body { padding: 4px 4px 6px 4px; }
  }
}

.card {
  background: transparent;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Subtle hover animation for event cards (desktop only) */
@media (min-width: 768px) {
  .events .grid .card-link, .events .grid .card {
    transition: box-shadow 240ms ease, filter 240ms ease;
    will-change: box-shadow, filter;
  }

  /* Do not apply shadow or transform to the card element itself; keep it flat */
  .events .grid .card:hover, .events .grid .card-link:hover { }

  /* Slight image zoom for a refined effect: ONLY when hovering the image itself */
  .events .grid .card .card-img:hover img,
  .events .grid .card-link .card-img:hover img,
  .events .grid .card .card-img:hover,
  .events .grid .card-link .card-img:hover {
    transform: scale(1.04) translateY(-4px);
    transition: transform 360ms ease, box-shadow 240ms ease, filter 240ms ease;
    /* Apply the visual elevation to the image only */
    box-shadow: var(--shadow-lg);
    filter: saturate(1.03);
  }

  /* Keep internal body text smooth during hover (no translation) */
  .events .grid .card .card-body {
    transition: opacity 240ms ease;
  }
}

.card-img {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  height: auto;
  border-radius: 12px;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

/* Desktop: slightly reduce visible image size inside each card so cards
   feel narrower on the X axis while keeping text sizes and alignment unchanged. */
@media (min-width: 641px) {
  .card-img {
    /* shrink image width a bit while keeping it left-aligned inside the card */
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
  .placeholder-img { width: calc(100% - 20px); max-width: calc(100% - 20px); }
}


.card-img.sold-out {
  filter: grayscale(100%);
  opacity: 0.6;
}

.card-body {
  padding: 8px 0 0 0;
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin: 0;
  padding-left: 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  font-family: inherit;
  text-decoration: none;
}

.card-date {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.placeholder-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, #E5E7EB 0%, #F3F4F6 50%, #E5E7EB 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.empty-state {
  padding: 64px 32px;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.empty-state h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid rgba(34, 197, 94, 0.2);
  border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}

.card-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: cardIn 0.6s ease forwards;
}

.muted {
  color: var(--muted);
}

/* Artist & Events Pages */
.artist-header {
  text-align: center;
  padding: 48px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 48px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.artist-hero-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: block;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--green);
}

.artist-name {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--text);
  letter-spacing: -1px;
}

.artist-description {
  font-size: 18px;
  color: var(--muted);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.event-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}

.event-date {
  flex: 0 0 80px;
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.event-date .day {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.event-date .month {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

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

.event-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}

.event-details {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.event-details .separator {
  color: var(--border);
}

.event-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 24px;
  transition: all 0.2s ease;
}

.event-item:hover .event-arrow {
  color: var(--green);
  transform: translateX(4px);
}

/* Event Detail Page */
.event-header {
  padding: 32px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 40px;
}

.breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--green-dark);
  text-decoration: underline;
}

.breadcrumb .separator {
  color: var(--muted);
  opacity: 0.5;
}

.event-title {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
  letter-spacing: -1px;
  line-height: 1.2;
}

.event-artist {
  font-size: 22px;
  color: var(--muted);
  margin: 0 0 24px;
  font-weight: 500;
}

.event-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
}

.meta-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--green);
}

.event-description {
  margin-top: 24px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.event-description p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 16px;
}

.sectors-section h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 32px;
  color: var(--text);
  letter-spacing: -0.5px;
}

/* Sectors Display */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.sector-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 28px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.sector-card:hover {
  border-color: var(--green);
  border-left-color: var(--green);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.sector-card.out-of-stock {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--border);
}

.sector-card.out-of-stock:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.sector-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
}

.sector-price {
  font-size: 36px;
  font-weight: 800;
  color: var(--green);
  margin: 0 0 8px;
  letter-spacing: -1px;
}

.sector-currency {
  font-size: 20px;
  font-weight: 500;
  color: var(--muted);
}

.sector-stock {
  font-size: 15px;
  color: var(--muted);
  margin: 16px 0 0;
  font-weight: 500;
}

.sector-stock.low {
  color: #F59E0B;
  font-weight: 600;
}

.sector-stock.out {
  color: #EF4444;
  font-weight: 700;
}

.stats-card {
  text-align: center;
}

.stats-amount {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--green);
  word-break: break-word;
  letter-spacing: -1px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.stats-grid .card {
  height: 100%;
}

.stats-grid .card-body.stats-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
}

/* Stat shortcut buttons: green ghost style (like 'Ocultar') */
.stats-grid .btn {
  background: transparent !important;
  color: var(--green) !important;
  border: 2px solid var(--green) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

.stats-grid .btn:hover {
  background: var(--green);
  color: #fff !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px);
}

/* Add space between the count and the action button */
.stats-grid .btn {
  margin-top: 10px !important;
}

/* Mobile: ensure buttons align across cards by pushing them to the bottom */
@media (max-width: 640px) {
  .stats-grid .card-body.stats-card {
    /* Use a 3-row grid so title, number and button occupy the same rows across cards */
    display: grid;
    grid-template-rows: minmax(28px, auto) 1fr auto;
    align-items: center;
    justify-items: center;
    min-height: 160px;
    padding: 8px 6px;
    gap: 6px;
  }
  /* Title: reserve space and center */
  .stats-grid .muted {
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 12px !important;
    justify-self: center;
    width: 100%;
    text-align: center;
  }
  /* Allow inner wrapper to be ignored so children become direct grid items */
  .stats-grid .stats-content { display: contents; }
  /* Number: center vertically in its row */
  .stats-grid .stats-amount {
    align-self: center;
    justify-self: center;
    margin: 0 !important;
  }
  /* Button: stick to bottom row */
  .stats-grid .btn {
    align-self: end !important;
    justify-self: center !important;
    margin-top: 0 !important;
    /* ensure fixed grid rows so all cards align exactly */
    grid-row: 3;
  }
  .stats-grid .muted { grid-row: 1; }
  .stats-grid .stats-amount { grid-row: 2; }
  /* Ensure button is visually centered even if its intrinsic width differs */
  .stats-grid .btn {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
  /* Make sure the grid columns remain consistent on small screens */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 8px !important;
  }
}

.stats-revenue {
  display: block;
}

/* Buttons - Modern Design */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.5;
}

.btn:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: translateY(0);
}

.btn.small {
  padding: 8px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}

/* Per-event action button (consistent sizing, overridable on mobile) */
.event-action-btn {
  padding: 6px 8px;
  font-size: 12px;
}

.btn.danger {
  background: #EF4444;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.2);
}

.btn.danger:hover {
  background: #DC2626;
}

.btn.ghost {
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: none;
}

.btn.ghost:hover {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
}

/* Ghost variant for destructive actions: red border + red hover */
.btn.ghost-danger {
  background: transparent;
  color: #EF4444;
  border: 2px solid #EF4444;
  box-shadow: none;
}
.btn.ghost-danger:hover {
  background: #EF4444;
  color: #fff;
  box-shadow: var(--shadow);
}

/* Admin action-btn delete (used in orders/admin lists) */
.action-btn.delete, .action-btn.delete:hover {
  background: transparent;
  color: #EF4444;
  border: 1px solid #EF4444;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
}
.action-btn.delete:hover {
  background: #EF4444;
  color: #fff;
}

.btn.outline {
  background: var(--card);
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: none;
}

/* White filled button: same sizing as .btn but white background and subtle border */
.btn.white {
  background: #ffffff;
  color: var(--green);
  border: 2px solid var(--green);
  box-shadow: none;
}

.btn.white:hover {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.btn.outline:hover {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
}

/* Hide server-side alert boxes site-wide when user prefers no alerts */
.alert, .alert-success, .alert-error {
  display: none !important;
}

/* Ensure footer sits at page bottom (non-fixed) unless explicitly required) */
.site-footer-meta {
  position: relative !important;
  margin-top: auto !important;
  z-index: 998;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table th,
.table td {
  border-bottom: 1px solid var(--border);
  padding: 12px;
  text-align: left;
}

.table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table tr:hover {
  background: var(--bg-secondary);
}

.table tr:last-child td {
  border-bottom: none;
}

/* Forms */
.event-form input,
.event-form textarea,
.auth-form input,
.purchase-form input,
.purchase-form select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  transition: all 0.2s ease;
}

.event-form input:focus,
.event-form textarea:focus,
.auth-form input:focus,
.purchase-form input:focus,
.purchase-form select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.purchase-form input[type="file"] {
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.purchase-form input[type="file"]:hover {
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.05);
}

.purchase-form input[type="file"]:focus {
  border-color: var(--green);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.event-form select {
  cursor: pointer;
}

.event-form textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
}

.purchase-form label {
  display: block;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-size: 14px;
}

.purchase-form .form-row label {
  margin-top: 16px;
}

/* Footer - Compact */
.site-footer {
  border-top: 1px solid var(--green-dark);
  margin-top: auto;
  padding: 16px;
  background: var(--green);
  color: #fff;
}

.site-footer h4 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 12px;
}

.site-footer p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  padding: 1px 0;
  color: rgba(255, 255, 255, 0.9);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
  font-size: 11px;
}

.site-footer a:hover {
  opacity: 0.7;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "brand brand"
    "social contact";
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand {
  grid-area: brand;
}

.footer-social {
  grid-area: social;
}

.footer-contact {
  grid-area: contact;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: none;
    gap: 16px;
    padding: 0 16px;
  }
  .footer-brand,
  .footer-social,
  .footer-contact {
    grid-area: auto;
  }
}

.site-footer-meta {
  text-align: center;
  padding: 8px 16px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  background: var(--green-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: inherit;
}

/* Social icons */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  transition: all 0.2s ease;
}

.social:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
}

/* New inline-SVG based icons: style icon container and label */
.social .icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
}
.social .icon svg { width: 14px; height: 14px; color: #fff; fill: none; stroke: currentColor; }
.social .label { font-size: 12px; color: #fff; margin-left: 6px; }

/* Reduce padding for footer icons to be minimal */
.footer .social-list .social, .footer-social .social-list .social { padding: 4px 6px; }

/* Hide text labels to keep footer minimal; show on hover or wide screens */
.social .label { display: none; }
@media (min-width: 640px) {
  .social .label { display: inline-block; }
}

.error {
  color: #EF4444;
  font-weight: 500;
}

.bank {
  list-style: none;
  padding: 0;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--border);
}

.bank li {
  padding: 12px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
}

.bank li:last-child {
  border-bottom: none;
}

.bank li strong {
  color: var(--text-secondary);
  font-weight: 600;
  display: inline-block;
  min-width: 120px;
}

/* Auth page styling */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #FFFFFF;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(34, 197, 94, 0.25), 0 4px 16px rgba(34, 197, 94, 0.15);
  overflow: hidden;
}

.auth-brand {
  padding: 40px 24px;
  text-align: center;
  background: #FFFFFF;
}

.auth-logo {
  height: 50px;
  width: auto;
  display: inline-block;
  border-radius: 10px;
}

.auth-title {
  color: var(--green-dark);
  margin-top: 16px;
  font-weight: 700;
  font-size: 24px;
}

.auth-body {
  padding: 32px;
}

.auth-form input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 15px;
  font-family: inherit;
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.auth-actions .btn {
  padding: 14px 24px;
  flex: 1;
}

.auth-note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
}

/* Password visibility toggle */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding: 14px 50px 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0;
  font-size: 15px;
  font-family: inherit;
}

.password-toggle {
  position: absolute;
  right: 18px;
  top: 14px;
  transform: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  color: var(--muted);
}

.password-toggle:hover {
  opacity: 1;
}

/* Admin polish */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0;
}

.admin-grid {
  gap: 24px;
}

.admin-event-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-soft,
.badge.soft {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.badge-success {
  background: #D1FAE5;
  color: #065F46;
}

.status-pending {
  background: #FEF3C7;
  color: #92400E;
}

.status-approved {
  background: #D1FAE5;
  color: #065F46;
}

.status-rejected {
  background: #FEE2E2;
  color: #991B1B;
}

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.admin-table td {
  vertical-align: top;
}

.row-highlight {
  background: #FFFBEB;
}

.small-text {
  font-size: 13px;
}

.panel-block {
  margin-top: 32px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

/* Align event action buttons to the right on desktop */
.panel-heading .events-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Force admin headings left-aligned to match previous layout */
.admin-card .card-body { text-align: left; }
.panel-heading h2, .panel-heading h1 { text-align: left; margin: 0; }

/* Form helpers */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.form-grid .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-grid input,
.form-grid textarea {
  width: 100%;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Final mobile override: ensure admin panel headings are left-aligned on small screens
   Placed at end to override earlier/general declarations that came after the initial mobile rules. */
@media (max-width: 639px) {
  .panel-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .panel-heading h1,
  .panel-heading h2 {
    text-align: left !important;
    width: 100%;
  }
  .panel-heading .events-actions {
    align-self: flex-start !important;
  }
}

/* Mobile: for the Eventos section, place buttons on the first row (right) and move the title
   to a new row below, left-aligned, occupying the leftover space. */
@media (max-width: 639px) {
  #eventos .panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  #eventos .panel-heading .events-actions {
    order: 1;
    margin-left: auto;
  }
  #eventos .panel-heading > div:first-child {
    order: 2;
    width: 100%;
    margin-top: 8px;
  }
  #eventos .panel-heading h2 {
    text-align: left !important;
    width: 100%;
    margin: 0;
  }
}

/* Override: keep title and buttons on same line in mobile by shrinking buttons */
@media (max-width: 639px) {
  #eventos .panel-heading {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px;
  }
  /* Title stays left, buttons on the right */
  #eventos .panel-heading > div:first-child { order: 0; width: auto; margin-top: 0; }
  #eventos .panel-heading .events-actions { order: 1; margin-left: auto; display: flex; gap: 6px; }
  /* Make small buttons more compact so they fit on one line */
  #eventos .panel-heading .events-actions .btn.small {
    padding: 4px 6px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    min-width: 0 !important;
  }
  /* Slightly reduce title size on very small screens to help fit */
  #eventos .panel-heading h2 { font-size: 16px !important; margin: 0; }
}

.form-row > div {
  flex: 1 1 280px;
}

/* Purchase page specific styles */
.price {
  font-size: 28px;
  font-weight: 800;
  color: var(--green);
  margin: 16px 0;
  letter-spacing: -0.5px;
}

.stock-chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

.stock-chip.low {
  background: #FEF3C7;
  color: #92400E;
}

.stock-chip.medium {
  background: #DBEAFE;
  color: #1E40AF;
}

.stock-chip.good {
  background: #D1FAE5;
  color: #065F46;
}

/* Mobile refinements */
@media (max-width: 900px) {
  :root {
    --header-h: 70px;
  }

  .site-header {
    padding: 0 20px;
    gap: 12px;
    height: var(--header-h);
  }

  .logo {
    max-height: 50px;
  }

  .site-header nav {
    gap: 8px;
  }

  .site-header nav a,
  .admin-lock {
    padding: 8px 14px;
    font-size: 13px;
  }

  .container {
    padding: 24px 16px;
  }

  .search-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .search-form {
    width: 100%;
  }

  .filter-btn {
    width: 100%;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
  }

  .events h2 {
    font-size: 28px;
  }

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

  .card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .table-wrapper {
    margin: 0 -16px;
    padding: 0 16px;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 0 16px;
    height: 65px;
  }

  .logo {
    max-height: 50px;
  }

  .site-header nav a,
  .admin-lock {
    padding: 6px 12px;
    font-size: 12px;
  }

  .admin-lock svg {
    width: 16px;
    height: 16px;
  }

  .container {
    padding: 20px 12px;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .btn.small {
    padding: 8px 16px;
    font-size: 13px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }

  .events h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .card-body {
    padding: 16px;
  }

  .card-title {
    font-size: 16px;
  }

  .event-title {
    font-size: 32px;
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .auth-card {
    margin-top: 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row > div {
    flex: 1 1 100%;
  }

  /* Admin panel mobile improvements */
  .admin-header {
    gap: 8px;
  }

  .admin-header h2 {
    font-size: 20px;
  }

  .badge.soft {
    font-size: 11px;
    padding: 6px 10px;
  }

  .admin-toolbar {
    justify-content: center !important;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-table {
    font-size: 13px;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px 5px;
    white-space: nowrap;
    font-size: 12px;
  }

  .btn.small {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .search-form {
    flex-direction: row !important;
    flex: 1;
  }

  .search-form input {
    flex: 1;
    min-width: 0;
  }

  .filter-wrapper {
    position: relative;
  }

  /* Stats cards on mobile */
  .stats-card {
    padding: 14px;
  }

  .stats-amount {
    font-size: 24px;
  }

  /* Form fields on mobile */
  .field input,
  .field textarea,
  .field select {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Styles for sectors quantity selector */
.sector-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: box-shadow 0.15s ease, transform 0.08s ease;
}

.sector-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.sector-left { display: flex; flex-direction: column; gap:6px; min-width:0; }
.sector-name { font-size: 15px; font-weight: 700; color: var(--text); }
.sector-price { font-size: 14px; color: var(--green); font-weight: 700; }

/* Right column vertical: selector above, availability below */
.sector-right { display:flex; flex-direction: column; align-items: center; justify-content: center; min-width:140px; }

/* Qty control: vertical layout on the right column; selector arriba, disponibilidad abajo */
.qty-control { display: flex; align-items: center; gap: 16px; background: transparent; width: 100%; justify-content: center; }
/* Large touch-friendly buttons and values: exact 24px font-size */
.qty-btn { min-width: 64px; height: 56px; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 24px; line-height: 1; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; }
.qty-btn:active { transform: scale(0.98); }
.qty-value { min-width: 56px; text-align: center; font-size: 24px; font-weight: 800; color: var(--text); }

.qty-available { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; width:100%; }

/* Continue text styles — controlled by JS */
.continue-text { font-size: 16px; font-weight: 700; user-select: none; text-decoration: none; color: #cccccc; pointer-events: none; }
.continue-text.enabled { color: #28a745; pointer-events: auto; cursor: pointer; }

@media (max-width: 640px) {
  .sector-card { padding: 10px 12px; }
  .qty-btn { min-width: 48px; height: 48px; font-size: 1.25rem; }
  .qty-value { font-size: 1.25rem; min-width:40px; }
}

/* Align action buttons near the title for admin cards in grids (dashboard, trash) */
.grid .card { overflow: visible; }
.grid { gap: 12px; }
.events .grid { gap: 6px; }
.events .grid .card { margin: 1px 0; }
.grid .card { margin: 2px 0; }
.grid .card .card-body { position: relative; padding-top: 6px; padding-bottom: 20px; min-height: 0; }
.grid .card .card-actions {
  position: absolute;
  top: 22px;
  right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 12;
}

/* Compact rules applied only on small screens */
@media (max-width: 640px) {
  .events { padding-inline: 8px; }

  /* Separar el título 'Eventos' del header en todas las vistas */
  .events h2 { margin-top: 28px; margin-bottom: 12px; }
}

/* Desktop: aumentar separación superior del título 'Eventos' ligeramente */
@media (min-width: 641px) {
  .events h2 { margin-top: 36px; margin-bottom: 12px; }
}
  .grid .card .card-body { padding: 4px 0 12px 0 !important; min-height: 80px; }
  .grid .card .card-actions { top: 8px; }
  .card-meta { margin-top: 6px; }
  .card-meta .card-date, .card-meta .card-city { display: block; }
  .card-meta .card-city { margin-top: 2px; }

  /* Force left alignment in mobile cards */
  .grid .card { align-items: flex-start !important; }
  .grid .card .card-body { align-items: stretch !important; text-align: left !important; }
  .grid .card .card-title, .grid .card .card-meta, .grid .card .card-link { width: 100% !important; text-align: left !important; }
}

/* Desktop: slightly separate meta (date/city) from the title while keeping title close to image */
@media (min-width: 641px) {
  .grid .card .card-body { padding-top: 6px; }
  .card-meta { margin-top: 6px; }

  /* Desktop: reduce per-event button sizes so they fit inline */
  .grid .card .card-actions .btn {
    padding: 4px 6px;
    font-size: 11px;
  }

  .event-action-btn {
    padding: 3px 6px;
    font-size: 10px;
  }

  /* Smaller overall buttons on desktop for a tighter layout */
  .btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .btn.small {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Meta (date + city) layout: keep inline on desktop, stack on mobile */
.card-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.15; }
/* Always stack city above date and remove inline bullet — both mobile and desktop */
.card-meta .card-date, .card-meta .card-city { display: block; }

@media (max-width: 640px) {
  .card-meta { margin-top: 2px; }
  .card-meta .card-date, .card-meta .card-city { display: block; }
  .card-meta .card-city { margin-top: 2px; }
}

/* Ensure buttons remain inline and not pushed down by long descriptions; allow wrapping if space constrained */
.grid .card .card-actions .btn { white-space: nowrap; }

/* On small screens, keep normal flow to avoid overlap */
@media (max-width: 640px) {
  .grid .card .card-actions { position: static; margin-top: 0.5px; }
}

/* Ensure admin grids always show 2 columns on small devices (prevent some iPhones showing 1 column) */
@media (max-width: 768px) {
  .admin-area .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .admin-area .grid .card {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  /* ensure card images and content can shrink */
  .admin-area .grid .card img, .admin-area .grid .card .card-img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* Desktop: keep moderate gap and slightly larger row-gap for comfortable separation */
@media (min-width: 641px) {
  .grid { gap: 20px; row-gap: 20px; column-gap: 20px; }
}

/* Floating WhatsApp button + popup styles */
#wp-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

/* Mobile-only Dashboard tweaks: center stat cards, hide events count, hide dates button, keep action buttons inline */
@media (max-width: 640px) {
  .stats-grid .stats-card {
    text-align: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hide the events count in the header to save space */
  .events-count { display: none !important; }

  /* Show the per-event "Fechas" button on mobile but smaller */
  .dates-btn { display: inline-block !important; padding: 4px 6px !important; font-size: 11px !important; }

  /* Keep action buttons on the same row and avoid wrapping */
  .grid .card .card-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px;
  }

  .grid .card .card-actions .btn {
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Shrink per-event action buttons on small screens so they fit inline */
  .event-action-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  /* Ensure stat labels/numbers are centered in the three quick links */
  .stats-grid .muted,
  .stats-grid .stats-amount,
  .stats-grid .small-text {
    text-align: center;
    display: block;
    width: 100%;
  }

  /* Make the three stat action buttons smaller on mobile */
  .stats-grid .btn {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}
#wp-btn {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #25D366;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none;
}
#wp-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.22); }
#wp-btn svg { width: 22px; height: 22px; color: white; }

/* Popup card */
#wp-popup {
  pointer-events: auto;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 10px;
  min-width: 210px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  color: #0f172a;
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: left;
  margin-bottom: 6px;
}

/* Buttons inside popup */
.wp-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.wp-primary { background: #25D366; color: white; }
.wp-secondary { background: transparent; border: 1px solid rgba(15,23,42,0.08); color: #0f172a; font-weight: 600; }

#wp-close { background: transparent; border: none; color: rgba(15,23,42,0.6); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; align-self: flex-end; }

@media (max-width: 640px) {
  #wp-floating { bottom: 14px; right: 12px; }
  #wp-btn { width: 48px; height: 48px; border-radius: 10px; }
  #wp-popup { min-width: 180px; max-width: calc(100vw - 44px); right: 0; left: auto; margin-bottom: 8px; transform-origin: bottom right; }
}