/* =====================================================
   Eventive – Account Tickets (Elementor-safe stylesheet)
   Updated to match new markup/classes and JS behaviors.
   Backwards compatible with legacy IDs/classes.
   ===================================================== */

:root {
  --primary-color: #0366d6;
  --secondary-color: #6b7280; /* neutral gray */
  --border-color: #e2e4e8;
  --text-color: #1f2937;
  --card-bg: #fff;
}

/* ===== Containers ===== */
.eventive-account-tickets { background: var(--card-bg); border:1px solid var(--border-color); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px; }
.eventive-tickets-column { margin-top: 8px; }
.eventive-tickets-column h2 { margin: 0 0 12px 0; font-size: 1.25rem; color: var(--primary-color); }

/* Legacy container (kept for back-compat) */
#eventive-tickets-container { flex: 1; background-color: var(--card-bg); color: var(--text-color); }

/* Loader & Notices */
.eventive-login-container { min-height: 100px; display:flex; justify-content:center; align-items:center; }
.eventive-notice { background: #f8fafc; border:1px solid var(--border-color); color: var(--text-color); padding: 12px 16px; border-radius: 8px; }
.loader { border:4px solid #f3f3f3; border-top:4px solid var(--primary-color); border-radius:50%; width:24px; height:24px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/* ===== Ticket Cards (new structure) ===== */
.eventive-ticket-card { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; padding:16px; background:#fff; border:1px solid var(--border-color); border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); margin-bottom:18px; transition:box-shadow .2s ease, transform .2s ease; box-sizing:border-box; }
.eventive-ticket-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.10); }
.eventive-ticket-card__body { flex:1 1 auto; min-width:0; }
.eventive-ticket-card__title { font-size:16px; font-weight:600; color:#212121; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eventive-ticket-card__meta { font-size:14px; color:rgba(0,0,0,.54); line-height:18px; margin-bottom:2px; }
.eventive-ticket-card__seat { font-size:13px; color: var(--secondary-color); margin-top:4px; }
.eventive-ticket-card__actions { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:flex-end; }
.eventive-ticket-section { margin: 16px 0 8px; font-size: 1rem; color: var(--text-color); font-weight: 700; }

/* ===== Filters & Badges (new) ===== */
.eventive-ticket-filters { display:flex; align-items:center; gap:8px; margin:6px 0 12px; }
.eventive-ticket-filters label { font-weight:600; color: var(--text-color); }
.eventive-ticket-filter-select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:6px 28px 6px 10px; border:1px solid var(--border-color); border-radius:6px; background:#fff; font: inherit; line-height:1.2; position:relative; }
.eventive-ticket-filter-select:focus { outline:2px solid rgba(3,102,214,0.2); outline-offset:2px; }

/* Generic badge + variants used inline by JS */
.evt-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:12px; line-height:1.4; }
.evt-badge-expired { background:#fee2e2; color:#991b1b; }
.evt-badge-scanned { background:#dcfce7; color:#14532d; }
.evt-badge-passed { background:#e5e7eb; color:#111827; }

/* Ensure Eventive Everywhere buttons align nicely in actions */
.eventive-ticket-card__actions .eventive-button { display:inline-block; }
.eventive-ticket-card__actions .eventive-widget-container { display:inline-block; vertical-align:middle; }

/* Buttons used by JS */
.evt-btn { display:inline-flex; align-items:center; justify-content:center; height:34px; line-height:32px; padding:0 14px; border-radius:6px; font-family:Lato, sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; border:1px solid transparent; }
.evt-btn-primary { background: var(--primary-color); color:#fff; }
.evt-btn-primary:hover { filter:brightness(.95); }
.evt-btn-secondary { background:#fff; color:#111; border-color:#d1d5db; }
.evt-btn-secondary:hover { background:#f9fafb; border-color:#cbd5e1; color:#212121; }

/* ===== Sections ===== */
.eventive-ticket-section { margin: 16px 0 8px; font-size: 1rem; color: var(--text-color); font-weight: 700; }

/* ===== Legacy layouts kept (ticket-box & list item) ===== */
.ticket-box { display:flex; flex-direction:column; align-items:flex-start; margin-top:18px; border:2px solid var(--primary-color); border-radius:12px; padding:18px 20px; background: linear-gradient(120deg, #f9f9f9 80%, #e6f0fa 100%); box-shadow: 0 6px 24px rgba(3,102,214,0.08), 0 1.5px 6px rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; box-sizing:border-box; position:relative; }
.ticket-box:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 32px rgba(3,102,214,0.15), 0 2px 8px rgba(0,0,0,0.08); border-color: var(--secondary-color); background: linear-gradient(120deg, #e6f0fa 80%, #f9f9f9 100%); }
.ticket-box h4 { margin:0 0 8px 0; font-size:1.2em; color: var(--primary-color); font-weight:bold; }
.ticket-box p { margin:2px 0 0 0; font-size:1em; color: var(--text-color); }
.eventive-ticket-virtual { border-left:5px solid var(--primary-color); background-color: rgba(0, 123, 255, 0.05); }
.eventive-ticket-physical { border-left:5px solid var(--secondary-color); background-color: rgba(40, 167, 69, 0.05); }
.ticket-used { opacity:.7; border-style:dashed; }

.eventive-ticket-list-item { display:flex; align-items:flex-start; position:relative; padding:16px 56px 16px 16px; background:#fff; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.12); margin-bottom:18px; transition: box-shadow .3s; }
.eventive-ticket-title { font-size:16px; font-weight:600; color:#212121; margin-bottom:4px; }
.eventive-ticket-meta { font-size:14px; color:rgba(0,0,0,0.54); line-height:18px; }
.eventive-ticket-type, .eventive-ticket-qty { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Action buttons (legacy) */
.eventive-ticket-button-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:10px; }
.eventive-universal-ticket-button { display:inline-block; min-width:5px; margin-right:12px; }
.eventive-ticket-action-link { display:inline-block; height:36px; line-height:36px; padding:0 16px; border-radius:2px; background:#5e96d6; color:#fff; font-family:Lato, sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; text-align:center; text-decoration:none; transition: background .3s; }
.eventive-ticket-action-link:hover { background:#4a82c2; }
.eventive-ticket-action-link.expired { background:#aaa; color:#fff; }
.eventive-ticket-manage-btn { display:inline-block; height:36px; line-height:33px; padding:0 16px; border:1px solid #222; border-radius:2px; background:#fff; color:#222; font-family:Lato, sans-serif; font-size:14px; font-weight:700; text-transform:uppercase; cursor:pointer; transition: background .3s, color .3s; }
.eventive-ticket-manage-btn:hover { background:#f6f6f6; }
.eventive-ticket-actions { position:absolute; top:0; right:4px; display:flex; flex-direction:column; gap:8px; padding:12px 12px 12px 0; }

/* ===== Modal (new) ===== */
.eventive-ticket-barcode-modal { display:none; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:9999; }
.eventive-ticket-barcode-modal.is-open,
.eventive-ticket-barcode-modal[style*="display: flex"] { display:flex !important; }
.barcode-modal-inner { background:#fff; padding:20px; max-width:560px; width:92vw; border-radius:12px; position:relative; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.barcode-modal-inner h3 { margin:0 0 10px 0; font-size: 1.1rem; color: var(--primary-color); }
.barcode-modal-body img { max-width:320px; width:100%; height:auto; border:1px solid #eee; border-radius:8px; padding:12px; }
.eventive-ticket-barcode-modal button[aria-label="Close"] {
  position:absolute; right:8px; top:6px; font-size:22px; line-height:1;
  background:none; border:none; cursor:pointer; color:#666;
  padding:8px; border-radius:6px;
}
.eventive-ticket-barcode-modal button[aria-label="Close"]:hover { color:#111; }

/* Legacy modal IDs (back-compat) */
#barcode-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); justify-content:center; align-items:center; z-index:9999; }
#barcode-modal.is-open, #barcode-modal[style*="display: flex"] { display:flex !important; }
#close-barcode-modal { position:absolute; top:10px; right:10px; background:none; border:none; font-size:1.5em; color:#888; cursor:pointer; transition: color .2s; }
#close-barcode-modal:hover { color: var(--primary-color); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .eventive-ticket-card { flex-direction:column; align-items:stretch; }
  .eventive-ticket-card__actions { justify-content:flex-start; }
  .eventive-ticket-actions { position:static; padding-top:8px; }
  .eventive-ticket-button-row { justify-content:center; flex-direction:column; align-items:center; }
  .eventive-ticket-action-link, .eventive-ticket-manage-btn { width:100%; max-width:280px; text-align:center; }
}

@media (max-width: 600px) {
  .barcode-modal-inner { padding:16px 8px; }
}