/* AICO Return Portal — CSS */
/* Uses CSS Custom Properties for theming */

:root {
  --portal-text-color: #1a1a2e;
  --portal-text-secondary: #6b7280;
  --portal-bg-color: #ffffff;
  --portal-button-color: #000000;
  --portal-button-text-color: #ffffff;
  --portal-header-text-color: #1a1a2e;
  --portal-header-font-size: 15px;
  --portal-font-style: normal;
  --portal-border-color: #e5e7eb;
  --portal-border-radius: 12px;
  --portal-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Reset */
.portal * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.portal {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-style: var(--portal-font-style);
  color: var(--portal-text-color);
  background-color: var(--portal-bg-color);
  background-image: var(--portal-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 14px;
}

/* Header */
.portal__header {
  background-color: var(--portal-bg-color);
  padding: 28px 24px;
  text-align: center;
  border-bottom: 1px solid var(--portal-border-color);
}

.portal__header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.portal__logo img {
  max-height: 56px;
  margin-bottom: 10px;
}

.portal__title {
  font-size: var(--portal-header-font-size);
  color: var(--portal-header-text-color);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Content */
.portal__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Steps */
.portal__step {
  display: none;
}

.portal__step--active {
  display: block;
}

/* Card */
.portal__card {
  background: #ffffff;
  border: 1px solid var(--portal-border-color);
  border-radius: var(--portal-border-radius);
  padding: 28px;
  box-shadow: var(--portal-card-shadow);
}

.portal__card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--portal-text-color);
  letter-spacing: -0.02em;
}

/* Form */
.portal__form-group {
  margin-bottom: 16px;
}

.portal__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--portal-text-color);
}

.portal__input,
.portal__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--portal-border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--portal-text-color);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.portal__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.portal__input:focus,
.portal__select:focus {
  outline: none;
  border-color: var(--portal-button-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.portal__input::placeholder {
  color: var(--portal-text-secondary);
}

/* Buttons */
.portal__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  min-width: 120px;
  letter-spacing: -0.01em;
}

.portal__button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.portal__button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Button text is painted on the descendants too: the portal renders inside
   the shop's theme (app proxy), and themes commonly paint every element via
   universal color rules (e.g. EVZ: `*:not(a, a *, h1, ...) { color: var(--colorTextBody) }`)
   which hit the <span> inside a button directly and beat inheritance. */
.portal__button--primary,
.portal .portal__button--primary * {
  color: var(--portal-button-text-color);
}

.portal__button--primary {
  background-color: var(--portal-button-color);
  width: 100%;
  margin-top: 20px;
}

.portal__button--secondary,
.portal .portal__button--secondary * {
  color: var(--portal-text-color);
}

.portal__button--secondary {
  background-color: transparent;
  border: 1px solid var(--portal-border-color);
}

.portal__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.portal__button-group {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.portal__button-group .portal__button {
  flex: 1;
  margin-top: 0;
}

/* ========================================
   Product Card — stacked layout
   toggle + image + info on top row
   options below when selected
   ======================================== */

.portal__product {
  border-bottom: 1px solid var(--portal-border-color);
  padding: 20px 0;
  transition: background-color 0.15s;
}

.portal__product:first-child {
  padding-top: 0;
}

.portal__product:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.portal__product--selected {
  background-color: transparent;
}

.portal__product--excluded {
  opacity: 0.45;
}

/* Top row: toggle | image | info */
.portal__product-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Toggle switch */
.portal__toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
}

.portal__toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.portal__toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.portal__toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.portal__toggle input:checked + .portal__toggle-slider {
  background-color: var(--portal-button-color);
}

.portal__toggle input:checked + .portal__toggle-slider::before {
  transform: translateX(20px);
}

.portal__product-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--portal-border-color);
  flex-shrink: 0;
}

.portal__product-info {
  flex: 1;
  min-width: 0;
}

.portal__product-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 1px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal__product-variant {
  font-size: 13px;
  color: var(--portal-text-secondary);
}

.portal__product-price {
  font-size: 13px;
  color: var(--portal-text-secondary);
}

.portal__product-qty-label {
  font-size: 13px;
  color: var(--portal-text-secondary);
}

/* Options — always below the product row */
.portal__product-options {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--portal-border-color);
}

.portal__product--selected .portal__product-options {
  display: block;
}

.portal__product-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.portal__product-options-row .portal__form-group {
  margin-bottom: 0;
  flex: 1 1 180px;
  min-width: 0;
}

.portal__product-options .portal__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--portal-text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portal__product-options .portal__select,
.portal__product-options .portal__input {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
}

.portal__product-options .portal__select {
  padding-right: 30px;
}

/* Custom Dropdown */
.portal__dropdown {
  position: relative;
  width: 100%;
}

.portal__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--portal-border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--portal-text-color);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  line-height: 1.4;
}

.portal__dropdown-trigger:hover {
  border-color: #9ca3af;
}

.portal__dropdown--open .portal__dropdown-trigger {
  border-color: var(--portal-button-color);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.portal__dropdown-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #6b7280;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s;
}

.portal__dropdown--open .portal__dropdown-trigger::after {
  transform: rotate(180deg);
}

.portal__dropdown-trigger--placeholder {
  color: var(--portal-text-secondary);
}

.portal__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--portal-border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.portal__dropdown--open .portal__dropdown-menu {
  display: block;
}

.portal__dropdown-item {
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.1s;
  color: var(--portal-text-color);
}

.portal__dropdown-item:hover {
  background-color: #f3f4f6;
}

.portal__dropdown-item--selected {
  background-color: #f0f0f0;
  font-weight: 600;
}

.portal__product-excluded-reason {
  color: #dc2626;
  font-size: 13px;
  padding: 8px 12px;
  background: #fef2f2;
  border-radius: 6px;
  margin-top: 8px;
  font-weight: 500;
}

/* Exchange variant visual selector */
.portal__variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.portal__variant-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--portal-border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 13px;
  background: #fff;
  width: 140px;
  text-align: center;
}

.portal__variant-option:hover {
  border-color: #9ca3af;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.portal__variant-option--selected {
  border-color: var(--portal-button-color);
  box-shadow: 0 0 0 1px var(--portal-button-color);
}

.portal__variant-option img {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: 8px;
}

.portal__variant-option-info {
  line-height: 1.35;
}

.portal__variant-option-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.portal__variant-option-price {
  color: var(--portal-text-secondary);
  font-size: 12px;
}

/* Quantity */
.portal__quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--portal-border-color);
  border-radius: 6px;
  overflow: hidden;
}

.portal__quantity-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f9fafb;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--portal-text-color);
  transition: background-color 0.15s;
  font-family: inherit;
}

.portal__quantity-btn:hover {
  background: #f3f4f6;
}

.portal__quantity-value {
  font-size: 13px;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
  background: #fff;
}

/* Radio / Checkbox */
.portal__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portal__radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--portal-border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.15s, background-color 0.15s;
}

.portal__radio-label:hover {
  border-color: var(--portal-button-color);
  background-color: #fafafa;
}

/* Dropzone */
.portal__dropzone {
  border: 2px dashed var(--portal-border-color);
  border-radius: var(--portal-border-radius);
  padding: 36px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  color: var(--portal-text-secondary);
  font-size: 14px;
}

.portal__dropzone:hover,
.portal__dropzone--dragover {
  border-color: var(--portal-button-color);
  background-color: #fafafa;
}

.portal__image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.portal__image-thumb {
  position: relative;
  width: 80px;
  height: 80px;
}

.portal__image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.portal__image-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Popup */
.portal__popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

.portal__popup {
  background: #fff;
  padding: 28px;
  border-radius: var(--portal-border-radius);
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  font-size: 14px;
}

.portal__popup--success { border-top: 4px solid #22c55e; }
.portal__popup--error { border-top: 4px solid #ef4444; }
.portal__popup--warning { border-top: 4px solid #f59e0b; }

/* Loading */
.portal__loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  backdrop-filter: blur(2px);
}

.portal__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--portal-border-color);
  border-top-color: var(--portal-button-color);
  border-radius: 50%;
  animation: portal-spin 0.7s linear infinite;
}

@keyframes portal-spin {
  to { transform: rotate(360deg); }
}

/* Contact */
.portal__contact {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--portal-text-secondary);
}

.portal__contact a {
  color: var(--portal-button-color);
  text-decoration: none;
  font-weight: 500;
}

.portal__contact a:hover {
  text-decoration: underline;
}

/* Summary */
.portal__summary-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--portal-border-color);
}

.portal__summary-item:last-child {
  border-bottom: none;
}

.portal__instructions {
  margin-top: 24px;
}

.portal__instructions h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.portal__instructions ol {
  padding-left: 20px;
}

.portal__instructions li {
  padding: 4px 0;
  font-size: 14px;
  color: var(--portal-text-color);
}

/* ========================================
   Shop theme: EVZ (ev-zug.myshopify.com)
   Activated by ShopConfig.customCssClass = "shop-evz"
   (rendered as <body class="portal shop-evz">).

   EVZ CI per brand manual v1.0/2026 (colors p23, typefaces p26):
   Beachwood for headlines — italic uppercase, EVZ Blue #033f85;
   Merriweather for running text; Merriweather Sans for structured
   and form content. The EVZ storefront theme self-hosts all three
   families and declares @font-face inline on every page; the portal
   is served as application/liquid and rendered inside the theme, so
   the family names resolve without loading any font here. Fallback
   stacks only matter if the theme ever stops shipping the fonts.
   The color side of the CI (EVZ Blue buttons, Dark Blue #002e5a
   text) comes from page_customize_settings via the --portal-* vars;
   see scripts/seed-evz-ci.mjs.
   ======================================== */
.portal.shop-evz {
  font-family: "Merriweather Sans", "Segoe UI", sans-serif;
}

.portal.shop-evz .portal__title,
.portal.shop-evz .portal__card-title {
  font-family: "Beachwood Tall", "Beachwood", "Arial Black", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #033f85;
}

.portal.shop-evz .portal__instructions li,
.portal.shop-evz .portal__summary-item,
.portal.shop-evz .portal__contact {
  font-family: "Merriweather", Georgia, serif;
}

/* Responsive */
@media (max-width: 640px) {
  .portal__content {
    padding: 0 12px;
  }
  .portal__card {
    padding: 20px;
    border-radius: 10px;
  }
  .portal__header {
    padding: 20px 16px;
  }
  .portal__variant-option {
    width: 110px;
  }
  .portal__variant-option img {
    width: 90px;
    height: 90px;
  }
  .portal__button-group {
    flex-direction: column;
  }
}