/* ==========================================================================
   Rekik Design (rekikdesign.et) - Interactive Components & Micro-Interactions
   ========================================================================== */

/* 1. Spatial 3D / Canvas Studio */
.spatial-studio-wrapper {
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.mat-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #d6d3cd;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mat-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.mat-btn.active {
  background: var(--accent-gold);
  color: #121110;
  border-color: var(--accent-gold);
  font-weight: 700;
}

.light-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.light-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.light-btn.active {
  border-color: var(--accent-gold);
  background: rgba(229, 169, 60, 0.15);
}

/* 2. Before / After Reveal Slider */
.slider-handle-line {
  transition: box-shadow 0.2s ease;
}

.slider-handle-line:hover,
.slider-handle-line:active {
  box-shadow: 0 0 20px rgba(255, 255, 255, 1);
}

.handle-knob {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/* 3. Floorplan CAD Blueprint Explorer */
.zone-node {
  transition: all 0.3s ease;
}

.zone-node:hover .zone-path {
  fill: rgba(229, 169, 60, 0.18);
  stroke: var(--accent-gold);
}

.fp-quick-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. Configurator Range Slider Styling */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #141312;
  box-shadow: 0 0 10px rgba(229, 169, 60, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--accent-gold-light);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid #141312;
  cursor: pointer;
}

/* 5. Project Dossier Modal Glass Backdrop */
#project-dossier-modal,
#booking-modal {
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

/* 6. Form Inputs */
.luxury-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.luxury-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 2px rgba(229, 169, 60, 0.2);
  background: rgba(0, 0, 0, 0.6);
}

/* 7. Pulse Ring Animation */
@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 169, 60, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(229, 169, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 169, 60, 0);
  }
}

.pulse-ring {
  animation: ringPulse 2s infinite;
}