/* ==========================================
   OFFBEAT Parcel Management
   form.css
   ========================================== */

/* Page Header */

.page-header{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

}

.back-btn{

    width:48px;

    height:48px;

    border-radius:16px;

    background:#ffffff;

    color:#222;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.back-btn:hover{

    transform:translateY(-3px);

}

.back-btn i{

    font-size:18px;

}

/* Form */

#parcelForm{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* Card */

.form-card{

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:22px;

    padding:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    animation:fadeUp .6s ease;

}

.form-card h3{

    display:flex;

    align-items:center;

    gap:10px;

    color:#222;

    font-size:18px;

    margin-bottom:18px;

}

.form-card h3 i{

    color:var(--primary);

}

/* Inputs */

.form-card input,

.form-card select,

.form-card textarea{

    margin-bottom:14px;

}

.form-card textarea{

    resize:none;

}

/* Two Columns */

.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

}

/* Readonly */

input[readonly]{

    background:#f2f2f2;

    color:#555;

    font-weight:600;

}

/* Placeholder */

input::placeholder,

textarea::placeholder{

    color:#999;

}

/* Select */

select{

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 15px center;

    background-size:15px;

}

/* Button Group */

.button-group{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:8px;

}

/* Buttons */

.button-group button{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    height:54px;

    font-size:15px;

}

.primary-btn{

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

    color:#fff;

    box-shadow:0 10px 25px rgba(255,107,53,.25);

}

.primary-btn:hover{

    transform:translateY(-3px);

}

.secondary-btn{

    background:#ffffff;

    color:#333;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.secondary-btn:hover{

    transform:translateY(-3px);

}

/* Input Focus */

input:focus,

textarea:focus,

select:focus{

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

    box-shadow:0 0 0 4px rgba(255,107,53,.12);

}

/* Required */

input:required:invalid{

    border-color:#ececec;

}

/* Small Fade Animation */

.form-card{

    transition:.35s;

}

.form-card:hover{

    transform:translateY(-4px);

}

/* Mobile */

@media (max-width:390px){

    .form-card{

        padding:18px;

    }

    .two-column{

        grid-template-columns:1fr;

    }

    .button-group button{

        height:52px;

    }

}