/* schedule page form styling (paste at the END of your current CSS) */

/* fix gold button hover (your current .btn:hover turns green) */
.btn:hover,
input[type="submit"]:hover{
  background:linear-gradient(180deg,#ffd76a,#ffb347);
  color:#111;
}

/* schedule form wrapper */
.PRFXdm{
  margin:0;
  display:block;
  width:100%;
}

.PRFXdm label{
  display:block;
  margin:0 0 12px;
}

.PRFXdm label > span{
  display:block;
  font-size:13px;
  color:var(--muted);
  font-weight:900;
  margin:0 0 6px;
}

/* inputs inside schedule form */
.PRFXdm input[type="text"],
.PRFXdm input[type="email"],
.PRFXdm input[type="tel"],
.PRFXdm select,
.PRFXdm textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  background:#fff;
  color:var(--text);
  box-shadow:none;
}

.PRFXdm textarea{
  min-height:130px;
  resize:vertical;
}

/* nicer select */
.PRFXdm select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    100% 0;
  background-size:5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat:no-repeat;
  padding-right:40px;
}

/* responsive 2-column layout for fields on desktop */
.PRFXdm{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}

/* make these full width */
.PRFXdm label:has(textarea),
.PRFXdm label:has(select),
.PRFXdm label:nth-last-child(3),
.PRFXdm label:nth-last-child(2),
.PRFXdm label:nth-last-child(1){
  grid-column:1 / -1;
}

/* if :has is not supported, force common long fields full width by name */
.PRFXdm label:has(textarea),
.PRFXdm label:has(select){grid-column:1 / -1}
.PRFXdm label textarea,
.PRFXdm label select{grid-column:1 / -1}

/* submit area */
.PRFXdm label[for="PRFXqload"]{
  display:inline-block;
  cursor:pointer;
}

/* hide the weird nested label spacing */
.PRFXdm label > label{display:inline-block;margin:0}

/* submit button inside form */
#PRFXqload{
  border:none;
  background:linear-gradient(180deg,var(--gold1),var(--gold2));
  color:#111;
  border:2px solid var(--gold3);
  border-radius:12px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 3px 0 #b7791f, 0 8px 18px rgba(0,0,0,.18);
}

#PRFXqload:hover{
  background:linear-gradient(180deg,#ffd76a,#ffb347);
  transform:translateY(-1px);
  box-shadow:0 4px 0 #b7791f, 0 12px 22px rgba(0,0,0,.22);
}

#PRFXqload:active{
  transform:translateY(1px);
  box-shadow:0 2px 0 #b7791f, 0 6px 14px rgba(0,0,0,.18);
}

/* progress bar */
#PRFXbar{
  margin-top:10px;
  width:100%;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f3f4f6;
  overflow:hidden;
}

#PRFXprgbar{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold2),var(--gold1));
}

/* bottom send/cancel buttons */
.PRFXtxtc{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:14px;
}

.PRFXbtnprm{
  border:none;
  background:linear-gradient(180deg,var(--gold1),var(--gold2));
  color:#111;
  border:2px solid var(--gold3);
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 3px 0 #b7791f, 0 8px 18px rgba(0,0,0,.18);
}

.PRFXbtnprm:hover{
  background:linear-gradient(180deg,#ffd76a,#ffb347);
  transform:translateY(-1px);
}

.PRFXbtnprm:active{
  transform:translateY(1px);
}

/* make schedule page header space tighter */
.main-content .content-placeholder{
  border:0;
  padding:0;
  background:transparent;
}

/* mobile */
@media (max-width: 720px){
  .PRFXdm{grid-template-columns:1fr}
  .PRFXtxtc{justify-content:stretch}
  .PRFXbtnprm{width:100%}
}
