/* =====================================================
   BOOK.CSS — Round Rock Mobile Detailing Booking Page
   Premium multi-step form styles
====================================================== */

/* ===== PAGE BASE ===== */
.book-page { background: #f0f3f8; }
.book-main  { min-height: 100vh; }

/* ===== BACK BUTTON ===== */
.btn-ghost-dark {
  background: #fff;
  border: 1.5px solid #dde4ed;
  color: #354062;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 900;
  font-size: .92rem;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-ghost-dark:hover {
  border-color: #31c2ff;
  color: #0793d1;
  transform: translateY(-1px);
}

/* ===== HERO BANNER ===== */
.book-hero {
  background: linear-gradient(135deg, #06090f 0%, #0c1929 60%, #071d35 100%);
  color: #fff;
  padding: 64px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.book-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 0%, rgba(49,194,255,.12) 0%, transparent 65%);
}
.book-eyebrow {
  color: #31c2ff;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  margin-bottom: 12px;
  display: block;
  position: relative;
}
.book-h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  margin-bottom: 16px;
  color: #fff;
  letter-spacing: -.045em;
  line-height: 1.05;
  position: relative;
}
.book-subtitle {
  font-size: clamp(.98rem, 2vw, 1.15rem);
  color: #b8cfdf;
  max-width: 640px;
  margin: 0 auto 20px;
  line-height: 1.6;
  position: relative;
}
.book-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  position: relative;
}
.book-hero-badges span {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #d4e8f5;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: .83rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

/* ===== BOOK CONTAINER ===== */
.book-container { padding: 40px 0 100px; }

/* ===== PROGRESS TRACKER ===== */
.progress-wrap { margin-bottom: 40px; }

.progress-track {
  height: 5px;
  background: #dde4ed;
  border-radius: 999px;
  margin-bottom: 18px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0793d1, #31c2ff);
  border-radius: 999px;
  width: 0%;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(49,194,255,.4);
}

.steps-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.steps-row::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: #dde4ed;
  z-index: 0;
}
.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.step-dot span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #94a3b8;
  border: 2px solid #dde4ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  font-size: .88rem;
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(10,25,45,.06);
}
.step-dot label {
  font-size: .72rem;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
  transition: color .3s ease;
}
.step-dot.active span {
  background: #31c2ff;
  color: #001a2a;
  border-color: #31c2ff;
  box-shadow: 0 4px 16px rgba(49,194,255,.4);
  transform: scale(1.08);
}
.step-dot.active label { color: #0793d1; }
.step-dot.done span {
  background: #0793d1;
  color: #fff;
  border-color: #0793d1;
  box-shadow: 0 4px 12px rgba(7,147,209,.25);
}
.step-dot.done label { color: #0793d1; }

/* ===== BOOK STEPS ===== */
.book-step { display: none; animation: bsSlideUp .38s cubic-bezier(.2,.8,.4,1) both; }
.book-step.active { display: block; }
@keyframes bsSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step header */
.step-header { margin-bottom: 28px; }
.step-badge {
  display: inline-flex;
  background: #e8f3ff;
  color: #0793d1;
  border: 1px solid #c3e4ff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.step-header h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.8rem);
  letter-spacing: -.045em;
  color: #07090d;
  margin-bottom: 8px;
  line-height: 1.08;
}
.step-intro {
  color: #6b7e96;
  font-size: .97rem;
  line-height: 1.6;
  max-width: 720px;
}
.step-intro a { color: #0793d1; font-weight: 800; }

/* ===== SERVICE CARDS ===== */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.svc-card { cursor: pointer; display: block; }
.svc-card input { position: absolute; opacity: 0; pointer-events: none; }

.svc-inner {
  border: 2px solid #dde4ed;
  border-radius: 22px;
  padding: 22px 20px;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(10,25,45,.04);
}
.svc-card:hover .svc-inner {
  border-color: #a0d4ef;
  box-shadow: 0 10px 32px rgba(49,194,255,.12);
  transform: translateY(-2px);
}
.svc-card input:checked + .svc-inner {
  border-color: #31c2ff;
  background: linear-gradient(145deg, #f0fbff, #eaf6ff);
  box-shadow: 0 12px 36px rgba(49,194,255,.2);
  transform: translateY(-3px);
}

.svc-badge-row { min-height: 24px; }
.svc-tag {
  display: inline-flex;
  background: #e8f3ff;
  color: #0769a0;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .04em;
  border: 1px solid #c3e4ff;
}
.popular-tag {
  background: #fff3e0;
  color: #b45309;
  border-color: #fed7aa;
}
.premium-tag {
  background: #f3e8ff;
  color: #7c3aed;
  border-color: #e9d5ff;
}
.quote-tag {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

.svc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.svc-name { font-size: 1.18rem; letter-spacing: -.03em; color: #07090d; }
.svc-price { color: #0793d1; font-weight: 950; font-size: .92rem; white-space: nowrap; flex-shrink: 0; }

.svc-desc { color: #5a6e85; font-size: .88rem; line-height: 1.55; flex-grow: 1; }

.svc-includes {
  padding: 0 0 0 16px;
  color: #3a4f66;
  font-size: .85rem;
  display: grid;
  gap: 5px;
  list-style: disc;
}

.svc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
  margin-top: auto;
}
.svc-time { font-size: .82rem; color: #6b7e96; font-weight: 700; }

/* ===== FIELD GROUP ===== */
.field-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.fld { display: grid; gap: 7px; }
.fld-full { grid-column: 1 / -1; }
.fld-half { grid-column: span 1; }
.fld-label {
  font-size: .86rem;
  font-weight: 850;
  color: #243044;
  letter-spacing: .01em;
}
.req { color: #e53e3e; }
.optional { color: #94a3b8; font-weight: 600; font-size: .82em; }

.fld input,
.fld select,
.fld textarea {
  border: 2px solid #dde4ed;
  border-radius: 14px;
  padding: 13px 15px;
  font: inherit;
  font-size: .95rem;
  background: #fff;
  color: #07090d;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-shadow: 0 2px 6px rgba(10,25,45,.04);
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: #31c2ff;
  box-shadow: 0 0 0 3px rgba(49,194,255,.18);
}
.fld textarea { resize: vertical; min-height: 90px; }

/* ===== CHIP SELECTORS ===== */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 2px solid #dde4ed;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  color: #3a4f66;
  transition: all .2s ease;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover span { border-color: #a0d4ef; color: #0793d1; background: #f0fbff; }
.chip input:checked + span {
  background: #31c2ff;
  border-color: #31c2ff;
  color: #001a2a;
  box-shadow: 0 3px 12px rgba(49,194,255,.3);
  font-weight: 950;
}

/* ===== INFO NOTES ===== */
.info-note {
  background: #eaf6ff;
  border: 1px solid #bce0f5;
  border-radius: 14px;
  padding: 14px 18px;
  color: #0b4f73;
  font-size: .9rem;
  line-height: 1.6;
  margin: 8px 0 16px;
}
.info-note strong { display: block; margin-bottom: 2px; }

.field-note {
  color: #6b7e96;
  font-size: .86rem;
  margin-top: 4px;
  line-height: 1.5;
}

/* ===== TIME SECTION ===== */
.time-section { margin-bottom: 24px; }
.time-section-label {
  font-size: .95rem;
  font-weight: 900;
  color: #243044;
  margin-bottom: 12px;
  display: block;
}
.time-section-sub {
  font-size: .82rem;
  color: #6b7e96;
  margin: -8px 0 10px;
  font-weight: 600;
}

/* Time window cards */
.time-window-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.time-window-card { cursor: pointer; }
.time-window-card input { position: absolute; opacity: 0; pointer-events: none; }
.tw-inner {
  border: 2px solid #dde4ed;
  border-radius: 18px;
  padding: 20px 16px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all .22s ease;
  box-shadow: 0 2px 8px rgba(10,25,45,.04);
  cursor: pointer;
}
.time-window-card:hover .tw-inner {
  border-color: #a0d4ef;
  box-shadow: 0 8px 24px rgba(49,194,255,.12);
  transform: translateY(-2px);
}
.time-window-card input:checked + .tw-inner {
  border-color: #31c2ff;
  background: linear-gradient(145deg, #f0fbff, #e8f7ff);
  box-shadow: 0 10px 28px rgba(49,194,255,.2);
}
.tw-icon { font-size: 1.6rem; }
.tw-inner strong { font-size: 1rem; color: #07090d; }
.tw-range { font-size: .8rem; color: #6b7e96; font-weight: 700; }

/* Individual time slots grid */
.time-slot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.tslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 12px 10px;
  border: 2px solid #dde4ed;
  border-radius: 14px;
  font-size: .84rem;
  font-weight: 850;
  background: #fff;
  color: #3a4f66;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(10,25,45,.04);
}
.tslot-time { font-size: .86rem; font-weight: 900; }
.tslot-status {
  font-size: .72rem;
  font-weight: 700;
  color: #22c55e;
  letter-spacing: .03em;
}
.tslot:hover:not(.unavailable) {
  border-color: #31c2ff;
  color: #0793d1;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(49,194,255,.15);
}
.tslot.selected {
  background: #31c2ff;
  border-color: #31c2ff;
  color: #001a2a;
  box-shadow: 0 8px 22px rgba(49,194,255,.3);
  transform: translateY(-2px);
}
.tslot.selected .tslot-status { color: #005070; }
.tslot.unavailable {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
  background: #f7f9fc;
}
.tslot.unavailable .tslot-status { color: #94a3b8; }

/* Availability notice */
.avail-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #eaf6ff;
  border: 1px solid #bce0f5;
  border-radius: 16px;
  padding: 18px 20px;
  color: #0b4f73;
  font-size: .9rem;
  line-height: 1.6;
  margin-top: 4px;
}
.avail-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.avail-notice strong { display: block; font-size: .97rem; margin-bottom: 4px; }
.avail-notice p { margin: 0; }

/* ===== ADD-ON CARDS ===== */
.addon-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.addon-card { cursor: pointer; }
.addon-card input { position: absolute; opacity: 0; pointer-events: none; }

.addon-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 2px solid #dde4ed;
  border-radius: 18px;
  padding: 16px 14px 16px 14px;
  background: #fff;
  transition: all .22s ease;
  box-shadow: 0 2px 8px rgba(10,25,45,.04);
  height: 100%;
  position: relative;
}
.addon-card:hover .addon-inner {
  border-color: #a0d4ef;
  box-shadow: 0 8px 24px rgba(49,194,255,.1);
  transform: translateY(-2px);
}
.addon-card input:checked + .addon-inner {
  border-color: #31c2ff;
  background: linear-gradient(145deg, #f2fbff, #eaf7ff);
  box-shadow: 0 10px 28px rgba(49,194,255,.18);
}

.addon-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #f0f6ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addon-card input:checked + .addon-inner .addon-icon {
  background: rgba(49,194,255,.18);
}
.addon-body { flex: 1; }
.addon-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  padding-right: 32px; /* room for check circle */
}
.addon-head strong { font-size: .97rem; color: #07090d; letter-spacing: -.02em; }
.addon-price { color: #0793d1; font-weight: 950; font-size: .86rem; white-space: nowrap; flex-shrink: 0; }
.addon-body p { color: #6b7e96; font-size: .84rem; line-height: 1.5; margin: 0; }

/* Check circle sits top-right but content has padding so it never overlaps the price */
.addon-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #dde4ed;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  color: transparent;
  transition: all .2s ease;
  flex-shrink: 0;
}
.addon-card input:checked + .addon-inner .addon-check {
  background: #31c2ff;
  border-color: #31c2ff;
  color: #001a2a;
}

/* Smart upsell banner */
.smart-upsell {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1.5px solid #fde68a;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: .92rem;
  color: #78350f;
  margin-bottom: 16px;
  line-height: 1.6;
}
.smart-upsell strong { display: block; margin-bottom: 4px; font-size: .97rem; color: #92400e; }

.addon-cta-note {
  background: #f0f4fa;
  border: 1px solid #dde4ed;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: .9rem;
  color: #465064;
  margin-top: 8px;
}
.addon-cta-note a { color: #0793d1; font-weight: 900; }

/* ===== PHOTO UPLOAD ===== */
.photo-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.photo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 22px 16px;
  border: 2px dashed #c8d5e4;
  border-radius: 18px;
  background: #fff;
  transition: all .2s ease;
  text-align: center;
  box-shadow: 0 2px 8px rgba(10,25,45,.03);
}
.photo-slot:hover {
  border-color: #31c2ff;
  background: #f0fbff;
  box-shadow: 0 6px 18px rgba(49,194,255,.1);
}
.photo-slot-icon { font-size: 1.8rem; }
.photo-slot-label { font-weight: 850; color: #243044; font-size: .9rem; }
.photo-slot-sub { font-size: .78rem; color: #6b7e96; font-weight: 600; }
.photo-file-input { width: 100%; font-size: .82rem; color: #6b7e96; margin-top: 6px; }
.photo-slot-wide { grid-column: 1 / -1; }

/* ===== REVIEW CARD ===== */
.review-card {
  background: #fff;
  border: 1.5px solid #dde4ed;
  border-radius: 22px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 28px rgba(10,25,45,.06);
  display: grid;
  gap: 10px;
}
.review-section-label {
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #0793d1;
  margin: 8px 0 2px;
  display: block;
}
.review-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.review-label {
  font-weight: 950;
  color: #354062;
  min-width: 140px;
  font-size: .83rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}
.review-val { color: #07090d; font-size: .95rem; }
.review-divider { border: none; border-top: 1.5px solid #edf2f7; margin: 6px 0; }

/* ===== AGREEMENT ===== */
.agree-section {
  background: #f8fafc;
  border: 1.5px solid #dde4ed;
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.agree-title {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: #07090d;
  margin-bottom: 16px;
}
.agree-checks { display: grid; gap: 14px; }
.agree-check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
}
.agree-check input {
  margin-top: 3px;
  width: 22px;
  height: 22px;
  accent-color: #31c2ff;
  flex-shrink: 0;
  cursor: pointer;
}
.agree-text { font-size: .9rem; color: #354062; line-height: 1.6; }
.agree-text strong { display: block; color: #07090d; font-size: .95rem; margin-bottom: 2px; }

/* ===== STEP NAV ===== */
.step-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.step-next-btn {
  padding: 14px 26px;
  font-size: 1rem;
}
.submit-btn {
  padding: 16px 32px;
  font-size: 1.05rem;
  box-shadow: 0 14px 36px rgba(49,194,255,.32);
}

/* ===== ERRORS ===== */
.step-error {
  color: #dc2626;
  font-size: .88rem;
  font-weight: 800;
  margin-top: 10px;
  display: none;
  padding: 10px 14px;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
}
.step-error.show { display: block; }

/* ===== SUCCESS BOX ===== */
.success-box {
  background: #fff;
  border: 1.5px solid #dde4ed;
  border-radius: 28px;
  padding: 56px 44px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(10,25,45,.1);
  max-width: 700px;
  margin: 0 auto;
}
.success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #0793d1, #31c2ff);
  color: #001a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 1000;
  margin: 0 auto 28px;
  box-shadow: 0 14px 40px rgba(49,194,255,.35);
}
.success-box h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin-bottom: 16px;
  letter-spacing: -.04em;
  color: #07090d;
}
.success-box p { color: #465064; margin-bottom: 10px; line-height: 1.65; }

.success-detail-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 28px;
  background: #f5f7fa;
  border-radius: 16px;
  padding: 20px;
  text-align: left;
}
.success-detail-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 160px;
}
.sd-icon { font-size: 1.4rem; flex-shrink: 0; }
.success-detail-item strong { display: block; font-size: .9rem; color: #07090d; }
.success-detail-item span { display: block; font-size: .82rem; color: #6b7e96; }

.success-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .time-slot-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .addon-cards { grid-template-columns: 1fr; }
  .photo-upload-grid { grid-template-columns: repeat(2, 1fr); }
  .time-slot-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .service-cards { grid-template-columns: 1fr; }
  .time-window-grid { grid-template-columns: 1fr; }
  .field-group { grid-template-columns: 1fr; }
  .fld-half { grid-column: auto; }
  .steps-row { gap: 0; }
  .step-dot label { display: none; }
  .step-dot span { width: 34px; height: 34px; font-size: .82rem; }
  .success-box { padding: 36px 22px; }
  .book-hero { padding: 44px 0 32px; }
}

@media (max-width: 480px) {
  .photo-upload-grid { grid-template-columns: 1fr; }
  .time-slot-grid { grid-template-columns: repeat(2, 1fr); }
  .book-hero-badges span { font-size: .75rem; padding: 6px 12px; }
  .step-next-btn { width: 100%; }
  .book-step { padding: 24px 18px; }
  .step-nav { flex-direction: column; gap: 10px; }
  .step-nav .btn { width: 100%; }
  .step-badge { font-size: .75rem; }
  .chip { font-size: .88rem; }
  .service-cards { gap: 10px; }
  .service-card { padding: 16px; }
  .agree-section { padding: 18px 14px; }
  .success-box { padding: 28px 16px; }
  .success-detail-row { grid-template-columns: 1fr; }
  .success-btns { flex-direction: column; }
  .success-btns .btn { width: 100%; justify-content: center; }
}