/* ============================================================
   Custom Walks — Order Pages specific styles
   ============================================================ */

/* ── Order Page Layout ── */
.order-page-bg {
  background-image: linear-gradient(180deg, var(--color-white) 0%, rgba(255, 246, 227, 0.9) 45%, var(--color-neutral-50) 100%);
  min-block-size: 100vh;
  padding-block-start: 80px;
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

body.page-loading {
  cursor: progress;
}

body.page-loading .order-page-bg {
  opacity: 0.08;
  transform: translateY(12px);
  pointer-events: none;
}

/* ── Digital Brand Card (Header Banner) ── */
.custom-walks-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 1.8vw, 1.75rem) 1.5rem;
  display: flex;
  align-items: center;
  background-color: #f8f3eb;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.85) 26%, rgba(252, 245, 232, 0.74) 44%, rgba(240, 226, 203, 0.52) 62%, rgba(214, 180, 132, 0.30) 82%, rgba(178, 142, 84, 0.22) 100%),
    url('../../custom-walks-images/Gradient.svg');
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  min-block-size: clamp(260px, 44vh, 380px);
}

.custom-walks-hero::before {
  content: '';
  position: absolute;
  top: 8%;
  right: -6rem;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(178, 142, 84, 0.18) 0%, rgba(178, 142, 84, 0.02) 48%, transparent 75%);
  filter: blur(68px);
  pointer-events: none;
}

.custom-walks-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(248, 243, 235, 0) 0%, rgba(248, 243, 235, 0.12) 22%, rgba(244, 236, 220, 0.34) 52%, rgba(239, 226, 205, 0.68) 78%, rgba(235, 222, 199, 0.98) 100%);
  pointer-events: none;
  transform: translateY(4px);
}

.custom-walks-hero .hero-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-walks-hero .hero-divider {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: calc(100% + 6rem);
  height: 72px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, rgba(255, 250, 240, 0.4), rgba(255, 245, 230, 0.08) 48%, transparent 75%);
  filter: blur(24px);
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  max-inline-size: 980px;
  margin-inline: auto;
  text-align: center;
}

.hero-title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);
}

.hero-container p {
  max-inline-size: 760px;
  margin: 0 auto 1rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-actions .btn {
  min-inline-size: 180px;
  min-block-size: 56px;
  padding: 0 1.75rem;
  border-radius: 1.25rem;
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  border: 1px solid rgba(7, 27, 53, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.hero-actions .btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 18px 40px rgba(15, 37, 70, 0.12);
  background-color: rgba(255, 255, 255, 0.98);
  color: var(--color-text-primary);
}

.hero-actions .btn:focus-visible {
  outline: 2px solid rgba(7, 27, 53, 0.18);
  outline-offset: 3px;
}

.hero-actions .btn--secondary,
.hero-actions .btn--primary {
  background-color: var(--color-white);
  color: var(--color-text-primary);
  border-color: rgba(7, 27, 53, 0.08);
}

@media (max-width: 64rem) {
  .custom-walks-hero {
    padding: clamp(3rem, 4vw, 5rem) 1.5rem;
  }

  .hero-container p {
    font-size: 1rem;
  }
}

@media (max-width: 48rem) {
  .hero-title {
    font-size: 2.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-container p {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn {
    width: min(100%, 320px);
  }

  .custom-walks-hero::before {
    width: 320px;
    height: 320px;
    right: -5rem;
    top: 6%;
    filter: blur(56px);
  }
}

/* ── Page Tab Switcher ── */
.tab-section {
  text-align: center;
  margin-block-end: var(--space-2xl);
}

.tab-section .section-tag {
  display: inline-flex;
  margin-block-end: 0.5rem;
}

.tab-section__title {
  font-size: 1.75rem;
  margin-block-end: 0.75rem;
  color: #1E2430;
}

.section-tag {
  display: inline-flex;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin-block-end: 0.75rem;
}

.order-section {
  padding-block: 0;
  background-color: transparent;
}

.order-toggle {
  display: flex;
  justify-content: center;
  margin-block-start: 1rem;
}

.order-panels {
  position: relative;
  overflow: hidden;
}

.order-panel {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 360ms cubic-bezier(.22,.9,.38,1), transform 360ms cubic-bezier(.22,.9,.38,1);
  pointer-events: none;
  visibility: hidden;
  z-index: 0;
  will-change: opacity, transform;
}

.order-panel:not(.order-panel--active):not(.order-panel--leaving) {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.order-panel.order-panel--active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.order-panel.order-panel--leaving {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  visibility: visible;
  pointer-events: none;
  z-index: 2;
}

.order-panel.hidden-panel {
  visibility: hidden;
}

.tab-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  height: 58px;
  min-height: 58px;
  background-color: #FFFFFF;
  border: 1px solid #E9E9E8;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15, 37, 70, 0.08);
}


.tab-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.8rem;
  min-width: 170px;
  height: 48px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #6B7280;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: color 300ms cubic-bezier(.22,.9,.38,1), background-color 300ms cubic-bezier(.22,.9,.38,1), transform 300ms cubic-bezier(.22,.9,.38,1);
}

.tab-btn--active {
  color: #FFFFFF;
  z-index: 1;
}

.tab-group--js .tab-btn--active {
  background: transparent;
}

/* Sliding indicator */
.tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 0;
  background: linear-gradient(180deg, #0F1E36 0%, #142B4A 100%);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,37,70,0.12);
  border: 1px solid rgba(255,255,255,0.08);
  transform: translateX(0) translateZ(0);
  transition: transform 300ms cubic-bezier(.22,.9,.38,1), width 300ms cubic-bezier(.22,.9,.38,1), box-shadow 300ms cubic-bezier(.22,.9,.38,1);
  will-change: transform, width;
  pointer-events: none;
}

.tab-btn:hover:not(.tab-btn--active) {
  color: #111827;
  background-color: rgba(15, 37, 70, 0.06);
}

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

.tab-btn:focus-visible {
  outline: 3px solid rgba(184,146,74,0.24);
  outline-offset: 4px;
  border-radius: 999px;
}

/* When tab is active, indicator should sit under it and make text darker */
.tab-btn.tab-active-text {
  color: #FFFFFF !important;
}

.tab-btn--active {
  z-index: 1;
}

.tab-btn:hover:not(.tab-btn--active) {
  color: #111827;
}

/* ── Split Layout for Form + Summary ── */
.order-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  width: 100%;
  margin-block-end: var(--space-5xl);
}

.order-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.order-summary-sidebar {
  width: 100%;
}

.order-summary {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  position: static;
}

.summary-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 14px 32px rgba(15, 37, 70, 0.06);
}

/* ── Numbered Form Cards ── */
.form-section-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 14px 32px rgba(15, 37, 70, 0.06);
}

.form-section-card:not(:last-child) {
  margin-block-end: 1.25rem;
}

#section-select-product {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#section-select-product .form-section-card__header {
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid rgba(15, 37, 70, 0.08);
}

#section-select-product .product-selector,
#section-select-product .size-table-container,
#section-select-product .fields-grid,
#section-select-product .upload-zone,
#section-select-product .order-summary {
  background-color: transparent;
}

#section-select-product .product-selector {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

#section-size-quantity {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#section-size-quantity .form-section-card__header {
  margin-block-end: 1.5rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid rgba(15, 37, 70, 0.08);
}

#section-size-quantity .size-rows-container {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  margin-block-end: 1rem;
}

#section-size-quantity .add-size-container {
  margin-block-start: 1.5rem;
}

#section-size-quantity .form-group__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

#section-size-quantity .form-group__select:focus {
  outline: none;
  border-color: #B8924A;
}

#section-size-quantity .counter-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background-color: #FFFFFF;
  padding: 0 0.75rem;
}

#section-size-quantity .counter-input__val {
  flex: 1;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  padding: 0;
}

#section-size-quantity .counter-input__btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

#section-size-quantity .counter-input__btn--minus {
  background-color: #F3F4F6;
  color: #4B5563;
}

#section-size-quantity .counter-input__btn--plus {
  background-color: #B8924A;
  color: #FFFFFF;
}

#section-size-quantity .add-size-container {
  margin-block-start: 1.5rem;
}

#section-your-details {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#section-your-details .details-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
}

#section-your-details .fields-grid {
  margin-block-end: 1rem;
}

#section-your-details .fields-grid:last-child {
  margin-block-end: 0;
}

#section-your-details .form-group__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

#section-your-details .form-group__select,
#section-your-details .form-group__input,
#section-your-details .form-group__textarea {
  background-color: #FFFFFF;
}

#section-customization {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#section-customization .form-group {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
}

#section-customization .form-group__label {
  display: block;
  margin-block-end: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

#section-customization .form-group__textarea {
  width: 100%;
  min-height: 160px;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 1rem;
}

#section-customization .form-group__help {
  display: block;
  margin-block-start: 0.75rem;
  color: #6B7280;
}

/* Customization details: keep header outside, inner form area white */
#section-customization-details {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.branding-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  margin-block-end: 1rem;
}

#section-customization-details .form-group__label {
  display: block;
  margin-block-end: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

/* Organization info: header outside card, fields inside .org-card */
#section-org-info {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.org-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  margin-block-end: 1rem;
}

#section-org-info .form-group__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

#section-org-info .form-group__input {
  background-color: #FFFFFF;
}

#section-size-quantity .btn--outline-gold {
  text-transform: none;
  color: #B8924A;
  border: 1px solid #B8924A;
  background-color: transparent;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

#section-size-quantity .btn--outline-gold:hover:not(:disabled) {
  background-color: #fdfaf5;
}

/* Bulk order: treat the size quantities fieldset header as non-white and wrap rows in .size-card */
#section-size-quantities {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.size-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  margin-block-end: 1rem;
}

.size-card__label {
  margin-block-end: 1rem;
  color: #6B7280;
  font-size: 0.95rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-block-end: 1.5rem;
}

.product-option__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 1.25rem;
  border: 1px solid #E9E9E9;
  border-radius: 24px;
  background-color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 37, 70, 0.08);
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.product-option:hover .product-option__card {
  transform: translateY(-2px);
}

.product-option__image {
  width: auto;
  max-inline-size: 100%;
  max-block-size: 140px;
  object-fit: contain;
  margin-inline: auto;
  margin-block-end: 1rem;
}

.product-option__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  align-self: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background-color: #F9FAFB;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6B7280;
  min-width: fit-content;
}

.product-option__input:checked + .product-option__card .product-option__status {
  background-color: #B8924A;
  border-color: #B8924A;
  color: #FFFFFF;
}

.form-section-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
  border-block-end: 1px solid var(--color-border-light);
  padding-block-end: var(--space-md);
}

.form-section-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.form-section-card__title {
  font-size: var(--fs-h4);
  margin: 0;
}

/* ── Product Selector Tweaks ── */
.product-option__input:checked + .product-option__card {
  border: 2px solid #B8924A;
  background-color: #FFFFFF;
}

.product-option__badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #E9E9E9;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.product-option__input:checked + .product-option__card .product-option__badge {
  background-color: #B8924A;
  border-color: #B8924A;
}

.product-option__badge::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
}

.product-option__input:checked + .product-option__card .product-option__badge::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.75rem;
  line-height: 1;
}

/* ── Size and Quantity Grid (Individual) ── */
.size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
  margin-block-end: 24px;
}

.size-row .form-group {
  margin-block-end: 0;
}

.size-row .form-group__label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-block-end: 0.5rem;
  color: #111827;
}

.btn-remove-row {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin-top: 34px;
  background-color: var(--color-neutral-100);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  padding: 0;
}

.btn-remove-row:disabled {
  display: none;
}

.btn-remove-row:hover {
  background-color: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

.btn-remove-row svg {
  width: 20px;
  height: 20px;
}

.counter-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #E9E9E9;
  border-radius: 16px;
  background-color: #FFFFFF;
  padding: 0.15rem 0.5rem;
  max-inline-size: 220px;
  min-inline-size: 160px;
}

.counter-input__btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  order: 2;
}

.counter-input__btn--minus {
  background-color: #F3F4F6;
  color: #374151;
}

.counter-input__btn--minus:hover:not(:disabled) {
  background-color: #E5E7EB;
}

.counter-input__btn--plus {
  background-color: #B8924A;
  color: #FFFFFF;
}

.counter-input__btn--plus:hover:not(:disabled) {
  background-color: #9c7739;
}

.counter-input__btn:hover:not(:disabled) {
  color: inherit;
}

.counter-input__val {
  flex-grow: 1;
  border: none;
  background: transparent;
  text-align: left;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  padding: 0.75rem 0.5rem;
  min-inline-size: 48px;
}

.counter-input__val:focus {
  outline: none;
}

.add-size-container {
  margin-block-start: 1rem;
}

.btn--outline-gold {
  text-transform: none;
  color: #B8924A;
  border: 1px solid #B8924A;
  background-color: transparent;
}

.btn--outline-gold:hover:not(:disabled) {
  background-color: rgba(184, 146, 74, 0.08);
}

/* ── Size Counters Table (Bulk) ── */
.size-table-container {
  margin-block-end: var(--space-lg);
}

.size-table-header {
  display: grid;
  grid-template-columns: 1fr 180px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  padding-block-end: var(--space-sm);
  border-block-end: 2px solid var(--color-border-light);
  margin-block-end: var(--space-md);
}

.size-table-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--color-border-light);
}

.size-table-row:last-of-type {
  border-block-end: 1px solid var(--color-border);
}

.size-table-row__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
}

.counter-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-secondary);
  max-inline-size: 180px;
}

.counter-input__btn {
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-size: var(--fs-body-lg);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-input__btn:hover:not(:disabled) {
  background-color: var(--color-neutral-200);
  color: var(--color-black);
}

.counter-input__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.counter-input__btn--plus {
  background-color: var(--color-gold-200);
  color: var(--color-black);
}

.counter-input__btn--plus:hover:not(:disabled) {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.counter-input__val {
  flex-grow: 1;
  border: none;
  background: transparent;
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  width: 100%;
  color: var(--color-text-primary);
}

.size-table-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  background-color: var(--color-gold-100);
  border-radius: var(--radius-md);
  margin-block-start: var(--space-md);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
}

.size-table-total__val {
  font-size: var(--fs-body-lg);
  color: var(--color-accent-hover);
}

/* ── File Upload Zone ── */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  background-color: var(--color-surface-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
}

.upload-zone:hover,
.upload-zone--dragover {
  border-color: var(--color-accent);
  background-color: var(--color-gold-100);
}

.upload-zone__icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
}

.upload-zone__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.upload-zone__text {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  margin: 0;
}

.upload-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload-zone__file-info {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-block-start: var(--space-sm);
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

.upload-zone__file-info--active {
  display: inline-flex;
}

/* When a file is selected, disable pointer-events on the file input overlay
   so it doesn't intercept clicks on the remove button or file info area */
.upload-zone:has(.upload-zone__file-info--active) .upload-zone__input {
  pointer-events: none;
}

.upload-zone__file-remove {
  background: none;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  padding: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Must sit above the absolute-positioned file input overlay (z-index: 2) */
  position: relative;
  z-index: 3;
}

.upload-zone__file-remove svg {
  width: 16px;
  height: 16px;
}

/* Upload zone wrapper card to keep header outside white area */
#section-upload-logo {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.upload-card {
  background-color: #FFFFFF;
  border: 1px solid #E8E8E8;
  border-radius: 24px;
  padding: 1.5rem;
  margin-block-end: 1rem;
}

.upload-card .upload-zone {
  background-color: var(--color-surface-secondary);
  border-radius: 12px;
  padding: var(--space-lg);
}

/* ── Field Grid Utility ── */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .fields-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}