/* ==========================
   CREATE BATCH
========================== */

:root{
--primary:#2a7fff;
--primary-dark:#185bd8;

--bg:#f6f8fc;
--card:#ffffff;

--text:#1d2433;
--muted:#6b7280;

--border:#e4e7ee;

--radius:22px;

--shadow:
0 18px 45px
rgba(0,0,0,.08);
}


*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

font-family:
Inter,
sans-serif;

background:
var(--bg);

color:
var(--text);

padding:
40px;

}


.batch__container{

max-width:
900px;

margin:
0 auto;

}


.page-title{

font-size:
2rem;

font-weight:
700;

margin-bottom:
10px;

}


.page-sub{

color:
var(--muted);

margin-bottom:
40px;

}


.batch-card{

background:
var(--card);

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

border-radius:
var(--radius);

padding:
40px;

box-shadow:
var(--shadow);

}


.batch-form{

display:grid;

gap:22px;

}


.form-group{

display:flex;

flex-direction:column;

gap:8px;

}


label{

font-size:.95rem;

font-weight:600;

}


input,
select,
textarea{

width:100%;

padding:
15px 18px;

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

border-radius:
14px;

font-size:
1rem;

background:
white;

transition:
.2s;

}


input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:
var(--primary);

box-shadow:
0 0 0 4px
rgba(42,127,255,.12);

}


textarea{

resize:vertical;

min-height:
120px;

}


.row{

display:grid;

grid-template-columns:
1fr 1fr;

gap:18px;

}


.btn-create{

border:none;

cursor:pointer;

padding:
16px;

border-radius:
16px;

font-size:
1rem;

font-weight:
700;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:white;

transition:
.25s;

}


.btn-create:hover{

transform:
translateY(-2px);

}


.btn-create:active{

transform:
translateY(0);

}


.success{

display:none;

padding:
16px;

background:
#eafaf0;

color:
#1f7a42;

border-radius:
14px;

font-weight:
600;

}


@media(
max-width:768px
){

body{

padding:20px;

}

.batch-card{

padding:24px;

}

.row{

grid-template-columns:
1fr;

}

.page-title{

font-size:
1.6rem;

}

}

.batch__back{display:inline-flex;margin-bottom:24px;color:var(--primary);font-weight:600;}
.batch-card h1{margin-bottom:8px;}
.batch-card > p{color:var(--muted);margin-bottom:28px;}
#batchForm{display:grid;gap:22px;}
#batchForm label{display:flex;flex-direction:column;gap:8px;}
#batchForm label.checkbox{flex-direction:row;align-items:center;font-weight:500;}
#batchForm label.checkbox input{width:auto;}