/* =========================================
   Globale Design-Variablen - Gradient (Verlauf)
   ========================================= */
:root {
  --king-accent-gradient: linear-gradient(
    45deg,
    rgba(255, 143, 31, 1) 0%,
    rgba(254, 111, 2, 1) 40%,
    rgba(226, 74, 0, 1) 100%
  );
}


.frm42-wrap{
  font: inherit;
  color: inherit;
  margin: 18px 0;
}

.frm42-topbar{ /* Anfangs Container */
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding: 0px 0px;
  border-radius: 0px;
  border: 0px solid rgba(0,0,0,.10);
}
.frm42-topbar h2{ margin:0 0 2px 0; font-size: 18px; }
.frm42-topbar p{ margin:0; font-size: 13px; color: rgba(0,0,0,.60); }

/* Center Download Button */
.frm42-topbar__right {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#frm42Download {
  width: auto;        /* überschreibt die 300px */
  min-width: 260px;   /* optional */
}

.frm42-btn{ /* Download Button */
  appearance:none;
  border: 1px solid rgba(0,0,0,.12);
  background: #42cb4f;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
  cursor:pointer;
  width: 300px;
}
.frm42-btn--primary{ box-shadow: 0 0px 0px rgba(0,0,0,.12); }

.frm42-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px){ .frm42-grid{ grid-template-columns: 1fr; } }

.frm42-panel{ /* Border gesamter Bereich vom Tool */
  border: 0px solid rgba(0,0,0,.10);
  padding: 0px 0px;
}

.frm42-field{ margin-bottom: 12px; } /* Eingabefelder links */
.frm42-field label{ display:block; font-weight:600; font-size: 12px; margin-bottom: 6px; color: currentcolor; text-transform: uppercase; }
.frm42-field input[type="text"], .frm42-field input[type="file"]{
  width: 100%;
  border: 1px solid #e8ebed;
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}
.frm42-field small{ display:block; margin-top:6px; color: rgba(0,0,0,.60); }
.frm42-two{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .frm42-two{ grid-template-columns: 1fr; } }
.frm42-sep{ border:none; border-top: 1px solid rgba(0,0,0,.10); margin: 14px 0; }

.frm42-notice{
  border-radius: 12px;
  border: 0px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(0, 120, 255, .10);
}

.frm42-preview-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom: 10px; } /* Live Preview Text */
.frm42-badge{
  display:inline-flex;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 0px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
}
.frm42-dim{ font-size: 12px; color: rgba(0,0,0,.60); }

.frm42-canvas-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px 0;
}
#frm42Preview{
  width: 800px;
  max-width: 100%;
  height: auto;
  border-radius: 0px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  touch-action: none;
}

/* ===== Wrapper ===== */
.frm42-design-switcher {
  display: flex;
  flex-wrap: nowrap;          /* 🔥 verhindert Umbruch → erlaubt Scroll */
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  width: 100%;
  max-width: 100%;

  padding: 0px 0px;
  margin: 12px 0 20px;

  box-sizing: border-box;
}


/* Scrollbar verstecken (Mobile clean) */
.frm42-design-switcher::-webkit-scrollbar {
  display: none;
}


/* ===== Thumbnail Card ===== */
.frm42-design-btn {
  flex: 0 0 auto;      /* 🔥 verhindert Layout-Sprengung */
  min-width: 0;        /* 🔥 EXTREM wichtig für Mobile-Flexbox */

  max-width: 60vw;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  box-sizing: border-box;
}


/* ===== Bild ===== */
.frm42-design-btn img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}


/* ===== Label ===== */
.frm42-design-btn span {
  font-size: 12px;
  font-weight: 400;
  color: #abacaf;
  text-align: center;
}


/* ===== Hover (Desktop) ===== */
@media (hover: hover) {
  .frm42-design-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
}


/* ===== Active Design ===== */
.frm42-design-btn.is-active {
  border-color: #1e73be;

}


/* ===== Desktop größer ===== */
@media (min-width: 768px) {
  .frm42-design-btn {
    width: 200px;
  }
}

/* ===== Carousel Navigation ===== */
#carouselNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;

  margin: 20px 0 0;
  width: 100%;

  flex-wrap: nowrap;
}

#carouselNav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#carouselCounter {
  min-width: 60px;
  text-align: center;
  font-weight: 600;
  color: rgba(0,0,0,0.65);
}

/* ===== Scrollbar Mini Thumbnails ===== */
.frm42-design-switcher::-webkit-scrollbar {
  height: 6px;
}

.frm42-design-switcher::-webkit-scrollbar-track {
  background: transparent;
}

.frm42-design-switcher::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}

.frm42-design-switcher::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

.frm42-design-switcher {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.frm42-design-switcher::-webkit-scrollbar-thumb {
  background: transparent;
  transition: background 0.2s ease;
}

.frm42-design-switcher:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
}

/* FORCE carousel buttons in one row */
#carouselNav {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px;
  width: 100%;
}

#carouselNav button {
  width: auto !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
}

#fBorderSize {
  width: 100%;
}