/* ============================================
   POD SELECTOR - Print Options Modal
   ============================================ */

/* -------------------- Modal Backdrop -------------------- */

.pod-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.pod-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* -------------------- Modal Container -------------------- */

.pod-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background-color: var(--color-warm-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  z-index: var(--z-modal);
  width: min(900px, 95vw);
  max-height: 90vh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal) var(--ease-out-expo);
}

.pod-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* -------------------- Modal Layout -------------------- */

.pod-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-height: 90vh;
}

@media (max-width: 768px) {
  .pod-layout {
    grid-template-columns: 1fr;
  }
}

/* -------------------- Preview Panel -------------------- */

.pod-preview {
  background-color: var(--color-parchment);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pod-preview__image {
  max-width: 100%;
  max-height: 350px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-frame);
  background-color: var(--color-warm-white);
  transition: all var(--transition-normal);
}

/* Framed preview styles */
.pod-preview--framed .pod-preview__image {
  border: 12px solid #2d2d2d;
  box-shadow: var(--shadow-frame-hover);
}

.pod-preview--framed-black .pod-preview__image {
  border-color: #2d2d2d;
}

.pod-preview--framed-white .pod-preview__image {
  border-color: #f5f5f5;
}

.pod-preview--framed-oak .pod-preview__image {
  border-color: #b8956c;
}

.pod-preview--framed-walnut .pod-preview__image {
  border-color: #5c4033;
}

.pod-preview__title {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
  text-align: center;
}

/* -------------------- Options Panel -------------------- */

.pod-options {
  padding: var(--space-6);
  overflow-y: auto;
  max-height: 90vh;
}

@media (max-width: 768px) {
  .pod-options {
    max-height: 50vh;
  }
}

.pod-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.pod-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
}

.pod-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-parchment);
  border-radius: var(--radius-full);
  color: var(--color-warm-gray);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.pod-close:hover {
  background-color: var(--color-border);
  color: var(--color-charcoal);
}

/* -------------------- Option Group -------------------- */

.pod-group {
  margin-bottom: var(--space-6);
}

.pod-group__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* -------------------- Size Selector -------------------- */

.pod-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .pod-sizes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pod-size {
  position: relative;
  cursor: pointer;
}

.pod-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pod-size__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background-color: var(--color-warm-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.pod-size:hover .pod-size__card {
  border-color: var(--color-terracotta-light);
}

.pod-size input:checked + .pod-size__card {
  border-color: var(--color-terracotta);
  background-color: rgba(196, 120, 90, 0.05);
}

.pod-size__name {
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}

.pod-size__dimensions {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* -------------------- Paper Selector -------------------- */

.pod-papers {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pod-paper {
  position: relative;
  cursor: pointer;
}

.pod-paper input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pod-paper__card {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-warm-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.pod-paper:hover .pod-paper__card {
  border-color: var(--color-terracotta-light);
}

.pod-paper input:checked + .pod-paper__card {
  border-color: var(--color-terracotta);
  background-color: rgba(196, 120, 90, 0.05);
}

.pod-paper__swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-3);
  border: 1px solid var(--color-border);
}

.pod-paper__swatch--matte {
  background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
}

.pod-paper__swatch--lustre {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 50%, #ffffff 100%);
}

.pod-paper__swatch--rag {
  background: linear-gradient(135deg, #faf8f2 0%, #e8e4d8 100%);
}

.pod-paper__info {
  flex: 1;
}

.pod-paper__name {
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
  margin-bottom: 2px;
}

.pod-paper__desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.pod-paper__price {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-terracotta);
}

/* -------------------- Frame Selector -------------------- */

.pod-frames {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pod-frame {
  position: relative;
  cursor: pointer;
}

.pod-frame input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pod-frame__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3);
  background-color: var(--color-warm-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 80px;
  transition: all var(--transition-fast);
}

.pod-frame:hover .pod-frame__card {
  border-color: var(--color-terracotta-light);
}

.pod-frame input:checked + .pod-frame__card {
  border-color: var(--color-terracotta);
  background-color: rgba(196, 120, 90, 0.05);
}

.pod-frame__swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  border: 3px solid;
  background-color: var(--color-parchment);
}

.pod-frame__swatch--none {
  border-color: transparent;
  background: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%),
              linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

.pod-frame__swatch--black {
  border-color: #2d2d2d;
}

.pod-frame__swatch--white {
  border-color: #f5f5f5;
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.pod-frame__swatch--oak {
  border-color: #b8956c;
}

.pod-frame__swatch--walnut {
  border-color: #5c4033;
}

.pod-frame__name {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}

.pod-frame__price {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* -------------------- Price Summary -------------------- */

.pod-summary {
  background-color: var(--color-parchment);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.pod-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.pod-price-row:last-child {
  border-bottom: none;
}

.pod-price-row--total {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  padding-top: var(--space-3);
}

.pod-price-row__label {
  color: var(--color-warm-gray);
  font-size: var(--text-sm);
}

.pod-price-row--total .pod-price-row__label {
  color: var(--color-charcoal);
  font-size: var(--text-base);
}

.pod-price-row__value {
  color: var(--color-charcoal);
  font-weight: var(--font-medium);
}

.pod-price-row--total .pod-price-row__value {
  color: var(--color-terracotta);
  font-size: var(--text-xl);
}

/* -------------------- Actions -------------------- */

.pod-actions {
  margin-top: var(--space-4);
}

.pod-actions .btn {
  width: 100%;
}

.pod-note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
}

.pod-note svg {
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* -------------------- Loading State -------------------- */

.pod-loading {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
}

.pod-loading.active {
  opacity: 1;
  visibility: visible;
}

.pod-loading__text {
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
}