/* ==========================================================================
   CUSTOM PACKAGE MODAL STYLES (THEME-AWARE)
   ========================================================================== */

.package-modal-overlay {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.package-modal-card {
  background-color: var(--surface, #ffffff);
  color: var(--ink, #0f172a);
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

html.dark .package-modal-card {
  background-color: var(--surface, #0f2033);
  color: var(--ink, #f1f5f9);
  border-color: var(--line, #1f3550);
}

.package-modal-card h2,
.package-modal-card h3 {
  color: var(--ink, #0f172a);
}

html.dark .package-modal-card h2,
html.dark .package-modal-card h3 {
  color: #f8fafc;
}

/* Body Description Text — Darker & Clearer in Light Theme */
.package-modal-card .package-description,
.package-modal-card .package-description p,
.package-modal-card .package-description li {
  color: #1e293b !important; /* Slate-800 for high-contrast light mode legibility */
}

html.dark .package-modal-card .package-description,
html.dark .package-modal-card .package-description p,
html.dark .package-modal-card .package-description li {
  color: #cbd5e1 !important; /* Slate-300 for soft dark mode readability */
}

/* Close Button Hover State & Positioning Fix */
.package-modal-card button[aria-label="Close package details"] {
  color: #475569 !important; /* Slate-600 */
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.package-modal-card button[aria-label="Close package details"]:hover {
  color: #0f172a !important; /* Slate-900 */
  background-color: rgba(0, 0, 0, 0.05);
}

html.dark .package-modal-card button[aria-label="Close package details"] {
  color: #94a3b8 !important; /* Slate-400 */
}

html.dark .package-modal-card button[aria-label="Close package details"]:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Footer Close Button Contrast */
.package-modal-card .mt-8 button[type="button"] {
  color: #334155 !important;
  border-color: #cbd5e1;
}

html.dark .package-modal-card .mt-8 button[type="button"] {
  color: #cbd5e1 !important;
  border-color: #334155;
}