/* customize.css — Extension order flow styles.
   Extends theme.css design tokens (--cream, --indigo, --saffron, etc.) */

.customize-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 64px 100px;
}

.customize-header {
  text-align: center;
  margin-bottom: 56px;
}
.customize-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  color: var(--indigo);
  margin: 16px 0 20px;
  line-height: 1.1;
}
.customize-sub {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

.customize-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: start;
}

/* ======================== Selector Column ======================== */
.selector-column { display: flex; flex-direction: column; gap: 48px; }

.selector-group {}
.selector-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 20px;
}
.optional-tag {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
}

/* Extension type cards */
.ext-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ext-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1.5px solid rgba(28,43,74,0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.ext-type-card:hover { border-color: var(--saffron); }
.ext-type-card.selected { border-color: var(--saffron); background: rgba(200,149,108,0.06); }
.ext-type-card input[type="radio"] { display: none; }

.ext-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream-dark);
  border: 1px solid rgba(28,43,74,0.1);
}
.ext-icon-hem    { background: linear-gradient(135deg, #1C2B4A 0%, #2D4170 100%); }
.ext-icon-sleeve { background: linear-gradient(135deg, #3a4f6a 0%, #1C2B4A 100%); }
.ext-icon-collar { background: linear-gradient(135deg, #4a3560 0%, #2D1F3D 100%); }
.ext-icon-pocket { background: linear-gradient(135deg, #2a4060 0%, #1C2B4A 100%); }
.ext-icon-side   { background: linear-gradient(135deg, #1a2535 0%, #0f1a28 100%); }

.ext-type-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
}
.ext-type-from {
  font-size: 11px;
  color: var(--text-muted);
}

/* Tier toggle */
.tier-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tier-option {
  display: block;
  border: 2px solid rgba(28,43,74,0.15);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}
.tier-option.selected { border-color: var(--saffron); }
.tier-option input[type="radio"] { display: none; }
.tier-option-inner {
  padding: 20px;
  background: var(--white);
}
.tier-opt-name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 4px;
}
.tier-opt-price {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--saffron);
  margin-bottom: 8px;
}
.tier-opt-desc {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Rivet finishes */
.rivet-options { display: flex; gap: 12px; flex-wrap: wrap; }
.rivet-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1.5px solid rgba(28,43,74,0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rivet-option.selected { border-color: var(--saffron); background: rgba(200,149,108,0.06); }
.rivet-option input[type="radio"] { display: none; }
.rivet-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.rivet-swatch-gold           { background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); }
.rivet-swatch-brass          { background: linear-gradient(135deg, #C8956C 0%, #8B6B4A 100%); }
.rivet-swatch-silver         { background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%); }
.rivet-swatch-oxidised_silver { background: linear-gradient(135deg, #6B6B6B 0%, #3a3a3a 100%); }
.rivet-name { font-size: 12px; color: var(--text); font-weight: 500; }

/* Pattern grid (from original) */
.pattern-grid { display: flex; flex-direction: column; gap: 10px; }
.pattern-card {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1.5px solid rgba(28,43,74,0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.pattern-card:hover { border-color: var(--saffron); }
.pattern-card.selected { border-color: var(--saffron); background: rgba(200,149,108,0.06); }
.pattern-card input[type="radio"] { display: none; }
.pattern-swatch {
  width: 64px;
  height: 72px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pattern-swatch-kantha     { background: linear-gradient(135deg, #8B6B4A 0%, #6B5030 100%); }
.pattern-swatch-phulkari   { background: linear-gradient(135deg, #E8B84B 0%, #C8956C 100%); }
.pattern-swatch-chikankari { background: linear-gradient(135deg, #F5EDE0 0%, #E0D0C0 100%); border: 1px solid rgba(28,43,74,0.1); }
.pattern-swatch-mirror     { background: linear-gradient(135deg, #C8C8D0 0%, #A0A0B0 100%); }
.pattern-swatch-zardozi    { background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); }
.pattern-info { display: flex; flex-direction: column; gap: 4px; }
.pattern-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--indigo);
}
.pattern-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.pattern-price { font-size: 13px; font-weight: 500; color: var(--saffron); }
.pattern-check { opacity: 0; transition: opacity 0.2s; }
.pattern-card.selected .pattern-check { opacity: 1; }

/* Accordion */
.accordion { border: 1px solid rgba(28,43,74,0.1); border-radius: 4px; overflow: hidden; }
.accordion-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--cream-dark);
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo);
  text-align: left;
}
.accordion-toggle:hover { background: var(--cream); }
.accordion-arrow { transition: transform 0.2s; }
.accordion-content { padding: 20px; background: var(--white); }
.accordion-body { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.accordion-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; font-style: italic; }
.size-table { width: 100%; border-collapse: collapse; }
.size-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(28,43,74,0.06); font-size: 13px; }
.size-header { font-weight: 500; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.attach-steps { display: flex; flex-direction: column; gap: 16px; }
.attach-step { display: flex; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.5; }
.attach-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--saffron);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ======================== Order Section ======================== */
.order-section { position: sticky; top: 40px; }

.order-preview { margin-bottom: 24px; }
.preview-extension {
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream-dark);
  border: 1px solid rgba(28,43,74,0.08);
}
.preview-ext-visual {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--indigo);
}
.preview-ext-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253,248,240,0.5);
}
.preview-ext-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.preview-ext-hem    { background: linear-gradient(135deg, #C8956C 0%, #8B6B4A 100%); }
.preview-ext-sleeve { background: linear-gradient(135deg, #E8B84B 0%, #C8956C 100%); }
.preview-ext-collar { background: linear-gradient(135deg, #F5EDE0 0%, #E0D0C0 100%); }
.preview-ext-pocket { background: linear-gradient(135deg, #C8C8D0 0%, #A0A0B0 100%); }
.preview-ext-side   { background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%); }

.order-summary {
  background: var(--cream-dark);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 24px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.summary-row span:last-child { color: var(--text); }
.summary-divider {
  height: 1px;
  background: rgba(28,43,74,0.08);
  margin: 16px 0;
}
.summary-total {
  font-size: 16px;
  font-weight: 500;
  color: var(--indigo) \!important;
  margin-bottom: 0;
}

.checkout-form { display: flex; flex-direction: column; gap: 16px; }
.form-group label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid rgba(28,43,74,0.15);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus { border-color: var(--saffron); }
.checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  background: var(--indigo);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 0.04em;
}
.checkout-btn:hover:not(:disabled) { background: var(--indigo-light); }
.checkout-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.checkout-note { font-size: 12px; color: var(--text-muted); text-align: center; }
.error-message {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 4px;
  color: #B91C1C;
  font-size: 14px;
}

/* ======================== Success Page ======================== */
.success-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 64px 100px;
  text-align: center;
}
.success-icon { margin-bottom: 32px; }
.success-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  color: var(--indigo);
  line-height: 1.15;
  margin: 16px 0 24px;
}
.success-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 40px;
}
.order-detail-card {
  background: var(--cream-dark);
  border-radius: 4px;
  padding: 28px;
  text-align: left;
  margin-bottom: 32px;
}
.order-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 12px;
}
.order-detail-row:last-child { margin-bottom: 0; }
.order-detail-row span:first-child { color: var(--text-muted); }
.order-detail-row span:last-child { color: var(--text); font-weight: 500; }
.status-badge {
  background: rgba(200,149,108,0.12);
  color: var(--saffron);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}
.back-btn {
  display: inline-block;
  padding: 12px 32px;
  border: 1.5px solid var(--indigo);
  border-radius: 4px;
  color: var(--indigo);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.back-btn:hover { background: var(--indigo); color: var(--cream); }

/* ======================== Responsive ======================== */
@media (max-width: 1100px) {
  .ext-type-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .customize-page { padding: 48px 28px 80px; }
  .customize-layout { grid-template-columns: 1fr; gap: 48px; }
  .order-section { position: static; }
  .success-page { padding: 60px 28px 80px; }
  .ext-type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tier-toggle { grid-template-columns: 1fr; }
  .ext-type-grid { grid-template-columns: repeat(2, 1fr); }
  .pattern-card { grid-template-columns: 48px 1fr 20px; }
  .pattern-swatch { width: 48px; height: 56px; }
}