/* Insunorm GH — order form (iframe). Seam color must match landing iframe container: #EEE7F7 */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#EEE7F7}
body{
  font-family:"Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#2A2140;
  -webkit-text-size-adjust:100%;
}
.content{
  max-width:560px;
  margin:0 auto;
  padding:22px 18px 26px;
}
.order-card{
  background:#FFFFFF;
  border:1px solid #E2D6F2;
  border-radius:22px;
  padding:22px 20px;
  box-shadow:0 18px 44px -28px rgba(61,26,102,.45);
}
.order-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.order-head__media{
  flex:0 0 auto;
  width:84px;
  height:166px;
  background:radial-gradient(120% 80% at 50% 18%, #F4ECFB 0%, #EADFF6 55%, #E2D3F2 100%);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.order-head__media img{display:block;width:auto;height:150px}
.order-head__txt{flex:1 1 auto;min-width:0}
.form-title,
.form-title span,
.form-title .psevdonim_i{
  color:#3D1A66 !important;
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:800 !important;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.01em;
}
.form-sub{
  margin-top:6px;
  color:#6A5C86;
  font-size:14.5px;
  font-weight:500;
}
.price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  margin-top:12px;
  padding:7px 14px;
  background:#F3ECFB;
  border:1px solid #E2D6F2;
  border-radius:999px;
}
.price-pill b{color:#3D1A66;font-family:"Cairo",sans-serif;font-weight:800;font-size:19px}
.price-pill span{color:#6A5C86;font-size:13px;font-weight:500}

.field{margin-top:14px}
.field label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:500;
  color:#4A3D6B;
}
.field input{
  width:100%;
  height:52px;
  border:1.5px solid #DCCFEE;
  border-radius:13px;
  background:#FBF8FF;
  color:#2A2140;
  font-family:inherit;
  font-size:16px;
  font-weight:500;
  padding:0 16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder{color:#A99CC2;font-weight:400}
.field input:focus{
  outline:none;
  border-color:#5B2E91;
  background:#fff;
  box-shadow:0 0 0 4px rgba(91,46,145,.14);
}
.field.has-error input{
  border-color:#C8245C;
  background:#FFF4F8;
  box-shadow:0 0 0 4px rgba(200,36,92,.12);
}
/* validator message — in document flow, under the field, never absolute */
.field-error{
  display:none;
  margin-top:6px;
  color:#C8245C;
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
}
.field.has-error .field-error{display:block}

.submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:58px;
  margin-top:20px;
  border:0;
  cursor:pointer;
  border-radius:14px;
  background:linear-gradient(135deg,#6A2FA6 0%,#5B2E91 48%,#E84A8A 165%);
  color:#fff;
  font-family:"Cairo",sans-serif;
  font-weight:800;
  font-size:18px;
  text-transform:none;
  box-shadow:0 16px 32px -14px rgba(91,46,145,.7);
  transition:transform .15s,box-shadow .2s,filter .2s;
}
.submit-btn:hover{filter:brightness(1.05);box-shadow:0 18px 36px -12px rgba(91,46,145,.8)}
.submit-btn:active{transform:translateY(1px)}
.submit-btn .drop{
  width:14px;height:18px;flex:0 0 auto;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M7 0C7 0 0 8 0 12.2A7 7 0 0 0 14 12.2C14 8 7 0 7 0Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'><path d='M7 0C7 0 0 8 0 12.2A7 7 0 0 0 14 12.2C14 8 7 0 7 0Z'/></svg>") center/contain no-repeat;
  opacity:.92;
}

.form-foot{
  margin-top:16px;
  text-align:center;
  color:#8A7CA6;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
}

@media (max-width:380px){
  .content{padding:18px 14px 22px}
  .order-card{padding:18px 15px;border-radius:18px}
  .order-head{gap:12px}
  .order-head__media{width:72px;height:140px}
  .order-head__media img{height:126px}
  .form-title{font-size:21px}
}
