:root {
  --optive-bg: #f0f7f9;
  --optive-surface: #ffffff;
  --optive-tone: #0284c7;
  --optive-tone-hover: #0369a1;
  --optive-ink: #0f172a;
  --optive-gradient: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Radio buttons control */
.optive-radio-toggle {
  display: none !important;
}

/* Gallery Slides logic */
.optive-slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

#gal-1:checked ~ .optive-gallery-viewport .slide-1,
#gal-2:checked ~ .optive-gallery-viewport .slide-2,
#gal-3:checked ~ .optive-gallery-viewport .slide-3,
#gal-4:checked ~ .optive-gallery-viewport .slide-4 {
  opacity: 1;
  pointer-events: auto;
}

/* Thumbnails Active State */
.optive-thumb-btn {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.optive-thumb-btn:hover {
  opacity: 0.9;
}

#gal-1:checked ~ .optive-gallery-viewport .thumb-1,
#gal-2:checked ~ .optive-gallery-viewport .thumb-2,
#gal-3:checked ~ .optive-gallery-viewport .thumb-3,
#gal-4:checked ~ .optive-gallery-viewport .thumb-4 {
  border-color: var(--optive-tone);
  opacity: 1;
  transform: translateY(-2px);
}

/* Hover effect on CTA Button */
.optive-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45) !important;
  background: linear-gradient(135deg, #0369a1 0%, #0f766e 100%) !important;
}

/* Desktop layout adjustment */
@media (min-width: 768px) {
  .optive-layout-split {
    flex-direction: row !important;
    align-items: flex-start;
  }

  .optive-media-zone {
    width: 45% !important;
    position: sticky;
    top: 1rem;
  }

  .optive-content-zone {
    width: 55% !important;
  }
}