/* =====================================================
   ReviewStar Pro — Frontend Form Styles v1.1
   Emmelab - https://www.emmelab.it/
   ===================================================== */
.rsp-wrap *{box-sizing:border-box;margin:0;padding:0}
.rsp-wrap{
  /* defaults — overridden by inline style from PHP */
  --or:#F1821E;--ord:#d96f10;
  --ink:#1a1a1a;--mut:#69727d;
  --ln:#e2e2e2;--bg:#f4f5f8;--wh:#fff;--err:#c0392b;
  --rad:12px;
  font-family:"Ubuntu",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;
  width:100%;max-width:680px;margin:0 auto;
  padding:clamp(20px,5vw,48px) clamp(12px,4vw,32px);
}
.rsp-wrap h2,.rsp-wrap h3{font-family:inherit;line-height:1.2}
.rsp-wrap p{margin:0}

/* ---- HEADER ---- */
.rsp-header{margin-bottom:24px}
.rsp-title{
  font-size:clamp(22px,5vw,34px);font-weight:700;margin-bottom:6px;
  background:linear-gradient(135deg,var(--ink) 60%,var(--or));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.rsp-subtitle{color:var(--mut);font-size:15px}

/* ---- ALERT ---- */
.rsp-alert-error{
  background:#fff0ef;border:1px solid #f5b8b8;color:var(--err);
  border-radius:8px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:16px;
  animation:rsp-shake .35s ease;
}
@keyframes rsp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---- CARD ---- */
.rsp-card{
  background:var(--wh);border-radius:var(--rad);border:1.5px solid var(--ln);
  padding:18px 20px;margin-bottom:12px;
  transition:border-color .2s,box-shadow .2s;
  animation:rsp-fadein .3s ease both;
}
.rsp-card:focus-within{border-color:var(--or);box-shadow:0 0 0 3px color-mix(in srgb,var(--or) 20%,transparent)}
.rsp-card.rsp-invalid{border-color:var(--err)!important;background:#fff8f8;animation:rsp-shake .35s ease}
@keyframes rsp-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- LABEL ---- */
.rsp-lbl{display:block;font-weight:700;font-size:15px;margin-bottom:10px;color:var(--ink)}
.rsp-req{color:var(--err);margin-left:3px}
.rsp-err-msg{display:none;font-size:12.5px;color:var(--err);font-weight:600;margin-top:8px}
.rsp-invalid .rsp-err-msg{display:block}

/* ---- TEXT / TEXTAREA INPUTS ---- */
.rsp-card input[type="text"],
.rsp-card input[type="email"],
.rsp-card textarea{
  width:100%;border:0;border-bottom:1.5px solid var(--ln);background:transparent;
  font-family:inherit;font-size:15px;color:var(--ink);
  padding:8px 0;outline:none;resize:vertical;
  transition:border-color .2s;
}
.rsp-card input[type="text"]:focus,
.rsp-card input[type="email"]:focus,
.rsp-card textarea:focus{border-bottom-color:var(--or)}
.rsp-card input::placeholder,.rsp-card textarea::placeholder{color:#bbb}

/* =====================================================
   STELLE INTERATTIVE — row-reverse trick
   ===================================================== */
.rsp-stars-wrap{
  display:flex;flex-direction:row-reverse;
  justify-content:flex-end;gap:2px;
  padding:4px 0 2px;flex-wrap:nowrap;
}
.rsp-stars-wrap input[type="radio"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.rsp-stars-wrap label{
  font-size:clamp(30px,8vw,42px);cursor:pointer;color:#ddd;
  transition:color .1s,transform .15s,filter .1s;
  line-height:1;user-select:none;-webkit-user-select:none;
  display:block;touch-action:manipulation;
}
.rsp-stars-wrap label:hover,
.rsp-stars-wrap label:hover ~ label{
  color:var(--or);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--or) 60%,transparent));
}
.rsp-stars-wrap input:checked ~ label{color:var(--or)}
.rsp-stars-wrap input:checked + label{
  animation:rsp-star-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rsp-star-pop{
  0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1.1)}
}

.rsp-stars-hint{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--mut);margin-top:4px;
}

/* =====================================================
   RADIO OPTIONS (canale)
   ===================================================== */
.rsp-radio-list{display:flex;flex-direction:column;gap:8px;padding:2px 0}
.rsp-radio-opt{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1.5px solid var(--ln);border-radius:8px;padding:12px 14px;
  font-size:15px;font-weight:500;
  transition:border-color .15s,background .15s,transform .1s;
}
.rsp-radio-opt:hover{border-color:var(--or);background:#fff8f2}
.rsp-radio-opt:active{transform:scale(.99)}
.rsp-radio-opt input[type="radio"]{display:none}
.rsp-radio-circle{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--ln);
  flex:0 0 20px;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s;position:relative;
}
.rsp-radio-opt:has(input:checked){border-color:var(--or);background:#fff8f2}
.rsp-radio-opt:has(input:checked) .rsp-radio-circle{border-color:var(--or)}
.rsp-radio-opt:has(input:checked) .rsp-radio-circle::after{
  content:'';width:10px;height:10px;border-radius:50%;background:var(--or);
  display:block;
  animation:rsp-dot-in .2s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rsp-dot-in{from{transform:scale(0)}to{transform:scale(1)}}

/* =====================================================
   SUBMIT BUTTON
   ===================================================== */
.rsp-submit-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:var(--or);color:#fff;border:none;border-radius:var(--rad);
  padding:15px 28px;font-family:inherit;font-size:17px;font-weight:700;
  cursor:pointer;margin-top:8px;position:relative;overflow:hidden;
  transition:background .15s,transform .1s,box-shadow .15s;
  box-shadow:0 4px 16px color-mix(in srgb,var(--or) 50%,transparent);
  -webkit-tap-highlight-color:transparent;
}
.rsp-submit-btn:hover{background:var(--ord)}
.rsp-submit-btn:active{transform:scale(.98)}
.rsp-submit-btn.rsp-loading{pointer-events:none}
.rsp-submit-btn.rsp-loading .rsp-btn-txt{opacity:0}
.rsp-submit-btn.rsp-loading .rsp-btn-spinner{display:block}

.rsp-btn-spinner{
  display:none;width:22px;height:22px;
  border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:rsp-spin .7s linear infinite;position:absolute;
}
@keyframes rsp-spin{to{transform:rotate(360deg)}}

/* =====================================================
   PRIVACY CHECKBOX CARD
   ===================================================== */
.rsp-privacy-card{background:var(--wh)}
.rsp-privacy-label{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;
}
.rsp-privacy-check-wrap{flex:0 0 22px;padding-top:2px;position:relative}
.rsp-privacy-check-wrap input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
.rsp-custom-check{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;border:2px solid var(--ln);
  background:var(--wh);transition:border-color .15s,background .15s;
  flex-shrink:0;
}
.rsp-privacy-check-wrap input:checked + .rsp-custom-check{
  background:var(--or);border-color:var(--or);
}
.rsp-privacy-check-wrap input:checked + .rsp-custom-check::after{
  content:'';display:block;width:5px;height:9px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}
.rsp-privacy-text{
  font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:400;
}
.rsp-privacy-text strong{color:var(--err)}
.rsp-privacy-text a{color:var(--or);text-decoration:underline}
.rsp-privacy-text a:hover{color:var(--ord)}
.rsp-invalid.rsp-privacy-card .rsp-custom-check{border-color:var(--err)}

@media(max-width:400px){
  .rsp-privacy-text{font-size:12.5px}
}

/* =====================================================
   THANK YOU STATE
   ===================================================== */
.rsp-form-inner{transition:opacity .3s,transform .3s}
.rsp-form-inner.rsp-fade-out{opacity:0;transform:translateY(-10px)}

.rsp-thankyou{
  display:none;text-align:center;background:var(--wh);
  border-radius:var(--rad);border:1.5px solid var(--ln);
  padding:clamp(28px,6vw,56px) clamp(16px,4vw,32px);
}
.rsp-thankyou.rsp-visible{display:block;animation:rsp-fadein .45s ease both}

.rsp-ty-icon{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,#fff1e3,#ffe0c0);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  animation:rsp-icon-bounce .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.rsp-ty-icon svg{width:36px;height:36px;stroke:var(--or)}
@keyframes rsp-icon-bounce{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

.rsp-ty-stars{font-size:32px;margin-bottom:14px;letter-spacing:3px}
.rsp-ty-stars span{display:inline-block;color:var(--or)}
.rsp-ty-stars span:nth-child(1){animation:rsp-star-fall .4s ease .20s both}
.rsp-ty-stars span:nth-child(2){animation:rsp-star-fall .4s ease .35s both}
.rsp-ty-stars span:nth-child(3){animation:rsp-star-fall .4s ease .50s both}
.rsp-ty-stars span:nth-child(4){animation:rsp-star-fall .4s ease .65s both}
.rsp-ty-stars span:nth-child(5){animation:rsp-star-fall .4s ease .80s both}
@keyframes rsp-star-fall{from{transform:translateY(-20px) scale(0);opacity:0}to{transform:none;opacity:1}}

.rsp-ty-msg{font-size:clamp(18px,4vw,26px);font-weight:700;margin-bottom:10px;text-align:center!important;width:100%}
.rsp-ty-sub{color:var(--mut);font-size:15px;max-width:400px;margin:0 auto;text-align:center!important;display:block}
.rsp-thankyou *{text-align:center}

/* =====================================================
   BREAKPOINTS — full responsive
   ===================================================== */
@media (max-width:640px){
  .rsp-wrap{padding:20px 14px}
  .rsp-card{padding:15px 14px}
  .rsp-stars-wrap{gap:1px}
  .rsp-stars-wrap label{font-size:clamp(28px,9vw,38px)}
  .rsp-radio-opt{padding:11px 12px;font-size:14px}
  .rsp-submit-btn{font-size:16px;padding:14px 20px}
  .rsp-lbl{font-size:14px}
}

@media (max-width:400px){
  .rsp-wrap{padding:16px 10px}
  .rsp-card{padding:13px 12px;border-radius:8px}
  .rsp-stars-wrap label{font-size:clamp(26px,10vw,34px)}
  .rsp-submit-btn{font-size:15px;padding:13px 16px;border-radius:8px}
  .rsp-title{font-size:clamp(19px,6vw,24px)}
}