/* Custom styles for GR Services Pricing Calculator */

/* Step Content Styling */
.step {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}

.step.active-step {
  display: block;
}

.bg-gr-gradient{
  background-image: linear-gradient(45deg, var( --e-global-color-primary ) 0%, var( --e-global-color-secondary ) 100%);
  /*box-shadow: 1px 1px 10px 2px rgba(0,0,0,0.5);*/
  border-radius: 20px 20px 20px 20px;
  color: var(--e-global-color-accent);
}

.font-color-text{
  color: var(--e-global-color-text);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Option Buttons (Steps 1, 2, 3) */
.option-btn {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.2s ease-in-out;
}

.option-btn h3 {
    font-size: 1.3rem;
}

/* Service Selection Checkboxes (Step 5, 6, 7) */
/* Style the label which acts as a button */
label.btn {
    text-align: left;
    font-weight: normal;
}
/* Modern CSS to style the label when the checkbox inside it is checked */
label.btn input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
}


/* General layout and icons */
.wpc-total-price {
  font-size: 2.5rem;
  font-weight: 700;
}

.transition-all {
  transition: all 0.3s ease-in-out;
}

/* Feather Icons sizing */
.w-4, .h-4 { width: 1rem; height: 1rem; }
.w-5, .h-5 { width: 1.25rem; height: 1.25rem; }
.w-8, .h-8 { width: 2rem; height: 2rem; }
.me-2 { margin-right: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-1 { margin-top: 0.25rem !important; }

.rounded-xl { border-radius: .75rem; }
.shadow-xl { box-shadow: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -2px rgba(0,0,0,.05); }

/* Spacing utility from example */
.space-y-8 > *:not([hidden]) ~ *:not([hidden]) {
    margin-top: 2rem;
}

.wpc-hidden {
  display: none !important;
}