.editor-editor-interface .scbc-button {
  margin-bottom: 0;
}
.scbc-button.scbc-button-interactive.editor-collapsed {
  width: auto !important;
  min-width: fit-content !important;
  padding: 4px !important;
  padding-left: 9px !important;
  
  .scbc-button-text {
    opacity: 0 !important;
    width: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
  }
  
  .scbc-button-logo {
    margin-right: 0 !important;
  }
}

/* ===== FIX #1: FORCE PROPER BUTTON WIDTH BEHAVIOR ===== */
.scbc-button {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== PREVENT THEME TEXT STYLE INTERFERENCE ===== */
.scbc-button,
.scbc-button .scbc-button-text,
.scbc-button span {
  text-transform: none !important; /* Prevent capitalization */
  text-decoration: none !important; /* Prevent underline */
  letter-spacing: normal !important; /* Prevent letter spacing changes */
}

/* Prevent WordPress/theme width inheritance issues */
body .scbc-button,
.wp-block .scbc-button,
article .scbc-button,
.entry-content .scbc-button,
.wp-block-post-content .scbc-button,
main .scbc-button {
  display: inline-flex !important;
  width: auto !important;
}

/* Ensure text element doesn't inherit weird styles */
body .scbc-button .scbc-button-text,
.wp-block .scbc-button .scbc-button-text,
article .scbc-button .scbc-button-text,
.entry-content .scbc-button .scbc-button-text,
.wp-block-post-content .scbc-button .scbc-button-text,
main .scbc-button .scbc-button-text {
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
}

/* Extra protection against aggressive theme styles */
body .scbc-button span,
.wp-block .scbc-button span,
article .scbc-button span,
.entry-content .scbc-button span,
.wp-block-post-content .scbc-button span,
main .scbc-button span {
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
  border: none !important;
  background: none !important;
}

.scbc-button-block__section {
  margin-bottom: 16px;

  &:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
  }

  .components-base-control__help {
    margin-top: 8px;
    font-size: 12px;
    font-style: normal;
    color: #757575;
  }

  .components-base-control__label {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    color: #1e1e1e;
    letter-spacing: 0.5px;
  }
}

.scbc-button-block-options {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;

  & > label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    color: #1e1e1e;
  }
}

.scbc-button-block__attr-row {
  position: relative;
  
  .components-button {
    position: absolute;
    top: -10px;
    right: 5px;
    padding: 0 !important;
  }

  &:not(:first-of-type) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;

    .components-button {
      top: 0;
    }
  }
}

/* ===== INTERACTIVE BUTTON TEXT REPEATER STYLES ===== */
.scbc-interactive-texts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.scbc-interactive-text-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideInFromRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #faf5ff 0%, #ffffff 100%);
    
    transform: translateX(-2px);
  }

  .components-base-control {
    flex: 1;
    margin-bottom: -7px;
  }

  .components-text-control__input {
    border-radius: 6px;
    border: 1px solid #e1e4e8;
    transition: all 0.3s ease;

    &:focus {
      border-color: #8b5cf6;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }
  }
}

.scbc-interactive-text-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.scbc-interactive-text-remove {
  flex-shrink: 0;
  opacity: 0.7;
  transition: all 0.3s ease;

  &:hover {
    opacity: 1;
    transform: scale(1.1) rotate(10deg);
  }

  &:active {
    transform: scale(0.95) rotate(10deg);
  }
}

.scbc-add-text-button {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border: 2px dashed #8b5cf6 !important;

  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #faf5ff, #ede9fe);
    border-color: #7c3aed !important;
    transform: translateY(-2px);
  }

  &:active:not(:disabled) {
    transform: translateY(0);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #ccc !important;
  }

  svg {
    fill: #8b5cf6;
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }
  50% {
    box-shadow: 0 2px 16px rgba(139, 92, 246, 0.5);
  }
}

/* ===== BORDER TYPE SELECTOR - FIXED & IMPROVED ===== */
.scbc-border-type-selector {
  margin-top: 16px;
}

.scbc-border-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 4px;
}

.scbc-border-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0 !important;
    transform: translateX(-100%);
    will-change: transform;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: transform 0.5s ease;
    pointer-events: none;
  }

  &:hover {
    border-color: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);

    &::before {
      transform: translateX(100%);
    }
  }

  &.is-selected {
    border-color: #ddd;
    box-shadow: none;
    overflow: visible;
    
    &::after {
      content: '✓';
      position: absolute;
      top: -10px;
      right: -10px;
      width: 20px;
      height: 20px;
      background: #8b5cf6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 10;
      animation: checkmarkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      pointer-events: none;
    }
  }
}

.scbc-border-type-preview {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: border 0.2s ease, color 0.2s ease !important;
  position: relative;
  pointer-events: none;
  border-radius: 4px;

  &.none-border {
    background: #ffffff;
    color: #1a1a1a;
    border: none !important;
  }

  &.solid-border {
    background: #ffffff;
    color: #1a1a1a;
    border: 3px solid #8b5cf6;
    border-radius: 4px;
  }

  &.gradient-border {
    background: #ffffff;
    color: #1a1a1a;
    border: 3px solid transparent;
    border-radius: 4px;
    background-image: 
      linear-gradient(white, white),
      linear-gradient(135deg, #b3425a, #7c3aed, #06b6d4);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== BUTTON STYLE SELECTOR ===== */
.scbc-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.scbc-style-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;

  &:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
  }

  &.is-selected {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  }
}

.scbc-style-preview {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;

  &.solid-style {
    background: #ffffff;
    color: #1a1a1a;
  }

  &.animated-style {
    background: linear-gradient(135deg, #b3425a, #7c3aed, #b3425a);
    background-size: 200% 200%;
    color: #ffffff;
    animation: gradientShift 3s ease infinite;
  }
}

.scbc-style-option:hover .scbc-style-preview.animated-style {
  animation: gradientShift 1.5s ease infinite;
}

/* ===== BUTTON SIZE SELECTOR ===== */
.scbc-size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.scbc-size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;

  &:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
  }

  &.is-selected {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  }
}

.scbc-size-preview {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  transition: all 0.3s ease;

  &.compact-size {
    height: 50px;
  }

  &.regular-size {
    height: 70px;
  }

  &.custom-size {
    height: 60px;
  }
}

.scbc-size-label {
  padding: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #1e1e1e;
  text-align: center;
}

.scbc-size-option:hover .scbc-size-preview {
  background: linear-gradient(135deg, #9d6bff, #8b5cf6);
}

/* ===== BORDER CONTROLS ===== */
.scbc-border-controls {
  display: flex;
  flex-direction: column;
  gap: 0;

  .components-toggle-control {
    margin-bottom: 0;
  }

  .components-panel__body {
    border: none;
    margin: 0;
    padding: 0;
  }
}

/* ===== LOGO CHECKMARK ===== */
.scbc-logo-checkmark {
  position: absolute;
  top: -10px !important;
  right: -10px !important;
  width: 20px;
  height: 20px;
  background: #8b5cf6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* ===== LOGO SELECTOR GRID ===== */
.scbc-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.scbc-logo-option {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #f5f5f7;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
  }

  &:hover {
    border-color: #8b5cf6;
    background: #ede9fe;
    transform: translateY(-2px);
    

    img {
      transform: scale(1.1);
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    }

    .scbc-logo-plus {
      transform: scale(1.1);
    }
  }

  &.is-selected {
    border-color: #8b5cf6;
    background: #ede9fe;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1), inset 0 0 0 1px rgba(139, 92, 246, 0.2);
  }
}

.scbc-logo-plus {
  font-size: 32px;
  font-weight: 300;
  color: #8b5cf6;
  transition: all 0.3s ease;
  line-height: 0.5;
  display: flex;
  width: 100%;
  height: 100%;
}

.scbc-logo-upload {
  &:hover {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, #f3f0ff, #faf5ff);
  }
}

/* ===== MAIN BUTTON STYLES ===== */
.scbc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border-radius: var(--scbc-radius, 20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
  background-color: #701471;
  z-index: 4;
  padding: 8px 12px;
  height: var(--scbc-height, 39px);
  margin-bottom: 2rem;
  max-width: 100%;
  width: fit-content;

  .rich-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .scbc-button-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    &.logo-only {
      animation: logoExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  /* Default: Show light logo, hide dark logo */
  .scbc-button-logo-light {
    display: inline-block;
  }

  .scbc-button-logo-dark {
    display: none;
  }

  svg,
  img {
    width: 18px;
    height: 18px;
  }

  & > span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

/* ===== INTERACTIVE BUTTON ANIMATIONS ===== */
.scbc-button-interactive {
  .scbc-button-text {
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    &.text-hidden {
      opacity: 0;
      width: 0;
      margin-left: 0;
    }

    &.text-visible {
      opacity: 1;
      width: auto;
      margin-left: 8px;
    }
  }

  // Logo rotates smoothly when animation starts
  &.is-animating {
    .scbc-button-logo {
      animation: logoSmoothRotate 1s cubic-bezier(0.4, 0, 0.2, 1) 1;
    }
  }

  // Smooth expansion transition
  &.is-expanding {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // Smooth closing transition
  &.is-closing {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:has(.scbc-button-text.text-hidden) {
    width: auto;
    min-width: fit-content;
    padding: 4px;
    padding-left: 9px;
  }
}

// Smooth 360-degree rotation 
@keyframes logoSmoothRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes logoExpand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* ===== ANIMATED GRADIENT BUTTON ===== */
.scbc-button-animated {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s ease;
  }

  &:hover {
    animation: gradientShift 2s ease infinite;
     
    transform: translateY(-2px);

    &::before {
      left: 100%;
    }

    .scbc-button-logo {
      transform: rotate(10deg) scale(1.1);
    }
  }

  &:active {
    transform: translateY(0) scale(0.98);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Hover effects for non-animated buttons */
.scbc-button:not(.scbc-button-animated):hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  svg,
  .scbc-button-logo {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.scbc-button:not(.scbc-button-animated):active {
  transform: scale(0.97);
}

/* ===== ADDITIONAL SHIMMER EFFECT ===== */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.scbc-button-animated:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  pointer-events: none;
}

/* ===== GLOW PULSE EFFECT ===== */
.scbc-button-animated {
  animation: gradientShift 4s ease infinite, glowPulse 3s ease infinite;
}

.scbc-button-animated:hover {
  animation: gradientShift 2s ease infinite, glowPulse 1.5s ease infinite;
}

/* ===== FRONTEND STYLES (Applied to actual website) ===== */
body .scbc-button,
.wp-block .scbc-button,
article .scbc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  border-radius: var(--scbc-radius, 20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  z-index: 4;
  padding: 8px 12px;
  height: var(--scbc-height, 39px);
  margin-bottom: 0px;
  max-width: 100%;
  width: fit-content;

  .scbc-button-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    &.logo-only {
      animation: logoExpand 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  svg,
  img {
    width: 18px;
    height: 18px;
  }

  & > span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (max-width: 767px) {
    width: 100%;
  }
}

/* Frontend interactive button animations */
body .scbc-button-interactive,
.wp-block .scbc-button-interactive,
article .scbc-button-interactive {
  .scbc-button-text {
    display: inline-block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    &.text-hidden {
      opacity: 0;
      width: 0;
      margin-left: 0;
    }

    &.text-visible {
      opacity: 1;
      width: auto;
      margin-left: 8px;
    }
  }

  // Logo rotates smoothly when animation starts
  &.is-animating {
    .scbc-button-logo {
      animation: logoSmoothRotate 1s cubic-bezier(0.4, 0, 0.2, 1) 1;
    }
  }

  // Smooth expansion transition
  &.is-expanding {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // Smooth closing transition
  &.is-closing {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:has(.scbc-button-text.text-hidden) {
    width: auto;
    min-width: fit-content;
    padding: 4px;
    padding-left: 9px;
  }
}

/* ===== SPACING MARGIN CONTROLS ===== */
.scbc-margin-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .components-button {
    flex: 1 1 auto;
    min-width: 80px;
    height: 40px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    justify-content: center;

    &.is-secondary {
      background: #fff;
      border: 2px solid #ddd !important;
      color: #1e1e1e;

      &:hover {
        background: #f0f6fc;
        border-color: #2271b1 !important;
        color: #2271b1;
        transform: translateY(-1px);
      }
    }

    &.is-primary {
      background: #2271b1 !important;
      border: 2px solid #2271b1 !important;
      color: #fff;
      box-shadow: 0 2px 12px rgba(34, 113, 177, 0.3);

      &:hover {
        background: #135e96 !important;
        border-color: #135e96 !important;
      }
    }
  }
}

.scbc-margin-controls {
  padding: 20px;
  background: #fff;
  border: 2px solid #ddd !important;
  border-radius: 8px;
}

.scbc-margin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .components-base-control__label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1e1e1e;
  }

  .scbc-link-button {
    min-width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid #ddd !important;
    transition: all 0.2s ease;

    &:hover {
      background: #f0f6fc;
      border-color: #2271b1 !important;
      transform: scale(1.05);
    }

    &.is-pressed {
      background: #2271b1 !important;
      border-color: #2271b1 !important;
      color: #fff;

      &:hover {
        background: #135e96 !important;
        border-color: #135e96 !important;
      }
    }
  }
}

.scbc-margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.scbc-margin-control {
  display: flex;
  flex-direction: column;
  gap: 6px;

  .components-base-control {
    margin-bottom: 0;
  }

  .components-unit-control-wrapper {
    .components-input-control__container {
      border-radius: 4px;
      
      .components-input-control__backdrop {
        border-color: #ddd !important;
        border-radius: 4px;
      }

      &:focus-within {
        .components-input-control__backdrop {
          border-color: #2271b1 !important;
          box-shadow: 0 0 0 1px #2271b1;
        }
      }
    }

    .components-input-control__input {
      height: 36px;
      font-size: 13px;
      font-weight: 500;
      padding: 0 8px;
    }

    .components-unit-control__select {
      height: 36px;
      font-size: 11px;
      font-weight: 600;
      min-width: 40px;
      padding: 0 4px;
    }
  }
}

.scbc-margin-label {
  font-size: 11px;
  font-weight: 600;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.scbc-reset-button {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
  justify-content: center;
  border: 2px solid currentColor !important;

  &:hover {
    transform: translateY(-1px);
  }
}

/* Responsive Design */
@media (max-width: 600px) {
  .scbc-margin-grid {
    grid-template-columns: 1fr;
  }

  .scbc-margin-presets {
    .components-button {
      flex: 1 1 calc(50% - 5px);
    }
  }
}

/* Frontend animated button */
body .scbc-button-animated,
.wp-block .scbc-button-animated,
article .scbc-button-animated {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite, glowPulse 3s ease infinite;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transition: left 0.5s ease;
  }

  &:hover {
    animation: gradientShift 2s ease infinite, glowPulse 1.5s ease infinite;
    
    transform: translateY(-2px);

    &::before {
      left: 100%;
    }

    .scbc-button-logo {
      transform: rotate(10deg) scale(1.1);
    }
  }

  &:active {
    transform: translateY(0) scale(0.98);
  }
}

/* Shimmer effect for frontend */
body .scbc-button-animated:hover::after,
.wp-block .scbc-button-animated:hover::after,
article .scbc-button-animated:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  pointer-events: none;
}

/* Hover effects for non-animated buttons on frontend */
body .scbc-button:not(.scbc-button-animated):hover,
.wp-block .scbc-button:not(.scbc-button-animated):hover,
article .scbc-button:not(.scbc-button-animated):hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  svg,
  .scbc-button-logo {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

body .scbc-button:not(.scbc-button-animated):active,
.wp-block .scbc-button:not(.scbc-button-animated):active,
article .scbc-button:not(.scbc-button-animated):active {
  transform: scale(0.97);
}

/* ===== Dark Mode customization - DARK MODE SUPPORT ===== */
html.dark .scbc-button-theme-customizable,
html.dark-mode .scbc-button-theme-customizable,
html.dark-theme .scbc-button-theme-customizable,
html.is-dark .scbc-button-theme-customizable,
html.theme-dark .scbc-button-theme-customizable,
html[data-theme="dark"] .scbc-button-theme-customizable,
html[data-mode="dark"] .scbc-button-theme-customizable,
html[data-color-scheme="dark"] .scbc-button-theme-customizable,
html[data-bs-theme="dark"] .scbc-button-theme-customizable,
body.dark .scbc-button-theme-customizable,
body.dark-mode .scbc-button-theme-customizable,
body.dark-theme .scbc-button-theme-customizable,
body.is-dark .scbc-button-theme-customizable,
body.theme-dark .scbc-button-theme-customizable,
body[data-theme="dark"] .scbc-button-theme-customizable,
body[data-mode="dark"] .scbc-button-theme-customizable,
body[data-color-scheme="dark"] .scbc-button-theme-customizable,
body[data-bs-theme="dark"] .scbc-button-theme-customizable {
  background: var(--scbc-dark-bg) !important;
  background-color: var(--scbc-dark-bg) !important;
  color: var(--scbc-dark-text) !important;
  animation: none !important;
}

html.dark .scbc-button-theme-customizable::before,
html.dark-mode .scbc-button-theme-customizable::before,
html.dark-theme .scbc-button-theme-customizable::before,
html.is-dark .scbc-button-theme-customizable::before,
html.theme-dark .scbc-button-theme-customizable::before,
html[data-theme="dark"] .scbc-button-theme-customizable::before,
html[data-mode="dark"] .scbc-button-theme-customizable::before,
html[data-color-scheme="dark"] .scbc-button-theme-customizable::before,
html[data-bs-theme="dark"] .scbc-button-theme-customizable::before,
body.dark .scbc-button-theme-customizable::before,
body.dark-mode .scbc-button-theme-customizable::before,
body.dark-theme .scbc-button-theme-customizable::before,
body.is-dark .scbc-button-theme-customizable::before,
body.theme-dark .scbc-button-theme-customizable::before,
body[data-theme="dark"] .scbc-button-theme-customizable::before,
body[data-mode="dark"] .scbc-button-theme-customizable::before,
body[data-color-scheme="dark"] .scbc-button-theme-customizable::before,
body[data-bs-theme="dark"] .scbc-button-theme-customizable::before {
  display: none !important;
}

html.dark .scbc-button-theme-customizable:hover::after,
html.dark-mode .scbc-button-theme-customizable:hover::after,
html.dark-theme .scbc-button-theme-customizable:hover::after,
html.is-dark .scbc-button-theme-customizable:hover::after,
html.theme-dark .scbc-button-theme-customizable:hover::after,
html[data-theme="dark"] .scbc-button-theme-customizable:hover::after,
html[data-mode="dark"] .scbc-button-theme-customizable:hover::after,
html[data-color-scheme="dark"] .scbc-button-theme-customizable:hover::after,
html[data-bs-theme="dark"] .scbc-button-theme-customizable:hover::after,
body.dark .scbc-button-theme-customizable:hover::after,
body.dark-mode .scbc-button-theme-customizable:hover::after,
body.dark-theme .scbc-button-theme-customizable:hover::after,
body.is-dark .scbc-button-theme-customizable:hover::after,
body.theme-dark .scbc-button-theme-customizable:hover::after,
body[data-theme="dark"] .scbc-button-theme-customizable:hover::after,
body[data-mode="dark"] .scbc-button-theme-customizable:hover::after,
body[data-color-scheme="dark"] .scbc-button-theme-customizable:hover::after,
body[data-bs-theme="dark"] .scbc-button-theme-customizable:hover::after {
  display: none !important;
}

html.dark .scbc-button-theme-customizable:hover,
html.dark-mode .scbc-button-theme-customizable:hover,
html.dark-theme .scbc-button-theme-customizable:hover,
html.is-dark .scbc-button-theme-customizable:hover,
html.theme-dark .scbc-button-theme-customizable:hover,
html[data-theme="dark"] .scbc-button-theme-customizable:hover,
html[data-mode="dark"] .scbc-button-theme-customizable:hover,
html[data-color-scheme="dark"] .scbc-button-theme-customizable:hover,
html[data-bs-theme="dark"] .scbc-button-theme-customizable:hover,
body.dark .scbc-button-theme-customizable:hover,
body.dark-mode .scbc-button-theme-customizable:hover,
body.dark-theme .scbc-button-theme-customizable:hover,
body.is-dark .scbc-button-theme-customizable:hover,
body.theme-dark .scbc-button-theme-customizable:hover,
body[data-theme="dark"] .scbc-button-theme-customizable:hover,
body[data-mode="dark"] .scbc-button-theme-customizable:hover,
body[data-color-scheme="dark"] .scbc-button-theme-customizable:hover,
body[data-bs-theme="dark"] .scbc-button-theme-customizable:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===== DARK MODE LOGO SWITCHING ===== */
html.dark .scbc-button-theme-customizable .scbc-button-logo-light,
html.dark-mode .scbc-button-theme-customizable .scbc-button-logo-light,
html.dark-theme .scbc-button-theme-customizable .scbc-button-logo-light,
html.is-dark .scbc-button-theme-customizable .scbc-button-logo-light,
html.theme-dark .scbc-button-theme-customizable .scbc-button-logo-light,
html[data-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
html[data-mode="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
html[data-color-scheme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
html[data-bs-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
body.dark .scbc-button-theme-customizable .scbc-button-logo-light,
body.dark-mode .scbc-button-theme-customizable .scbc-button-logo-light,
body.dark-theme .scbc-button-theme-customizable .scbc-button-logo-light,
body.is-dark .scbc-button-theme-customizable .scbc-button-logo-light,
body.theme-dark .scbc-button-theme-customizable .scbc-button-logo-light,
body[data-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
body[data-mode="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
body[data-color-scheme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light,
body[data-bs-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-light {
  display: none !important;
}

html.dark .scbc-button-theme-customizable .scbc-button-logo-dark,
html.dark-mode .scbc-button-theme-customizable .scbc-button-logo-dark,
html.dark-theme .scbc-button-theme-customizable .scbc-button-logo-dark,
html.is-dark .scbc-button-theme-customizable .scbc-button-logo-dark,
html.theme-dark .scbc-button-theme-customizable .scbc-button-logo-dark,
html[data-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
html[data-mode="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
html[data-color-scheme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
html[data-bs-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
body.dark .scbc-button-theme-customizable .scbc-button-logo-dark,
body.dark-mode .scbc-button-theme-customizable .scbc-button-logo-dark,
body.dark-theme .scbc-button-theme-customizable .scbc-button-logo-dark,
body.is-dark .scbc-button-theme-customizable .scbc-button-logo-dark,
body.theme-dark .scbc-button-theme-customizable .scbc-button-logo-dark,
body[data-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
body[data-mode="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
body[data-color-scheme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark,
body[data-bs-theme="dark"] .scbc-button-theme-customizable .scbc-button-logo-dark {
  display: inline-block !important;
}

/* ===== FIX FOR CUSTOM HEIGHT RANGE CONTROL INPUT BOX ===== */
.scbc-button-block__section {
  .components-range-control {
    .components-range-control__wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .components-input-control {
        min-width: 60px;
        flex-shrink: 0;
      }
    }
    
    .components-base-control__field {
      margin-bottom: 0;
      
      .components-input-control__container {
        .components-input-control__input {
          min-width: 60px !important;
          text-align: center;
        }
      }
    }
  }
}

/* Prevent button from flashing when switching border types */
.scbc-button {
  transition: border-color 0.25s ease, color 0.25s ease !important;
}

/* ===== FOCUS STATE HANDLING ===== */
/* Default: NO focus outline on any button */
button.scbc-button:focus-visible,
button.scbc-button:focus {
  outline: none !important;
}

/* ONLY show focus outline when button has no-border class */
button.scbc-button.no-border:focus-visible {
  outline: 3.5px solid #b3425a !important;
  outline-offset: 1px !important;
}

/* Frontend - Default: NO focus outline */
body button.scbc-button:focus-visible,
body button.scbc-button:focus,
.wp-block button.scbc-button:focus-visible,
.wp-block button.scbc-button:focus,
article button.scbc-button:focus-visible,
article button.scbc-button:focus {
  outline: none !important;
}

/* Frontend - ONLY show focus outline for no-border */
body button.scbc-button.no-border:focus-visible,
.wp-block button.scbc-button.no-border:focus-visible,
article button.scbc-button.no-border:focus-visible {
  outline: 3.5px solid #b3425a !important;
  outline-offset: 1px !important;
}