/* page-styles.css */
root{
--font-weight: 200;
}
/* General rules for elements within columns */
.column > .column-content-area > .page-element {
  width: 100%;
  box-sizing: border-box;
}

.column > .column-content-area > .page-element > .element-content {
  width: 100%;
  box-sizing: border-box;
}

/* Updated rule for .column .column-content-area from Canvas */
.column .column-content-area {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  min-width: 1px; /* Prevent collapsing to zero width */
  box-sizing: border-box;
  /* align-items: stretch; was removed to rely on browser default or more specific h-align rules */
  justify-content: inherit; /* Inherit vertical alignment */
}

/* Added specific rules for slideshow element within columns from Canvas */
.column > .column-content-area > .page-element.slideshow-element {
    width: 100%;
    box-sizing: border-box;
}

.column > .column-content-area > .page-element.slideshow-element > .element-content {
    width: 100%;
    box-sizing: border-box;
}


/* --- Existing relevant rules for context --- */

/* Page Container Styles */
.page-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: transparent;
  padding: 0px !important;
  margin: 0px !important;
}

/* Page Elements Container */
.page-elements-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0px !important;
  /* Add bottom padding to allow users to scroll all the way down past the content,
     ensuring the last element is fully visible even when the horizontal menu is fixed at the top.
     This prevents the menu from covering the bottom content. */
  padding-bottom: 100px !important;
}

/* Gallery Container - Add bottom padding for scrolling past horizontal menu */
/* When galleries are used on pages, they need extra space at the bottom to allow
   users to scroll all the way down and view all gallery content, even with the
   horizontal menu fixed at the top. This matches the padding used for regular pages. */
.page-gallery-container,
#neon-gallery-container {
  padding-bottom: 100px !important;
}

/* Page Element Styling */
.page-element {
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;

}

/* Element header styling */
.page-element .element-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: move;
  z-index: 2;
  position: relative;
  background-color: rgba(241, 241, 241, 0.287) !important;
  border-bottom: 1px solid rgba(224, 224, 224, 0.305) !important;
}


.page-element .element-title {
  font-weight: 200;
  color: var(--menu-color, #333);
}

.page-element .element-controls {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--menu-color, #555);
}

/* Drag handle styling */
.page-element .drag-handle {
  cursor: grab;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-element .drag-handle:hover {
  opacity: 1;
}

.page-element .drag-handle:active {
  cursor: grabbing;
}

.page-element .element-content {
  padding: 0px; /* Base rule */
}

/* Text Element Styles */
.page-text-container {
  width: 100%;

}

.page-text {
  line-height: 1.5;
  color: var(--menu-color, #717171) !important;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--menu-font-family, inherit);
}

.page-text p,
.page-text .ql-editor p {
  margin-bottom: 0 !important;
  color: var(--menu-color, #717171);
}

/* List styling - ensure lists inherit text color and font */
.page-text ul,
.page-text ol,
.page-text .ql-editor ul,
.page-text .ql-editor ol {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical, 1em);
  color: var(--menu-color, #717171) !important;
  font-family: var(--menu-font-family, inherit) !important;
  font-weight: 200 !important; /* Match paragraph font-weight */
  font-size: inherit !important;
  padding-left: var(--spacing, 1.5em);
  padding-right: 0;
}

.page-text li,
.page-text .ql-editor li {
  color: var(--menu-color, #717171) !important;
  font-family: var(--menu-font-family, inherit) !important;
  font-weight: 200 !important; /* Match paragraph font-weight */
  font-size: inherit !important;
  margin-bottom: 0.25em;
}

/* Ensure list markers (bullets) match text color and font-weight */
.page-text ul li::marker,
.page-text ol li::marker,
.page-text .ql-editor ul li::marker,
.page-text .ql-editor ol li::marker {
  color: var(--menu-color, #717171) !important;
  font-weight: 200 !important; /* Match text font-weight */
}

/* For nested lists */
.page-text ul ul,
.page-text ol ol,
.page-text ul ol,
.page-text ol ul,
.page-text .ql-editor ul ul,
.page-text .ql-editor ol ol,
.page-text .ql-editor ul ol,
.page-text .ql-editor ol ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.page-text > *:first-child {
  margin-top: 0 !important;
}

.page-text > *:last-child {
  margin-bottom: 0 !important;
}

/* Image Element Styles */
.page-image-container {
  width: 100%;
  text-align: center;
  background-color: transparent;
}

.page-image {
  max-width: 100%;
  height: auto;
}

/* Edit Form Styles */
.element-edit-form {
  padding: 15px;
  background-color: #f9f9f989;
}

.element-edit-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 200;
  color: var(--menu-color, #333);
}

.element-edit-form input[type="text"],
.element-edit-form input[type="url"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #dddddd82;
  border-radius: 0px;
  box-sizing: border-box;
}

.element-edit-form textarea {
  width: 100%;
  min-height: 200px;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #dddddd7e;
  border-radius: 0px;
  resize: vertical;
  box-sizing: border-box;
}

.edit-form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* Add Element Panel Styles */
.add-element-panel {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f5f59e;
  border-radius: 0px;
  border: 1px solid #ddd;
}

.add-element-panel h3 {
  margin-top: 0;
  font-size: 18px;
  color: var(--menu-color, #333);
}

.add-page-element-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
}

.add-page-element-btn svg {
  margin-right: 8px;
  width: 18px;
  height: 18px;
}

/* Editor Mode Styles */
.page-container.editing .page-element {
  position: relative;
  border: 1px dashed #cccccc30;
}

.page-container.editing .page-element:hover {
  border-color: #4682B4;
}

.page-container:not(.editing) .element-header {
  display: none !important;
}

/* --- Styles for Column Container Element --- */
.column-container-element {
  position: relative;
  overflow: hidden;
  color: var(--menu-color, #717171);
}

.column-container-element > .element-content {
  display: grid;
  gap: 15px;
  padding: 0;
  background-color: transparent;
  border: none;
  position: relative;
  z-index: 2;
  color: var(--menu-color, #717171);
}

/* --- Column Styling (Individual Columns) --- */
.column {
  flex: 1;
  min-width: 200px;
  padding: 0;
  border: 1px dashed transparent;
  background-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--menu-color, #717171);
}

.column .column-header {
  display: none;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 10px;
  background-color: #f1f1f100;
  min-height: 36px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}

.editing .column .column-header {
  display: flex;
}

.column .column-header .column-controls {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-left: auto;
}

.column .column-header .btn {
  border: none;
  background: none;
  padding: 4px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  width: 24px;
  height: 24px;
  background-color: rgba(0,0,0,0.05);
}
.column .column-header .btn:hover {
  opacity: 1;
  background-color: rgba(0,0,0,0.1);
}
.column .column-header .btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--edit-button-color, #87878760) !important;
  color: var(--edit-button-color, #7ba03f90) !important;
}

/* --- VIEW MODE Specifics for Columns & Content Area --- */
.page-element:not(.editing) .column {
    border-color: transparent;
    background-color: transparent;
    padding: 0;
    min-height: 0;
}
.page-element:not(.editing) .column:empty {
     display: none;
 }
.page-element:not(.editing) .column .column-content-area {
    padding: 0 !important;
    min-height: auto;
    border: none;
    background-color: transparent;
}

/* Horizontal & Vertical Alignment Classes for the COLUMN ITSELF */
.column.h-align-left > .column-content-area { align-items: flex-start !important; }
.column.h-align-center > .column-content-area { align-items: center !important; }
.column.h-align-right > .column-content-area { align-items: flex-end !important; }

.column.v-align-top > .column-content-area { justify-content: flex-start !important; }
.column.v-align-middle > .column-content-area { justify-content: center !important; }
.column.v-align-bottom > .column-content-area { justify-content: flex-end !important; }


/* Ensure specific nested containers (like page-slideshow-container) also behave */
.column .column-content-area .page-slideshow-container,
.column .column-content-area .page-image-container,
.column .column-content-area .page-text-container {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}


/* Edit Mode Styling for Columns */
.editing .column {
  border-color: #dcdcdc;
  min-height: 80px;
}
.editing .column .column-content-area {
  padding: 10px;
  min-height: 60px;
  border: 1px dashed #a0a0a0;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.02);
}
.editing .column .column-content-area:empty::before {
  content: 'Drop elements here';
  display: block;
  text-align: center;
  color: #aaaaaa46;
  font-size: 14px;
  padding: 30px 10px;
  margin: auto;
  font-style: italic;
  flex-grow: 1;
}


/* Base slideshow container */
.page-slideshow-container {
  position: relative;
  width: 100%;
  background-color: transparent !important;
}

.slideshow-display {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: transparent !important;
  border-radius: 0px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent !important;
}

.slide:first-child {
  opacity: 1;
}

.slideshow-click-area {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  cursor: pointer;
  z-index: 10;
  background: transparent;
}

.slideshow-click-left {
  left: 0;
}

.slideshow-click-right {
  right: 0;
}

.slideshow-sequencer-container{
  background-color: transparent;
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 0px;
}

.slideshow-sequencer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  min-height: 120px;
}

.sequencer-item {
  position: relative;
  aspect-ratio: 1/1;
  background-color: #eee;
  border-radius: 0px;
  overflow: hidden;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.sequencer-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.sequencer-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.remove-slide-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  background-color: rgba(200, 0, 0, 0.75);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sequencer-item:hover .remove-slide-btn {
  opacity: 1;
}
.remove-slide-btn:hover {
  background-color: rgba(255, 0, 0, 0.9);
}

.slideshow-sequencer .sortable-ghost {
  opacity: 0.4;
  background-color: rgba(70, 130, 180, 0.1);
  border: 1px dashed #4682B4;
}

.slideshow-sequencer .sortable-chosen {
  box-shadow: 0 0 0 2px #4682B4, 0 4px 8px rgba(0,0,0,0.2);
  transform: scale(1.03);
}

.slideshow-sequencer .sortable-drag {
  opacity: 0.9;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.slideshow-settings-container input[type="number"],
.slideshow-settings-container input[type="range"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 0px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.slideshow-settings-container .dimension-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}
.slideshow-settings-container .dimension-label {
    flex-basis: 120px;
    flex-shrink: 0;
    font-weight: 200;
}
.slideshow-settings-container .dimension-slider-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.slideshow-settings-container .dimension-value {
    min-width: 45px;
    text-align: right;
    font-size: 0.9em;
    color: #555;
}

.upload-slideshow-image-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: #4682B4;
  color: white;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 200;
}

.upload-slideshow-image-btn:hover {
  background-color: #3a6d96;
}

.upload-slideshow-image-btn svg {
  width: 18px;
  height: 18px;
}

.sequencer-empty-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 20px;
  color: #888;
  font-style: italic;
  background-color: #f0f0f0;
  border-radius: 0px;
}

.slideshow-placeholder {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 0px;
  background-color: #f7f7f7 !important;
  color: #777;
}

.show-full-images-container {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.show-full-images-container > label {
    font-weight: 200;
    margin-bottom: 0;
}

.toggle-switch-container {
  display: flex;
  align-items: center;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input:checked + .toggle-slider {
  background-color: #4682B4;
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.toggle-label {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
}

.slideshow-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  margin: 10px 0;
  cursor: pointer;
}

.slideshow-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4682B4;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.slideshow-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4682B4;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
}


/* Image alignment classes */
.page-image-container.image-align-left { text-align: left; }
.page-image-container.image-align-center { text-align: center; }
.page-image-container.image-align-right { text-align: right; }

/* Quill alignment classes */
.page-text .ql-align-center { text-align: center !important; }
.page-text .ql-align-right { text-align: right !important; }
.page-text .ql-align-justify { text-align: justify !important; }
.page-text .ql-align-left { text-align: left !important; }

/* --- NEW STYLES FOR TEMPLATE SELECTION UI --- */
.template-selection-wrapper {
    padding: 30px 20px;
    text-align: center;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 900px;
}
.template-selection-title {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #343a40;
}
.template-selection-description {
    font-size: 1.1em;
    color: #6c757d;
    margin-bottom: 30px;
}
.template-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    justify-content: center;
}
.template-card {
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    padding: 14px !important;
    background-color: #f8f9fa00;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-align: center;
    overflow: hidden;
}
.template-card:hover,
.template-card:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) !important;
    border-color: #007bff;
}
.template-card:focus {
    outline: 2px solid #4682B4;
    outline-offset: 2px;
}
.template-preview {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}
.template-name {
    font-weight: 500;
    margin-bottom: 5px;
    color: #495057;
    font-size: 1.1em;
}
.template-description {
    font-size: 0.9em;
    color: #6c757d;
    line-height: 1.4;
}
.template-loading {
     padding: 50px;
     text-align: center;
     font-size: 1.2em;
     color: #6c757d;
}

/* --- Column Alignment Edit Form Specific Styles --- */
.column-alignment-edit-form .alignment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 120px;
  margin: 10px auto 15px auto;
}

.column-alignment-edit-form .alignment-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.column-alignment-edit-form .alignment-cell:hover {
  background-color: #f0f0f0;
  border-color: #bbb;
}

.column-alignment-edit-form .alignment-cell.active {
  background-color: #e0f2fe;
  border-color: #3b82f6;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.column-alignment-edit-form .alignment-cell svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* --- Styles for Column Container with Slideshow Background --- */
.column-background-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: transparent;
}

.column-background-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
}

.scrollable-text-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.scrollable-text-wrapper::-webkit-scrollbar {
  width: 6px;
}
.scrollable-text-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.scrollable-text-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
  border: 1px solid transparent;
}



.multi-image-dropzone {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 30px 20px;
  text-align: center;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}
.multi-image-dropzone:hover {
  border-color: #4682B4;
  background-color: #e3f2fd;
}
.multi-image-dropzone .upload-icon svg {
    width: 48px; height: 48px; stroke: #999; margin-bottom: 10px;
}
.multi-image-dropzone strong { display: block; margin-bottom: 5px; }

.upload-progress-container {
  margin-top: 15px;
  text-align: left;
}
.progress-text {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}
.progress-bar-container {
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background-color: #4682B4;
  transition: width 0.3s ease;
  border-radius: 5px;
}

.sortable-ghost {
  opacity: 0.4;
  background-color: #cce5ff85 !important;
  border: 1px dashed #007bff !important;
  border-radius: 4px;
}
.sortable-fallback {
  opacity: 0.7 !important;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.sortable-drag-over-target {
   background-color: #d4edda65 !important;
   border-color: #28a745 !important;
}

.editing .column .column-content-area.sortable-drag-over-target {
   background-color: rgba(212, 237, 218, 0.5) !important;
   border: 1px dashed #155724 !important;
}

.custom-color-picker-dialog {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
}
.custom-color-picker-dialog input[type="color"] {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  padding: 0;
  cursor: pointer;
  border-radius: 3px;
}
.custom-color-picker-dialog input[type="text"] {
  width: 70px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
}

@media (max-width: 768px) {
  .page-container {
    padding: 0;
  }

  .page-elements-container {
    padding: 0px;
  }

  .element-edit-form {
    padding: 10px;
    background-color: rgba(214, 214, 214, 0.1);  
  }

  .page-element .element-controls {
    gap: 2px;
      
  }

  .page-element .btn svg {
    width: 14px;
    height: 14px;
  }

  .template-selection-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
  }
  .template-card {
    padding: 10px !important;
  }
  .template-preview {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .alignment-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .column-alignment-edit-form .alignment-grid {
    max-width: 100px;
  }
  .column-alignment-edit-form .alignment-cell {
    width: 30px; height: 30px;
  }
  .column-alignment-edit-form .alignment-cell svg {
    width: 18px; height: 18px;
  }
  .edit-form-buttons {
    flex-direction: column;
    gap: 8px;
  }
  .edit-form-buttons button {
    width: 100%;
  }
}

.element-edit-form {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.quill-embed {
  background-color: transparent !important;
  border: none !important;
}
.page-text p, .page-text .ql-editor p {
    font-weight: 200 !important;
}

/* fix for quill image embed button stretching */
.page-text input[type="image"],
.quill-embed input[type="image"] {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}


/* --- Mobile Column Stacking --- */
/* On screens 768px or less, make columns stack vertically instead of side-by-side. */
@media (max-width: 768px) {
  .column-container-element > .element-content {
    display: flex !important; /* Switch from grid to flex for better mobile stacking */
    flex-direction: column !important; /* Stack columns vertically */
    gap: 20px !important; /* Add consistent spacing between stacked columns */
  }

  /* Ensure each column takes full width when stacked */
  .column-container-element > .element-content > .column {
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 0 !important; /* Remove any existing margins */
  }

  /* Remove any existing grid properties that might interfere */
  .column-container-element > .element-content {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: unset !important;
  }
}


/* --- Mobile Scrolling & Layout Fix for Horizontal Menu --- */
@media (max-width: 768px) {
  /*
    This rule applies ONLY to the horizontal layout on mobile screens.
    It changes the main container from a fixed-height flexbox to a
    normal block element, which allows the page to scroll.
  */
  body.menu-layout-horizontal .container {
    display: block !important;    /* Override display:flex */
    height: auto !important;      /* Allow height to grow with content */
    overflow-y: visible !important; /* Prevent the container from trying to scroll */
  }

  /*
    This ensures the child gallery container also has its height
    reset, preventing a "double scrollbar" or clipped content issue.
  */
  body.menu-layout-horizontal .gallery-container {
    height: auto !important;
    overflow-y: visible !important;
  }
}

/* Password Protection Styles */
.password-toggle {
  background-color: rgba(0,0,0,0.05) !important;
  border: none !important;
  border-radius: 0px !important;
  padding: 4px !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.password-toggle:hover {
  background-color: rgba(0,0,0,0.1) !important;
}

.password-toggle.protected svg {
  stroke: #4682B4 !important;
  color: #4682B4 !important;
}

.password-toggle:not(.protected) svg {
  stroke: #999 !important;
  color: #999 !important;
}

.password-protection-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  color: white !important;
  font-family: var(--menu-font-family, inherit) !important;
}

.password-protection-overlay > div {
  text-align: center !important;
  padding: 20px !important;
  background: rgba(0, 0, 0, 0.9) !important;
  border-radius: 8px !important;
  max-width: 300px !important;
}

.password-protection-overlay button {
  background: #4682B4 !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
}

.password-protection-overlay button:hover {
  background: #5a9bd4 !important;
}

/* Gallery-level password protection overlay */
.gallery-password-protection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  color: white;
  font-family: var(--menu-font-family, inherit);
}

.gallery-password-protection-overlay > div {
  text-align: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.gallery-password-protection-overlay h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 300;
  color: white;
}

.gallery-password-protection-overlay p {
  margin: 10px 0 20px 0;
  font-size: 16px;
  opacity: 0.8;
  color: white;
}

.gallery-password-protection-overlay input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 16px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.gallery-password-protection-overlay input[type="password"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.gallery-password-protection-overlay input[type="password"]:focus {
  outline: none;
  border-color: #4682B4;
  background: rgba(255, 255, 255, 0.15);
}

.gallery-password-protection-overlay button {
  background: #4682B4;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.2s ease;
}

.gallery-password-protection-overlay button:hover {
  background: #5a9bd4;
}

.gallery-password-protection-overlay .error-message {
  color: #ff6b6b;
  margin-top: 10px;
  font-size: 14px;
  display: none;
}

/* Password indicator for gallery items */
.password-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  color: #f39c12;
  opacity: 0.8;
  cursor: default;
}

.password-indicator .icon {
  width: 12px;
  height: 12px;
  stroke: #f39c12;
  fill: none;
}

.password-indicator:hover {
  opacity: 1;
}

/* Ensure the password indicator is properly styled in the sidebar */
.sidebar.editing .gallery-item-content .password-indicator {
  color: #f39c12 !important;
  opacity: 0.8 !important;
}

.sidebar.editing .gallery-item-content .password-indicator:hover {
  opacity: 1 !important;
}

.sidebar.editing .gallery-item-content .password-indicator .icon {
  stroke: #f39c12 !important;
  fill: none !important;
}

/* Password protected placeholder styling */
.password-protected-placeholder {
  box-sizing: border-box;
}

.password-protected-placeholder .unlock-content-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.password-protected-placeholder .unlock-content-btn span {
  font-weight: 500;
}

/* Gallery-level password toggle buttons */
.sidebar.editing .gallery-item-content .password-toggle {
  width: 24px !important;
  height: 24px !important;
  padding: 4px !important;
  border-radius: 0px !important;
  background-color: #888888e5 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  color: white !important;
}

.sidebar.editing .gallery-item-content .password-toggle.protected {
  background-color: #f39c12 !important;
}

.sidebar.editing .gallery-item-content .password-toggle:hover {
  background-color: #707070e5 !important;
}

.sidebar.editing .gallery-item-content .password-toggle.protected:hover {
  background-color: #e67e22 !important;
}

.sidebar.editing .gallery-item-content .password-toggle svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  fill: none !important;
  stroke: white !important;
  color: white !important;
}