*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #FFF7F0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #3B2721;
}

img {
  max-width: 100%;
  display: block;
}

/* Header */
.designer-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #FFF7F0E6;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E6D5C4;
}

.designer-header-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.designer-title-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.designer-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.designer-title-text {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
}

.back-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: #C79A57;
}

/* Layout */
.designer-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

.form-card {
  background: #FFF7F0;
  border-radius: 18px;
  padding: 18px 14px 20px;
  box-shadow: 0 12px 30px rgba(59, 39, 33, 0.08);
}

.form-intro {
  font-size: 0.9rem;
  margin: 0 0 14px;
}

.form-section {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #F0DAC6;
}

.form-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.form-section h2 {
  margin: 0 0 6px;
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
}

.field {
  margin-top: 10px;
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid #E6D5C4;
  font-size: 0.9rem;
  font-family: inherit;
}

.field textarea {
  resize: vertical;
}

.two-col {
  display: flex;
  gap: 8px;
}

.two-col > div {
  flex: 1;
}

/* Pills for radios */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #E6D5C4;
  background: #FFF7F0;
  padding: 5px 12px;
  font-size: 0.82rem;
}

.pill input[type="radio"] {
  accent-color: #E59BAF;
}

/* Palette buttons */
.pill-row.small {
  margin-bottom: 6px;
}

.pill-btn {
  border-radius: 999px;
  border: 1px solid #E6D5C4;
  background: #FFF7F0;
  padding: 5px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}

.pill-btn.active {
  background: #E59BAF;
  color: #fff;
  border-color: #E59BAF;
}

/* Color swatches */
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 247, 240, 1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.color-swatch.active {
  box-shadow: 0 0 0 2px #C79A57, 0 0 0 4px rgba(255, 247, 240, 1);
}

/* Buttons / notes */
.btn-primary {
  display: inline-block;
  text-align: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: #E59BAF;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px rgba(229, 155, 175, 0.6);
  border: none;
}

.full-width {
  width: 100%;
  margin-top: 18px;
}

.tiny-note {
  margin-top: 6px;
  font-size: 0.72rem;
  color: #A07C70;
}

.tiny-note.center {
  text-align: center;
}

/* Shared top nav */
.site-nav {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav-link {
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #E6D5C4;
  background: #FFFFFF;
  font-size: 0.8rem;
  color: #87635A;
  text-decoration: none;
}

.site-nav-link.active {
  background: #F6D7E1;
  border-color: transparent;
  color: #3B2721;
}

/* Portal & Admin shared components */

.section-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #A07C70;
  margin-bottom: 4px;
}

/* Simple order list styling */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-card {
  border-radius: 14px;
  border: 1px solid #E6D5C4;
  background: #FFFDF9;
  padding: 10px 10px 8px;
  text-align: left;
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.order-card-meta {
  font-size: 0.8rem;
  color: #87635A;
}

/* Status pills */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: #F3E3D5;
  color: #3B2721;
}

.status-RECEIVED { background: #FFEFD2; }
.status-NEEDS_INFO { background: #FFE7B8; }
.status-QUOTED { background: #FFE3F0; }
.status-APPROVED { background: #E5F0FF; }
.status-IN_DESIGN { background: #FFE3F7; }
.status-BAKING { background: #FFE0C4; }
.status-DECORATING { background: #FFE3F7; }
.status-READY { background: #DFF5E5; }
.status-COMPLETED { background: #E6DBD0; }
.status-ON_HOLD { background: #FFE0E0; }
.status-CANCELLED { background: #F3C7C7; }

/* Timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.timeline-item {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.86rem;
}

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-top: 4px;
  background: #D8C4B4;
}

.timeline-dot.active {
  background: #C9944E;
}

.timeline-label {
  font-size: 0.86rem;
}

/* Chat */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
  margin-top: 6px;
}

.chat-row {
  display: flex;
}

.chat-row.customer {
  justify-content: flex-start;
}

.chat-row.ceci {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 76%;
  padding: 7px 10px;
  border-radius: 16px;
  font-size: 0.86rem;
}

.chat-bubble.customer {
  background: #FFF1E4;
  border-bottom-left-radius: 4px;
}

.chat-bubble.ceci {
  background: #FADBE8;
  border-bottom-right-radius: 4px;
}

.chat-meta {
  font-size: 0.7rem;
  color: #87635A;
  margin-top: 3px;
}

.chat-composer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #F0DAC6;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  min-height: 46px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid #E6D5C4;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

/* Gallery/testimonials layout */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.gallery-item {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E6D5C4;
  background: #FFF;
}

.gallery-caption {
  padding: 6px 8px 8px;
}

.testimonial-card {
  border-radius: 14px;
  border: 1px solid #E6D5C4;
  background: #FFFDF9;
  padding: 10px 10px 8px;
  margin-top: 10px;
}

.testimonial-quote {
  font-size: 0.9rem;
  margin: 4px 0 6px;
}

.testimonial-author {
  font-size: 0.8rem;
}

/* Fix oversized logo */
.site-header .brand-logo { width: 56px; height: auto; }