/* Let's highlight canvas boundaries */
#gjs {
	border: 3px solid #444;
}

.gjs-block {
	width: auto;
	height: auto;
	min-height: auto;
	margin: 5px;
}
.grapeicon {
	width: 50px;
}

#gjs {
  border: none;
}
/* Theming */

/* Primary color for the background */
.gjs-one-bg {
  background-color: #78366a;
}

/* Secondary color for the text color */
.gjs-two-color {
  color: rgba(255, 255, 255, 0.7);
}

/* Tertiary color for the background */
.gjs-three-bg {
  background-color: #ec5896;
  color: white;
}

/* Quaternary color for the text color */
.gjs-four-color,
.gjs-four-color-h:hover {
  color: #ec5896;
}

.grapefullpage {
  top: 0;
  left: 0;
}

.section {
  width: 100%;
}

.row {
  display: flex;
  width: 100%;
  gap: 5px; /* optional */
}

.column {
  flex: 1 1 0%;
}

.gjs-frame .footer-block {
  position: static !important;
  .section:empty::before {
    content: 'Drop content here';
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 20px;
    display: block;
  }
}
.row.gjs-selected {
  outline: 2px solid #4a90e2;
}
.gjs-block svg {
  width: 32px;
  height: 32px;
}

/* Hide block label text but keep tooltip */
.gjs-block .gjs-block-label {
  display: none;
}

html, body {
  height: 100%;
  margin: 0;
  //overflow: hidden;   /* 🔒 lock page scroll */
}

/* Full-screen editor overlay */
.grapefullpage {
  position: fixed;
  inset: 0;                /* top:0 right:0 bottom:0 left:0 */
  width: 100vw;
  height: 100vh;
  z-index: 300;   /* footer is 100 and video popup is 250 */

  display: flex;
  flex-direction: column;

  //background: #5e2a5f;     /* match editor chrome */
  background: #4e2a5f;     /* match editor chrome */
}


/* ---- GrapesJS internal height + scroll fix ---- */

/* Do NOT clip the canvas wrappers */
.gjs-editor {
  height: 100% !important;
  overflow: visible !important;
}

/* THIS is the one scrollbar you want */
.gjs-cv-canvas {
  height: 100% !important;
  width: 100%;
  top: 0;
  left: 10;
  overflow: auto !important;
}

/* Make all internal wrappers stretch */
.gjs-cv-canvas__frames,
.gjs-frames,
.gjs-frame-wrapper {
  height: 100% !important;
}

/* SECTION – green */
[data-gjs-type="section"].gjs-selected {
  outline: 2px solid #3cb371 !important;
}

/* ROW – blue */
[data-gjs-type="row"].gjs-selected {
  outline: 2px solid #1e90ff !important;
}

/* COLUMN – purple */
[data-gjs-type="column"].gjs-selected {
  outline: 2px solid #8a2be2 !important;
}

/* TEXT – orange */
[data-gjs-type="text"].gjs-selected {
  outline: 2px solid #ff8c00 !important;
}

/* OTHER – brown */
[data-gjs-selected] {
  outline: 2px solid #8b4513;
}

[data-gjs-type="section"]:hover {
  outline: 1px dashed #3cb371;
}

[data-gjs-type="row"]:hover {
  outline: 1px dashed #1e90ff;
}

[data-gjs-type="column"]:hover {
  outline: 1px dashed #8a2be2;
}
[data-gjs-type="section"] .gjs-badge {
  background: #3cb371;
}

[data-gjs-type="row"] .gjs-badge {
  background: #1e90ff;
}

[data-gjs-type="column"] .gjs-badge {
  background: #8a2be2;
}

[data-gjs-type="text"] .gjs-badge {
  background: #ff8c00;
}

[data-gjs-type="dynamic-html"] .gjs-badge {
  background: #8b4513;
}
.gjs-badge {
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
}
.gjs-col-purple.gjs-selected {
  outline-color: #8a2be2 !important;
}

/* Neutral hover outline */
.gjs-hovered {
  outline: 2px dashed rgba(0, 150, 255, 0.7);
  outline-offset: -2px;
}

/* SECTION */
[data-gjs-type="section"].gjs-selected {
  outline: 2px solid #3cb371; /* green */
}

/* ROW */
[data-gjs-type="row"].gjs-selected {
  outline: 2px solid #1e90ff; /* blue */
}

/* COLUMN */
[data-gjs-type="column"].gjs-selected {
  outline: 2px solid #8a2be2; /* purple */
}

/* TEXT */
[data-gjs-type="text"].gjs-selected,
[data-gjs-type="textnode"].gjs-selected {
  outline: 2px solid #ff8c00; /* orange */
}

/* OTHER / FALLBACK */
.gjs-selected {
  outline-offset: -2px;
}

/* ==============================
   PAGE LAYOUT
================================ */

#grapepage,
.grapefullpage {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

/* ==============================
   TOP BAR (NEVER OVER CANVAS)
================================ */

.panel__top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 6px 10px;
  box-sizing: border-box;
  background: #78366a;
  flex: 0 0 auto;
  position: relative;       /* keep in normal flow */
  z-index: 20;
}

/* main toolbar area (left side) */
#gjs-main-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

/* actions always on far right */
.panel__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  gap: 8px;
  white-space: nowrap;
}

/* make Grapes panels behave like NORMAL flex children inside the top bar */
.panel__top .gjs-pn-panel {
  position: static !important;
  float: none !important;
  display: flex !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* buttons row behavior: one line by default */
.panel__top .gjs-pn-buttons {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* ==============================
   MORE MENU
================================ */

#gjs-more-menu {
  position: relative;
  display: none;            /* JS will enable when needed */
  flex: 0 0 auto;
}

#gjs-more-toggle {
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 40px;
  line-height: 1;
  padding: 6px 10px;
}


#gjs-more-content {
  position: absolute;
  right: 0;
  top: 100%;
  background: #78366a;
  padding: 8px;
  display: none;
  z-index: 50;
  min-width: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

#gjs-more-menu.open #gjs-more-content {
  display: block;
}

/* when panels are moved into #gjs-more-content, make them stack nicely */
#gjs-more-content .gjs-pn-panel {
  position: static !important;
  float: none !important;
  display: block !important;
  padding: 6px 0 !important;
}

#gjs-more-content .gjs-pn-buttons {
  display: flex !important;
  flex-wrap: wrap;          /* inside dropdown wrapping is OK */
  gap: 6px;
}

/* ==============================
   EDITOR ROW (CANVAS + RIGHT PANEL)
================================ */

.editor-row {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;            /* CRITICAL so inner scroll works */
}

.editor-canvas {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* right panel stays on the right in normal flow */
.panel__right,
#gjs-panel-right {
  width: 260px;
  flex: 0 0 260px;
  min-height: 0;
  overflow-y: auto;
  position: relative !important;
  z-index: 10;
}

/* IMPORTANT: kill GrapesJS absolute positioning inside right panel too */
.panel__right .gjs-pn-panel,
#gjs-panel-right .gjs-pn-panel {
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
}

.gjs-hidden {
  display: none;
}
.btn-wrap {
  display: flex;
}
.gjs-clm-tags:nth-of-type(2) {
  display: none !important;
}


/* Traits select fields */
.gjs-trt-trait select {
  background-color: #3a2340;
  color: #ffffff;
  border: 1px solid #5b3a61;
}

/* Dropdown options */
.gjs-trt-trait select option {
  background-color: #3a2340;
  color: #ffffff;
}

/* Hovered / selected option (works in most browsers) */
.gjs-trt-trait select option:checked,
.gjs-trt-trait select option:hover {
  background-color: #6d3c78;
  color: #ffffff;
}

.gjs-hover-highlight {
  outline: 3px solid #00e5ff !important;
  outline-offset: 2px;
}

.gjs-comp-picker {
  position: relative;
  background: #2b2b2b;
  border-radius: 4px;
}

.gjs-comp-field {
  padding: 6px 8px;
  cursor: pointer;
  color: #eee;
  border: 1px solid #444;
  border-radius: 4px;
}

.gjs-comp-field:hover {
  background: #3a3a3a;
}

.gjs-comp-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 100;
  margin-top: 4px;
}

.gjs-comp-list.hidden {
  display: none;
}

.gjs-comp-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  color: #eee;
}

.gjs-comp-item:hover {
  background: #3a3a3a;
}

.gjs-comp-item .badge {
  font-size: 10px;
  padding: 9 5 8 5;
  min-width: 50px;
  height: 28px;
  border-radius: 14px;
  background: #53294f;
  color: #ccc;
}

.gjs-hover-highlight {
  outline: 3px solid #00e5ff !important;
  outline-offset: 2px;
}

.gjs-comp-item.selected {
  background: #444;
}

.gjs-comp-item small {
  opacity: 0.7;
  margin-left: 4px;
}

/* Base highlight */
.cta-neon-focus {
  position: relative;
  z-index: 9999;
}

/* INNER SOFT OVERLAY */
.cta-neon-focus::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: rgba(0, 255, 208, 0.35);
  opacity: 1;

  animation:
    neonOverlayPulse 2.5s ease-in-out infinite,
    neonOverlayFade 14s ease-out forwards;
}

/* INNER NEON BORDER */
.cta-neon-focus::after {
  content: '';
  position: absolute;
  inset: 3px;                 /* 👈 inner border */
  border-radius: 4px;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 2px #00ffd0,
    inset 0 0 12px rgba(0, 255, 208, 0.9),
    inset 0 0 24px rgba(0, 255, 208, 0.7);

  animation: neonBorderPulse 1.2s ease-in-out infinite;
  opacity: 1;
}

/* Border fade */
.cta-neon-fadeout::after {
  animation: neonBorderFade 6s ease-out forwards;
}

/* ===== KEYFRAMES ===== */

@keyframes neonBorderPulse {
  0% {
    box-shadow:
      inset 0 0 0 2px #00ffd0,
      inset 0 0 10px rgba(0, 255, 208, 0.6),
      inset 0 0 20px rgba(0, 255, 208, 0.4);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px #00ffd0,
      inset 0 0 18px rgba(0, 255, 208, 1),
      inset 0 0 36px rgba(0, 255, 208, 0.9);
  }
  100% {
    box-shadow:
      inset 0 0 0 2px #00ffd0,
      inset 0 0 10px rgba(0, 255, 208, 0.6),
      inset 0 0 20px rgba(0, 255, 208, 0.4);
  }
}

@keyframes neonBorderFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes neonOverlayPulse {
  0%   { opacity: 0.28; }
  50%  { opacity: 0.45; }
  100% { opacity: 0.28; }
}

@keyframes neonOverlayFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.image404 {
  max-width: 80vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.form-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 3.5em;
}

.gjs-form-field-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  line-height: 1.2;
  color: #ddd;
  transition: background-color 0.15s ease;
}
.gjs-form-field-row:hover {
  background-color: rgba(120, 140, 255, 0.15);
  cursor: grab;
}
.gjs-form-field-row.is-selected {
  background-color: rgba(120, 140, 255, 0.35);
  color: #fff;
  font-weight: 500;
}
.gjs-form-field-row.is-required {
  background-color: rgba(159, 63, 103, 0.6);
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.gjs-form-field-row.is-required::after {
  content: ' (required)';
  font-size: 11px;
  opacity: 0.75;
  margin-left: 6px;
}
.gjs-form-field-row.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.form-fields-container {
  display: grid;
  row-gap: 12px;
}

.form-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: stretch;
  column-gap: 12px;
}

.form-label {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}
.form-label {
  opacity: 0.85;
}
.form-control {
  height: unset;
}
.form-control input,
.form-control textarea,
.form-control select {
  width: 100%;
  box-sizing: border-box;
}

.form-field.is-checkbox {
  grid-template-columns: 140px 1fr;
  align-items: flex-start;
  cursor: default;
}

.form-field.is-checkbox .form-label {
  padding-top: 4px; /* aligns label with checkbox nicely */
}

.form-field.is-checkbox .form-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.form-field.is-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: unset;
}

.form-field.is-checkbox span {
  line-height: 1.35;
}

.field-label {
  flex: 1;
}

.field-required-toggle {
  flex: 0 0 auto;
  width: unset;
  display: inline-block;
}

.required-star {
  color: #ff5a5a;
  margin-left: 4px;
  font-weight: bold;
}
/* Required toggle in Form Fields trait */
.gjs-form-field-row .field-required-toggle {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width: 14px;
  height: 14px;
  margin-left: auto;
  cursor: pointer;
}
.gjs-form-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}


@media (max-width: 600px) {
  .form-field {
    grid-template-columns: 1fr;
  }

  .form-label {
    text-align: left;
  }
}