/* ═══════════════════════════════════════════════════════════════
   designer-ui.css — konstruktörssidan (module/tshirtecommerce/designer)

   Två saker som leverantörens egen CSS inte gör snyggt:
   1. laddningsskärmen innan iframen är klar,
   2. bootbox-dialogen "produkten är tillagd i varukorgen".

   Egen fil i stället för patchar i tshirtecommerce/prestashop/css/*,
   eftersom de filerna skrivs över vid modulupppdatering. Laddas sist i
   designer.tpl, så samma specificitet räcker för att vinna över
   mobile.css / prestashop.css — !important bara där temats egna
   .btn- och .modal-regler annars tar över.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --egdg-ink:    #1a1a1a;
  --egdg-accent: #ffbc38;
  --egdg-muted:  #6b6b6b;
  --egdg-line:   #d9d5cd;
  --egdg-ff-head: 'Barlow', 'Inter', 'Helvetica Neue', sans-serif;
  --egdg-ff-body: 'Roboto', 'Inter', 'Helvetica Neue', sans-serif;
}

/* ─── 1. LADDNINGSSKÄRM ──────────────────────────────────────────
   app17.js lägger in .mask-loading som syskon till iframen i
   .row-designer. mobile.css placerar den med top:40% utan att
   .row-designer är positionerad — den hamnade därför vid sidan av och
   under plagget. Vi gör .row-designer till ankare och täcker hela
   designytan, så spinnern hamnar mitt i den yta kunden tittar på. */
.row-designer {
  position: relative;
}

.row-designer .mask-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #fff;
  z-index: 5;
}

/* I mobilläget ligger konstruktören i #modal-designer (fixed, z-index
   100001) ovanpå sidan — masken måste då ligga ovanpå den modalen,
   annars ser kunden bara en vit ruta utan spinner. */
body.tshirt-mobile .row-designer .mask-loading {
  position: fixed;
  z-index: 100002;
}

/* Den gröna bågen (logo-loading.gif) och butikslogotypen ersätts av en
   ren CSS-ring. Bilderna ligger kvar i markupen — den byggs av
   app17.js och den filen vill vi inte röra. */
.row-designer .mask-loading .mask-icon-loading,
.row-designer .mask-loading .mask-logo-loading {
  display: none;
}

.row-designer .mask-main-loading {
  display: block;
  position: static;
  width: 46px;
  height: 46px;
  margin: 0;
  border: 3px solid rgba(26, 26, 26, .14);
  border-top-color: var(--egdg-ink);
  border-radius: 50%;
  animation: egdg-spin .8s linear infinite;
}

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

/* Respektera systeminställningen för reducerad rörelse: ringen pulsar
   i stället för att snurra. */
@media (prefers-reduced-motion: reduce) {
  .row-designer .mask-main-loading {
    animation: egdg-pulse 1.4s ease-in-out infinite;
  }
  @keyframes egdg-pulse {
    50% { opacity: .35; }
  }
}

.row-designer .mask-loading p {
  margin: 0;
  font-family: var(--egdg-ff-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--egdg-muted);
}

/* ─── 2. DIALOGEN EFTER "LÄGG I VARUKORGEN" ──────────────────────
   bootbox.confirm i app17.js. Standardutseendet är omodifierad
   Bootstrap: grå ruta och två mörkgröna knappar. */

/* Temats .modal-backdrop ligger på z-index 1040, medan custom.css
   lyfter .bootbox till 1000000 — bakgrunden hamnade alltså bakom
   konstruktören och mörkade ingenting. Vi släcker den och låter
   dialogens egen container mörka i stället. Syskonselektorn gör att
   bara bootbox-backdropen påverkas, inte temats övriga modaler. */
.bootbox.modal.in ~ .modal-backdrop {
  display: none;
}

.bootbox.modal.in {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px !important;
  background: rgba(26, 26, 26, .55);
}

.bootbox.modal.in .modal-dialog {
  width: 100%;
  max-width: 480px;
  margin: 0 !important;
  transform: none !important;
}

.bootbox.modal .modal-content {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.bootbox.modal .modal-body {
  position: relative;
  padding: 28px 52px 24px 28px;
  font-family: var(--egdg-ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--egdg-ink);
}

.bootbox.modal .bootbox-body {
  font-size: 15px;
}

/* Krysset: bootbox lägger det inuti .modal-body, inte i en header. */
.bootbox.modal .modal-body .bootbox-close-button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--egdg-muted);
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.bootbox.modal .modal-body .bootbox-close-button:hover,
.bootbox.modal .modal-body .bootbox-close-button:focus {
  background: #f2efe9;
  color: var(--egdg-ink);
}

.bootbox.modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 28px 22px;
  border-top: 1px solid var(--egdg-line);
  background: #fff;
}

/* Bootstraps egna marginalregler mellan footer-knappar krockar med gap. */
.bootbox.modal .modal-footer > :not(:first-child),
.bootbox.modal .modal-footer > :not(:last-child) {
  margin: 0;
}

.bootbox.modal .modal-footer .btn {
  min-height: 44px;
  padding: 11px 22px !important;
  border-radius: 8px;
  border: 2px solid transparent;
  font-family: var(--egdg-ff-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* "Till kassan" är det vi vill att kunden klickar på — temats accent. */
.bootbox.modal .modal-footer .btn.bootbox-accept {
  background: var(--egdg-accent) !important;
  border-color: var(--egdg-accent) !important;
  color: var(--egdg-ink) !important;
}

.bootbox.modal .modal-footer .btn.bootbox-accept:hover,
.bootbox.modal .modal-footer .btn.bootbox-accept:focus {
  background: #f0ad24 !important;
  border-color: #f0ad24 !important;
}

/* "Fortsätt handla" är alternativet, inte huvudvägen. */
.bootbox.modal .modal-footer .btn.bootbox-cancel {
  background: #fff !important;
  border-color: var(--egdg-ink) !important;
  color: var(--egdg-ink) !important;
}

.bootbox.modal .modal-footer .btn.bootbox-cancel:hover,
.bootbox.modal .modal-footer .btn.bootbox-cancel:focus {
  background: #f2efe9 !important;
}

.bootbox.modal .modal-footer .btn:focus-visible {
  outline: 2px solid var(--egdg-ink);
  outline-offset: 2px;
}

/* På smal skärm staplas knapparna och blir fullbreda — lättare att
   träffa än två halvbreda knappar. */
@media (max-width: 480px) {
  .bootbox.modal .modal-body {
    padding: 24px 46px 20px 20px;
  }
  .bootbox.modal .modal-footer {
    flex-direction: column-reverse;
    padding: 14px 20px 18px;
  }
  .bootbox.modal .modal-footer .btn {
    width: 100%;
  }
}