/*
  Preview of the Rytinco form embed, mirroring rytinco-forms FormRenderer.svelte.
  Theme values map 1:1 to the form's formSettings:
    --rf-primary   primaryColor        --rf-bg     backgroundColor
    --rf-q         questionColor       --rf-desc   descriptionColor
    --rf-font      fontFamily          --rf-radius borderRadius
    --rf-input-bg / --rf-input-border  inputStyle (outlined | filled)
  Assumes embed mode (no page gradient or card chrome) and hidden character counters.
  Container queries stand in for the iframe's own viewport width.
*/
.rytinco-form{container-type:inline-size}
.rf{
  --rf-primary:#2563eb; --rf-bg:#ffffff; --rf-q:#1e293b; --rf-desc:#64748b;
  --rf-font:Poppins, system-ui, sans-serif; --rf-radius:8px; --rf-spacing:32px;
  --rf-input-bg:#ffffff; --rf-input-border:#e5e7eb;
  background:var(--rf-bg); font-family:var(--rf-font); padding:56px 48px 64px; color:#1e293b;
  text-align:left; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.rf.filled{--rf-input-bg:#f3f4f6; --rf-input-border:transparent}
.rf *{box-sizing:border-box}
.rf-questions{display:flex;flex-direction:column;gap:var(--rf-spacing);max-width:680px;margin:0 auto}
.rf-q{display:flex;flex-direction:column;gap:16px}
.rf-qh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rf-qt{font-weight:600;font-size:18px;color:var(--rf-q);flex:1;line-height:1.45}
.rf-req{color:#ef4444;font-weight:700;font-size:20px;line-height:1;margin-left:-4px}
.rf-input,.rf-select,.rf-textarea{
  width:100%;padding:14px 18px;border:2px solid var(--rf-input-border);border-radius:var(--rf-radius);
  font:400 16px/1.4 var(--rf-font);background:var(--rf-input-bg);color:#1e293b;
  box-shadow:0 1px 3px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.02);transition:all .18s cubic-bezier(.4,0,.2,1);margin:0
}
.rf-input::placeholder,.rf-textarea::placeholder{color:#94a3b8;opacity:.8}
.rf-input:hover,.rf-select:hover,.rf-textarea:hover{border-color:color-mix(in srgb,var(--rf-primary) 35%,#cbd5e1)}
.rf-input:focus,.rf-select:focus,.rf-textarea:focus{outline:none;border-color:var(--rf-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--rf-primary) 15%,transparent),0 4px 12px rgba(0,0,0,.08)}
.rf-select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:18px}
.rf-textarea{resize:vertical;min-height:130px;line-height:1.65}
.rf-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--rf-input-border,#e5e7eb);border-radius:var(--rf-radius);padding:28px 20px;background:var(--rf-input-bg);cursor:pointer;text-align:center;transition:all .2s ease}
.rf.filled .rf-upload{border-color:#d1d5db}
.rf-upload:hover{border-color:var(--rf-primary)}
.rf-upload svg{width:28px;height:28px}
.rf-upload input{display:none}
.rf-upload-label{font-size:15px;font-weight:500;color:#475569}
.rf-upload-hint{font-size:13px;color:#94a3b8}
.rf-submit{margin:48px auto 0;max-width:680px}
.rf-btn{padding:16px 48px;background:var(--rf-primary);color:#fff;border:0;border-radius:var(--rf-radius);font:600 16px/1.2 var(--rf-font);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px color-mix(in srgb,var(--rf-primary) 30%,transparent)}
.rf-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--rf-primary) 40%,transparent)}
.rf-footer{margin-top:24px;text-align:center}
.rf-powered{font-size:12px;color:#94a3b8;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.rf-powered img{height:16px;width:auto;opacity:.55}
.rf-note{margin:14px 0 0;font-size:13px;color:#64748b;text-align:center}
@container (max-width:768px){
  .rf{padding:32px 20px 40px}
  .rf-qt{font-size:16px}
  .rf-input,.rf-select,.rf-textarea{padding:12px 14px}
  .rf-submit{margin-top:40px}
  .rf-btn{width:100%;padding:14px 32px}
}