/* ============================================================
   VENVITY — Smart Upsell Modal (Phase 2B)
   Customer-facing styling only.

   Design intent: deliberately mirrors the APPROVED Phase 1 Bundle
   Protection modal (css/bundle-protection.css) — same overlay
   treatment, same panel shape/shadow/radius, same button-stack
   pattern — so the two modals feel like the SAME Venvity system,
   never like two different popup mechanisms. Class names are kept
   distinct (`.su-*` instead of `.bp-*`) so neither stylesheet can
   ever accidentally affect the other's modal, and so only one
   Venvity modal is ever active at a time (Phase 1 and Phase 2B
   modals are mutually exclusive by construction in JS, not by
   shared CSS).

   Every color, radius, shadow, spacing scale and font below reuses
   the existing global tokens already defined in css/style.css's
   :root and its .label/.title/.body-sm/.btn/.product-card__price
   classes. No new visual design language is introduced.
   ============================================================ */

.su-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(47, 52, 55, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: suFadeIn 0.22s ease;
}

.su-modal-overlay[hidden] {
  display: none;
}

body.su-modal-open {
  overflow: hidden;
}

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

.su-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2.25rem 2.25rem;
  animation: suRiseIn 0.28s ease;
}

@keyframes suRiseIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.su-modal:focus {
  outline: none;
}

.su-modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-light);
  border-radius: 50%;
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}

.su-modal__close:hover {
  background: var(--bg-main);
  color: var(--text-dark);
}

.su-modal__label {
  margin-bottom: 0.65rem;
  color: var(--primary);
}

.su-modal__title {
  margin-bottom: 0.85rem;
  padding-right: 1.5rem;
}

.su-modal__body {
  margin-bottom: 1.5rem;
}

/* ---- Mode 1: normal complementary product ---- */
.su-modal__product {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.su-modal__product-visual {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-main);
}

.su-modal__product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.su-modal__product-info {
  flex: 1 1 auto;
  min-width: 0;
}

.su-modal__product-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
}

.su-modal__product-copy {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-mid);
  margin-bottom: 0.6rem;
}

.su-modal__product-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.su-modal__product-price {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-dark);
}

.su-modal__product-access {
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ---- Mode 2: Complete System upgrade ---- */
.su-modal__bundle-visual {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--bg-main);
}

.su-modal__bundle-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.su-modal__compare {
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.su-modal__compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  font-size: 0.9rem;
  color: var(--text-mid);
}

.su-modal__compare-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.su-modal__compare-row--final {
  color: var(--text-dark);
  font-weight: 600;
}

.su-modal__value-message {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: rgba(111, 143, 134, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

/* ---- Shared actions ---- */
.su-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.su-modal__actions .btn {
  width: 100%;
}

.su-modal__viewcart {
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--text-light);
  text-decoration: underline;
}

.su-modal__viewcart:hover {
  color: var(--text-mid);
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .su-modal {
    padding: 2rem 1.5rem 1.75rem;
    border-radius: var(--radius-md);
  }

  .su-modal__title {
    padding-right: 1.25rem;
  }

  .su-modal__product {
    gap: 0.85rem;
  }

  .su-modal__product-visual {
    width: 76px;
    height: 76px;
  }

  .su-modal__product-name {
    font-size: 1.05rem;
  }
}