/**
 * @file
 * Popup de confirmation de taille Haqihana — aligné sur le design système du thème.
 */

.hsc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 26, 23, .55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.hsc-overlay.hsc-visible {
  opacity: 1;
  visibility: visible;
}

/* ── Popup container ─────────────────────────────────────────────────── */
.hsc-popup {
  background: var(--dvd-paper, #faf6ee);
  border-radius: var(--dvd-r-lg, 14px);
  box-shadow: var(--dvd-shadow-lg, 0 20px 60px rgba(31,26,23,.18));
  max-width: 480px;
  width: 100%;
  max-height: 90svh;
  overflow-y: auto;
  position: relative;
  transform: translateY(12px) scale(.97);
  transition: transform .25s ease;
}

.hsc-overlay.hsc-visible .hsc-popup {
  transform: translateY(0) scale(1);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.hsc-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--dvd-border, rgba(31,26,23,.18));
}

.hsc-header-icon {
  font-size: 1.375rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: .1em;
}

.hsc-header h3 {
  margin: 0;
  font-family: var(--dvd-serif, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--dvd-ink, #1f1a17);
  line-height: 1.25;
  flex: 1;
}

.hsc-close {
  position: absolute;
  top: .875rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.375rem;
  color: var(--dvd-muted, #7a736b);
  cursor: pointer;
  line-height: 1;
  padding: .25rem;
  border-radius: var(--dvd-r-sm, 4px);
  transition: color .15s, background .15s;
}

.hsc-close:hover {
  color: var(--dvd-ink, #1f1a17);
  background: var(--dvd-paper-2, #f2ecdd);
}

/* ── Contenu ─────────────────────────────────────────────────────────── */
.hsc-content {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.hsc-message {
  font-size: .9375rem;
  color: var(--dvd-muted, #7a736b);
  line-height: 1.65;
  margin: 0;
}

/* Bloc taille sélectionnée */
.hsc-size-selected {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  background: var(--dvd-paper-2, #f2ecdd);
  padding: .875rem 1rem;
  border-radius: var(--dvd-r, 8px);
  border-left: 3px solid var(--dvd-amber, #c89b4c);
}

.hsc-size-selected strong {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dvd-muted, #7a736b);
}

.hsc-size-value {
  display: inline-flex;
  align-items: center;
  background: var(--dvd-sage, #2c3e63);
  color: var(--dvd-paper, #faf6ee);
  padding: .3rem .875rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Bloc plage de mesure */
.hsc-size-range {
  background: var(--dvd-sage-wash, #dde5f0);
  padding: .875rem 1rem;
  border-radius: var(--dvd-r, 8px);
  font-size: .9rem;
  color: var(--dvd-ink, #1f1a17);
}

.hsc-size-range p {
  margin: 0;
  line-height: 1.5;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.hsc-actions {
  display: flex;
  gap: .75rem;
  padding: 0 1.5rem 1.5rem;
}

.hsc-btn {
  flex: 1;
  padding: .875rem 1.25rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  border: 1.5px solid transparent;
  line-height: 1;
}

.hsc-btn:active { transform: translateY(1px); }

.hsc-btn-cancel {
  background: transparent;
  color: var(--dvd-muted, #7a736b);
  border-color: var(--dvd-border, rgba(31,26,23,.18));
}

.hsc-btn-cancel:hover {
  border-color: var(--dvd-ink, #1f1a17);
  color: var(--dvd-ink, #1f1a17);
}

.hsc-btn-confirm {
  background: var(--dvd-sage, #2c3e63);
  color: var(--dvd-paper, #faf6ee);
  border-color: var(--dvd-sage, #2c3e63);
}

.hsc-btn-confirm:hover {
  background: var(--dvd-sage-d, #1e2a4a);
  border-color: var(--dvd-sage-d, #1e2a4a);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hsc-header { padding: 1.25rem 1.25rem 1rem; }
  .hsc-content { padding: 1rem 1.25rem 1.25rem; }
  .hsc-actions {
    flex-direction: column;
    padding: 0 1.25rem 1.25rem;
  }
  .hsc-btn { padding: .875rem; }
}