/* ===========================
   SF24 Refill UI – v1.1.0
   "Safe" CSS that overrides themes (Elementor/WP) reliably
   =========================== */

.sf24-refill-shell, 
.sf24-refill-shell *{
  box-sizing: border-box !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
}

.sf24-refill-shell{
  max-width: 680px !important;
  margin: 40px auto !important;
  padding: 16px !important;
  color: #15111b !important;
}

/* Card */
.sf24-refill-card{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 22px !important;
  padding: 26px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.12) !important;
  position: relative !important;
  overflow: hidden !important;
}

.sf24-refill-card:before{
  content:"" !important;
  position:absolute !important;
  left:-80px !important;
  top:-120px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle at 30% 30%, rgba(85,30,112,.25), transparent 60%) !important;
  pointer-events:none !important;
}
.sf24-refill-card:after{
  content:"" !important;
  position:absolute !important;
  right:-120px !important;
  bottom:-140px !important;
  width: 360px !important;
  height: 360px !important;
  background: radial-gradient(circle at 60% 50%, rgba(237,196,50,.20), transparent 60%) !important;
  pointer-events:none !important;
}

/* Titles */
.sf24-refill-title{
  margin: 0 0 10px !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.3px !important;
  color: #0e0b12 !important;
}
.sf24-section-title{
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  color: #0e0b12 !important;
}
.sf24-refill-sub{
  margin: 0 0 16px !important;
  color: rgba(14,11,18,.70) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Divider */
.sf24-divider{
  height: 1px !important;
  background: rgba(0,0,0,.10) !important;
  margin: 22px 0 !important;
}

/* Labels */
.sf24-label{
  display: block !important;
  margin: 12px 0 8px !important;
  font-weight: 800 !important;
  color: rgba(14,11,18,.90) !important;
  font-size: 14px !important;
}

/* Inputs */
.sf24-input{
  display: block !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: #f6f6fb !important;
  color: #0e0b12 !important;
  outline: none !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.sf24-input::placeholder{
  color: rgba(14,11,18,.42) !important;
}

.sf24-input:focus{
  border-color: rgba(237,196,50,.85) !important;
  box-shadow: 0 0 0 4px rgba(237,196,50,.22) !important;
}

/* Buttons */
.sf24-btn{
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  border: 0 !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #551E70, #7a2fb2, #551E70) !important;
  box-shadow: 0 16px 34px rgba(85,30,112,.22) !important;
  text-align: center !important;
}

.sf24-btn:hover{ filter: brightness(1.02) !important; transform: translateY(-1px) !important; }
.sf24-btn:active{ transform: translateY(0) !important; filter: brightness(.98) !important; }
.sf24-btn:disabled{ opacity:.65 !important; cursor:not-allowed !important; transform:none !important; }

/* Secondary */
.sf24-btn-secondary{
  background: linear-gradient(90deg, #1b1b23, #2c2c38) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
}

/* Message boxes */
.sf24-msg{
  display: block !important;
  margin-top: 14px !important;
  padding: 14px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #f7f7fb !important;
  color: #0e0b12 !important;
  font-size: 14px !important;
}

.sf24-msg.ok{
  border-color: rgba(237,196,50,.75) !important;
  background: rgba(237,196,50,.16) !important;
}
.sf24-msg.err{
  border-color: rgba(230,90,90,.55) !important;
  background: rgba(230,90,90,.12) !important;
}

/* Refill ID card */
.sf24-refillid-box{
  margin-top: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px dashed rgba(85,30,112,.35) !important;
  background: rgba(85,30,112,.05) !important;
}

.sf24-refillid-title{
  font-weight: 900 !important;
  margin-bottom: 10px !important;
  color: #0e0b12 !important;
}

.sf24-refillid-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.sf24-refillid-val{
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #551E70 !important;
}

.sf24-copy-btn{
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  background: linear-gradient(90deg, #EDC432, #ffda63) !important;
  color: #24122f !important;
  font-weight: 950 !important;
  font-size: 13px !important;
  min-width: 84px !important;
  text-align:center !important;
  box-shadow: 0 14px 30px rgba(237,196,50,.20) !important;
}
.sf24-copy-btn:hover{ filter: brightness(1.02) !important; transform: translateY(-1px) !important; }
.sf24-copy-btn:active{ transform: translateY(0) !important; }

/* Refill status box */
.sf24-status-box{
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(0,0,0,.10) !important;
}
.sf24-status-title{
  font-weight: 900 !important;
  margin-bottom: 10px !important;
  color: #0e0b12 !important;
}
.sf24-kv{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 12px !important;
  font-size: 14px !important;
}
.sf24-kv-row span{ color: rgba(14,11,18,.60) !important; }
@media (max-width: 560px){
  .sf24-kv{ grid-template-columns: 1fr !important; }
  .sf24-refill-card{ padding: 20px !important; }
}


/* Auto status polling UI */
.sf24-inline{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top: 10px !important;
}
.sf24-spinner{
  width:16px !important;
  height:16px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(0,0,0,.18) !important;
  border-top-color: #551E70 !important;
  animation: sf24spin 1s linear infinite !important;
}
@keyframes sf24spin{ to { transform: rotate(360deg); } }
.sf24-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.04) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
}
.sf24-pill.awaiting{
  border-color: rgba(237,196,50,.60) !important;
  background: rgba(237,196,50,.18) !important;
}
.sf24-pill.ok{
  border-color: rgba(0,160,70,.35) !important;
  background: rgba(0,160,70,.10) !important;
}
.sf24-pill.err{
  border-color: rgba(230,90,90,.35) !important;
  background: rgba(230,90,90,.10) !important;
}