/**
 * Dynamic Product - polished storefront interface
 *
 * All component rules are scoped to #dp so the shop theme remains untouched.
 * Override the custom properties below from a theme stylesheet when branding
 * adjustments are required.
 */

#dp {
  --dp-ui-primary: var(--dp-color-primary, var(--bs-primary, #2563eb));
  --dp-ui-primary-strong: color-mix(in srgb, var(--dp-ui-primary) 78%, #111827);
  --dp-ui-primary-soft: color-mix(in srgb, var(--dp-ui-primary) 10%, #fff);
  --dp-ui-accent: var(--dp-color-accent, var(--dp-ui-primary));
  --dp-ui-surface: #fff;
  --dp-ui-surface-muted: #f8fafc;
  --dp-ui-text: #172033;
  --dp-ui-text-muted: #667085;
  --dp-ui-border: #dfe5ee;
  --dp-ui-danger: #c93636;
  --dp-ui-danger-soft: #fff1f1;
  --dp-ui-success: #18794e;
  --dp-ui-warning: #9a6700;
  --dp-ui-radius-sm: 8px;
  --dp-ui-radius: 12px;
  --dp-ui-radius-lg: 16px;
  --dp-ui-shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --dp-ui-shadow: 0 10px 30px rgb(15 23 42 / 8%);
  --dp-ui-focus: 0 0 0 3px color-mix(in srgb, var(--dp-ui-primary) 22%, transparent);

  box-sizing: border-box;
  width: 100%;
  color: var(--dp-ui-text);
  font-size: 1rem;
  line-height: 1.5;
}

#dp *,
#dp *::before,
#dp *::after {
  box-sizing: inherit;
}

#dp .dp-container,
#dp > form {
  width: 100%;
}

/* Main configuration area */
#dp .dp-fields-container {
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-lg);
  box-shadow: var(--dp-ui-shadow-sm);
}

#dp .dp-field-container,
#dp .dp-field {
  min-width: 0;
}

#dp .dp-field-container {
  padding: 1rem;
  background: var(--dp-ui-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--dp-ui-radius);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#dp .dp-field-container:focus-within {
  background: var(--dp-ui-surface);
  border-color: color-mix(in srgb, var(--dp-ui-primary) 45%, var(--dp-ui-border));
  box-shadow: var(--dp-ui-focus);
}

#dp .dp-field-label-container {
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

#dp .dp-field-label {
  color: var(--dp-ui-text);
  letter-spacing: -0.01em;
}

#dp .dp-field-label .dp\:font-bold {
  font-weight: 650;
}

#dp .dp-helper-text {
  margin-top: 0.45rem;
  color: var(--dp-ui-text-muted);
  line-height: 1.45;
}

#dp .dp-html-content {
  color: var(--dp-ui-text);
}

/* Text controls and dropdowns */
#dp .form-control,
#dp div.svelte-select {
  min-height: 44px;
  color: var(--dp-ui-text);
  background-color: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border) !important;
  border-radius: var(--dp-ui-radius-sm) !important;
  box-shadow: var(--dp-ui-shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#dp textarea.form-control {
  min-height: 112px;
  padding: 0.75rem 0.875rem;
  line-height: 1.5;
  resize: vertical;
}

#dp select.form-control,
#dp input.form-control {
  padding-inline: 0.875rem;
}

#dp .form-control:hover,
#dp div.svelte-select:hover {
  border-color: #b8c2d1 !important;
}

#dp .form-control:focus,
#dp div.svelte-select:focus-within {
  border-color: var(--dp-ui-primary) !important;
  outline: none;
  box-shadow: var(--dp-ui-focus);
}

#dp .form-control:disabled,
#dp .form-control[readonly] {
  color: var(--dp-ui-text-muted);
  background: #eef2f6;
  cursor: not-allowed;
}

/* Buttons */
#dp .btn {
  min-height: 42px;
  padding: 0.62rem 1rem;
  border-radius: var(--dp-ui-radius-sm);
  font-weight: 650;
  line-height: 1.2;
  box-shadow: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease,
    border-color 150ms ease, color 150ms ease;
}

#dp .btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgb(15 23 42 / 12%);
}

#dp .btn:active:not(:disabled) {
  transform: translateY(0);
}

#dp .btn:focus-visible {
  outline: none;
  box-shadow: var(--dp-ui-focus);
}

#dp .btn-primary {
  color: #fff;
  background: var(--dp-ui-primary);
  border-color: var(--dp-ui-primary);
}

#dp .btn-primary:hover:not(:disabled),
#dp .btn-primary:focus:not(:disabled) {
  color: #fff;
  background: var(--dp-ui-primary-strong);
  border-color: var(--dp-ui-primary-strong);
}

#dp .btn-secondary,
#dp .btn-default {
  color: var(--dp-ui-text);
  background: var(--dp-ui-surface);
  border-color: var(--dp-ui-border);
}

#dp .btn-link {
  min-height: auto;
  color: var(--dp-ui-primary);
  background: transparent;
  border-color: transparent;
  box-shadow: none !important;
}

#dp .btn:disabled,
#dp .btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Number spinner and slider */
#dp .dp-spinner {
  width: min(100%, 15rem);
}

#dp .dp-spinner .form-control {
  width: 100%;
  max-width: none;
}

#dp .dp-spinner-btns {
  width: 2.4rem;
  padding: 3px;
  gap: 2px;
}

#dp .dp-spinner-btns > .btn {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
}

#dp input[type="range"] {
  accent-color: var(--dp-ui-primary);
  cursor: pointer;
}

#dp input[type="checkbox"],
#dp input[type="radio"] {
  accent-color: var(--dp-ui-primary);
}

/* Groups */
#dp fieldset.dp-group {
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-lg);
  box-shadow: var(--dp-ui-shadow-sm);
}

#dp fieldset.dp-group > legend {
  max-width: calc(100% - 1rem);
  margin: 0 0.5rem;
  padding: 0;
  color: var(--dp-ui-text);
  background: transparent;
  border: 0;
}

#dp fieldset.dp-group > legend button {
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  color: inherit;
  background: var(--dp-ui-primary-soft);
  border: 0;
  border-radius: var(--dp-ui-radius-sm);
  font-weight: 700;
  text-align: left;
}

#dp .dp-group-collapsible:hover {
  color: var(--dp-ui-primary-strong);
  background: var(--dp-ui-primary-soft);
}

/* Step navigation */
#dp .dp-steps {
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

#dp .dp-steps-labels {
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

#dp .dp-step-btn {
  --extrude: 0;
  flex: 1 0 8rem;
  min-height: 48px;
  margin: 0;
  padding: 0.7rem 1rem;
  clip-path: none;
  color: var(--dp-ui-text-muted);
  background: var(--dp-ui-surface-muted);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-sm);
  font-weight: 650;
  text-align: center;
}

#dp .dp-step-btn:hover:not(:has(input:disabled)) {
  color: var(--dp-ui-primary);
  border-color: color-mix(in srgb, var(--dp-ui-primary) 40%, var(--dp-ui-border));
}

#dp .dp-step-btn.active {
  color: #fff;
  background: var(--dp-ui-primary);
  border-color: var(--dp-ui-primary);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--dp-ui-primary) 22%, transparent);
}

#dp .dp-steps-buttons {
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dp-ui-border);
}

#dp .dp-step-next,
#dp .dp-step-prev {
  min-width: 8rem;
}

/* Radio choices and image choices */
#dp .dp-option-label {
  color: var(--dp-ui-text);
  font-weight: 600;
}

#dp .dp-option-value {
  color: var(--dp-ui-text-muted);
  font-size: 0.875rem;
}

#dp .input-container > label,
#dp label:has(> input[type="radio"]):not(.dp-image-list-item) {
  padding: 0.55rem 0.75rem;
  background: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-sm);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

#dp label:has(> input[type="radio"]:checked):not(.dp-image-list-item) {
  background: var(--dp-ui-primary-soft);
  border-color: var(--dp-ui-primary);
  box-shadow: var(--dp-ui-focus);
}

#dp .dp-image-list-item {
  min-width: 7rem;
  height: 100%;
  padding: 0.6rem;
  overflow: hidden;
  color: var(--dp-ui-text);
  background: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius);
  box-shadow: var(--dp-ui-shadow-sm);
}

#dp .dp-image-list-item:hover {
  border-color: var(--dp-ui-primary);
  box-shadow: var(--dp-ui-shadow);
  transform: translateY(-2px);
}

#dp .dp-image-list-item:has(input:checked) {
  color: var(--dp-ui-text);
  background: var(--dp-ui-primary-soft);
  border: 2px solid var(--dp-ui-primary);
  box-shadow: var(--dp-ui-focus);
}

#dp .dp-image-list-item img {
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Uploads */
#dp .dp-upload-field {
  min-height: 70px;
  padding: 0.75rem;
  color: var(--dp-ui-text-muted);
  background: var(--dp-ui-surface);
  border: 1px dashed #b8c2d1;
  border-radius: var(--dp-ui-radius);
}

#dp .dp-upload-field:hover,
#dp .dp-upload-field:focus-within {
  background: var(--dp-ui-primary-soft);
  border-color: var(--dp-ui-primary);
}

#dp .dp-upload-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

#dp .dp-upload-list > li {
  min-width: 0;
  padding: 0.65rem;
  background: var(--dp-ui-surface);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-sm);
}

#dp .dp-upload-list img {
  object-fit: cover;
  border-radius: 6px;
}

/* Feedback, summaries and price/weight details */
#dp .alert,
#dp [data-dp-alert] {
  margin: 0.75rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--dp-ui-radius-sm);
  line-height: 1.45;
}

#dp .alert-danger,
#dp [data-dp-alert].alert-danger {
  color: var(--dp-ui-danger);
  background: var(--dp-ui-danger-soft);
  border-color: #f2c4c4;
}

#dp .alert-success {
  color: var(--dp-ui-success);
  background: #ecfdf3;
  border-color: #b7e4ca;
}

#dp .alert-warning {
  color: var(--dp-ui-warning);
  background: #fff8e6;
  border-color: #f3d99a;
}

#dp .alert-info {
  color: var(--dp-ui-primary-strong);
  background: var(--dp-ui-primary-soft);
  border-color: color-mix(in srgb, var(--dp-ui-primary) 25%, #fff);
}

#dp .dp-error {
  border-left: 4px solid var(--dp-ui-danger);
}

#dp .dp-field-summary,
#dp .dp-weight {
  padding: 0.75rem 0.875rem;
  background: var(--dp-ui-surface-muted);
  border: 1px solid var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-sm);
}

/* Tooltips and modal */
#dp .dp-tooltip-inner {
  padding: 0.7rem 0.8rem;
  color: var(--dp-ui-text);
  background: var(--dp-ui-surface);
  border-color: var(--dp-ui-border);
  border-radius: var(--dp-ui-radius-sm);
  box-shadow: var(--dp-ui-shadow);
}

#dp .modal__overlay {
  padding: 1rem;
  background: rgb(15 23 42 / 62%);
  backdrop-filter: blur(3px);
}

#dp .modal__container {
  width: min(100%, 34rem);
  max-width: 34rem;
  max-height: min(90vh, 48rem);
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: var(--dp-ui-radius-lg);
  box-shadow: 0 24px 60px rgb(15 23 42 / 24%);
}

#dp .modal__header,
#dp .modal__footer {
  padding: 1rem 1.25rem;
  border-color: var(--dp-ui-border);
}

#dp .modal__title {
  color: var(--dp-ui-text);
  font-weight: 700;
}

#dp .modal__content {
  padding: 1.25rem;
  color: var(--dp-ui-text);
}

/* Loading state */
#dp .dp-loading-spinner {
  color: var(--dp-ui-primary);
}

/* Module elements rendered outside the Svelte configurator. */
#dp-product-button {
  margin-block: 0.75rem;
}

#dp-product-button .dsn-customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 7px 18px rgb(15 23 42 / 12%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

#dp-product-button .dsn-customize:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(15 23 42 / 16%);
}

.dp_cart .dp_input_div {
  margin-top: 0.6rem;
  padding: 0.8rem 0.9rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #dfe5ee;
  border-left: 3px solid var(--bs-primary, #2563eb);
  border-radius: 8px;
  line-height: 1.55;
}

.dp_cart .dp-edit-link .btn {
  margin-top: 0.35rem;
  border-radius: 8px;
}

.dp-shared-customization.card {
  height: 100%;
  margin-bottom: 1rem;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 7%);
}

.dp-shared-customization .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  #dp {
    font-size: 0.95rem;
  }

  #dp .dp-fields-container {
    gap: 0.9rem;
    padding: 0.75rem;
    border-radius: var(--dp-ui-radius);
  }

  #dp .dp-field-container {
    padding: 0.8rem;
  }

  #dp .dp-step-btn {
    flex-basis: 7rem;
    min-height: 44px;
    padding-inline: 0.75rem;
  }

  #dp .dp-steps-buttons {
    flex-wrap: wrap;
  }

  #dp .dp-step-next,
  #dp .dp-step-prev {
    flex: 1 1 calc(50% - 0.4rem);
    min-width: 0;
  }

  #dp .dp-image-list-item {
    min-width: 6rem;
  }

  #dp .modal__footer {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dp *,
  #dp *::before,
  #dp *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Fallbacks for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  #dp {
    --dp-ui-primary-strong: var(--dp-ui-primary);
    --dp-ui-primary-soft: #eef5ff;
    --dp-ui-focus: 0 0 0 3px rgb(37 99 235 / 18%);
  }
}