/* ======================================================
   SCOPE WRAPPER  (WAJIB ada class="sqfr-scope" di parent)
====================================================== */

/* GRID LAYOUT */
.sqfr-scope .sqfr-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  margin-bottom:28px;
}

@media(max-width:768px){
  .sqfr-scope .sqfr-grid{
    grid-template-columns:1fr;
  }
}


/* ======================================================
   INPUT & SELECT STYLE
====================================================== */

.sqfr-scope .sqfr-input,
.sqfr-scope .sqfr-select{

  width:90%;

  background:transparent;
  border:none;
  outline:none;
  box-shadow:none;
  border-radius:0;

  color:#ffffff;
  font-size:16px;

  padding:14px 0;

  border-bottom:1px dashed #ffffff59;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  transition:.25s ease;
}

/* Focus underline */
.sqfr-scope .sqfr-input:focus,
.sqfr-scope .sqfr-select:focus{
  border-bottom:1px solid #ffffff;
}

/* Placeholder */
.sqfr-scope .sqfr-input::placeholder{
  color:#ffffffcc;
}


/* SELECT STATE COLOR */
.sqfr-scope .sqfr-select:invalid{
  color:#ffffffcc;
}

.sqfr-scope .sqfr-select:valid{
  color:#ffffff;
}

/* Browser dropdown fallback */
.sqfr-scope .sqfr-select option{
  color:#000;
  background:#fff;
}


/* Button spacing */
.sqfr-scope .sqfr-submit{
  margin-top:12px;
}



/* ======================================================
   CUSTOM DROPDOWN
====================================================== */

.sqfr-dropdown{
  width:90%;
  position:relative;
  cursor:pointer;
}

/* Trigger */
.sqfr-dd-trigger{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:14px 0;

  color:#ffffffcc;
  font-size:16px;

  border-bottom:1px dashed #ffffff59;
  transition:.3s ease;
}

/* Arrow */
.sqfr-dd-arrow{
  font-size:12px;
  transition:.3s ease;
}

/* Active State */
.sqfr-dropdown.active .sqfr-dd-trigger{
  border-bottom:1px solid #ffffff;
}

.sqfr-dropdown.active .sqfr-dd-arrow{
  transform:rotate(180deg);
}


/* Dropdown Menu */
.sqfr-dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:110%;

  background:#ffffff;

  overflow:hidden;

  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;

  transition:
    opacity .35s cubic-bezier(.22,1,.36,1),
    transform .35s cubic-bezier(.22,1,.36,1);

  z-index:9999;
}

/* Active animation */
.sqfr-dropdown.active .sqfr-dd-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}


/* Option Item */
.sqfr-dd-option{
  padding:12px 16px;
  color:#000;
  font-size:15px;
  transition:.15s ease;
}

.sqfr-dd-option:hover{
  background:#f1f1f1;
}



/* ======================================================
   INITIAL FADE-UP ANIMATION
====================================================== */

.sqfr-scope .sqfr-grid,
.sqfr-scope .sqfr-input,
.sqfr-scope .sqfr-select,
.sqfr-scope .sqfr-dropdown{
  opacity:0;
  transform:translateY(30px);
}

/* Loaded State Triggered by JS */
.sqfr-loaded .sqfr-grid,
.sqfr-loaded .sqfr-input,
.sqfr-loaded .sqfr-select,
.sqfr-loaded .sqfr-dropdown{

  opacity:1;
  transform:translateY(0);

  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
}

/* Stagger appearance */
.sqfr-loaded .sqfr-input:nth-child(1){transition-delay:.05s}
.sqfr-loaded .sqfr-input:nth-child(2){transition-delay:.1s}
.sqfr-loaded .sqfr-input:nth-child(3){transition-delay:.15s}
.sqfr-loaded .sqfr-input:nth-child(4){transition-delay:.2s}

.sqfr-loaded .sqfr-dropdown{
  transition-delay:.15s;
}