/* style.css */
/* Reset and base styles */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
html,body{height:100%;display:flex;flex-direction:column;overflow:hidden;}
/* Navbar styles */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#000;color:#fff;flex-shrink:0;}
.navbar .logo{font-size:clamp(16px,4vw,22px);font-weight:bold;color:#4CAF50;}
.navbar ul{list-style:none;display:flex;flex-wrap:wrap;gap:15px;}
.navbar ul li a{color:#fff;text-decoration:none;font-size:clamp(12px,2vw,16px);transition:0.3s;}
.navbar ul li a:hover{color:#4CAF50;}
/* Hamburger Menu styles */
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:25px;height:20px;cursor:pointer;}
.hamburger div{width:100%;height:3px;background:#fff;border-radius:2px;transition:0.3s;}
.hamburger.active div:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.active div:nth-child(2){opacity:0;}
.hamburger.active div:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
/* Hero Section styles */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:url('images/coverpic.jpg') no-repeat center center;background-size:cover;color:#fff;text-align:center;padding:20px;min-height:100vh;overflow:hidden;}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:1;}
.hero-text{position:relative;z-index:2;max-width:90%;}
.hero-text h1{font-size:clamp(22px,6vw,36px);line-height:1.2;font-weight:bold;}
.hero-text span{color:#4CAF50;}
/* Form Card styles */
.form-card{position:relative;z-index:2;background:#fff;color:#333;padding:15px;border-radius:10px;width:90%;max-width:400px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.2);}
.form-card h2{text-align:center;font-size:clamp(16px,2.5vw,20px);margin-bottom:10px;}
.tabs{display:flex;margin-bottom:10px;}
.tabs button{flex:1;padding:8px;border:2px solid #008000;cursor:pointer;font-weight:bold;font-size:clamp(12px,2vw,16px);background:#fff;color:#008000;transition:0.3s;border-radius:6px 6px 0 0;}
.tabs button:hover{background:#e8f5e9;}
.tabs button.active{background:#008000;color:#fff;font-size:clamp(14px,2.5vw,18px);}
.tab-content{padding:10px;border:2px solid #4CAF50;border-radius:0 0 10px 10px;background:#fff;display:flex;flex-direction:column;gap:8px;}
.tab-content input,.tab-content button{font-size:clamp(12px,2vw,16px);}
.tab-content input{padding:8px;border:1px solid #ccc;border-radius:5px;}
.tab-content button{padding:10px;border:none;border-radius:5px;cursor:pointer;font-weight:bold;background:#008000;color:#fff;transition:0.18s;}
.tab-content button:hover{background:#388E3C;}
/* Tracking Options styles */
.track-options{display:flex;gap:5px;margin-bottom:10px;}
.track-options button{flex:1;padding:8px;border:2px solid #4CAF50;border-radius:5px;cursor:pointer;font-weight:bold;transition:0.3s;}
.track-options button.active{background:#008000;color:#fff;}
.track-options button.inactive{background:#f0f0f0;color:#333;}
.btn-disabled{background:#ccc !important;color:#666 !important;cursor:not-allowed !important;opacity:0.6 !important;pointer-events:none !important;}
button:disabled{background:#ccc!important;color:#666!important;cursor:not-allowed!important;opacity:0.6;pointer-events:none;}
/* New: Initial styles moved from inline to here for CSP compliance */
#shipMessage, #trackMessage {
    color: green;
    margin: 5px 0;
}
#otpSectionShip, #otpSectionTrack {
    margin-top: 10px;
}
#verifyOtpShip, #verifyOtpTrack {
    margin: 5px 0;
}
#resendOtpShip, #resendOtpTrack,
#otpSectionShip, #otpSectionTrack,
#track {
    display: none;
}
/* Media Queries */
@media(max-width:480px){
 .hamburger{display:flex;}
.navbar ul{flex-direction:column;max-height:0;overflow:hidden;width:100%;}
.navbar ul.show{max-height:500px;}
.form-card{max-width:95%;padding:12px;}
.tab-content input,.tab-content button{font-size:14px;padding:10px;}
}