/* SCDev Montage - Main Frontend Styles - Rebuilt from scratch */

/* ROOT CONTAINER */
.scdm-front {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  position: relative;
  color: #1f2937;
  background-color: transparent;
  padding: var(--scdm-padding, 0px);
  border-radius: var(--scdm-radius, 0px);
}

.scdm-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--scdm-montage-bg-image, none);
  background-color: var(--scdm-montage-bg-color, #ffffff);
  background-size: cover;
  background-position: center;
  opacity: var(--scdm-montage-bg-opacity, 1);
  filter: blur(var(--scdm-montage-bg-blur, 0px));
  z-index: 0;
  pointer-events: none;
}

.scdm-front > * {
  position: relative;
  z-index: 1;
}

/* TITLE - appears above montage */
.scdm-front-title {
  width: fit-content;
  max-width: calc(100% - 12px);
  margin: 0 auto 8px;
  color: var(--scdm-caption-color, var(--scdm-title, #1f2937));
  font-size: var(--scdm-caption-size, var(--scdm-title-size, 14px));
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  padding: 6px 12px;
  border-radius: 6px;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  z-index: 3;
}

.scdm-captions-above > .scdm-front-title,
.scdm-captions-below > .scdm-front-title {
  background: var(--scdm-caption-bg, #fff);
  color: var(--scdm-caption-color, var(--scdm-title, #1f2937));
}

.scdm-captions-inside_top_left > .scdm-front-title,
.scdm-captions-inside_top_center > .scdm-front-title,
.scdm-captions-inside_top_right > .scdm-front-title,
.scdm-captions-inside_center > .scdm-front-title,
.scdm-captions-inside_bottom_left > .scdm-front-title,
.scdm-captions-inside_bottom_center > .scdm-front-title,
.scdm-captions-inside_bottom_right > .scdm-front-title {
  position: absolute;
  width: fit-content;
  max-width: calc(100% - 12px);
  margin: 0;
  background: var(--scdm-caption-bg, rgba(15,23,42,.72));
  color: var(--scdm-caption-color, var(--scdm-title, #fff));
}

.scdm-captions-inside_top_left > .scdm-front-title,
.scdm-captions-inside_top_center > .scdm-front-title,
.scdm-captions-inside_top_right > .scdm-front-title {
  top: 0;
  bottom: auto;
}

.scdm-captions-inside_top_left > .scdm-front-title,
.scdm-captions-inside_bottom_left > .scdm-front-title {
  left: 0;
  right: auto;
  transform: none;
  text-align: left;
}

.scdm-captions-inside_top_right > .scdm-front-title,
.scdm-captions-inside_bottom_right > .scdm-front-title {
  right: 0;
  left: auto;
  transform: none;
  text-align: right;
}

.scdm-captions-inside_top_center > .scdm-front-title,
.scdm-captions-inside_center > .scdm-front-title,
.scdm-captions-inside_bottom_center > .scdm-front-title {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.scdm-captions-inside_center > .scdm-front-title {
  top: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
  z-index: 50;
}

.scdm-captions-inside_bottom_left > .scdm-front-title,
.scdm-captions-inside_bottom_center > .scdm-front-title,
.scdm-captions-inside_bottom_right > .scdm-front-title {
  bottom: 0;
  top: auto;
}

/* GRID CONTAINER - holds all montage items */
.scdm-front-grid {
  display: grid;
  grid-template-columns: repeat(var(--scdm-cols, 3), minmax(0, 1fr));
  gap: var(--scdm-gap, 12px);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

/* INDIVIDUAL ITEM - each image/figure container is always transparent */
.scdm-item {
  margin: 0;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
  display: block !important;
  min-height: 0;
  min-width: 0;
}

/* IMAGE INSIDE ITEM - Fills the item container 100% so container and image bounds are identical */
.scdm-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: var(--scdm-fit, cover) !important;
  display: block !important;
  margin: 0 !important;
}

/* ALL SINGLE IMAGE LAYOUTS: Ensure image fills container */
.scdm-layout-plain .scdm-item:only-child,
.scdm-layout-plain .scdm-item-1:only-child,
.scdm-layout-diamond .scdm-item,
.scdm-layout-squircle .scdm-item,
.scdm-layout-star6 .scdm-item,
.scdm-layout-heart .scdm-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

.scdm-layout-plain .scdm-item:only-child img,
.scdm-layout-plain .scdm-item-1:only-child img,
.scdm-layout-diamond .scdm-item img,
.scdm-layout-diamond .scdm-piece img,
.scdm-layout-squircle .scdm-item img,
.scdm-layout-squircle .scdm-piece img,
.scdm-layout-star6 .scdm-item img,
.scdm-layout-heart .scdm-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: var(--scdm-fit, cover) !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* FIGCAPTION - Base styles without positioning constraints */
.scdm-item figcaption {
  z-index: 2;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--scdm-caption-size, var(--scdm-title-size, 14px));
  line-height: 1.35;
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  width: fit-content;
  max-width: calc(100% - 12px);
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.scdm-captions-inside_top_left .scdm-item figcaption,
.scdm-captions-inside_top_center .scdm-item figcaption,
.scdm-captions-inside_top_right .scdm-item figcaption,
.scdm-captions-inside_center .scdm-item figcaption,
.scdm-captions-inside_bottom_left .scdm-item figcaption,
.scdm-captions-inside_bottom_center .scdm-item figcaption,
.scdm-captions-inside_bottom_right .scdm-item figcaption {
  position: absolute;
  background: var(--scdm-caption-bg, rgba(15,23,42,.72));
  color: var(--scdm-caption-color, var(--scdm-title, #fff));
  z-index: 10;
}

/* TOP POSITIONS */
.scdm-captions-inside_top_left .scdm-item figcaption,
.scdm-captions-inside_top_center .scdm-item figcaption,
.scdm-captions-inside_top_right .scdm-item figcaption {
  top: 0;
  bottom: auto;
}

.scdm-captions-inside_top_left .scdm-item figcaption {
  left: 0;
  right: auto;
  transform: none;
  text-align: left;
}

.scdm-captions-inside_top_center .scdm-item figcaption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.scdm-captions-inside_top_right .scdm-item figcaption {
  right: 0;
  left: auto;
  transform: none;
  text-align: right;
}

/* MIDDLE POSITIONS */
.scdm-captions-inside_left .scdm-item figcaption,
.scdm-captions-inside_center .scdm-item figcaption,
.scdm-captions-inside_right .scdm-item figcaption {
  top: 50%;
  bottom: auto;
  z-index: 12;
}

.scdm-captions-inside_left .scdm-item figcaption {
  left: 0;
  right: auto;
  transform: translateY(-50%);
  text-align: left;
}

.scdm-captions-inside_center .scdm-item figcaption {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center;
}

.scdm-captions-inside_right .scdm-item figcaption {
  right: 0;
  left: auto;
  transform: translateY(-50%);
  text-align: right;
}

/* BOTTOM POSITIONS */
.scdm-captions-inside_bottom_left .scdm-item figcaption,
.scdm-captions-inside_bottom_center .scdm-item figcaption,
.scdm-captions-inside_bottom_right .scdm-item figcaption {
  bottom: 0;
  top: auto;
}

.scdm-captions-inside_bottom_left .scdm-item figcaption {
  left: 0;
  right: auto;
  transform: none;
  text-align: left;
}

.scdm-captions-inside_bottom_center .scdm-item figcaption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.scdm-captions-inside_bottom_right .scdm-item figcaption {
  right: 0;
  left: auto;
  transform: none;
  text-align: right;
}

.scdm-captions-above .scdm-item,
.scdm-captions-below .scdm-item {
  display: flex;
  flex-direction: column;
}

.scdm-captions-above .scdm-item figcaption,
.scdm-captions-below .scdm-item figcaption {
  position: static;
  background: var(--scdm-caption-bg, #fff);
  color: var(--scdm-caption-color, var(--scdm-title, #1f2937));
  pointer-events: auto;
  width: fit-content;
  max-width: calc(100% - 12px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.scdm-captions-above .scdm-item figcaption {
  order: -1;
  border-bottom: 1px solid rgba(209,213,219,.9);
}

.scdm-captions-below .scdm-item figcaption {
  order: 2;
  border-top: 1px solid rgba(209,213,219,.9);
}

.scdm-captions-above .scdm-item img,
.scdm-captions-below .scdm-item img {
  flex: 1 1 auto;
  min-height: 120px;
}

/* MULTI-IMAGE LAYOUTS */
.scdm-layout-feature .scdm-front-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.scdm-layout-feature .scdm-item:first-child {
  grid-row: span 3;
}

.scdm-layout-feature .scdm-item:first-child img {
  min-height: 420px;
}

.scdm-layout-masonry .scdm-item:nth-child(5n+1) img {
  aspect-ratio: 3/4;
}

.scdm-layout-masonry .scdm-item:nth-child(3n+2) img {
  aspect-ratio: 1/1;
}

.scdm-layout-magazine .scdm-front-grid {
  grid-template-columns: 1.6fr 1fr 1fr;
}

.scdm-layout-magazine .scdm-item:first-child {
  grid-row: span 3;
}

.scdm-layout-magazine .scdm-item:first-child img {
  min-height: 480px;
}

/* POLAROID LAYOUT - Sit side by side very close, no overlap */
.scdm-layout-polaroid .scdm-front-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--scdm-gap, 14px) !important;
  padding: var(--scdm-padding, 14px) !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
}

.scdm-layout-polaroid .scdm-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 10px 28px !important;
  border-radius: 4px !important;
  background: var(--scdm-image-border-color, #ffffff) !important;
  box-shadow: 0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0.14)) !important;
  transform: rotate(-3deg);
  box-sizing: border-box !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.scdm-layout-polaroid .scdm-item:nth-child(even) {
  transform: rotate(3deg);
}

.scdm-layout-polaroid .scdm-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 2px !important;
  margin: auto !important;
  display: block !important;
}

.scdm-layout-polaroid .scdm-item:nth-child(n+3) {
  display: none;
}

/* OVERLAPPING PHOTOS LAYOUT - Image 1 slightly overlays image 2 */
.scdm-layout-overlap {
  padding: 0 !important;
  background: transparent !important;
}

.scdm-layout-overlap .scdm-front-grid {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.scdm-layout-overlap .scdm-item {
  position: absolute !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

.scdm-layout-overlap .scdm-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
  border-radius: 6px !important;
  padding: var(--scdm-image-border-width, 0px) !important;
  background: var(--scdm-image-border-color, transparent) !important;
  filter: drop-shadow(0 12px 28px var(--scdm-image-shadow-color, rgba(15,23,42,0.22))) !important;
  pointer-events: auto !important;
}

/* HEART SHAPE LAYOUT */
.scdm-layout-heart {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.scdm-layout-heart .scdm-front-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--scdm-padding, 0px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

.scdm-layout-heart .scdm-item {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: auto !important;
  box-sizing: border-box !important;
  background: var(--scdm-image-border-color, transparent) !important;
  padding: var(--scdm-image-border-width, 0px) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0))) !important;
  clip-path: polygon(
    50% 15%,
    46% 11%,
    41% 7%,
    34% 4%,
    26% 3%,
    18% 5%,
    11% 9%,
    5% 16%,
    1% 25%,
    0% 35%,
    2% 46%,
    7% 56%,
    14% 66%,
    24% 76%,
    36% 86%,
    50% 96%,
    64% 86%,
    76% 76%,
    86% 66%,
    93% 56%,
    98% 46%,
    100% 35%,
    99% 25%,
    95% 16%,
    89% 9%,
    82% 5%,
    74% 3%,
    66% 4%,
    59% 7%,
    54% 11%
  ) !important;
}

.scdm-layout-heart .scdm-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: auto !important;
  clip-path: none !important;
}

/* STAR 6 (STAR OF DAVID) SINGLE IMAGE LAYOUT */
.scdm-layout-star6 .scdm-front-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}

.scdm-layout-star6 .scdm-item {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  margin: auto;
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  overflow: hidden;
  /* Perfect 6-point star: exact math, 60deg spacing, outer r=46%, inner r=23%, 1:1 ratio */
  clip-path: polygon(
    50%   4%,
    61.5% 30.1%,
    89.8% 27%,
    73%   50%,
    89.8% 73%,
    61.5% 69.9%,
    50%   96%,
    38.5% 69.9%,
    10.2% 73%,
    27%   50%,
    10.2% 27%,
    38.5% 30.1%
  );
}

.scdm-layout-star6 .scdm-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--scdm-fit, cover);
  display: block;
  clip-path: inherit;
}

/* PLAIN SINGLE IMAGE LAYOUT */
.scdm-layout-plain .scdm-front-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
}

.scdm-layout-plain .scdm-item {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  display: flex;
  align-items: stretch;
}

.scdm-layout-plain .scdm-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--scdm-fit, cover);
  display: block;
  border-radius: 0;
}

/* Split Single Image Layout - 1 image sliced across 3 panels with center raised 2px */
.scdm-layout-split {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-split .scdm-front-grid {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--scdm-padding, 0px) !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-split .scdm-item {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.scdm-layout-split .scdm-piece-container,
.scdm-layout-split .scdm-split-container {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--scdm-gap, 6px) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: 100% !important;
  margin: auto !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-split .scdm-piece {
  flex: 1 1 0% !important;
  width: 33.333% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0))) !important;
}

/* Center panel elevated by 2px */
.scdm-layout-split .scdm-piece:nth-child(2),
.scdm-layout-split .scdm-piece-2 {
  transform: translateY(-2px) !important;
}

/* Each slice windows into 1/3 of the 300% wide image */
.scdm-layout-split .scdm-piece img {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 300% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.scdm-layout-split .scdm-piece:nth-child(1) img,
.scdm-layout-split .scdm-piece-1 img {
  left: 0% !important;
  right: auto !important;
}

.scdm-layout-split .scdm-piece:nth-child(2) img,
.scdm-layout-split .scdm-piece-2 img {
  left: -100% !important;
  right: auto !important;
}

.scdm-layout-split .scdm-piece:nth-child(3) img,
.scdm-layout-split .scdm-piece-3 img {
  left: -200% !important;
  right: auto !important;
}

/* Diamond Shape Layout - single image clipped to diamond, no stretching */
/* Diamond Shape Layout - true equilateral symmetrical 1:1 diamond, no stretching */
.scdm-layout-diamond {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.scdm-layout-diamond .scdm-front-grid {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--scdm-padding, 0px) !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-diamond .scdm-item {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.scdm-layout-diamond .scdm-piece-container {
  position: relative !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin: auto !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0))) !important;
}

.scdm-layout-diamond .scdm-piece {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  clip-path: none !important;
  background: transparent !important;
  border: none !important;
}

.scdm-layout-diamond img,
.scdm-layout-diamond .scdm-piece img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: auto !important;
  clip-path: none !important;
}

/* Squircle Shape Layout - exact same image as plain layout with 50px border-radius on top-left and bottom-right */
.scdm-layout-squircle {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

.scdm-layout-squircle .scdm-front-grid {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--scdm-padding, 0px) !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-squircle .scdm-item {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.scdm-layout-squircle .scdm-piece-container,
.scdm-layout-squircle .scdm-squircle-container,
.scdm-layout-squircle .scdm-piece {
  display: contents !important;
}

.scdm-layout-squircle img,
.scdm-layout-squircle .scdm-item img,
.scdm-layout-squircle .scdm-piece img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  display: block !important;
  margin: auto !important;
  border-radius: 50px 0 50px 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0))) !important;
}

/* CIRCLE AND RECTANGLE COLLAGE LAYOUTS */
.scdm-layout-circle .scdm-front-grid {
  display: block !important;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: var(--scdm-radius, 0px);
}

.scdm-layout-circle .scdm-item {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
  aspect-ratio: 1/1;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
}

.scdm-layout-circle .scdm-item img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1/1;
  object-fit: var(--scdm-fit, cover);
  border-radius: 50%;
}

.scdm-layout-circle .scdm-item:only-child {
  height: calc(100% - var(--scdm-padding, 0px) * 2) !important;
  width: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9;
  aspect-ratio: 1 / 1;
}

@media (max-width: 520px) {
  .scdm-layout-circle .scdm-item:only-child {
    height: auto !important;
    width: calc(100% - var(--scdm-padding, 0px) * 2) !important;
    aspect-ratio: 1 / 1;
  }
}

.scdm-layout-circle .scdm-item:only-child img {
  min-height: 0;
}

.scdm-layout-circle .scdm-item:nth-child(1) { width: 30%; left: 35%; top: 32%; z-index: 9; }
.scdm-layout-circle .scdm-item:nth-child(2) { width: 27%; left: 27%; top: 7%; z-index: 6; }
.scdm-layout-circle .scdm-item:nth-child(3) { width: 26%; left: 52%; top: 10%; z-index: 5; }
.scdm-layout-circle .scdm-item:nth-child(4) { width: 27%; left: 13%; top: 28%; z-index: 7; }
.scdm-layout-circle .scdm-item:nth-child(5) { width: 26%; left: 61%; top: 35%; z-index: 4; }
.scdm-layout-circle .scdm-item:nth-child(6) { width: 23%; left: 27%; top: 60%; z-index: 8; }
.scdm-layout-circle .scdm-item:nth-child(7) { width: 24%; left: 47%; top: 61%; z-index: 7; }
.scdm-layout-circle .scdm-item:nth-child(8) { width: 17%; left: 16%; top: 64%; z-index: 10; }
.scdm-layout-circle .scdm-item:nth-child(9) { width: 17%; left: 70%; top: 62%; z-index: 10; }
.scdm-layout-circle .scdm-item:nth-child(10) { width: 17%; left: 8%; top: 16%; z-index: 4; }
.scdm-layout-circle .scdm-item:nth-child(11) { width: 17%; left: 75%; top: 16%; z-index: 4; }
.scdm-layout-circle .scdm-item:nth-child(12) { width: 16%; left: 42%; top: 0; z-index: 3; }

.scdm-layout-rectangle .scdm-front-grid {
  display: block !important;
  position: relative;
  height: clamp(320px, 62vw, 680px);
  min-height: 320px;
  overflow: visible;
  padding: var(--scdm-padding, 16px);
  background: transparent;
  border-radius: var(--scdm-radius, 0px);
}

.scdm-layout-rectangle .scdm-item {
  position: absolute;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible;
  width: calc(32% - var(--scdm-padding, 16px) * 0.15);
  height: calc(27% - var(--scdm-padding, 16px) * 0.1);
  box-shadow: none;
  filter: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scdm-layout-rectangle .scdm-item img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain !important;
  display: block;
  margin: auto !important;
  border-radius: 4px;
  padding: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 12px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0.18))) !important;
}

/* 3 Images in Rectangle Collage: Straightened, Row 1 drifted to edges & top-aligned, Row 2 Centered */
.scdm-layout-rectangle .scdm-item:nth-child(1):nth-last-child(3) {
  left: 0% !important;
  right: auto !important;
  top: 6px !important;
  bottom: auto !important;
  width: fit-content !important;
  max-width: 48% !important;
  height: fit-content !important;
  max-height: calc(100% - 12px) !important;
  display: inline-flex !important;
  transform: none !important;
  z-index: 1 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(1):nth-last-child(3) img {
  margin: 0 !important;
  max-width: 100% !important;
  max-height: calc(100% - 12px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(2):nth-last-child(2) {
  left: auto !important;
  right: 0% !important;
  top: 6px !important;
  bottom: auto !important;
  width: fit-content !important;
  max-width: 48% !important;
  height: fit-content !important;
  max-height: calc(100% - 12px) !important;
  display: inline-flex !important;
  transform: none !important;
  z-index: 2 !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(2):nth-last-child(2) img {
  margin: 0 !important;
  max-width: 100% !important;
  max-height: calc(100% - 12px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(3):nth-last-child(1) {
  left: 50% !important;
  right: auto !important;
  top: 24px !important;
  bottom: auto !important;
  width: fit-content !important;
  max-width: 58% !important;
  height: fit-content !important;
  max-height: calc(100% - 36px) !important;
  display: inline-flex !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  justify-content: center !important;
  align-items: center !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(3):nth-last-child(1) img {
  margin: 0 !important;
  max-width: 100% !important;
  max-height: calc(100% - 36px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.scdm-layout-rectangle .scdm-item:nth-child(1) { left: calc(4% - var(--scdm-gap, 0px) * 0.1 + var(--scdm-padding, 16px) * 0.1); top: calc(2% - var(--scdm-gap, 0px) * 0.08 + var(--scdm-padding, 16px) * 0.1); transform: rotate(-6deg); z-index: 1; }
.scdm-layout-rectangle .scdm-item:nth-child(2) { left: calc(58% + var(--scdm-gap, 0px) * 0.1 - var(--scdm-padding, 16px) * 0.1); top: calc(0% - var(--scdm-gap, 0px) * 0.08 + var(--scdm-padding, 16px) * 0.1); transform: rotate(6deg); z-index: 2; }
.scdm-layout-rectangle .scdm-item:nth-child(3) { left: 32%; top: 25%; transform: rotate(-1deg); z-index: 8; width: calc(42% - var(--scdm-padding, 16px) * 0.15); height: calc(40% - var(--scdm-padding, 16px) * 0.1); }
.scdm-layout-rectangle .scdm-item:nth-child(4) { left: calc(4% - var(--scdm-gap, 0px) * 0.1 + var(--scdm-padding, 16px) * 0.1); top: calc(38% + var(--scdm-gap, 0px) * 0.08 - var(--scdm-padding, 16px) * 0.1); transform: rotate(4deg); z-index: 3; }
.scdm-layout-rectangle .scdm-item:nth-child(5) { left: calc(62% + var(--scdm-gap, 0px) * 0.1 - var(--scdm-padding, 16px) * 0.1); top: calc(38% + var(--scdm-gap, 0px) * 0.08 - var(--scdm-padding, 16px) * 0.1); transform: rotate(-5deg); z-index: 4; }
.scdm-layout-rectangle .scdm-item:nth-child(6) { left: 36%; top: 64%; transform: rotate(3deg); z-index: 6; width: 29%; height: 24%; }
.scdm-layout-rectangle .scdm-item:nth-child(7) { left: 68%; top: 26%; transform: rotate(5deg); z-index: 5; width: 27%; height: 23%; }
.scdm-layout-rectangle .scdm-item:nth-child(8) { left: 2%; top: 32%; transform: rotate(-3deg); z-index: 5; width: 27%; height: 23%; }
.scdm-layout-rectangle .scdm-item:nth-child(9) { left: 23%; top: 2%; transform: rotate(4deg); z-index: 4; width: 27%; height: 22%; }
.scdm-layout-rectangle .scdm-item:nth-child(10) { left: 47%; top: 0; transform: rotate(-4deg); z-index: 4; width: 27%; height: 22%; }
.scdm-layout-rectangle .scdm-item:nth-child(11) { left: 18%; top: 75%; transform: rotate(-5deg); z-index: 9; width: 25%; height: 20%; }
.scdm-layout-rectangle .scdm-item:nth-child(12) { left: 70%; top: 73%; transform: rotate(5deg); z-index: 9; width: 24%; height: 20%; }

/* IMAGE SHAPE OPTIONS */
.scdm-front.scdm-image-shape-heart .scdm-item img,
.scdm-live-preview .scdm-image-shape-heart .scdm-item img {
  clip-path: polygon(
    50% 15%,
    46% 11%,
    41% 7%,
    34% 4%,
    26% 3%,
    18% 5%,
    11% 9%,
    5% 16%,
    1% 25%,
    0% 35%,
    2% 46%,
    7% 56%,
    14% 66%,
    24% 76%,
    36% 86%,
    50% 96%,
    64% 86%,
    76% 76%,
    86% 66%,
    93% 56%,
    98% 46%,
    100% 35%,
    99% 25%,
    95% 16%,
    89% 9%,
    82% 5%,
    74% 3%,
    66% 4%,
    59% 7%,
    54% 11%
  );
}

.scdm-front.scdm-image-shape-heart .scdm-item,
.scdm-live-preview .scdm-image-shape-heart .scdm-item {
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  clip-path: polygon(
    50% 15%,
    46% 11%,
    41% 7%,
    34% 4%,
    26% 3%,
    18% 5%,
    11% 9%,
    5% 16%,
    1% 25%,
    0% 35%,
    2% 46%,
    7% 56%,
    14% 66%,
    24% 76%,
    36% 86%,
    50% 96%,
    64% 86%,
    76% 76%,
    86% 66%,
    93% 56%,
    98% 46%,
    100% 35%,
    99% 25%,
    95% 16%,
    89% 9%,
    82% 5%,
    74% 3%,
    66% 4%,
    59% 7%,
    54% 11%
  );
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
}

.scdm-front.scdm-image-shape-circle .scdm-front-grid,
.scdm-live-preview .scdm-image-shape-circle .scdm-front-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--scdm-gap, 16px) !important;
}

.scdm-front.scdm-image-shape-circle .scdm-item,
.scdm-live-preview .scdm-image-shape-circle .scdm-item {
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 50%;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
  width: auto !important;
  height: 100% !important;
  max-width: 48% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
}

.scdm-front.scdm-image-shape-circle .scdm-item:first-child,
.scdm-live-preview .scdm-image-shape-circle .scdm-item:first-child {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.scdm-front.scdm-image-shape-circle .scdm-item:nth-child(2),
.scdm-live-preview .scdm-image-shape-circle .scdm-item:nth-child(2) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.scdm-front.scdm-image-shape-circle .scdm-item img,
.scdm-live-preview .scdm-image-shape-circle .scdm-item img {
  clip-path: circle(50% at 50% 50%);
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--scdm-fit, cover) !important;
  aspect-ratio: 1 / 1 !important;
}

.scdm-front.scdm-image-shape-diamond .scdm-item img,
.scdm-live-preview .scdm-image-shape-diamond .scdm-item img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.scdm-front.scdm-image-shape-diamond .scdm-item,
.scdm-live-preview .scdm-image-shape-diamond .scdm-item {
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
}

.scdm-front.scdm-image-shape-slant_left .scdm-item img,
.scdm-live-preview .scdm-image-shape-slant_left .scdm-item img {
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.scdm-front.scdm-image-shape-slant_left .scdm-item,
.scdm-live-preview .scdm-image-shape-slant_left .scdm-item {
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
}

.scdm-front.scdm-image-shape-splash .scdm-item img,
.scdm-live-preview .scdm-image-shape-splash .scdm-item img {
  border-radius: 42% 58% 40% 60% / 55% 42% 58% 45%;
}

.scdm-front.scdm-image-shape-splash .scdm-item,
.scdm-live-preview .scdm-image-shape-splash .scdm-item {
  box-sizing: border-box;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 42% 58% 40% 60% / 55% 42% 58% 45%;
  filter: drop-shadow(0 10px 24px var(--scdm-image-shadow-color, rgba(15,23,42,0)));
}

/* WIRED PAGES LAYOUT */
.scdm-layout-wired .scdm-front-grid,
.scdm-live-preview .scdm-layout-wired .scdm-front-grid {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scdm-wired-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18px, 3.6%, 34px) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  padding: clamp(6px, 1.8%, 16px);
  box-sizing: border-box;
  overflow: visible;
}

.scdm-wired-page,
.scdm-wired-left,
.scdm-wired-right {
  min-width: 0;
  min-height: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 9px 18px rgba(0,0,0,0.22), 0 1px 1px rgba(255,255,255,0.8) inset;
  z-index: 2;
}

.scdm-wired-left {
  border-radius: var(--scdm-radius, 0px) 0 0 var(--scdm-radius, 0px);
}

.scdm-wired-right {
  border-radius: 0 var(--scdm-radius, 0px) var(--scdm-radius, 0px) 0;
}

.scdm-wired-left::after,
.scdm-wired-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  pointer-events: none;
  z-index: 3;
}

.scdm-wired-left::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.28), rgba(255,255,255,0));
}

.scdm-wired-right::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.26), rgba(255,255,255,0));
}

.scdm-wired-left img,
.scdm-wired-right img {
  width: 100%;
  height: 100%;
  object-fit: var(--scdm-fit, cover);
  display: block;
}

.scdm-item.scdm-wired-spine,
.scdm-wired-spine {
  position: absolute !important;
  z-index: 50 !important;
  min-width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: column !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: isolate;
  cursor: grab;
  background: transparent !important;
  border: none !important;
  filter: none !important;
}

.scdm-wired-spine:active {
  cursor: grabbing;
}

.scdm-wired-spine.is-selected {
  outline: 2px dashed #2563eb !important;
  outline-offset: 4px !important;
}

.scdm-wired-rod {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 10px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #64748b 0%, #f8fafc 25%, #cbd5e1 50%, #475569 75%, #e2e8f0 100%) !important;
  box-shadow: inset 2px 0 4px rgba(255,255,255,0.9), inset -2px 0 4px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.3) !important;
  z-index: 1 !important;
  display: block !important;
}

.scdm-wired-ring {
  width: 34px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 30%, #334155 50%, #94a3b8 70%, #ffffff 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.7) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.45), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 -2px 3px rgba(0,0,0,0.35) !important;
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 12px !important;
  display: block !important;
}

.scdm-wired-ring::after {
  content: "" !important;
  position: absolute !important;
  left: 15% !important;
  right: 15% !important;
  top: 50% !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.9) !important;
}

/* SHAPE AND FREEFORM MONTAGE LAYOUTS */
.scdm-front.scdm-layout-shape .scdm-front-grid,
.scdm-live-preview .scdm-layout-shape .scdm-front-grid {
  display: grid;
  grid-template-columns: repeat(var(--scdm-cols, 1), minmax(0, 1fr));
  gap: var(--scdm-gap, 0px);
  align-items: stretch;
}

.scdm-front.scdm-layout-shape .scdm-item,
.scdm-live-preview .scdm-layout-shape .scdm-item {
  min-height: 0;
  height: 100%;
  display: block;
}

.scdm-front.scdm-layout-shape .scdm-item img,
.scdm-live-preview .scdm-layout-shape .scdm-item img {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  object-fit: var(--scdm-fit, cover);
}

.scdm-front.scdm-layout-freeform .scdm-front-grid,
.scdm-live-preview .scdm-layout-freeform .scdm-front-grid {
  display: block !important;
  position: relative;
  min-height: 0;
  height: 100%;
}

.scdm-front.scdm-layout-freeform .scdm-item,
.scdm-live-preview .scdm-layout-freeform .scdm-item {
  position: absolute;
  margin: 0;
  min-height: 0;
  height: auto;
}

.scdm-front.scdm-layout-freeform .scdm-item img,
.scdm-live-preview .scdm-layout-freeform .scdm-item img {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  object-fit: var(--scdm-fit, cover);
}

/* DECORATIONS */
.scdm-front.scdm-decor-none .scdm-decor-layer {
  display: none;
}

.scdm-decor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.scdm-decor-item {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 1;
  transform: translate(-50%, -50%);
  opacity: .92;
  text-shadow: 0 2px 8px rgba(255,255,255,.75);
}

.scdm-decor-item.star,
.scdm-decor-item.pie,
.scdm-decor-item.splash {
  filter: drop-shadow(0 6px 10px rgba(15,23,42,.14));
}

.scdm-decor-item.pie,
.scdm-decor-item.splash {
  font-size: clamp(20px, 2.8vw, 42px);
}

.scdm-decor-item.heart { color: #ef4444; }
.scdm-decor-item.star { color: #f59e0b; }
.scdm-decor-item.pie { color: #8b5cf6; }
.scdm-decor-item.splash { color: #0ea5e9; }

.scdm-decor-item.splash::before { content: '✺'; }
.scdm-decor-item.pie::before { content: '◔'; }
.scdm-decor-item.star::before { content: '★'; }
.scdm-decor-item.heart::before { content: '♥'; }

.scdm-front.scdm-decor-hearts .scdm-decor-item.heart {
  animation: scdmFloat 5s ease-in-out infinite;
}

.scdm-front.scdm-decor-stars .scdm-decor-item.star {
  animation: scdmTwinkle 3.5s ease-in-out infinite;
}

.scdm-front.scdm-decor-pie .scdm-decor-item.pie {
  animation: scdmSlowSpin 12s linear infinite;
}

.scdm-front.scdm-decor-splash .scdm-decor-item.splash {
  animation: scdmSplashPulse 4.5s ease-in-out infinite;
}

@keyframes scdmFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) translateY(0); }
  50% { transform: translate(-50%, -50%) rotate(8deg) translateY(-4px); }
}

@keyframes scdmTwinkle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes scdmSlowSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes scdmSplashPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* LIVE PREVIEW */
.scdm-live-preview-wrap {
  background: var(--scdm-ui-surface, #fff);
  border: 1px solid var(--scdm-ui-border, #e5e7eb);
  border-radius: 10px;
  padding: 6px 12px;
  overflow: hidden;
}

.scdm-live-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}

.scdm-live-preview-head h4 {
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  color: var(--scdm-ui-text, #111827);
}

.scdm-live-preview-head span {
  font-size: 10px;
  line-height: 1.1;
  color: var(--scdm-ui-text-muted, #64748b);
}

.scdm-live-preview {
  background-color: var(--scdm-ui-canvas-stage, #f8fafc);
  background-image: 
    linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), 
    linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), 
    linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border: 1px solid var(--scdm-ui-border, #e5e7eb);
  border-radius: 10px;
  padding: 0;
  overflow: visible;
  position: relative;
  max-width: 100%;
  width: var(--scdm-canvas-w-css, 100%);
  aspect-ratio: var(--scdm-preview-ratio, 4 / 3);
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

body.dark-mode .scdm-live-preview,
body.sheer-dark-mode .scdm-live-preview,
body.night-mode .scdm-live-preview,
[data-theme="dark"] .scdm-live-preview,
html.dark .scdm-live-preview,
body.dark .scdm-live-preview {
  background-color: #121316;
  background-image: 
    linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%), 
    linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%), 
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
}

.scdm-live-preview .scdm-front {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

/* Canvas Corner Resize Handle */
.scdm-canvas-resize-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  background: #2563eb;
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: nwse-resize;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, background 0.15s ease;
  pointer-events: auto;
}

.scdm-canvas-resize-handle:hover,
.scdm-canvas-resize-handle.is-dragging {
  transform: scale(1.3);
  background: #1d4ed8;
}

/* Live preview must NEVER clip the active toolbar or handles */
.scdm-live-preview-wrap,
.scdm-live-preview,
.scdm-live-preview .scdm-front,
.scdm-live-preview .scdm-front-grid,
.scdm-live-preview .scdm-item,
.scdm-live-preview .scdm-piece-container,
.scdm-live-preview .scdm-wired-layout {
  overflow: visible !important;
}

.scdm-live-preview-wrap {
  padding-top: 54px !important;
  padding-bottom: 24px !important;
}

.scdm-live-preview .scdm-front-grid {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
}

/* Interactive Image Selection & Handles */
.scdm-live-preview .scdm-item {
  position: absolute !important;
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
}

.scdm-live-preview .scdm-item:active {
  cursor: grabbing;
}

.scdm-live-preview .scdm-item.is-selected {
  outline: 2px dashed #2563eb !important;
  outline-offset: 2px !important;
  z-index: 100 !important;
}

.scdm-item-handle {
  display: none;
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 2px solid #2563eb;
  border-radius: 50%;
  z-index: 999 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  pointer-events: auto;
  box-sizing: border-box;
  touch-action: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.scdm-item-handle:hover,
.scdm-item-handle.is-resizing {
  background: #2563eb;
  transform: scale(1.25);
}

.scdm-live-preview .scdm-item.is-selected .scdm-item-handle {
  display: block;
}

.scdm-item-handle-tl { top: -8px; left: -8px; cursor: nwse-resize; }
.scdm-item-handle-tr { top: -8px; right: -8px; cursor: nesw-resize; }
.scdm-item-handle-bl { bottom: -8px; left: -8px; cursor: nesw-resize; }
.scdm-item-handle-br { bottom: -8px; right: -8px; cursor: nwse-resize; }

/* Individual Shape Clip Paths */
.scdm-item[data-item-shape="circle"] img {
  clip-path: url(#scdm-clip-circle) !important;
  border-radius: 50% !important;
}
.scdm-item[data-item-shape="heart"] img {
  clip-path: url(#scdm-clip-heart) !important;
}
.scdm-item[data-item-shape="triangle"] img {
  clip-path: url(#scdm-clip-triangle) !important;
}
.scdm-item[data-item-shape="pentagon"] img {
  clip-path: url(#scdm-clip-pentagon) !important;
}
.scdm-item[data-item-shape="hexagon"] img {
  clip-path: url(#scdm-clip-hexagon) !important;
}
.scdm-item[data-item-shape="diamond"] img {
  clip-path: url(#scdm-clip-diamond) !important;
}
.scdm-item[data-item-shape="star"] img {
  clip-path: url(#scdm-clip-star) !important;
}
.scdm-item[data-item-shape="squircle"] img {
  clip-path: url(#scdm-clip-squircle) !important;
}
.scdm-item[data-item-shape="slant_left"] img {
  clip-path: url(#scdm-clip-slant_left) !important;
}
.scdm-item[data-item-shape="slant_right"] img {
  clip-path: url(#scdm-clip-slant_right) !important;
}

/* Floating Active Image Toolbar */
.scdm-item-toolbar {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: 4px 12px;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.45);
  z-index: 99999 !important;
  white-space: nowrap;
  pointer-events: auto;
}

.scdm-live-preview .scdm-item.is-selected .scdm-item-toolbar {
  display: flex !important;
}

.scdm-item-toolbar select,
.scdm-item-toolbar input[type="number"] {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  height: 24px !important;
  line-height: 20px !important;
  outline: none !important;
}

.scdm-item-toolbar select:focus,
.scdm-item-toolbar input[type="number"]:focus {
  border-color: #3b82f6 !important;
}

.scdm-item-toolbar label,
.scdm-item-toolbar span {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  margin: 0 !important;
  user-select: none !important;
}

.scdm-item-toolbar .scdm-unit {
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  margin-left: -2px !important;
}

.scdm-item-toolbar input[type="color"] {
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  background: none;
}

.scdm-item-toolbar input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.scdm-item-toolbar input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* Hide redundant global shape selector in favor of direct on-canvas per-image toolbar */
.scdm-front-form label:has(select[name="scdm_settings[image_shape]"]),
.scdm-grid-settings label:has(select[name="scdm_settings[image_shape]"]) {
  display: none !important;
}

.scdm-live-preview-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--scdm-ui-text-muted, #64748b);
  background: var(--scdm-ui-canvas-stage, #ffffff);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 24px;
  height: 100%;
  border-radius: 8px;
}

/* FINAL OUTPUT DISPLAY */
.scdm-final img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}



/* RESPONSIVE DESIGN */
@media (max-width: 780px) {
  .scdm-layout-overlap .scdm-front-grid {
    min-height: 300px;
  }
}

@media (max-width: 620px) {
  .scdm-upload-form input[type=file] {
    display: block;
    max-width: 100%;
    margin: 4px 0;
  }
}

@media (max-width: 520px) {
  .scdm-front-grid,
  .scdm-layout-feature .scdm-front-grid {
    grid-template-columns: 1fr;
  }

  .scdm-layout-feature .scdm-item:first-child {
    grid-column: auto;
  }

  .scdm-item img {
    min-height: 160px;
  }

  .scdm-layout-overlap .scdm-front-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .scdm-layout-overlap .scdm-item {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    height: auto;
    transform: none !important;
  }

  .scdm-layout-circle .scdm-front-grid,
  .scdm-layout-rectangle .scdm-front-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 0;
  }

  .scdm-layout-circle .scdm-item,
  .scdm-layout-rectangle .scdm-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  .scdm-layout-circle .scdm-item img,
  .scdm-layout-rectangle .scdm-item img {
    aspect-ratio: 1/1;
  }

  .scdm-layout-magazine .scdm-front-grid {
    grid-template-columns: 1fr;
  }

  .scdm-layout-magazine .scdm-item:first-child img {
    min-height: 260px;
  }
}

/* ========================================
   BUILDER UI STYLES & DAY/NIGHT RESPONSIVENESS
   ======================================== */

:root,
.scdm-front-builder,
.scdm-montages-modal,
.scdm-lightbox,
.scdm-crop-modal {
  --scdm-ui-bg: #ffffff;
  --scdm-ui-surface: #ffffff;
  --scdm-ui-surface-hover: #f8fafc;
  --scdm-ui-surface-active: #f1f5f9;
  --scdm-ui-border: #e2e8f0;
  --scdm-ui-border-strong: #cbd5e1;
  --scdm-ui-text: #1e293b;
  --scdm-ui-text-muted: #64748b;
  --scdm-ui-text-label: #334155;
  --scdm-ui-input-bg: #ffffff;
  --scdm-ui-input-border: #cbd5e1;
  --scdm-ui-input-text: #1e293b;
  --scdm-ui-btn-bg: #ffffff;
  --scdm-ui-btn-text: #334155;
  --scdm-ui-btn-border: #cbd5e1;
  --scdm-ui-btn-hover: #f1f5f9;
  --scdm-ui-code-bg: #f8fafc;
  --scdm-ui-code-border: #e2e8f0;
  --scdm-ui-code-text: #475569;
  --scdm-ui-canvas-stage: #ffffff;
  --scdm-ui-modal-overlay: rgba(15, 23, 42, 0.6);
  --scdm-ui-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Explicit Night / Dark Theme Mode Classes */
body.dark-mode .scdm-front-builder,
body.sheer-dark-mode .scdm-front-builder,
body.night-mode .scdm-front-builder,
[data-theme="dark"] .scdm-front-builder,
html.dark .scdm-front-builder,
body.dark .scdm-front-builder,
body.wp-dark-mode-active .scdm-front-builder,
body.dark-mode .scdm-montages-modal,
body.sheer-dark-mode .scdm-montages-modal,
body.night-mode .scdm-montages-modal,
[data-theme="dark"] .scdm-montages-modal,
html.dark .scdm-montages-modal,
body.dark .scdm-montages-modal,
body.dark-mode .scdm-lightbox,
body.sheer-dark-mode .scdm-lightbox,
body.night-mode .scdm-lightbox,
[data-theme="dark"] .scdm-lightbox,
html.dark .scdm-lightbox,
body.dark .scdm-lightbox,
body.dark-mode .scdm-crop-modal,
body.sheer-dark-mode .scdm-crop-modal,
body.night-mode .scdm-crop-modal,
[data-theme="dark"] .scdm-crop-modal,
html.dark .scdm-crop-modal,
body.dark .scdm-crop-modal {
  --scdm-ui-bg: #18191c;
  --scdm-ui-surface: #202227;
  --scdm-ui-surface-hover: #292c33;
  --scdm-ui-surface-active: #333740;
  --scdm-ui-border: #32363e;
  --scdm-ui-border-strong: #444954;
  --scdm-ui-text: #f3f4f6;
  --scdm-ui-text-muted: #9ca3af;
  --scdm-ui-text-label: #e5e7eb;
  --scdm-ui-input-bg: #151619;
  --scdm-ui-input-border: #373b44;
  --scdm-ui-input-text: #f9fafb;
  --scdm-ui-btn-bg: #272a30;
  --scdm-ui-btn-text: #e5e7eb;
  --scdm-ui-btn-border: #3d424c;
  --scdm-ui-btn-hover: #323740;
  --scdm-ui-code-bg: #151619;
  --scdm-ui-code-border: #373b44;
  --scdm-ui-code-text: #a1a1aa;
  --scdm-ui-canvas-stage: #121316;
  --scdm-ui-modal-overlay: rgba(0, 0, 0, 0.8);
  --scdm-ui-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
}

/* Builder Container */
.scdm-front-builder {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--scdm-ui-text);
  box-sizing: border-box;
}

.scdm-alert {
  background: #ecfdf5;
  border: 1px solid #10b981;
  color: #065f46;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

body.dark-mode .scdm-alert,
body.sheer-dark-mode .scdm-alert,
body.night-mode .scdm-alert,
[data-theme="dark"] .scdm-alert,
html.dark .scdm-alert,
body.dark .scdm-alert {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.scdm-front-builder h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--scdm-ui-text);
}

/* Builder Layout */
.scdm-builder-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sidebar */
.scdm-builder-side {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.scdm-upload-form {
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.scdm-upload-form h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--scdm-ui-text);
  line-height: 1.2;
  display: none;
}

.scdm-upload-form input[type="file"] {
  display: inline-block;
  width: 250px;
  padding: 8px;
  background: var(--scdm-ui-input-bg);
  border: 1px solid var(--scdm-ui-input-border);
  color: var(--scdm-ui-input-text);
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

/* Style the "Choose Files" browser-native button */
.scdm-upload-form input[type="file"]::file-selector-button {
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 8px;
}

/* Night mode explicit overrides for file input & top action buttons */
body.dark-mode .scdm-upload-form input[type="file"],
body.sheer-dark-mode .scdm-upload-form input[type="file"],
body.night-mode .scdm-upload-form input[type="file"],
[data-theme="dark"] .scdm-upload-form input[type="file"],
html.dark .scdm-upload-form input[type="file"],
body.dark .scdm-upload-form input[type="file"] {
  color: #f9fafb;
  background: #151619;
  border-color: #373b44;
}

body.dark-mode .scdm-upload-form input[type="file"]::file-selector-button,
body.sheer-dark-mode .scdm-upload-form input[type="file"]::file-selector-button,
body.night-mode .scdm-upload-form input[type="file"]::file-selector-button,
[data-theme="dark"] .scdm-upload-form input[type="file"]::file-selector-button,
html.dark .scdm-upload-form input[type="file"]::file-selector-button,
body.dark .scdm-upload-form input[type="file"]::file-selector-button {
  background: #272a30;
  color: #e5e7eb;
  border-color: #3d424c;
}

body.dark-mode .scdm-my-toggle,
body.sheer-dark-mode .scdm-my-toggle,
body.night-mode .scdm-my-toggle,
[data-theme="dark"] .scdm-my-toggle,
html.dark .scdm-my-toggle,
body.dark .scdm-my-toggle {
  color: #e5e7eb !important;
}

body.dark-mode .scdm-media-toggle,
body.sheer-dark-mode .scdm-media-toggle,
body.night-mode .scdm-media-toggle,
[data-theme="dark"] .scdm-media-toggle,
html.dark .scdm-media-toggle,
body.dark .scdm-media-toggle {
  color: #e5e7eb !important;
}

.scdm-upload-form button[type="submit"] {
  display: inline-block;
  width: auto;
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
  flex-shrink: 0;
}

.scdm-upload-form button[type="submit"]:hover {
  background: #2563eb;
}

/* Force Upload button text to white in ALL dark modes */
body.dark-mode .scdm-upload-form button[type="submit"],
body.sheer-dark-mode .scdm-upload-form button[type="submit"],
body.night-mode .scdm-upload-form button[type="submit"],
[data-theme="dark"] .scdm-upload-form button[type="submit"],
html.dark .scdm-upload-form button[type="submit"],
body.dark .scdm-upload-form button[type="submit"],
.scdm-upload-form button[type="submit"] {
  color: #ffffff !important;
  background: #3b82f6 !important;
}

.scdm-my-montages-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.scdm-my-montages-box.is-collapsed .scdm-my-list {
  display: none !important;
}

.scdm-my-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.scdm-my-head h4 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--scdm-ui-text);
}

.scdm-my-toggle {
  padding: 6px 10px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.scdm-my-toggle:hover {
  background: var(--scdm-ui-btn-hover);
}

.scdm-new-btn {
  padding: 6px 10px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.scdm-new-btn:hover {
  background: #059669;
  color: #fff;
}

/* Force +New button text to white in ALL modes */
body.dark-mode .scdm-new-btn,
body.sheer-dark-mode .scdm-new-btn,
body.night-mode .scdm-new-btn,
[data-theme="dark"] .scdm-new-btn,
html.dark .scdm-new-btn,
body.dark .scdm-new-btn,
.scdm-new-btn {
  color: #ffffff !important;
  background: #10b981 !important;
}

.scdm-my-montages-box.is-collapsed .scdm-my-list {
  display: none;
}

.scdm-my-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.scdm-my-list li {
  padding: 8px 12px;
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scdm-montage-title {
  font-weight: 600;
  color: var(--scdm-ui-text);
  min-width: 80px;
  flex-shrink: 0;
}

.scdm-my-list code {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  background: var(--scdm-ui-code-bg);
  border: 1px solid var(--scdm-ui-code-border);
  border-radius: 3px;
  word-break: break-all;
  font-family: 'Courier New', monospace;
  color: var(--scdm-ui-code-text);
  flex: 1;
  min-width: 0;
}

.scdm-montage-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.scdm-icon-btn {
  padding: 6px 8px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.scdm-icon-btn:hover {
  background: var(--scdm-ui-btn-hover);
  color: var(--scdm-ui-text);
}

.scdm-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scdm-icon-btn .dashicons {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* Night mode: force icon buttons and shortcode text to be clearly visible */
body.dark-mode .scdm-icon-btn,
body.sheer-dark-mode .scdm-icon-btn,
body.night-mode .scdm-icon-btn,
[data-theme="dark"] .scdm-icon-btn,
html.dark .scdm-icon-btn,
body.dark .scdm-icon-btn {
  color: #d1d5db !important;
  background: #32363f !important;
  border-color: #52576a !important;
}

body.dark-mode .scdm-icon-btn:hover,
body.sheer-dark-mode .scdm-icon-btn:hover,
body.night-mode .scdm-icon-btn:hover,
[data-theme="dark"] .scdm-icon-btn:hover,
html.dark .scdm-icon-btn:hover,
body.dark .scdm-icon-btn:hover {
  color: #f3f4f6 !important;
  background: #404555 !important;
  border-color: #6b7280 !important;
}

body.dark-mode .scdm-my-list code,
body.sheer-dark-mode .scdm-my-list code,
body.night-mode .scdm-my-list code,
[data-theme="dark"] .scdm-my-list code,
html.dark .scdm-my-list code,
body.dark .scdm-my-list code {
  color: #c4c9d4 !important;
  background: #1a1d22 !important;
  border-color: #3a3f4b !important;
}

body.dark-mode .scdm-montage-title,
body.sheer-dark-mode .scdm-montage-title,
body.night-mode .scdm-montage-title,
[data-theme="dark"] .scdm-montage-title,
html.dark .scdm-montage-title,
body.dark .scdm-montage-title {
  color: #f3f4f6 !important;
}

.scdm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.scdm-delete-link {
  color: #dc2626;
}

.scdm-delete-link:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

body.dark-mode .scdm-delete-link:hover,
body.sheer-dark-mode .scdm-delete-link:hover,
body.night-mode .scdm-delete-link:hover,
[data-theme="dark"] .scdm-delete-link:hover,
html.dark .scdm-delete-link:hover,
body.dark .scdm-delete-link:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.4);
  color: #f87171;
}

/* Main Builder Area */
.scdm-builder-main {
  background: var(--scdm-ui-bg);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--scdm-ui-shadow);
}

.scdm-front-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scdm-title-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--scdm-ui-text);
}

.scdm-title-hidden-section {
  display: none;
}

.scdm-title-hidden-section.is-visible {
  display: block;
}

.scdm-title-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--scdm-ui-input-bg);
  border: 1px solid var(--scdm-ui-input-border);
  color: var(--scdm-ui-input-text);
  border-radius: 6px;
  font-size: 16px;
  margin-top: 8px;
  box-sizing: border-box;
}

.scdm-title-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Builder Main Workspace Collapse on Default Load */
.scdm-front-builder[data-editing="0"]:not(.is-active) .scdm-front-form {
  display: none !important;
}

.scdm-front-builder[data-editing="1"] .scdm-builder-empty-state,
.scdm-front-builder.is-active .scdm-builder-empty-state {
  display: none !important;
}

.scdm-builder-empty-state {
  padding: 48px 24px;
  text-align: center;
  background: var(--scdm-ui-surface);
  border: 1px dashed var(--scdm-ui-border-strong);
  border-radius: 12px;
  box-sizing: border-box;
}

.scdm-empty-card {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scdm-empty-icon {
  font-size: 44px;
  width: 44px;
  height: 44px;
  color: #3b82f6;
  opacity: 0.9;
}

.scdm-empty-card h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--scdm-ui-text);
}

.scdm-empty-card p {
  margin: 0;
  font-size: 14px;
  color: var(--scdm-ui-text-muted);
  line-height: 1.5;
}

.scdm-empty-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Night / Dark mode for empty state */
body.dark-mode .scdm-builder-empty-state,
body.sheer-dark-mode .scdm-builder-empty-state,
body.night-mode .scdm-builder-empty-state,
[data-theme="dark"] .scdm-builder-empty-state,
html.dark .scdm-builder-empty-state,
body.dark .scdm-builder-empty-state {
  background: #202227;
  border-color: #3e4450;
}

/* Media Box */
.scdm-media-box {
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
  padding: 16px;
  background: var(--scdm-ui-surface);
}

.scdm-media-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.scdm-media-box.is-collapsed .scdm-media-head {
  margin-bottom: 0;
}

.scdm-media-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--scdm-ui-text);
}

.scdm-media-toggle {
  padding: 6px 14px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.scdm-media-toggle:hover {
  background: var(--scdm-ui-btn-hover);
  border-color: var(--scdm-ui-border-strong);
}

.scdm-media-box.is-collapsed .scdm-media-picker {
  display: none !important;
}

.scdm-media-box.is-collapsed .scdm-media-filters {
  display: none !important;
}

.scdm-media-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.scdm-media-filters button {
  padding: 6px 12px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-text-muted);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.scdm-media-filters button:hover {
  background: var(--scdm-ui-btn-hover);
  color: var(--scdm-ui-text);
}

.scdm-media-filters button.is-active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Night mode: make filter buttons clearly visible */
body.dark-mode .scdm-media-filters button,
body.sheer-dark-mode .scdm-media-filters button,
body.night-mode .scdm-media-filters button,
[data-theme="dark"] .scdm-media-filters button,
html.dark .scdm-media-filters button,
body.dark .scdm-media-filters button {
  color: #d1d5db !important;
  background: #32363f !important;
  border-color: #52576a !important;
}

body.dark-mode .scdm-media-filters button:hover,
body.sheer-dark-mode .scdm-media-filters button:hover,
body.night-mode .scdm-media-filters button:hover,
[data-theme="dark"] .scdm-media-filters button:hover,
html.dark .scdm-media-filters button:hover,
body.dark .scdm-media-filters button:hover {
  color: #f3f4f6 !important;
  background: #404555 !important;
  border-color: #6b7280 !important;
}

.scdm-media-picker {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
  gap: 8px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  background: var(--scdm-ui-input-bg) !important;
  border: 1px solid var(--scdm-ui-border) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 150, 150, 0.25) transparent;
}

.scdm-media-picker::-webkit-scrollbar {
  width: 6px;
}

.scdm-media-picker::-webkit-scrollbar-track {
  background: transparent;
}

.scdm-media-picker::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.25);
  border-radius: 4px;
}

.scdm-media-picker::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.4);
}

.scdm-pick-wrap {
  position: relative !important;
  aspect-ratio: 1/1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid var(--scdm-ui-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--scdm-ui-surface-hover) !important;
}

.scdm-pick-wrap:hover {
  border-color: #3b82f6 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.scdm-pick-wrap.is-selected {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

.scdm-pick-image {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
}

.scdm-pick-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.scdm-pick-wrap:hover .scdm-pick-image img {
  transform: scale(1.06);
}

.scdm-media-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s;
  z-index: 2;
}

.scdm-media-delete:hover {
  background: #dc2626;
}

/* Selected Images List */
.scdm-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.scdm-actions button {
  padding: 8px 16px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.scdm-actions button:hover {
  background: var(--scdm-ui-btn-hover);
}

/* Force Clear Images button text to white in night mode */
body.dark-mode .scdm-actions button,
body.sheer-dark-mode .scdm-actions button,
body.night-mode .scdm-actions button,
[data-theme="dark"] .scdm-actions button,
html.dark .scdm-actions button,
body.dark .scdm-actions button {
  color: #e5e7eb !important;
  background: #272a30 !important;
  border-color: #3d424c !important;
}

.scdm-help {
  font-size: 12px;
  color: var(--scdm-ui-text-muted);
}

#scdm-image-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
}

#scdm-image-list li {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #3b82f6;
  cursor: grab;
}

#scdm-image-list li:active {
  cursor: grabbing;
}

#scdm-image-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scdm-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.scdm-remove:hover {
  background: #b91c1c;
}

.scdm-grid-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 16px;
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
}

.scdm-grid-settings label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--scdm-ui-text-label);
}

.scdm-grid-settings input,
.scdm-grid-settings select {
  padding: 8px 10px;
  background: var(--scdm-ui-input-bg);
  border: 1px solid var(--scdm-ui-input-border);
  color: var(--scdm-ui-input-text);
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.scdm-grid-settings input:focus,
.scdm-grid-settings select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.scdm-grid-settings input[type="color"] {
  height: 40px;
  width: 100%;
  padding: 2px 4px;
  background: var(--scdm-ui-input-bg);
  border: 1px solid var(--scdm-ui-input-border);
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.scdm-grid-settings input[type="range"] {
  width: 100%;
  height: 6px;
  cursor: pointer;
  padding: 0;
  margin: 8px 0 4px;
  box-sizing: border-box;
  accent-color: #3b82f6;
}

.scdm-grid-settings small {
  font-size: 11px;
  color: var(--scdm-ui-text-muted);
  font-weight: 400;
  margin-top: -2px;
}

.scdm-grid-settings .scdm-label-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.scdm-size-readout {
  font-size: 12px;
  color: var(--scdm-ui-text-muted);
  font-weight: 500;
  flex: 0 0 auto;
  min-width: 28px;
  white-space: nowrap;
  text-align: right;
}

.scdm-grid-settings .scdm-select-bg-image,
.scdm-grid-settings .scdm-remove-bg-image {
  padding: 8px 14px;
  background: #f1f5f9;
  color: #0f172a !important;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 6px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.scdm-grid-settings .scdm-select-bg-image:hover {
  background: #e2e8f0;
  color: #0284c7 !important;
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.scdm-grid-settings .scdm-remove-bg-image {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.35);
}

.scdm-grid-settings .scdm-remove-bg-image:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #b91c1c !important;
}

/* Night / Dark Mode Explicit Button Styling */
body.dark-mode .scdm-grid-settings .scdm-select-bg-image,
body.sheer-dark-mode .scdm-grid-settings .scdm-select-bg-image,
body.night-mode .scdm-grid-settings .scdm-select-bg-image,
[data-theme="dark"] .scdm-grid-settings .scdm-select-bg-image,
html.dark .scdm-grid-settings .scdm-select-bg-image,
body.dark .scdm-grid-settings .scdm-select-bg-image,
body.wp-dark-mode-active .scdm-grid-settings .scdm-select-bg-image {
  background: #2e3440 !important;
  color: #ffffff !important;
  border: 1px solid #4c566a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.dark-mode .scdm-grid-settings .scdm-select-bg-image:hover,
body.sheer-dark-mode .scdm-grid-settings .scdm-select-bg-image:hover,
body.night-mode .scdm-grid-settings .scdm-select-bg-image:hover,
[data-theme="dark"] .scdm-grid-settings .scdm-select-bg-image:hover,
html.dark .scdm-grid-settings .scdm-select-bg-image:hover,
body.dark .scdm-grid-settings .scdm-select-bg-image:hover,
body.wp-dark-mode-active .scdm-grid-settings .scdm-select-bg-image:hover {
  background: #3b4252 !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

body.dark-mode .scdm-grid-settings .scdm-remove-bg-image,
body.sheer-dark-mode .scdm-grid-settings .scdm-remove-bg-image,
body.night-mode .scdm-grid-settings .scdm-remove-bg-image,
[data-theme="dark"] .scdm-grid-settings .scdm-remove-bg-image,
html.dark .scdm-grid-settings .scdm-remove-bg-image,
body.dark .scdm-grid-settings .scdm-remove-bg-image,
body.wp-dark-mode-active .scdm-grid-settings .scdm-remove-bg-image {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

body.dark-mode .scdm-grid-settings .scdm-remove-bg-image:hover,
body.sheer-dark-mode .scdm-grid-settings .scdm-remove-bg-image:hover,
body.night-mode .scdm-grid-settings .scdm-remove-bg-image:hover,
[data-theme="dark"] .scdm-grid-settings .scdm-remove-bg-image:hover,
html.dark .scdm-grid-settings .scdm-remove-bg-image:hover,
body.dark .scdm-grid-settings .scdm-remove-bg-image:hover,
body.wp-dark-mode-active .scdm-grid-settings .scdm-remove-bg-image:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.scdm-shape-control[hidden] {
  display: none;
}

/* Submit Row */
.scdm-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--scdm-ui-border);
}

.scdm-save-btn {
  padding: 12px 24px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.scdm-save-btn:hover {
  background: #059669;
}

/* Force Save Montage button text to white in ALL modes */
body.dark-mode .scdm-save-btn,
body.sheer-dark-mode .scdm-save-btn,
body.night-mode .scdm-save-btn,
[data-theme="dark"] .scdm-save-btn,
html.dark .scdm-save-btn,
body.dark .scdm-save-btn,
.scdm-save-btn {
  color: #ffffff !important;
  background: #10b981 !important;
}

.scdm-cancel-btn {
  padding: 12px 20px;
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.scdm-cancel-btn:hover {
  background: #e2e8f0;
  color: #0f172a !important;
  border-color: #94a3b8;
}

/* Night / Dark mode for Cancel button */
body.dark-mode .scdm-cancel-btn,
body.sheer-dark-mode .scdm-cancel-btn,
body.night-mode .scdm-cancel-btn,
[data-theme="dark"] .scdm-cancel-btn,
html.dark .scdm-cancel-btn,
body.dark .scdm-cancel-btn {
  background: #272a30 !important;
  color: #d1d5db !important;
  border-color: #404552 !important;
}

body.dark-mode .scdm-cancel-btn:hover,
body.sheer-dark-mode .scdm-cancel-btn:hover,
body.night-mode .scdm-cancel-btn:hover,
[data-theme="dark"] .scdm-cancel-btn:hover,
html.dark .scdm-cancel-btn:hover,
body.dark .scdm-cancel-btn:hover {
  background: #333842 !important;
  color: #ffffff !important;
  border-color: #586070 !important;
}

.scdm-save-note {
  font-size: 13px;
  color: var(--scdm-ui-text-muted);
}

/* Front Output */
.scdm-front-output {
  margin-top: 24px;
  padding: 20px;
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
}

.scdm-front-output strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--scdm-ui-text);
}

.scdm-front-output code {
  display: inline-block;
  padding: 8px 12px;
  background: var(--scdm-ui-code-bg);
  border: 1px solid var(--scdm-ui-code-border);
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  color: var(--scdm-ui-code-text);
  margin-right: 8px;
  word-break: break-all;
}

.scdm-front-output button,
.scdm-front-output a {
  padding: 8px 16px;
  background: var(--scdm-ui-btn-bg);
  color: var(--scdm-ui-btn-text);
  border: 1px solid var(--scdm-ui-btn-border);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-right: 8px;
  margin-top: 8px;
  transition: all 0.2s;
}

.scdm-front-output button:hover,
.scdm-front-output a:hover {
  background: var(--scdm-ui-btn-hover);
  color: var(--scdm-ui-text);
}

.scdm-front-output img {
  max-width: 100%;
  height: auto;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--scdm-ui-border);
}

/* Lightbox */
.scdm-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scdm-ui-modal-overlay);
  z-index: 9999;
  padding: 20px;
}

.scdm-lightbox[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scdm-lightbox-panel {
  background: var(--scdm-ui-bg);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-shadow: var(--scdm-ui-shadow);
}

.scdm-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  color: var(--scdm-ui-text);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.scdm-lightbox-close:hover {
  background: var(--scdm-ui-surface-hover);
}

.scdm-lightbox-panel h4 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--scdm-ui-text);
  padding-right: 40px;
}

.scdm-lightbox-panel img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
  border-radius: 8px;
}

.scdm-lightbox-panel a {
  display: inline-block;
  padding: 10px 20px;
  background: #3b82f6;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s;
}

.scdm-lightbox-panel a:hover {
  background: #2563eb;
}

/* Crop Modal */
.scdm-crop-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scdm-ui-modal-overlay);
  z-index: 9999;
  padding: 20px;
}

.scdm-crop-modal[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Montages Modal */
.scdm-montages-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--scdm-ui-modal-overlay);
  z-index: 9998;
  padding: 20px;
}

.scdm-montages-modal[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scdm-montages-modal-content {
  background: var(--scdm-ui-bg);
  border: 1px solid var(--scdm-ui-border);
  border-radius: 8px;
  padding: 24px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--scdm-ui-shadow);
}

.scdm-montages-modal-content h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--scdm-ui-text);
}

.scdm-montages-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: var(--scdm-ui-surface);
  border: 1px solid var(--scdm-ui-border);
  color: var(--scdm-ui-text);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.scdm-montages-modal-close:hover {
  background: var(--scdm-ui-surface-hover);
}

/* Responsive */
@media (max-width: 1024px) {
  .scdm-builder-layout {
    grid-template-columns: 1fr;
  }

  .scdm-builder-side {
    order: 2;
  }

  .scdm-builder-main {
    order: 1;
  }
}

@media (max-width: 768px) {
  .scdm-front-builder {
    padding: 12px;
  }

  .scdm-grid-settings {
    grid-template-columns: 1fr;
  }

  .scdm-media-picker {
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)) !important;
  }

  #scdm-image-list {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

/* SPECIAL EFFECTS OVERLAYS */
.scdm-effect-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: visible;
}

/* Stars Effect */
.scdm-particle-star {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.8));
  animation: scdm-star-pulse 2s ease-in-out infinite alternate;
}
.scdm-particle-star.is-major {
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 20px rgba(234, 179, 8, 0.6));
}
.scdm-particle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fef08a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px #facc15;
  animation: scdm-dot-twinkle 1.8s ease-in-out infinite alternate;
}

@keyframes scdm-star-pulse {
  0% { transform: translate(-50%, -50%) scale(0.85) rotate(0deg); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.15) rotate(15deg); opacity: 1; }
}
@keyframes scdm-dot-twinkle {
  0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

/* Balloons Effect */
.scdm-particle-balloon {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
  animation: scdm-balloon-float 3.5s ease-in-out infinite alternate;
}

@keyframes scdm-balloon-float {
  0% { transform: translate(-50%, -50%) translateY(0px) rotate(-3deg); }
  100% { transform: translate(-50%, -50%) translateY(-12px) rotate(3deg); }
}

/* Raindrops Effect */
.scdm-particle-drop {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

/* Hearts Effect */
.scdm-particle-heart {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  animation: scdm-heart-beat 2.2s ease-in-out infinite alternate;
}

@keyframes scdm-heart-beat {
  0% { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Confetti Effect */
.scdm-particle-confetti-circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.scdm-particle-confetti-rect {
  position: absolute;
  border-radius: 2px;
  transform-origin: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Glowing Bubbles Effect */
.scdm-particle-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
  pointer-events: none;
}
.scdm-bubble-anim-1 {
  animation: scdm-bubble-float-pulse-1 4.2s ease-in-out infinite alternate;
}
.scdm-bubble-anim-2 {
  animation: scdm-bubble-float-pulse-2 3.4s ease-in-out infinite alternate;
}
.scdm-bubble-anim-3 {
  animation: scdm-bubble-float-pulse-3 4.8s ease-in-out infinite alternate;
}
@keyframes scdm-bubble-float-pulse-1 {
  0% { transform: translate(-50%, -50%) translateY(0px) scale(0.92); opacity: 0.85; }
  50% { transform: translate(-50%, -50%) translateY(-10px) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(-18px) scale(0.96); opacity: 0.9; }
}
@keyframes scdm-bubble-float-pulse-2 {
  0% { transform: translate(-50%, -50%) translateY(0px) scale(1.06); opacity: 1; }
  50% { transform: translate(-50%, -50%) translateY(-14px) scale(0.90); opacity: 0.82; }
  100% { transform: translate(-50%, -50%) translateY(-8px) scale(1.04); opacity: 0.95; }
}
@keyframes scdm-bubble-float-pulse-3 {
  0% { transform: translate(-50%, -50%) translateY(0px) scale(0.95); opacity: 0.88; }
  50% { transform: translate(-50%, -50%) translateY(-8px) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(-20px) scale(0.94); opacity: 0.85; }
}

/* Broken Glass Effect */
.scdm-broken-glass-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
.scdm-broken-glass-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}