/*==================================================
J-Tech Forms
Version:1.0.0
==================================================*/


/*==================================================
Form Group
==================================================*/

.jtr-form-group{

	margin-bottom:20px;

}


/*==================================================
Label
==================================================*/

.jtr-form-group label{

	display:block;

	margin-bottom:8px;

	font-size:14px;

	font-weight:600;

	color:var(--jtr-text);

}


/*==================================================
Inputs
==================================================*/

.jtr-form-group input,

.jtr-form-group select,

.jtr-form-group textarea{

	width:100%;

	height:52px;

	padding:0 16px;

	border:1px solid var(--jtr-border);

	border-radius:14px;

	background:#fff;

	color:var(--jtr-text);

	font-size:15px;

	transition:all .30s ease;

	outline:none;

}


/*==================================================
Textarea
==================================================*/

.jtr-form-group textarea{

	height:140px;

	padding:16px;

	resize:vertical;

}


/*==================================================
Focus
==================================================*/

.jtr-form-group input:focus,

.jtr-form-group select:focus,

.jtr-form-group textarea:focus{

	border-color:var(--jtr-primary);

	box-shadow:0 0 0 4px rgba(217,4,41,.10);

}


/*==================================================
Readonly
==================================================*/

.jtr-form-group input[readonly]{

	background:#f8fafc;

	cursor:pointer;

}


/*==================================================
Placeholder
==================================================*/

.jtr-form-group input::placeholder,

.jtr-form-group textarea::placeholder{

	color:#9ca3af;

}


/*==================================================
Promo Box
==================================================*/

.jtr-promo-box{

	display:flex;

	align-items:center;

	gap:10px;

}

.jtr-promo-box input{

	flex:1;

}


/*==================================================
Percent Buttons
==================================================*/

.jtr-percent-buttons{

	display:grid;

	grid-template-columns:repeat(4,1fr);

	gap:10px;

	margin-bottom:20px;

}

.jtr-percent-btn{

	height:44px;

	border:none;

	border-radius:12px;

	background:#fff;

	border:1px solid var(--jtr-border);

	cursor:pointer;

	font-weight:600;

	transition:.30s;

}

.jtr-percent-btn:hover{

	background:var(--jtr-primary);

	color:#fff;

	border-color:var(--jtr-primary);

}

.jtr-max-btn{

	background:#111827;

	color:#fff;

	border:none;

}

.jtr-max-btn:hover{

	background:#000;

}