/* =========================================================
   SILVER TIP CUSTOMER FEEDBACK
   Frontend Styles
========================================================= */

.stcfb-wrap{
  --g:#18382b;
  --gold:#b8893c;
  --cream:#faf6ef;
  max-width:980px;
  margin:40px auto;
  padding:20px;
}

.stcfb-card{
  background:linear-gradient(180deg,#fff,var(--cream));
  border:1px solid rgba(24,56,43,.14);
  border-radius:22px;
  padding:46px;
  box-shadow:0 18px 55px rgba(24,56,43,.08);
}

.stcfb-head{
  text-align:center;
  margin-bottom:30px;
}

.stcfb-eyebrow{
  color:var(--gold);
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
}

.stcfb-head h2{
  margin:10px 0;
  color:var(--g);
  font-family:"Cormorant Garamond","Playfair Display",serif;
  font-size:42px;
  line-height:1.05;
}

.stcfb-head p{
  margin:0;
  color:#657069;
}

.stcfb-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.stcfb-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.stcfb-field label{
  font-size:13px;
  font-weight:700;
  color:var(--g);
}

.stcfb-field label span{
  font-weight:500;
  color:#89918c;
}

.stcfb-field label b{
  color:var(--gold);
}

.stcfb-field input:not([type=radio]):not([type=checkbox]),
.stcfb-field select,
.stcfb-field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d9ddd8;
  border-radius:10px;
  background:#fff;
  color:#26342e;
  padding:13px 14px;
  font:inherit;
  outline:0;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.stcfb-field textarea{
  resize:vertical;
  min-height:130px;
}

.stcfb-field input:focus,
.stcfb-field select:focus,
.stcfb-field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,137,60,.12);
}

.stcfb-full{
  grid-column:1/-1;
}


/* =========================================================
   STAR RATING — FIXED
   DOM order: 1, 2, 3, 4, 5
   Visual order: 1, 2, 3, 4, 5
========================================================= */

.stcfb-stars{
  display:flex;
  flex-direction:row;
  direction:ltr;
  justify-content:flex-start;
  align-items:center;
  gap:5px;
  height:46px;
}

.stcfb-stars input{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
}

.stcfb-stars label{
  display:block;
  margin:0;
  padding:0;
  color:#d5d8d3 !important;
  font-size:31px;
  line-height:1;
  cursor:pointer;
  transition:color .18s ease,transform .18s ease;
}

/* 1 Star */
.stcfb-stars:has(input[value="1"]:checked) label:nth-of-type(-n+1){
  color:var(--gold) !important;
}

/* 2 Stars */
.stcfb-stars:has(input[value="2"]:checked) label:nth-of-type(-n+2){
  color:var(--gold) !important;
}

/* 3 Stars */
.stcfb-stars:has(input[value="3"]:checked) label:nth-of-type(-n+3){
  color:var(--gold) !important;
}

/* 4 Stars */
.stcfb-stars:has(input[value="4"]:checked) label:nth-of-type(-n+4){
  color:var(--gold) !important;
}

/* 5 Stars */
.stcfb-stars:has(input[value="5"]:checked) label:nth-of-type(-n+5){
  color:var(--gold) !important;
}

/* Hover preview */
.stcfb-stars label:hover{
  color:var(--gold) !important;
  transform:scale(1.08);
}


/* =========================================================
   CONSENT
========================================================= */

.stcfb-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:22px 0;
  color:#626d66;
  font-size:13px;
  line-height:1.5;
}

.stcfb-consent input{
  margin-top:3px;
  accent-color:var(--g);
}


/* =========================================================
   SUBMIT
========================================================= */

.stcfb-submit{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:999px;
  background:var(--g);
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(24,56,43,.20);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.stcfb-submit span{
  margin-left:8px;
  color:#e2c98f;
}

.stcfb-submit:hover{
  background:#102c21;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(24,56,43,.25);
}


/* =========================================================
   SUCCESS
========================================================= */

.stcfb-success{
  margin-bottom:18px;
  padding:15px 18px;
  border:1px solid rgba(184,137,60,.35);
  background:var(--cream);
  color:var(--g);
  border-radius:12px;
  text-align:center;
  font-weight:700;
}


/* =========================================================
   HONEYPOT
========================================================= */

.stcfb-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .stcfb-card{
    padding:38px 30px;
  }

  .stcfb-head h2{
    font-size:38px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

  .stcfb-wrap{
    padding:10px;
    margin:20px auto;
  }

  .stcfb-card{
    padding:28px 20px;
    border-radius:16px;
  }

  .stcfb-head{
    margin-bottom:25px;
  }

  .stcfb-head h2{
    font-size:34px;
  }

  .stcfb-head p{
    font-size:14px;
    line-height:1.6;
  }

  .stcfb-grid{
    grid-template-columns:1fr;
    gap:17px;
  }

  .stcfb-full{
    grid-column:auto;
  }

  .stcfb-stars{
    height:44px;
    gap:4px;
  }

  .stcfb-stars label{
    font-size:29px;
  }

  .stcfb-submit{
    min-height:52px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){

  .stcfb-card{
    padding:24px 16px;
  }

  .stcfb-head h2{
    font-size:30px;
  }

  .stcfb-stars label{
    font-size:27px;
  }

}