:root{
--vf-bg:#0a0a0a;
--vf-text:#ffffff;
--vf-gold-dark:#7d5a00;
--vf-gold:#d4af37;
--vf-gold-light:#ffd700;
--vf-gold-bright:#fff6b7;
--vf-radius:22px;
}
.vfqcc-widget{
position:fixed;
right:18px;
bottom:18px;
z-index:999999;
font-family:inherit;
}
.vfqcc-toggle{
display:flex;
align-items:center;
gap:12px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
padding:12px 16px;
background:linear-gradient(180deg,#111,#070707);
color:#fff;
box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
cursor:pointer;
min-width:250px;
}
.vfqcc-logo{
width:44px;
height:44px;
border-radius:50%;
display:grid;
place-items:center;
font-weight:800;
letter-spacing:.08em;
color:#111;
background:linear-gradient(135deg,var(--vf-gold-dark),var(--vf-gold),var(--vf-gold-light),var(--vf-gold-bright));
box-shadow:0 10px 25px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.65);
}
.vfqcc-toggle-text strong,
.vfqcc-toggle-text small{
display:block;
text-align:left;
}
.vfqcc-toggle-text strong{font-size:14px; line-height:1.2;}
.vfqcc-toggle-text small{font-size:12px; opacity:.75; margin-top:2px;}
.vfqcc-panel{
position:absolute;
right:0;
bottom:74px;
width:min(390px, calc(100vw - 24px));
border-radius:28px;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,#121212,#090909);
color:#fff;
box-shadow:0 25px 80px rgba(0,0,0,.45);
}
.vfqcc-header{
display:flex;
justify-content:space-between;
gap:12px;
padding:20px 20px 16px;
background:
radial-gradient(circle at top right, rgba(212,175,55,.2), transparent 35%),
linear-gradient(180deg,#151515,#0c0c0c);
border-bottom:1px solid rgba(255,255,255,.08);
}
.vfqcc-header h3{margin:0; font-size:20px; color:#fff;}
.vfqcc-header p{margin:5px 0 0; color:rgba(255,255,255,.72); font-size:13px;}
.vfqcc-close{
appearance:none; border:none; background:rgba(255,255,255,.08); color:#fff;
width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:22px; line-height:1;
}
.vfqcc-form{padding:18px; display:grid; gap:14px;}
.vfqcc-form label span{display:block; font-size:13px; color:rgba(255,255,255,.82); margin-bottom:7px;}
.vfqcc-form input[type="text"],
.vfqcc-form textarea,
.vfqcc-form input[type="file"]{
width:100%;
border-radius:18px;
border:1px solid rgba(255,255,255,.12);
background:#121212;
color:#fff;
padding:14px 15px;
box-sizing:border-box;
}
.vfqcc-form textarea{resize:vertical; min-height:120px;}
.vfqcc-file-wrap input[type="file"]{
padding:10px;
background:#101010;
}
.vfqcc-preview{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:12px;
}
.vfqcc-preview span{display:block; font-size:12px; color:rgba(255,255,255,.75); margin-bottom:8px;}
.vfqcc-preview-box img{max-width:100%; border-radius:14px; display:block;}
.vfqcc-file-pill{
display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
background:rgba(212,175,55,.12); color:#fff;
}
.vfqcc-consent{display:flex; align-items:flex-start; gap:10px;}
.vfqcc-consent input{margin-top:4px;}
.vfqcc-consent span{margin:0 !important; font-size:12px !important; color:rgba(255,255,255,.74) !important;}
.vfqcc-submit{
border:none;
border-radius:999px;
padding:15px 18px;
font-weight:700;
cursor:pointer;
color:#111;
background:linear-gradient(135deg,var(--vf-gold-dark),var(--vf-gold),var(--vf-gold-light),var(--vf-gold-bright));
box-shadow:0 12px 30px rgba(212,175,55,.24), inset 0 1px 0 rgba(255,255,255,.65);
}
.vfqcc-response{font-size:13px; min-height:20px;}
.vfqcc-response.is-success{color:#cce8a1;}
.vfqcc-response.is-error{color:#ffb4b4;}
.vfqcc-response.is-pending{color:#f1daa0;}
@media (max-width: 640px){
.vfqcc-widget{right:12px; left:12px; bottom:12px;}
.vfqcc-toggle{width:100%; min-width:0; justify-content:flex-start;}
.vfqcc-panel{right:0; left:0; width:auto; bottom:78px;}
}
@media (prefers-reduced-motion: reduce){
.vfqcc-toggle, .vfqcc-submit, .vfqcc-panel{transition:none !important;}
}