:root{
  --panel:#EAEAE9; --bg:#EAEAE9; /* #f4f4f4 */ --border:#ddd; --text:#2F3539; --muted:#666;
  --accent:#d52b2b; --accent-hover:#b82424; --input-bg:#F4F4F4;
  --border-radius:7px; --shadow:1px 2px 4px 0px rgba(143, 137, 143, 1);
}

*{box-sizing:border-box}

body{
  margin:0; 
  background:var(--bg); 
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; 
  color:var(--text);
  line-height:1.5;
}

.wrap{
  max-width:100%; 
  margin:auto; 
  background:var(--panel); 
  border:0; 
  border-radius:var(--border-radius); 
  padding:20px;
  text-align:left;
  color:var(--text);
  font:200 12px/14px Helvetica, Arial, sans-serif;
  letter-spacing:0;
}

h2{
  margin:0 0 16px; 
  font-size:18px; 
  font-weight:700; 
  color:var(--text);
  text-align:left;
}

.field{
  margin-bottom:12px;
}

.field label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
}

input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%; 
  padding:12px; 
  border:0; 
  border-radius:4px; 
  background:var(--input-bg); 
  font:200 15px/32px Helvetica, Arial, sans-serif;
  color:#666666;
  letter-spacing:0;
  text-align:left;
  box-shadow:0px 0px 0px 0px rgba(143, 137, 143, 1);
  transition:all 0.2s ease;
}

input:focus, textarea:focus{
  outline:none; 
  background:var(--input-bg);
}

textarea{
  min-height:80px; 
  resize:vertical;
  font:200 15px/32px Helvetica, Arial, sans-serif;
}

.checkbox-group{
  margin:12px 0;
}

.check{
  display:flex; 
  gap:10px; 
  align-items:flex-start; 
  margin:10px 0; 
  font-size:13px; 
  line-height:1.35;
}

.check input[type="checkbox"]{
  margin:0;
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:2px;
}

.check a{
  color:var(--accent);
  text-decoration:underline;
}

.check a:hover{
  text-decoration:none;
}

.btn{
  width:100%; 
  border:0; 
  background:var(--accent); 
  color:#fff; 
  padding:16px 20px; 
  border-radius:var(--border-radius); 
  font-weight:700; 
  font-size:16px;
  cursor:pointer;
  transition:background-color 0.2s ease;
  font-family:inherit;
}

.btn:hover{
  background:var(--accent-hover);
}

.btn:disabled{
  background:#ccc;
  cursor:not-allowed;
}

.err{
  display:none; 
  color:#d32f2f; 
  font-size:12px; 
  margin-top:6px;
  font-weight:500;
}

.ok{
  display:none; 
  color:#2e7d32; 
  font-size:14px; 
  margin-top:12px;
  text-align:center;
  padding:12px;
  background:#e8f5e8;
  border-radius:var(--border-radius);
}

.legal-text{
  font-size:12px; 
  color:var(--muted); 
  line-height:1.4;
  margin:12px 0;
}

.legal-container{
  border:0;
  border-radius:4px;
  padding:10px;
  background:var(--input-bg);
  height:120px;
  overflow-y:auto;
  font:200 12px/14px Helvetica, Arial, sans-serif;
  color:#666666;
  white-space:pre-wrap;
  margin:12px 0;
  box-shadow:0px 0px 0px 0px rgba(143, 137, 143, 1);
}

.legal-container::-webkit-scrollbar{
  width:6px;
}

.legal-container::-webkit-scrollbar-track{
  background:#f1f1f1;
  border-radius:3px;
}

.legal-container::-webkit-scrollbar-thumb{
  background:#c1c1c1;
  border-radius:3px;
}

.legal-container::-webkit-scrollbar-thumb:hover{
  background:#a8a8a8;
}

.recaptcha-container{
  margin:12px 0;
  display:flex;
  justify-content:center;
}

.g-recaptcha{
  transform:scale(0.9);
  transform-origin:center;
}

.loading{
  display:none;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin:12px 0;
}

.loading.show{
  display:block;
}

/* Iframe optimizations */
@media (max-width: 480px) {
  .wrap{
    margin:0;
    border-radius:0;
    padding:20px;
  }
}

/* Focus styles for accessibility */
/* .check input[type="checkbox"]:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
} */

/* Error state */
.field.error input,
.field.error textarea{
  border-color:#d32f2f;
  background:#ffebee;
}

/* Iframe specific styles */
.iframe-mode {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.iframe-mode .wrap {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Responsive improvements for iframe */
@media (max-width: 400px) {
  .wrap {
    padding: 15px;
  }
  
  h2 {
    font-size: 16px;
  }
  
  .btn {
    padding: 14px 16px;
    font-size: 15px;
  }
}