/* 3D configurator — entry points on the product page (rendered by the theme) and the design in cart / order */

/* animated 3D bag next to the specifications: opens the configurator */
.eko-3d {
  position: relative;
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.eko-3d img { display: block; }
.eko-3d__label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 0;
  background: #09973f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: background 0.15s;
}
.eko-3d:hover .eko-3d__label,
.eko-3d:focus-visible .eko-3d__label { background: #10572b; }
.eko-3d:focus-visible { outline: 2px solid #09973f; outline-offset: 2px; }

/* call to action in the print options */
.eko-3d-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border: 2px solid #09973f;
  border-radius: 0;
  background: linear-gradient(90deg, #edf1e7 0%, #fff 100%);
  color: #10572b;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.eko-3d-cta:hover,
.eko-3d-cta:focus-visible {
  box-shadow: 0 4px 14px rgba(9, 151, 63, 0.25);
  transform: translateY(-1px);
  outline: none;
}
.eko-3d-cta__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: #09973f;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.eko-3d-cta__text { flex: 1; min-width: 0; }
.eko-3d-cta__text strong { display: block; font-size: 16px; }
.eko-3d-cta__text small { display: block; color: #5f6f64; font-size: 13px; }
.eko-3d-cta__arrow { flex: 0 0 auto; font-size: 22px; line-height: 1; }

/* while the bundle loads */
.js-ekoconf-open.is-loading { cursor: progress; }
.eko-3d-cta.is-loading .eko-3d-cta__arrow,
.eko-3d.is-loading .eko-3d__label::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ekoconf-spin 0.8s linear infinite;
}
.eko-3d-cta.is-loading .eko-3d-cta__arrow { font-size: 0; }
@keyframes ekoconf-spin { to { transform: rotate(360deg); } }

/* design of a cart / order line (the template has no inline styles: e-mails / PDFs show it as plain text) */
.ekoconf-cust { display: block !important; max-width: 100%; font-size: 13px; line-height: 1.55; text-align: left; }
.ekoconf-cust__file {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ekoconf-cust__file.is-link {
  color: #09973f;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: zoom-in;
}
.ekoconf-cust__file.is-link:hover,
.ekoconf-cust__file.is-link:focus-visible { color: #10572b; text-decoration-style: solid; outline: none; }

/* logo preview */
html.ekoconf-zoom-open { overflow: hidden; }
.ekoconf-zoom {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 32, 24, 0.75);
  cursor: zoom-out;
}
.ekoconf-zoom[hidden] { display: none; }
.ekoconf-zoom__figure { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 14px; background: #fff; cursor: default; }
.ekoconf-zoom__img { padding: 12px; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.ekoconf-zoom__img img { display: block; max-width: min(640px, 80vw); max-height: 64vh; width: auto; height: auto; min-width: 120px; }
.ekoconf-zoom__caption { color: #324148; font-size: 13px; text-align: center; word-break: break-all; }
.ekoconf-zoom__edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 8px;
  border: 0;
  background: #09973f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ekoconf-zoom__edit[hidden] { display: none; }
.ekoconf-zoom__edit:hover { background: #10572b; }
.ekoconf-zoom__edit .ekoconf-line-btn__icon { background: #fff; color: #09973f; }
.ekoconf-zoom__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0 0 3px;
  border: 0;
  background: #09973f;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

/* cart / checkout line: edit the design / design the bag in 3D */
.ekoconf-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 3px;
  border: 1px solid #09973f;
  border-radius: 0;
  background: #fff;
  color: #10572b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.ekoconf-line-btn:hover { background: #edf1e7; }
.ekoconf-line-btn__icon { padding: 1px 5px; background: #09973f; color: #fff; font-size: 11px; }
.ekoconf-line-btn.is-loading { cursor: progress; opacity: 0.6; }
.ekoconf-cartline .ekoconf-line-btn { margin: 0 0 8px; }
.ekoconf-cartline__design { display: block; }

/* cart page: the design is shown in the line itself -> Hummingbird's "customized" dialog button would repeat it */
.product-line:has(.ekoconf-cartline .ekoconf-cust) .product-customization-modal__content { display: none; }

/* cart page: same order as in the checkout — name, "edit 3D design", variant ("Aufdruck: …"), logo files.
   The module's block is display: contents, so its button and design are ordered with the line's own items. */
.product-line__content-left:has(> .ekoconf-cartline) { display: flex; flex-direction: column; }
.product-line__content-left:has(> .ekoconf-cartline) > * { order: 10; }
.product-line__content-left:has(> .ekoconf-cartline) > .product-line__title { order: 0; }
.product-line__content-left > .ekoconf-cartline { display: contents; }
.ekoconf-cartline > .ekoconf-line-btn { order: 1; align-self: flex-start; margin: 4px 0 6px; }
.product-line__content-left:has(> .ekoconf-cartline) > .product-line__item--info { order: 2; }
.ekoconf-cartline > .ekoconf-cartline__design { order: 3; }

/* labels of the variant / logo rows */
.ekoconf-cust__k,
.product-line__item-label { font-weight: 700; }
.ekoconf-cust__k { color: #3f4d45; }
/* cart page: logo rows in the line's font size, like "Aufdruck: …" */
.ekoconf-cartline .ekoconf-cust { font-size: inherit !important; line-height: inherit !important; }