/**
 * JOY HUE COMPONENT SYSTEM
 * Reusable, responsive frontend UI components for storefront modules.
 * Focuses on child-friendly, modern premium aesthetics (vibrant colors, glassmorphism, rounded tabs, bounce eases).
 */

/* ═══════════════════════════════════════════════════════════════
   1. MODAL COMPONENT (.jh-modal)
   Responsive glassmorphic modal with blurred transparent margins.
════════════════════════════════════════════════════════════════ */

.jh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.4); /* Transparent dark backdrop */
  backdrop-filter: blur(10px) saturate(160%); /* Premium glass filter */
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--jh-sp-4, 16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.jh-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.jh-modal {
  width: 100%;
  max-width: 560px;
  background: rgba(255, 253, 245, 0.95); /* Off-white cream, slightly translucent */
  border-radius: var(--jh-radius-lg, 22px);
  border: 2px solid rgba(227, 72, 68, 0.15); /* Light Warm Sun border outline */
  box-shadow: 
    0 20px 50px rgba(26, 26, 46, 0.15),
    0 1px 3px rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--jh-font-body, inherit);
}

.jh-modal-overlay.active .jh-modal {
  transform: translateY(0) scale(1);
}

/* Modal Header */
.jh-modal__header {
  padding: var(--jh-sp-5, 20px) var(--jh-sp-6, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--jh-gray-200, #EDEBE5);
  background: rgba(255, 255, 255, 0.5);
}

.jh-modal__title {
  font-family: var(--jh-font-headline, cursive);
  font-size: 1.25rem;
  color: var(--jh-truth-black, #1A1A2E);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--jh-sp-2, 8px);
}

.jh-modal__close {
  background: var(--jh-gray-100, #F8F7F4);
  border: 1.5px solid var(--jh-gray-200, #EDEBE5);
  color: var(--jh-gray-500, #807B74);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  transition: all var(--jh-dur-fast, 150ms) var(--jh-ease, ease);
}

.jh-modal__close:hover {
  background: var(--jh-warm-sun, #E34844);
  border-color: var(--jh-warm-sun, #E34844);
  color: white;
  transform: scale(1.08) rotate(90deg);
}

/* Modal Body */
.jh-modal__body {
  padding: var(--jh-sp-6, 24px);
  overflow-y: auto;
  max-height: calc(75vh - 120px);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--jh-gray-700, #4A4640);
}

/* Modal Footer */
.jh-modal__footer {
  padding: var(--jh-sp-4, 16px) var(--jh-sp-6, 24px);
  background: var(--jh-gray-100, #F8F7F4);
  border-top: 1px solid var(--jh-gray-200, #EDEBE5);
  display: flex;
  justify-content: flex-end;
  gap: var(--jh-sp-3, 12px);
}

/* Size Variants */
.jh-modal--sm { max-width: 400px; }
.jh-modal--lg { max-width: 800px; }

/* Responsive adjustments */
@media (max-width: 576px) {
  .jh-modal-overlay {
    padding: var(--jh-sp-3, 12px);
    align-items: flex-end; /* Mobile bottom sheet style fallback */
  }

  .jh-modal {
    border-radius: var(--jh-radius-lg, 22px) var(--jh-radius-lg, 22px) 0 0;
    transform: translateY(100%);
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  
  .jh-modal-overlay.active .jh-modal {
    transform: translateY(0);
  }

  .jh-modal__body {
    max-height: 60vh;
  }
}