<style>

.upload-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.upload-card{
    width: 650px;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.upload-title{
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.upload-item{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-item label{
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

.upload-item input{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
}

.upload-item input:focus{
    outline: none;
    border-color: #0d6efd;
    background: #fff;
    box-shadow: 0 0 8px rgba(13,110,253,0.2);
}

/* Button */
.upload-btn{
    margin-top: 20px;
    width: 100%;
    padding: 12px;

    background: linear-gradient(135deg, #28a745, #218838);
    color: #fff;

    border: none;
    border-radius: 10px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.3s ease;
}

.upload-btn:hover{
    transform: translateY(-2px);
    background: linear-gradient(135deg, #218838, #1e7e34);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

</style>

<div class="upload-wrapper">

    <div class="upload-card">

        <h3 class="upload-title">
            <i class="fa fa-image"></i> Gold Category Image Upload
        </h3>

        <form action="<?= base_url('DashboardController/upload_gold_images') ?>" 
              method="post" 
              enctype="multipart/form-data">

            <div class="upload-grid">

                <div class="upload-item">
                    <label>BIS 916 Hallmark</label>
                    <input type="file" name="img_916" >
                </div>

                <div class="upload-item">
                    <label>916 KDM Machine</label>
                    <input type="file" name="img_machine" >
                </div>

                <div class="upload-item">
                    <label>916 KDM Manual</label>
                    <input type="file" name="img_manual" >
                </div>

                <div class="upload-item">
                    <label>Non KDM</label>
                    <input type="file" name="img_non_kdm" >
                </div>

            </div>

            <button type="submit" class="upload-btn">
                <i class="fa fa-upload"></i> Upload Images
            </button>

        </form>

    </div>

</div>