/* ========================================
   SOCIETY ARTS - MODALS
   Brand Design System v3.0
   ======================================== */

/* ========================================
   BASE MODAL
   ======================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay-dark);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

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

.modal {
  background: var(--color-tan-5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.open .modal {
  transform: scale(1);
}

.modal-sm { width: var(--modal-width-sm); }
.modal-md { width: var(--modal-width-md); }
.modal-lg { width: var(--modal-width-lg); }
.modal-xl { width: var(--modal-width-xl); max-width: 95vw; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) var(--space-2xl);
  border-bottom: 1px solid var(--color-tan-20);
  flex-shrink: 0;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background-color: var(--color-tan-10);
  color: var(--color-text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2xl);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--color-tan-20);
  flex-shrink: 0;
}

/* ========================================
   STYLE FINDER MODAL
   ======================================== */

.style-finder-modal {
  width: var(--modal-width-xl);
  max-width: 95vw;
  height: 85vh;
}

.style-finder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.style-finder-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.style-finder-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.style-finder-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.style-finder-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.style-finder-search {
  display: flex;
  align-items: center;
  background-color: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--space-sm) var(--space-lg);
  gap: var(--space-sm);
  width: 280px;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.style-finder-search:focus-within {
  background-color: white;
  border-color: var(--color-border-medium);
}

.style-finder-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-base);
}

.style-finder-search input::placeholder {
  color: var(--color-text-placeholder);
}

.style-finder-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Style Finder Sidebar */
.style-finder-sidebar {
  width: 240px;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  flex-shrink: 0;
  padding: var(--space-lg) 0;
}

.sf-section {
  margin-bottom: var(--space-lg);
}

.sf-section-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-left: 3px solid transparent;
}

.sf-section-item:hover {
  background-color: var(--color-surface-alt);
}

.sf-section-item.active {
  background-color: var(--color-surface-alt);
  border-left-color: var(--color-accent);
}

.sf-section-icon {
  color: var(--color-text-muted);
}

.sf-section-item.active .sf-section-icon {
  color: var(--color-accent);
}

.sf-section-label {
  flex: 1;
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

.sf-section-item.active .sf-section-label {
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.sf-section-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.sf-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-md) var(--space-xl);
}

/* Category with expandable mediums */
.sf-category {
  margin-bottom: var(--space-sm);
}

.sf-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.sf-category-header:hover {
  background-color: var(--color-surface-alt);
}

.sf-category-arrow {
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.sf-category-arrow.expanded {
  transform: rotate(90deg);
}

.sf-category-name {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.sf-category-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sf-mediums {
  display: none;
  padding-left: var(--space-xl);
}

.sf-mediums.expanded {
  display: block;
}

.sf-medium-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xl);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.sf-medium-item:hover {
  background-color: var(--color-surface-alt);
}

.sf-medium-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.sf-medium-checkbox.checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.sf-medium-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.sf-medium-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Style Grid */
.style-finder-grid-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

.style-finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

/* ========================================
   STYLE VIEWER MODAL
   ======================================== */

.style-viewer-modal {
  width: var(--modal-width-xl);
  max-width: 95vw;
  height: 85vh;
}

.style-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.style-viewer-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Style Info Panel (Left) */
.style-info-panel {
  width: 360px;
  padding: var(--space-2xl);
  overflow-y: auto;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
}

.style-info-name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  line-height: var(--leading-tight);
}

.style-info-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-xl);
}

.style-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.style-info-section {
  margin-bottom: var(--space-xl);
}

.style-info-section-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.style-info-section-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.style-info-palette {
  display: flex;
  gap: var(--space-sm);
}

.style-palette-swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
}

.style-info-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xl);
}

.style-info-actions .btn {
  flex: 1;
}

.style-favorite-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.style-favorite-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.style-favorite-btn.favorited {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* Image Viewer Panel (Right) */
.style-image-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  min-width: 0;
}

.style-image-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
}

.style-image-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.style-image-controls {
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.style-zoom-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: 0 var(--space-sm);
}

.style-zoom-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.style-zoom-btn:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.style-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
}

.style-image-nav:hover {
  background-color: var(--color-surface-alt);
}

.style-image-nav.prev { left: var(--space-lg); }
.style-image-nav.next { right: var(--space-lg); }

.style-image-id {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.9);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
}

/* Thumbnail strip */
.style-thumbnails {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-left: var(--space-xl);
  overflow-y: auto;
  max-height: 100%;
}

.style-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.style-thumbnail:hover {
  border-color: var(--color-border-medium);
}

.style-thumbnail.active {
  border-color: var(--color-accent);
}

.style-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style-thumbnail-nav {
  width: 80px;
  height: 32px;
  border: none;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.style-thumbnail-nav:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
}