/* =====================================================
   Eventive — Account Passes (Elementor-safe stylesheet)
   Updated to match new markup/classes and JS behaviors.
   Backward compatible with old ID-based selectors.
   ===================================================== */

:root {
  --evt-color-primary: #0366d6;
  --evt-border: #e2e4e8;
  --evt-text: #1f2937;
  --evt-muted: #6b7280;
  --evt-card: #fff;
}

/* Container */
.eventive-account-passes { background: var(--evt-card); border:1px solid var(--evt-border); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); padding:12px; }
/* Legacy containers */
#eventive-passes-column, #eventive-passes-list { display:block; }

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

/* Notice helper */
.eventive-notice { background:#f8fafc; border:1px solid var(--evt-border); color:var(--evt-text); padding:12px 16px; border-radius:8px; }

/* List wrapper */
.eventive-passes-list { margin-top:12px; }
.eventive-passes-list h2 { margin:0 0 12px 0; font-size:1.25rem; color: var(--evt-color-primary); }

/* =========================
   Pass Cards (new structure)
   ========================= */
.eventive-pass-card { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; position:relative; padding:16px; background:#fff; border:1px solid var(--evt-border); 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-pass-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.10); }
.eventive-pass-card__body { flex:1 1 auto; min-width:0; }
.eventive-pass-card__title { font-size:16px; font-weight:600; color:#212121; margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eventive-pass-card__meta { font-size:14px; color:rgba(0,0,0,.54); line-height:18px; margin-bottom:2px; }
.eventive-pass-card__benefits { font-size:13px; color:var(--evt-muted); margin-top:4px; }

.eventive-pass-card__actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }

/* Buttons used by JS: .evt-btn, .evt-btn-primary, .evt-btn-secondary */
.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(--evt-color-primary); 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; }

/* Legacy button/back-compat */
.eventive-pass-manage-btn { display:inline-block; height:34px; line-height:32px; padding:0 14px!important; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#111; 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; }
.eventive-pass-manage-btn:hover { background:#f9fafb; border-color:#cbd5e1; color:#212121; }
.eventive-pass-button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; justify-content:flex-end; }

/* Legacy list item back-compat */
.eventive-pass-list-item { display:flex; align-items:flex-start; position:relative; padding:16px 56px 16px 16px; background:#fff; border:1px solid var(--evt-border); 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-pass-list-item:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.10); }
.eventive-pass-actions { position:absolute; top:0; right:4px; display:flex; flex-direction:column; gap:8px; padding:12px 12px 12px 0; }

/* Responsive cards */
@media (max-width: 900px) {
  .eventive-pass-card { flex-direction:column; align-items:stretch; }
  .eventive-pass-card__actions { justify-content:flex-start; }
  .eventive-pass-actions { position:static; padding-top:8px; }
  .eventive-pass-manage-btn { width:100%; max-width:280px; text-align:center; }
  .eventive-pass-list-item { flex-direction:column; align-items:stretch; padding:14px; }
}

/* =====================
   Edit Pass Modal (new)
   ===================== */
.eventive-edit-pass-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); align-items:center; justify-content:center; z-index:9999; }
.eventive-edit-pass-modal[style*="display: flex"],
.eventive-edit-pass-modal.is-open { display:flex !important; }
.edit-pass-modal-content { background:#fff; border-radius:8px; padding:20px; min-width:340px; max-width:90vw; position:relative; box-shadow:0 8px 24px rgba(0,0,0,.2); color:#212121; font-family:Lato, sans-serif; }
.edit-pass-modal-content h3 { margin:0 0 12px 0; font-size:20px; font-weight:600; }
.edit-pass-modal-content .form-group { margin-bottom:16px; }
.edit-pass-modal-content label { display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
.edit-pass-modal-content input,
.edit-pass-modal-content textarea,
.edit-pass-modal-content select { width:100%; padding:10px; font-size:14px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box; font-family:inherit; }
.edit-pass-modal-content textarea { resize:vertical; }
.eventive-close-edit-pass-modal { position:absolute; top:10px; right:10px; font-size:1.5em; cursor:pointer; background:none; border:none; }
.pass-submit-row-button { background-color:#007bff; color:#fff; border:none; padding:10px 16px; border-radius:4px; cursor:pointer; font-size:14px; font-weight:bold; transition: background-color .3s ease; }
.pass-submit-row-button:hover { background-color:#0056b3; }

/* Back-compat (old modal IDs) */
#edit-pass-modal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(30,30,30,0.7); justify-content:center; align-items:center; z-index:1000; }
#edit-pass-modal[style*="display: flex"] { display:flex !important; }
#edit-pass-modal-content { background:#ffffff; border-radius:8px; padding:32px 28px 24px 28px; min-width:340px; max-width:90vw; position:relative; box-shadow:0 8px 24px rgba(0, 0, 0, 0.2); font-family:Lato, sans-serif; color:#212121; }
#close-edit-pass-modal { position:absolute; top:10px; right:10px; font-size:1.5em; cursor:pointer; }

/* ==============================
   Show Pass Barcode Modal (new)
   ============================== */
.eventive-show-pass-barcode-modal { display:none; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:9999; }
.eventive-show-pass-barcode-modal.is-open,
.eventive-show-pass-barcode-modal[style*="display: flex"] { display:flex !important; }
.show-pass-barcode-modal-content { background:#fff; max-width:520px; width:92vw; padding:20px; border-radius:12px; position:relative; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.18); }
#pass-barcode-meta, .pass-barcode-meta { margin-bottom:10px; font-size:14px; opacity:.8; }
#pass-barcode-img, .pass-barcode-img { max-width:320px; width:100%; height:auto; border:1px solid #eee; border-radius:8px; padding:12px; }
#pass-barcode-legend, .pass-barcode-legend { margin-top:10px; font-size:13px; opacity:.85; }
.eventive-show-pass-barcode-modal button[aria-label="Close"],
#close-show-pass-barcode-modal { position:absolute; right:12px; top:10px; font-size:22px; line-height:1; background:none; border:none; cursor:pointer; color:#666; }
.eventive-show-pass-barcode-modal button[aria-label="Close"]:hover,
#close-show-pass-barcode-modal:hover { color:#111; }

/* Back-compat (old barcode modal IDs) */
#show-pass-barcode-modal { display:none; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:9999; }
#show-pass-barcode-modal.is-open,
#show-pass-barcode-modal[style*="display: flex"] { display:flex !important; }
#show-pass-barcode-modal #show-pass-barcode-modal-content { background:#fff; max-width:520px; width:92vw; padding:20px; border-radius:12px; position:relative; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.18); }

/* Misc forms */
.supplementary-fields .form-group + .form-group { margin-top: 10px; }
.eventive-edit-pass-modal .form-group label { display:block; font-weight:600; }
.eventive-edit-pass-modal input[type="text"],
.eventive-edit-pass-modal input[type="tel"],
.eventive-edit-pass-modal select,
.eventive-edit-pass-modal textarea { width:100%; box-sizing:border-box; }

/* ===== Improvements: Pass Card Actions ===== */

/* Strengthen the visual hierarchy of the Show Barcode button */
.eventive-pass-card__actions .evt-btn-secondary {
  background: #f3f4f6; /* light gray for contrast on white cards */
  border-color: #d1d5db;
  color: #111;
  font-weight: 700;
}
.eventive-pass-card__actions .evt-btn-secondary:hover {
  background: #e5e7eb;
  border-color: #cbd5e1;
  color: #000;
  transform: translateY(-1px);
}

/* Add a primary style for high-importance actions like Manage or Edit */
.eventive-pass-card__actions .evt-btn-primary {
  background: var(--evt-color-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(3, 102, 214, 0.15);
}
.eventive-pass-card__actions .evt-btn-primary:hover {
  background: #0257ba;
  filter: brightness(0.98);
  box-shadow: 0 4px 12px rgba(3, 102, 214, 0.2);
  transform: translateY(-1px);
}

/* Add subtle separation between stacked buttons on smaller screens */
@media (max-width: 600px) {
  .eventive-pass-card__actions .evt-btn {
    width: 100%;
    text-align: center;
  }
}

/* Harmonize Eventive button integration if used for virtual passes */
.eventive-pass-card__actions .eventive-button {
  display: inline-block;
  vertical-align: middle;
  min-width: 160px;
}
.eventive-pass-card__actions .eventive-widget-container {
  display: inline-block;
  vertical-align: middle;
}