/* CTIPARTY AENDRING - egen tilfoejelse til cdesigner. Fil: views/css/stylesheets/ctp-designer-ext.css */

/* Ikoner paa ballonen */
#cp-sel-Device .cp-gridme-cover .ctp-item {
  visibility: visible !important;
  cursor: move;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#cp-sel-Device .cp-gridme-cover .ctp-item img {
  pointer-events: none;
  -webkit-user-drag: none;
  max-width: none !important;
}
/* Mens et ikon flyttes, skjules kopien bag det */
#cp-sel-Device .ctp-busy .cp-gridme .ctp-item {
  visibility: hidden !important;
}

/* Felt der kan slippes i */
#cp-sel-Device .cp-gridme-cover .sqr.ctp-drop-hover {
  visibility: visible !important;
  outline: 2px dashed #ff5484 !important;
  background: rgba(243, 73, 104, 0.08) !important;
}

/* Galleri: kan holdes/traekkes uden at telefonen viser menu */
#cp-sel-Photos ul li a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#cp-sel-Photos ul li a img {
  -webkit-user-drag: none;
}
#cp-sel-Photos ul li a.ctp-armed {
  outline: 2px solid #ff5484;
}

/* Ikon der traekkes fra galleriet */
.ctp-ghost {
  position: fixed;
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: -32px 0 0 -32px;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.6;
}
.ctp-ghost.ctp-ghost-ok {
  opacity: 0.95;
}

/* Kontrol-lag (ligger uden for designet og kommer ikke med i PNG/PDF) */
#ctp-ctrl {
  display: none;
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  box-sizing: border-box;
}
#ctp-ctrl .ctp-frame {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border: 1px dashed #ff5484;
}
#ctp-ctrl .ctp-h {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ff5484;
  color: #fff;
  pointer-events: auto;
  -ms-touch-action: none;
  touch-action: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  font-family: 'FontAwesome';
  font-size: 13px;
  line-height: 26px;
  text-align: center;
}
#ctp-ctrl .ctp-h:hover { background: #1d1d1d; }
#ctp-ctrl .ctp-rs  { right: -13px; bottom: -13px; cursor: nwse-resize; }
#ctp-ctrl .ctp-rs:before  { content: "\f065"; }
#ctp-ctrl .ctp-rot { left: 50%; top: -36px; margin-left: -13px; cursor: grab; }
#ctp-ctrl .ctp-rot:before { content: "\f01e"; }
#ctp-ctrl .ctp-del { right: -13px; top: -13px; }
#ctp-ctrl .ctp-del:before { content: "\f014"; }

/* Tekst: modulet har selv rotation og slet - her vises kun stoerrelses-haandtaget */
#ctp-ctrl.ctp-is-text .ctp-rot,
#ctp-ctrl.ctp-is-text .ctp-del { display: none; }
#ctp-ctrl.ctp-is-text .ctp-frame { border-color: transparent; }

/* Mobil/tablet: vis tekstens egne rotations- og slet-knapper paa den valgte tekst */
#cp-sel-Device .cp-input-gen.current-txt .delete-txt,
#cp-sel-Device .cp-input-gen.current-txt .ui-rotatable-handle {
  display: block !important;
}
#cp-sel-Device .cp-input-gen.current-txt .ui-rotatable-handle,
#cp-sel-Device .cp-input-gen.current-txt .delete-txt {
  -ms-touch-action: none;
  touch-action: none;
}
#cp-sel-Device .cp-input-gen {
  -ms-touch-action: none;
  touch-action: none;
}

@media (max-width: 979px) {
  #ctp-ctrl .ctp-h { width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
  #ctp-ctrl .ctp-rs  { right: -16px; bottom: -16px; }
  #ctp-ctrl .ctp-del { right: -16px; top: -16px; }
  #ctp-ctrl .ctp-rot { top: -42px; margin-left: -16px; }
}

/* Runde 5: kopien i .cp-gridme maa ikke tage klik/traek fra ikonerne i .cp-gridme-cover */
#cp-sel-Device .cp-gridme .ctp-item {
  pointer-events: none !important;
}
#cp-sel-Device .cp-gridme-cover .ctp-item {
  z-index: 95 !important;
  pointer-events: auto !important;
}

/* Runde 7: modulets "tilfoej billede"-ikon (step2.png) i tomme felter skjules - aldrig synligt paa ballonen */
.cp-gridme .sqr,
.cp-gridme-cover .sqr {
  background-image: none !important;
}

/* Runde 8: en trykfarve pr. side (balloner) */
#ctp-printcolor { padding: 8px 0 10px; }
#ctp-printcolor .ctp-pc-title { display: block; font-size: 13px; font-weight: bold; margin-bottom: 6px; }
#ctp-printcolor .ctp-pc-list { display: flex; flex-wrap: wrap; gap: 6px; }
#ctp-printcolor .ctp-pc-swatch {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #ccc; box-sizing: border-box;
}
#ctp-printcolor .ctp-pc-swatch.ctp-pc-active { outline: 2px solid #ff5484; outline-offset: 2px; }
#cp-sel-Device .ctp-item.ctp-pending { opacity: .4; }

/* Runde 9: logo-tilstand - logoet kan kun flyttes og slettes */
#ctp-ctrl.ctp-is-logo .ctp-rot { display: none !important; }
body.ctp-logo-mode #cp-sel-Text,
body.ctp-logo-mode #cp-sel-layout { opacity: .35; }
body.ctp-logo-mode #cp-sel-Photos ul li:not(.from-desktop) { opacity: .35; }

/* Runde 10: knapper i samme stil som shoppen (ctiparty.dk) */
#wrap-phone-pop #cp-add-cart a.cp-btn-save,
#wrap-phone-pop #cp-add-cart-mobile .cp-btn-save {
  background: linear-gradient(90deg, #58c1cd 0%, #a3e07e 100%) !important;
  color: #fff !important; border: 0 !important; border-radius: 4px;
}
#wrap-phone-pop #cp-add-cart a.cp-btn-save:hover,
#wrap-phone-pop #cp-add-cart-mobile .cp-btn-save:hover {
  background: linear-gradient(90deg, #4fb3bf 0%, #93d46c 100%) !important;
}
#wrap-phone-pop .cp-btn-more-pic {
  background: linear-gradient(90deg, #ff5484 0%, #ff799e 100%) !important;
  color: #fff !important; border: 0 !important; border-radius: 4px;
}
#wrap-phone-pop .cp-btn-more-pic:hover { background: #ff5484 !important; }
#wrap-phone-pop #from-desktop { background: #55bfd0 !important; color: #fff !important; border-radius: 4px; }
#wrap-phone-pop .lst-tags a.active,
#wrap-phone-pop .lst-tags a:hover { border-color: #55bfd0 !important; color: #55bfd0 !important; }
#ctp-printcolor .ctp-pc-swatch.ctp-pc-active { outline-color: #ff5484; }

/* Runde 17: "Design her"-knap paa varesiden - samme bredde og stoerrelse som "Laeg i indkoebskurv" */
.product-add-to-cart .cp-get-canvas,
.cp-get-canvas.btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  min-height: 52px;
}

/* Runde 22: navn paa valgt trykfarve */
#ctp-printcolor .ctp-pc-name { display: block; margin-top: 6px; font-size: 13px; color: #333; min-height: 16px; }