/* ==========================================
        NEW DEX INDUSTRY - ACCOUNT PAGES
========================================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#faf9f6;
    color:#333;
}

header{
    position:sticky;
    top:0;
    z-index:999;
    background:#14532d;
    box-shadow:0 5px 20px rgba(0,0,0,.12);
}

.navbar{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo img{width:180px;}

.nav-links{display:flex;gap:35px;list-style:none;}
.nav-links a{color:#fff;text-decoration:none;font-size:17px;transition:.3s;}
.nav-links a:hover{color:#d4af37;}

/* AUTH BOX */

.auth-section{
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 20px;
}

.auth-box{
    background:#fff;
    width:100%;
    max-width:450px;
    padding:45px 35px;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.auth-tabs{
    display:flex;
    margin-bottom:30px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #eee;
}

.auth-tabs button{
    flex:1;
    padding:14px;
    border:none;
    background:#f5f5f5;
    color:#555;
    font-weight:600;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition:.3s;
}

.auth-tabs button.active{
    background:#14532d;
    color:#fff;
}

.auth-form{display:none;flex-direction:column;gap:12px;}
.auth-form.active{display:flex;}

.auth-form input{
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    outline:none;
    font-family:'Poppins',sans-serif;
    width:100%;
    box-sizing:border-box;
}

.auth-form input:focus{border-color:#14532d;}
.auth-form input.field-error{border-color:#dc3545!important;background:#fdecea;}

/* FIX: password box + eye icon was overflowing slightly past the
   card edge on some mobile browsers (Chrome autofill highlight). */
.password-wrapper{
    position:relative;
    display:flex;
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:10px;
}

.password-wrapper input{
    flex:1;
    width:100%;
    min-width:0;
    padding-right:45px;
    box-sizing:border-box;
    border-radius:10px;
}

.toggle-password{
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:45px;
    background:none;
    border:none;
    cursor:pointer;
    font-size:18px;
    color:#888;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.toggle-password:hover{color:#14532d;}

.auth-form button[type="submit"]{
    margin-top:10px;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#14532d;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.auth-form button[type="submit"]:hover{background:#d4af37;color:#14532d;}

.auth-msg{
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:15px;
    font-size:14px;
    display:none;
}

.auth-msg.error{background:#fdecea;color:#b02a37;display:block;}
.auth-msg.success{background:#e7f8ee;color:#14532d;display:block;}

/* ===========================
   DANGER ALERT (IP Blocked / Too many failed attempts)
=========================== */

.auth-msg.danger{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fdecea;
    color:#611a15;
    border:1px solid #f44336;
    border-left:5px solid #d32f2f;
    padding:14px 18px;
    border-radius:8px;
    font-weight:600;
    font-size:15px;
    animation: dangerPulse 1.2s ease-in-out infinite, dangerShake .4s ease;
}

.auth-msg.danger::before{
    content:"⚠️";
    font-size:20px;
}

@keyframes dangerPulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(211,47,47,.35); }
    50%{ box-shadow:0 0 0 8px rgba(211,47,47,0); }
}

@keyframes dangerShake{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-6px); }
    50%{ transform:translateX(6px); }
    75%{ transform:translateX(-3px); }
    100%{ transform:translateX(0); }
}

/* MY ORDERS PAGE */

.orders-section{
    width:90%;
    max-width:900px;
    margin:60px auto;
}

.orders-section h1{color:#14532d;margin-bottom:30px;}

.order-card{
    background:#fff;
    border-radius:16px;
    padding:25px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.order-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:15px;
    padding-bottom:15px;
    border-bottom:1px solid #eee;
}

.order-card-header h3{color:#14532d;}

.order-status-badge{
    padding:6px 15px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.status-placed{background:#e7f0fd;color:#0d6efd;}
.status-confirmed{background:#eef2ff;color:#6366f1;}
.status-shipped{background:#fff4e5;color:#e67e22;}
.status-out_for_delivery{background:#fff0f6;color:#c2185b;}
.status-delivered{background:#e7f8ee;color:#198754;}
.status-cancelled{background:#fdecea;color:#b02a37;}

/* ORDER TRACKING TIMELINE */

.tracking-steps{
    display:flex;
    align-items:flex-start;
    margin:20px 0 25px;
    padding:10px 0;
}

.tracking-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 auto;
    width:70px;
}

.tracking-circle{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
    transition:.3s;
}

.tracking-circle.done{
    background:#14532d;
    color:#fff;
}

.tracking-circle.current{
    background:#d4af37;
    color:#fff;
    box-shadow:0 0 0 4px rgba(212,175,55,.25);
}

.tracking-circle.pending{
    background:#eee;
    color:#999;
}

.tracking-label{
    font-size:11px;
    color:#999;
    text-align:center;
    margin-top:6px;
    line-height:1.3;
}

.tracking-label.active-label{
    color:#14532d;
    font-weight:600;
}

.tracking-date{
    font-size:10px;
    color:#aaa;
    text-align:center;
    margin-top:2px;
    line-height:1.3;
    min-height:13px;
}

.tracking-line{
    flex:1 1 auto;
    height:3px;
    margin-top:14px;
    background:#eee;
    border-radius:2px;
}

.tracking-line.done{
    background:#14532d;
}

.tracking-cancelled{
    background:#fdecea;
    color:#b02a37;
    padding:12px 18px;
    border-radius:10px;
    font-weight:600;
    margin:20px 0 25px;
}

.tracking-id-box{
    background:#f7fbf7;
    border:1px dashed #14532d;
    color:#14532d;
    padding:12px 18px;
    border-radius:10px;
    font-size:14px;
    margin-bottom:20px;
}

.track-india-post-btn{
    margin-top:8px;
    background:#14532d;
    color:#fff;
    border:none;
    padding:8px 16px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.track-india-post-btn:hover{
    background:#d4af37;
    color:#14532d;
}

/* BOOKED AT / DESTINATION ROUTE LINE */

.route-line{
    display:flex;
    align-items:flex-start;
    margin:5px 0 25px;
    padding:15px 5px 5px;
    border-top:1px dashed #eee;
}

.route-point{
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:0 0 auto;
    width:110px;
}

.route-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    border:3px solid #ccc;
    background:#fff;
    flex-shrink:0;
}

.route-dot.done{
    border-color:#14532d;
    background:#14532d;
}

.route-icon{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#f7fbf7;
    border:2px solid #14532d;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex-shrink:0;
}

.route-connector{
    flex:1 1 auto;
    height:2px;
    background:#e5e5e5;
    margin-top:8px;
}

.route-connector.done{
    background:#14532d;
}

.route-label{
    font-size:11px;
    color:#999;
    text-align:center;
    margin-top:8px;
}

.route-label.bold{
    color:#14532d;
    font-weight:600;
    font-size:12px;
}

.route-sublabel{
    font-size:12px;
    color:#333;
    font-weight:600;
    text-align:center;
    margin-top:2px;
}

@media(max-width:600px){

    .route-point{
        width:75px;
    }

    .route-label{
        font-size:9.5px;
    }

    .route-sublabel{
        font-size:10px;
    }

    .route-icon{
        width:28px;
        height:28px;
        font-size:13px;
    }

}

@media(max-width:600px){

    .tracking-step{
        width:50px;
    }

    .tracking-label{
        font-size:9.5px;
    }

    .tracking-date{
        font-size:8.5px;
    }

    .tracking-circle{
        width:24px;
        height:24px;
        font-size:11px;
    }

}

.order-item-row{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    color:#555;
    font-size:15px;
}

.order-items-label{
    font-size:13px;
    font-weight:700;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:15px 0 5px;
}

.delivery-details-box{
    background:#f7fbf7;
    border-radius:10px;
    padding:14px 18px;
    margin-bottom:15px;
}

.delivery-details-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:5px 0;
    font-size:14px;
    color:#333;
}

.delivery-details-row span:first-child{
    font-weight:600;
    color:#14532d;
    flex-shrink:0;
}

.delivery-details-row span:last-child{
    text-align:right;
}

.order-total-row{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid #eee;
    font-weight:700;
    color:#14532d;
    font-size:17px;
}

/* MY PROFILE PAGE */

/* YOUR ACCOUNT HUB (3-box page) */

.account-hub-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.account-hub-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid #eee;
    border-radius:14px;
    padding:25px;
    text-decoration:none;
    color:inherit;
    transition:.25s;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.account-hub-card:hover{
    box-shadow:0 10px 25px rgba(0,0,0,.1);
    border-color:#14532d;
    transform:translateY(-3px);
}

.account-hub-icon{
    font-size:32px;
    flex-shrink:0;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f0f7f1;
    border-radius:12px;
}

.account-hub-card h3{
    color:#14532d;
    margin-bottom:4px;
    font-size:18px;
}

.account-hub-card p{
    color:#777;
    font-size:14px;
    margin:0;
}

.profile-section{
    width:90%;
    max-width:650px;
    margin:60px auto;
}

.profile-section h1{color:#14532d;}

.profile-box{
    background:#fff;
    border-radius:20px;
    padding:40px 35px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.profile-photo-wrap{
    position:relative;
    width:130px;
    height:130px;
    margin:0 auto;
}

.profile-photo-wrap img{
    width:130px;
    height:130px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #f0ede5;
    display:block;
}

.photo-edit-btn{
    position:absolute;
    bottom:0;
    right:0;
    background:#14532d;
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:7px 10px;
    border-radius:20px;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.photo-edit-btn:hover{background:#d4af37;color:#14532d;}

.photo-hint{
    text-align:center;
    font-size:13px;
    color:#888;
    margin-top:-6px;
    margin-bottom:6px;
}

.profile-field{display:flex;flex-direction:column;gap:6px;}

.profile-field label{
    font-size:14px;
    font-weight:600;
    color:#14532d;
}

.profile-field input,
.profile-field textarea{
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    outline:none;
    font-family:'Poppins',sans-serif;
    resize:vertical;
}

.profile-field input:focus,
.profile-field textarea:focus{border-color:#14532d;}

#saveProfileBtn{
    margin-top:10px;
    padding:14px;
    border:none;
    border-radius:10px;
    background:#14532d;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

#saveProfileBtn:hover{background:#d4af37;color:#14532d;}
#saveProfileBtn:disabled{opacity:.7;cursor:not-allowed;}

/* FOOTER */
footer{background:#14532d;color:#fff;margin-top:80px;}
.footer-container{
    width:90%;max-width:1400px;margin:auto;
    display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding:70px 0;
}
.footer-logo img{width:180px;margin-bottom:20px;}
.footer-logo p{color:#ddd;line-height:1.8;}
.footer-links{display:flex;flex-direction:column;}
.footer-links h3,.footer-contact h3{color:#d4af37;margin-bottom:20px;font-size:22px;}
.footer-links a{color:#ddd;text-decoration:none;margin-bottom:12px;transition:.3s;}
.footer-links a:hover{color:#d4af37;padding-left:8px;}
.footer-contact p{color:#ddd;margin-bottom:12px;line-height:1.8;}
.copyright{text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,.15);color:#ccc;}

@media(max-width:768px){
    .nav-links{flex-wrap:wrap;justify-content:center;gap:15px;}
    .auth-box{padding:30px 22px;}
    .footer-container{grid-template-columns:1fr;text-align:center;}
    .footer-links{align-items:center;}
}

/* Hamburger (reuse pattern) */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;cursor:pointer;z-index:1001;}
.menu-toggle span{width:30px;height:3px;background:#fff;border-radius:2px;transition:.3s;}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px);}
@media(max-width:992px){
    .navbar{position:relative;}
    .menu-toggle{display:flex;}
    .nav-links{position:absolute;top:100%;left:0;width:100%;background:#14532d;flex-direction:column;align-items:center;gap:0;max-height:0;overflow:hidden;transition:.4s;}
    .nav-links.active{max-height:500px;padding:15px 0;box-shadow:0 15px 25px rgba(0,0,0,.2);}
    .nav-links li{width:100%;text-align:center;}
    .nav-links a{display:block;padding:14px 0;}
}

/* ===========================
   ACCOUNT NAV DROPDOWN (name + logout, top-right of navbar)
=========================== */

.account-nav-item{ position:relative; }

.account-dropdown-menu{
    display:none;
    position:absolute;
    top:130%;
    right:0;
    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    min-width:190px;
    overflow:hidden;
    z-index:999;
}

.account-dropdown-menu.open{ display:block; }

.account-dropdown-toggle{
    background:none;
    border:none;
    cursor:pointer;
    color:#fff;
    font-size:22px;
    padding:4px 6px;
    line-height:1;
}

.account-dropdown-menu a,
.account-dropdown-menu button{
    display:block;
    width:100%;
    text-align:left;
    padding:12px 18px;
    font-size:14px;
    font-weight:600;
    color:#14532d;
    text-decoration:none;
    background:none;
    border:none;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
}

.account-dropdown-menu a:hover,
.account-dropdown-menu button:hover{ background:#f0ede5; }

.account-dropdown-menu .logout-item{
    color:#dc3545;
    border-top:1px solid #eee;
}

/* FIX: on mobile, the hamburger's .nav-links has overflow:hidden (needed for
   the slide-down animation), which was clipping the absolutely-positioned
   dropdown so "Logout" never showed. On mobile, drop the absolute positioning
   and let it sit inline in the normal flow instead. */
@media(max-width:992px){
    .account-dropdown-menu{
        display:none;
        position:static;
        box-shadow:none;
        min-width:auto;
        background:transparent;
        border-radius:0;
        margin-top:6px;
    }
    .account-dropdown-menu.open{ display:block; }
    .account-dropdown-menu a,
    .account-dropdown-menu button{
        text-align:center;
        color:#fff;
    }
    .account-dropdown-menu .logout-item{
        color:#ffb3b3;
        border-top:1px solid rgba(255,255,255,.2);
    }
    .account-dropdown-menu a:hover,
    .account-dropdown-menu button:hover{ background:rgba(255,255,255,.08); }
}