/*──────────────────────────────────────────────────────────────
   DSTRC  Simple  Forms   –  Premium UI Pack  (v2.0)
   полностью namespaced через  .dsf-form
──────────────────────────────────────────────────────────────*/

/* ====== RESET внутри блока =================================*/
.dsf-form, .dsf-form *{
	box-sizing:border-box;
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
}
.dsf-form input,
.dsf-form textarea,
.dsf-form button{
	-webkit-appearance:none;
	outline:none;
	border:none;
	background:none;
}

/* ====== БАЗОВАЯ СЕТКА ======================================*/
.dsf-form{
	max-width:640px;width:100%;margin:1.4rem auto;
	display:block;padding:2rem 2.2rem;
	border-radius:14px;
	font-size:15.5px;line-height:1.45;color:#222;
}
@media(max-width:480px){
	.dsf-form{padding:1.4rem 1rem;font-size:15px}
}
.dsf-form input[type=text],
.dsf-form input[type=email],
.dsf-form textarea{
	display:block;width:100%;
	padding:14px 16px;margin:0 0 20px;
	border-radius:12px;font-size:1rem;line-height:1.4;
	transition:all .25s ease;
}
.dsf-form textarea{min-height:120px;resize:vertical}

.dsf-form .dsf-captcha{
	display:flex;align-items:center;gap:10px;
	margin:0 0 20px;font-size:1.05rem
}
.dsf-form .dsf-captcha input{width:120px;text-align:center;margin:0}

.dsf-form button{
	display:block;width:100%;padding:15px 18px;
	font-weight:700;text-transform:uppercase;letter-spacing:.5px;
	border-radius:12px;cursor:pointer;
	transition:background .2s,transform .1s,box-shadow .2s;
}
.dsf-form button:active{transform:translateY(1px) scale(.98)}

/*============================================================
  1.  G L A S S   C A R D   (default)
============================================================*/
.template-default{
	background:rgba(255,255,255,.88);
	box-shadow:0 10px 32px rgba(0,0,0,.08);
	backdrop-filter:saturate(150%) blur(3px);
}
.template-default input,
.template-default textarea{
	background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.12);
	box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.template-default input:focus,
.template-default textarea:focus{
	border-color:#845ef7;box-shadow:0 0 0 3px rgba(132,94,247,.25);
}
.template-default button{
	background:#845ef7;color:#fff;
	box-shadow:0 6px 18px rgba(132,94,247,.3);
}
.template-default button:hover{background:#7950f2}

/*============================================================
  2.  O C E A N   W A V E   (blue)
============================================================*/
.template-blue{
	background:linear-gradient(135deg,#d0f1ff 0%,#f5fcff 100%);
	border:1px solid #bde7ff;
}
.template-blue input,
.template-blue textarea{
	background:#fff;border:1px solid #90d4ff
}
.template-blue input:focus,
.template-blue textarea:focus{
	border-color:#1e88e5;box-shadow:0 0 0 3px rgba(30,136,229,.25);
}
.template-blue button{
	background:linear-gradient(135deg,#42a5f5 0%,#1e88e5 100%);
	color:#fff;
	box-shadow:0 6px 18px rgba(30,136,229,.35);
}
.template-blue button:hover{
	background:linear-gradient(135deg,#3295ef 0%,#1976d2 100%);
}

/*============================================================
  3.  N E U M O R P H   M I N T  (green)
============================================================*/
.template-green{
	background:#e8fdf0;
	box-shadow:9px 9px 18px #dfece4,
	           -9px -9px 18px #f1ffff;
}
.template-green input,
.template-green textarea{
	background:#e8fdf0;border:1px solid #cae8d6;
	box-shadow:inset 4px 4px 8px #d2e6d8,
	           inset -4px -4px 8px #f6fff8;
}
.template-green input:focus,
.template-green textarea:focus{
	border-color:#43a047;box-shadow:0 0 0 3px rgba(67,160,71,.25);
}
.template-green button{
	background:linear-gradient(135deg,#66bb6a 0%,#43a047 100%);
	color:#fff;
	box-shadow:0 6px 18px rgba(67,160,71,.3);
}
.template-green button:hover{
	background:linear-gradient(135deg,#5aaa5b 0%,#388e3c 100%);
}

/*============================================================
  4.  C Y B E R   N I G H T  (dark)
============================================================*/
.template-dark{
	background:rgba(27,27,27,.85);color:#e0e0e0;
	box-shadow:0 12px 32px rgba(0,0,0,.65);
	backdrop-filter:none;
}
.template-dark input,
.template-dark textarea{
	background:rgba(0,0,0,.25);
	border:1px solid #555;color:#eee;
}
.template-dark input:focus,
.template-dark textarea:focus{
	border-color:#00bcd4;box-shadow:0 0 0 3px rgba(0,188,212,.25);
}
.template-dark .dsf-captcha span{color:#b2ebf2}
.template-dark button{
	background:linear-gradient(135deg,#00bcd4 0%,#0097a7 100%);
	color:#fff;
	box-shadow:0 6px 20px rgba(0,188,212,.45);
}
.template-dark button:hover{
	background:linear-gradient(135deg,#00acc1 0%,#00838f 100%);
}

/*============================================================
  5.  M I N I M A L   S T R O K E  (outline)
============================================================*/
.template-outline{
	background:transparent;
	border:1px solid rgba(0,0,0,.25);
	box-shadow:none
}
.template-outline input,
.template-outline textarea{
	background:transparent;border:1px solid rgba(0,0,0,.35);
}
.template-outline input:focus,
.template-outline textarea:focus{
	border-color:#333;box-shadow:0 0 0 2px rgba(0,0,0,.2);
}
.template-outline .dsf-captcha span{font-weight:600}
.template-outline button{
	background:none;color:#111;border:2px solid currentColor;
}
.template-outline button:hover{
	background:#f0f0f0
}
