<div id="register" style="display:none;">
<style>
#register { animation: rgFade 0.3s ease; }
@keyframes rgFade {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

.rg-logo { text-align:center; margin-bottom:4px; }
.rg-logo img { height:60px; object-fit:contain; }

.rg-title { text-align:center; margin-bottom:14px; }
.rg-title h4 {
    font-size:18px; font-weight:900;
    color:#1a7a3a; letter-spacing:2px;
    text-transform:uppercase; margin-bottom:5px;
}
.rg-title .rg-dots {
    display:flex; align-items:center;
    justify-content:center; gap:5px;
}
.rg-title .rg-dots span {
    width:24px; height:2.5px;
    background:#1a7a3a; border-radius:3px;
}
.rg-title .rg-dots i {
    width:6px; height:6px;
    background:#d4af37; border-radius:50%;
    display:inline-block;
}

.rg-field { position:relative; margin-bottom:12px; }
.rg-field .rg-ico {
    position:absolute; left:16px; top:50%;
    transform:translateY(-50%);
    color:#bbb; font-size:14px; pointer-events:none;
}
.rg-field input,
.rg-field select {
    width:100%;
    padding:12px 16px 12px 44px;
    border:1.5px solid #e8e8e8;
    border-radius:12px;
    font-size:13px; color:#333;
    background:#fafbfc; outline:none;
    transition:all 0.25s;
    font-family:'Nunito',sans-serif;
    appearance:none; -webkit-appearance:none;
}
.rg-field input:focus,
.rg-field select:focus {
    border-color:#1a7a3a;
    background:#fff;
    box-shadow:0 0 0 3px rgba(26,122,58,0.10);
}
.rg-field input::placeholder { color:#ccc; font-size:12.5px; }

.rg-sel-arrow {
    position:absolute; right:14px; top:50%;
    transform:translateY(-50%);
    color:#bbb; font-size:11px; pointer-events:none;
}

.rg-btn {
    width:100%; padding:13px;
    background:linear-gradient(90deg, #1a7a3a, #145e2d);
    color:#fff; font-size:14px; font-weight:900;
    letter-spacing:3px; border:none;
    border-radius:12px; cursor:pointer;
    transition:all 0.3s;
    display:flex; align-items:center;
    justify-content:center; gap:9px;
    font-family:'Nunito',sans-serif;
    text-transform:uppercase; margin-bottom:14px;
}
.rg-btn:hover {
    background:linear-gradient(90deg, #145e2d, #0d3d1c);
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(26,122,58,0.40);
}

.rg-back {
    text-align:center; font-size:12.5px; color:#aaa;
    display:flex; align-items:center;
    justify-content:center; gap:10px;
}
.rg-back::before, .rg-back::after {
    content:''; flex:1; height:1px; background:#eee;
}
.rg-back a {
    color:#1a7a3a; font-weight:800;
    text-decoration:none; white-space:nowrap;
}
.rg-back a:hover { text-decoration:underline; }
</style>

<form name="rg" id="rg" method="post" action="register.php" onsubmit="return false;">

    <!-- Logo -->
    <div class="rg-logo">
        <img src="img/<?=$res_site[0]['logo'];?>" alt="logo" />
    </div>

    <!-- Title -->
    <div class="rg-title">
        <h4>Create Account</h4>
        <div class="rg-dots">
            <span></span><i></i><i></i><i></i><span></span>
        </div>
    </div>

    <!-- Shop Name -->
    <div class="rg-field">
        <i class="fas fa-store rg-ico"></i>
        <input type="text" id="reg_shop_name" name="reg_shop_name"
               placeholder="Enter Shop Name" required="required" />
    </div>

    <!-- PAN Card -->
    <div class="rg-field">
        <i class="fas fa-id-card rg-ico"></i>
        <input type="text" id="reg_pan_no" name="reg_pan_no"
               placeholder="Enter PAN Card Number (Optional)"
               style="text-transform:uppercase;" />
    </div>

    <!-- Email -->
    <div class="rg-field">
        <i class="fas fa-envelope rg-ico"></i>
        <input type="email" id="reg_email" name="reg_email"
               placeholder="Enter Email Address" required="required" />
    </div>

    <!-- Mobile -->
    <div class="rg-field">
        <i class="fas fa-mobile-alt rg-ico"></i>
        <input type="number" id="reg_mobile" name="reg_mobile"
               placeholder="Enter Mobile Number" required="required" />
    </div>

    <!-- Account Type -->
    <div class="rg-field">
        <i class="fas fa-users-cog rg-ico"></i>
        <select name="user_type" id="user_type" required="required">
            <option value="">Select Account Type</option>
            <option value="Master Distributor">Master Distributor</option>
            <option value="Distributor">Distributor</option>
            <option value="Retailer">Retailer</option>
        </select>
        <i class="fas fa-chevron-down rg-sel-arrow"></i>
    </div>

    <!-- Hidden -->
    <input type="hidden" name="updte5" id="updte5" value="1" />

    <!-- Register Button -->
    <button type="submit" name="confirm_submit" id="confirm_submit" class="rg-btn">
        <i class="fas fa-user-plus"></i> Register Now
    </button>

    <!-- Back to Login -->
    <div class="rg-back">
        <a href="#" onclick="show_login('2')">
            <i class="fas fa-arrow-left"></i> Back to Login
        </a>
    </div>

</form>
</div>
