/* Opsional: sesuaikan nilai warna sesuai theme kamu */
:root{
  --green-primary: #4CB944;  
  --green-secondary: #3c9136;
  --black-primary: #111827;  
  --blue-primary:  #5BCEF8;   
}


.chip{
  display: flex;                
  align-items: center;         
  gap: 0.5rem;                  
  padding: 0.375rem 0.75rem;     
  border-radius: 9999px;        
  border: 1px solid var(--green-primary); 
  background-color: #fff;       
  color: var(--black-primary);   
  transition: all 150ms cubic-bezier(0.4,0,0.2,1); 
  width: fit-content;           
}


.chip:hover{
  background-color: var(--green-primary);
  color: #fff;
}


.chip:focus-within{
  box-shadow: 0 0 0 2px var(--blue-primary);
  outline: none;
  border: 1px solid var(--green-primary); 
}

.peer:checked + .chip,
.peer:checked ~ .chip{
  background-color: var(--green-primary);
  color: #fff;
}

.btn-pill{
  display: flex;                
  align-items: center;          
  justify-content: center;     
  padding-top: 0.7rem;         
  padding-bottom: 0.7rem;
  padding-left: 1.7rem;         
  padding-right: 1.7rem;
  background-color: var(--green-primary); 
  color: #fff;                
  font-size: 0.75rem;                   
  text-align: center;           
  width: 100%;
  max-width: 115px;           
  border-radius: 9999px;       
  font-weight: 700;              
  cursor: pointer;              
  transition: 
    transform 300ms cubic-bezier(0.4,0,0.2,1),
    background-color 300ms cubic-bezier(0.4,0,0.2,1),
    color 300ms cubic-bezier(0.4,0,0.2,1); 
}

.btn-pill:hover{
  background-color: var(--green-secondary);
  transform: scale(1.05);                   
}

.recap-section-header{
  font-size: 14px;
  font-weight: 600;
}

.recap-field-label{
  font-size: 14px;
  font-weight: 600;
}

.recap-field-value{
  font-size: 14px;
  font-weight: 400;
}
.wp-block-post-title{
  display: none;
}

#step1-circle{
  max-width: 140px;
}
.input-control:focus {
  border-color: var(--blue-primary) !important; 
  outline: none !important;
}

/* Loader Animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Button States */
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

button:disabled:hover {
  transform: none !important;
  background-color: var(--green-primary) !important;
}

button[type="button"],
button[type="submit"] {
  transition: all 0.3s ease;
  position: relative;
}

/* Loader Container */
.loader-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


#form3 button[type="submit"] {
  min-width: 200px;
  max-width: 100%;
  white-space: nowrap;
}


.opacity-50 {
  opacity: 0.5 !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}


.form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

.form-overlay-hidden {
  display: none;
}


.submitting {
  user-select: none;
  pointer-events: none;
}


.ring-2 {
  box-shadow: 0 0 0 2px currentColor;
}

.ring-red-400 {
  --tw-ring-color: #f87171;
  color: #f87171;
}

.ring-offset-2 {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tw-ring-color);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #form3 button[type="submit"] {
    min-width: 180px;
    font-size: 0.7rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  
  .loader-container {
    gap: 6px;
  }
  
  .loader-container svg {
    width: 16px;
    height: 16px;
  }
}