/* =========================================
   1. TYPOGRAPHY IMPORT 
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================================
   2. ZEROBI BRAND VARIABLES 
   ========================================= */
:root {
    --brand-blue: rgb(0, 191, 255); 
    --brand-dark: #000000;  /* PURE BLACK */     
    --brand-yellow: #ffd814;     
    --text-main: #1a1a1a;
    --text-muted: #565959;
    --white: #ffffff;
    --gray-bg: #f4f6f8; /* Premium Light Grey Background */
    --price-red: #b12704;
}

/* =========================================
   3. GLOBAL RESET & LAYOUT
   ========================================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    background-color: var(--gray-bg);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
}

*, *::before, *::after {
    box-sizing: inherit;
    font-family: 'Poppins', sans-serif;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; padding: 0; margin: 0; }
button, input, select, textarea { font-family: 'Poppins', sans-serif; }

/* Forces middle section to grow, pushing footer down */
.container, .admin-container, .detail-page-wrapper, .orders-container, .profile-container, .page-container, .checkout-wrapper, .cart-page-wrapper, .profile-wrapper, .orders-wrapper {
    flex: 1;
    width: 100%;
}

/* =========================================
   4. HEADER STYLES (Main Store Header)
   ========================================= */
.main-header {
    background: var(--brand-dark); /* Pure Black */
    color: var(--white);
    padding: 5px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    height: 60px;
    display: flex;
    align-items: center;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}

/* LOGO */
.logo {
    flex: 0 0 auto;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.logo a {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-blue) !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Tagline */
.header-tagline {
    font-size: 12px;
    font-weight: 400;
    color: #ccc;
    border-left: 1px solid #555;
    padding-left: 10px;
    margin-left: 10px;
    display: inline-block;
}

/* SEARCH BAR */
.search-container {
    flex: 1;
    max-width: 600px;
    margin: 0 20px;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    height: 38px;
    padding: 0 15px;
    border-radius: 4px 0 0 4px;
    border: none;
    outline: none;
    font-size: 14px;
}

.search-btn {
    width: 45px;
    height: 38px;
    background-color: var(--brand-blue);
    color: var(--white);
    border: none;
    padding: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.search-btn:hover { background-color: #009ACD; }

/* TOP NAV */
.top-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}

.nav-link {
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    opacity: 0.9;
}
.nav-link:hover, .nav-link.active-page {
    color: var(--brand-blue) !important;
    border-bottom-color: var(--brand-blue);
    opacity: 1;
    font-weight: 600;
}

.btn-text {
    background: none;
    border: none;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.cart-badge {
    background-color: var(--brand-yellow);
    color: black;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
    vertical-align: top;
}

/* =========================================
   5. DROPDOWN (Account Menu)
   ========================================= */
.dropdown { position: relative; display: inline-block; padding-bottom: 5px; }
.account-btn { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; background: none; border: none; cursor: pointer; text-align: left; }
.nav-line-1 { font-size: 11px; font-weight: 400; color: #ccc; }
.nav-line-2 { font-size: 14px; font-weight: 700; color: var(--white); }

/* Highlight Active Tab */
.active-account-tab {
    color: var(--brand-blue) !important;
    border-bottom: 3px solid var(--brand-blue);
    padding-bottom: 4px;
    border-radius: 0;
    background: transparent;
}
.active-account-tab * { color: var(--brand-blue) !important; }

.dropdown-content {
    display: none; position: absolute; right: 0; top: 100%;
    background-color: var(--white); min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); border-radius: 4px;
    z-index: 200; overflow: hidden; border: 1px solid #ddd;
}
.dropdown-content.show, .dropdown:hover .dropdown-content { display: block; }
.dropdown-content a { color: var(--text-main); padding: 12px 16px; text-decoration: none; display: block; font-size: 13px; text-align: left; margin: 0; }
.dropdown-content a:hover { background-color: #f5f5f5; color: var(--brand-blue); }

/* =========================================
   6. PRODUCT GRID & STORE
   ========================================= */
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.section-title { font-size: 22px; font-weight: 700; margin-bottom: 30px; border-left: 5px solid var(--brand-blue); padding-left: 15px; color: var(--text-main); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; }

.product-card { background: var(--white); border: 1px solid #eee; padding: 20px; border-radius: 12px; text-align: left; transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.product-card img { width: 100%; height: 200px; object-fit: contain; margin-bottom: 15px; }
.product-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 46px; }

.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.price { font-size: 20px; font-weight: 700; color: var(--price-red); }
.old-price { text-decoration: line-through; color: var(--text-muted); font-size: 13px; }

.amz-rating-box { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1; margin-bottom: 5px; }
.amz-avg { color: var(--text-main); font-weight: 700; }
.amz-stars { color: #FFA41C; letter-spacing: -1px; }
.amz-count { color: var(--brand-blue); margin-left: 5px; cursor: pointer; }
.amz-count:hover { color: #C7511F; text-decoration: underline; }

/* =========================================
   7. PRODUCT DETAIL PAGE
   ========================================= */
.detail-page-wrapper { background-color: var(--white); padding-top: 20px; }
.detail-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 100px 1fr 300px; gap: 30px; padding: 20px; align-items: start; }
.thumb-list { display: flex; flex-direction: column; gap: 10px; }
.thumb-img { width: 70px; height: 70px; object-fit: contain; cursor: pointer; border: 1px solid #ddd; border-radius: 4px; transition: 0.2s; }
.thumb-img:hover, .thumb-img.active { border-color: var(--brand-blue); box-shadow: 0 0 5px rgba(0,191,255,0.3); }
.main-image-container { height: 500px; display: flex; align-items: center; justify-content: center; border: 1px solid #f0f0f0; border-radius: 12px; background: #fff; padding: 20px; position: relative; }
.main-view-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.info-section { padding-top: 0; }
.product-title { font-size: 24px; font-weight: 600; color: #333; line-height: 1.3; margin-bottom: 10px; }
.price-tag { font-size: 28px; color: var(--price-red); font-weight: 500; }
.qty-wrapper { margin: 15px 0; display: flex; align-items: center; gap: 10px; }

.action-buttons { display: flex; gap: 15px; margin-top: 20px; margin-bottom: 30px; }
.btn-action { flex: 1; padding: 12px; border-radius: 30px; font-weight: 600; cursor: pointer; font-size: 14px; transition: 0.2s; border: none; }
.btn-add { background: var(--white); border: 2px solid var(--brand-blue); color: var(--brand-blue); }
.btn-add:hover { background: #f0f8ff; }
.btn-buy { background: var(--brand-blue); color: var(--white); border: 2px solid var(--brand-blue); }
.btn-buy:hover { background: #009ACD; border-color: #009ACD; }

/* =========================================
   8. ADMIN & DASHBOARD
   ========================================= */
/* 1. MAKE ADMIN CONTAINER WIDER */
.admin-container {
    max-width: 95% !important; /* Forces full width usage */
    margin: 30px auto;
    padding: 0 20px;
}

/* 2. COLORED STATUS DROPDOWNS */
.sel-status { 
    padding: 6px 10px; 
    border-radius: 20px; /* Pill shape */
    border: 1px solid rgba(0,0,0,0.1); 
    font-weight: 700; 
    font-size: 11px; 
    cursor: pointer;
    outline: none;
    width: 100%;
    text-transform: uppercase;
    appearance: none; /* Removes default arrow for cleaner look in some browsers */
    text-align: center;
}

/* Specific Colors */
.sel-pending { background-color: #fff3cd; color: #856404; }   /* Orange/Yellow */
.sel-accepted { background-color: #e0f2fe; color: #0284c7; }  /* Light Blue */
.sel-shipped { background-color: #cfe2ff; color: #084298; }   /* Dark Blue */
.sel-delivered { background-color: #d1e7dd; color: #0f5132; } /* Green */
.sel-rejected { background-color: #f8d7da; color: #842029; }  /* Red */
.sel-cancelled { background-color: #e2e3e5; color: #41464b; } /* Grey */

/* 3. COPY BUTTON STYLE */
.btn-copy-sm {
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    margin-left: 6px; 
    opacity: 0.5;
    transition: 0.2s;
    vertical-align: middle;
}
.btn-copy-sm:hover { opacity: 1; transform: scale(1.2); }


.admin-tabs { 
    display: flex; 
    background: #fff; 
    padding: 0 20px; 
    border-radius: 8px 8px 0 0; 
    border-bottom: 2px solid #eee;
    
    /* --- NEW STICKY STYLES --- */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 60px; /* Matches your header height */
    z-index: 900; /* Stays above content but below header */
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05); /* Subtle shadow when sticking */
}
.admin-tab { padding: 15px 25px; font-size: 14px; font-weight: 600; color: #555; cursor: pointer; border-bottom: 3px solid transparent; }
.admin-tab:hover { color: var(--brand-blue); background: #f9f9f9; }
.admin-tab.active { color: var(--brand-blue); border-bottom: 3px solid var(--brand-blue); background: white; }
.admin-view { background: #fff; padding: 30px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); min-height: 400px; }
.view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }

/* =========================================
   9. FORMS & MODALS (Including Custom Alert)
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 2000;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.modal-overlay[style*="display: block"], 
.modal-overlay[style*="display: flex"], 
.modal-overlay.open { opacity: 1; visibility: visible; }

.login-container, .confirm-box {
    background: var(--white); padding: 30px; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); width: 90%; max-width: 400px;
    text-align: center; position: relative; border: 1px solid #eee;
    animation: fadeInScale 0.2s ease-out;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.brand-title { font-size: 28px; font-weight: 700; color: var(--brand-blue); margin-bottom: 5px; }
.btn-primary-block { width: 100%; background: var(--brand-blue); color: white; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; margin-top: 15px; }
.btn-primary-block:hover { background: #009ACD; }

input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; background: #f9f9f9; }
input:focus { outline: none; border-color: var(--brand-blue); background: #fff; }

.btn-yes { background: #d32f2f; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-no { background: #eee; color: #333; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-ok { background: var(--brand-dark); color: white; border: none; padding: 10px 30px; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 15px; }

/* Premium Modal Buttons */
.btn-modal-primary { background: var(--brand-blue); color: white; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,191,255,0.3); width: 100%; transition: transform 0.2s; }
.btn-modal-primary:hover { background: #009ACD; transform: translateY(-2px); }
.btn-modal-secondary { background: transparent; color: #888; border: none; padding: 10px; font-size: 13px; cursor: pointer; margin-top: 10px; text-decoration: none; display: inline-block; }
.btn-modal-secondary:hover { color: #333; }

/* Google Button */
.btn-google-premium { width: 100%; background: white; color: #333; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background 0.2s, box-shadow 0.2s; margin-bottom: 20px; font-family: 'Poppins', sans-serif; }
.btn-google-premium:hover { background: #f8f9fa; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.btn-google-premium img { width: 20px; height: 20px; }

/* Close Button (X) */
.close-btn-premium { position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 24px; color: #999; cursor: pointer; line-height: 1; transition: color 0.2s; padding: 5px; border-radius: 50%; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; }
.close-btn-premium:hover { color: #333; background-color: #f0f0f0; }

/* Login Icon */
.login-icon-box { width: 60px; height: 60px; background: #e6f7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; color: var(--brand-blue); font-size: 28px; }
.modal-title { font-size: 20px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.modal-desc { color: #666; font-size: 14px; margin-bottom: 25px; line-height: 1.5; }

/* =========================================
   10. FOOTER
   ========================================= */
footer { background: var(--brand-dark); color: var(--white); text-align: center; padding: 25px 0; font-size: 13px; margin-top: auto; border-top: 3px solid var(--brand-blue); width: 100%; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-main-text { font-size: 14px; color: #eee; letter-spacing: 0.5px; }
.footer-social-section { display: flex; align-items: center; gap: 15px; margin-top: 5px; }
.social-label { color: #ccc; font-size: 13px; }
.social-icons-wrapper { display: flex; gap: 15px; align-items: center; }
.social-icon svg { width: 20px; height: 20px; fill: #ffffff; transition: 0.2s; }
.social-icon:hover svg { fill: var(--brand-blue); transform: scale(1.1); }

/* =========================================
   11. RATING DROPDOWN
   ========================================= */
.rating-container { position: relative; display: inline-block; cursor: pointer; }
.rating-arrow { font-size: 12px; color: #555; margin-left: 5px; transition: transform 0.2s; }
.rating-container:hover .rating-arrow { transform: rotate(180deg); }
.rating-dropdown { display: none; position: absolute; top: 100%; left: 0; width: 280px; background: white; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 4px; padding: 20px; z-index: 1000; cursor: default; }
.rating-dropdown.show { display: block; }
.rating-row { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; color: #007185; }
.rating-row:last-child { margin-bottom: 0; }
.star-label { width: 50px; text-align: left; color: #333; }
.percent-label { width: 40px; text-align: right; color: #333; }
.bar-container { flex: 1; background-color: #f0f2f2; border-radius: 4px; height: 20px; margin: 0 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); overflow: hidden; }
.bar-fill { height: 100%; background-color: #ffa41c; border-radius: 4px; width: 0%; border: 1px solid #de7921; }

/* =========================================
   12. NEW PREMIUM CART UI
   ========================================= */
.cart-page-wrapper { max-width: 1400px; margin: 30px auto; padding: 0 20px; }
.cart-page-title { font-size: 28px; font-weight: 600; margin-bottom: 20px; }
.cart-layout { display: grid; grid-template-columns: 1fr 300px; gap: 25px; align-items: start; }
.cart-items-container { background: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }

.cart-item-row { display: flex; padding: 20px 0; border-bottom: 1px solid #eee; gap: 20px; }
.cart-item-row:last-child { border-bottom: none; }
.cart-img-box img { width: 120px; height: 120px; object-fit: contain; border-radius: 4px; border: 1px solid #f0f0f0; }
.cart-info-box { flex: 1; }
.cart-item-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text-main); margin-bottom: 5px; display: block; text-decoration: none; }
.cart-item-title:hover { color: var(--brand-blue); text-decoration: underline; }
.cart-stock-status { font-size: 12px; color: #007600; margin-bottom: 10px; }
.cart-controls { display: flex; align-items: center; gap: 15px; margin-top: 10px; }

.qty-selector { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); background: #fff; }
.qty-btn { width: 30px; height: 30px; border: none; background: none; cursor: pointer; font-size: 18px; color: #555; display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: #f5f5f5; color: var(--brand-blue); }
.qty-val { width: 35px; text-align: center; font-size: 14px; font-weight: 600; height: 28px; line-height: 28px; border-left: 1px solid #eee; border-right: 1px solid #eee; }


/* =========================================
   UPDATED: DELETE BUTTON (DISTINCT RED)
   ========================================= */
.delete-link {
    color: #cc0c39; /* Distinct Amazon-style Red */
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: white;
    border: 1px solid #f2cfd6; /* Subtle red border */
    padding: 6px 12px;
    border-radius: 20px; /* Pill shape */
    text-decoration: none;
    transition: all 0.2s ease;
    
    /* Flexbox to align icon if we add one */
    display: inline-flex;
    align-items: center;
    gap: 6px; 
    margin-left: 15px; /* Push it away from quantity buttons */
}

/* Add a Trash Icon using CSS (No HTML change needed) */
.delete-link::before {
    content: "🗑"; 
    font-size: 14px;
    line-height: 1;
}

.delete-link:hover {
    background-color: #fff5f5; /* Light red background */
    border-color: #cc0c39;
    color: #a80026; /* Darker red on hover */
    box-shadow: 0 2px 5px rgba(204, 12, 57, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}

.delete-link:active {
    transform: translateY(0);
    background-color: #ffe6ea;
}

.cart-price-box { text-align: right; font-weight: 700; font-size: 18px; min-width: 80px; color: var(--text-main); }

.cart-summary-card { background: white; padding: 20px; border: 1px solid #ddd; border-radius: 8px; position: sticky; top: 90px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.cart-subtotal-text { font-size: 18px; margin-bottom: 20px; color: var(--text-main); }
.cart-grand-price { font-weight: 700; font-size: 22px; color: var(--text-main); }
.btn-proceed-checkout { width: 100%; background: var(--brand-blue); color: white; border: none; padding: 12px; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3); transition: 0.2s; }
.btn-proceed-checkout:hover { background: #009ACD; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 191, 255, 0.4); }

/* =========================================
   13. PREMIUM PROFILE DASHBOARD
   ========================================= */
.profile-wrapper { max-width: 1100px; margin: 20px auto; padding: 0 20px; }
.profile-layout { display: grid; grid-template-columns: 350px 1fr; gap: 30px; align-items: start; }

.profile-card { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.profile-header { font-size: 18px; font-weight: 700; color: var(--text-main); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; }

/* Left Column Stacking & Gap */
.profile-left-col { display: flex; flex-direction: column; gap: 20px; }

/* Save Button */
.btn-save-profile { background-color: var(--brand-blue) !important; color: white; border: none; transition: background-color 0.2s ease, transform 0.1s ease; width: 100%; padding: 12px; border-radius: 30px; font-weight: 600; cursor: pointer; }
.btn-save-profile:hover { background-color: #009ACD !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3); }

/* Address Card */
.addr-card { background: #f8f9fa; border: 1px solid #eee; border-radius: 6px; padding: 15px; margin-bottom: 15px; position: relative; transition: background 0.2s; }
.addr-card:hover { background: #fff; border-color: #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.addr-tag-badge { display: inline-block; background: #e6f7ff; color: var(--brand-blue); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; margin-bottom: 5px; }
.addr-text { font-size: 14px; color: #444; line-height: 1.5; }

/* Premium Circular Delete Button */
.btn-addr-delete {
    position: absolute; top: 15px; right: 15px;
    background: white !important; border: 1px solid #eee !important; color: #999 !important;
    width: 32px !important; height: 32px !important; border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 18px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 5;
    cursor: pointer; transition: all 0.2s;
}
.btn-addr-delete:hover { background: #fff5f5 !important; color: #d9534f !important; border-color: #ffcccc !important; transform: scale(1.1); }

/* Add Address Form */
.add-addr-box { margin-top: 20px; padding-top: 20px; border-top: 1px dashed #ddd; }
.addr-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group-sm { margin-bottom: 15px; }
.form-group-sm label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 5px; }
.input-premium { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; }
.input-premium:focus { border-color: var(--brand-blue); outline: none; }

/* =========================================
   UPDATED: SAVE ADDRESS BUTTON (Brand Blue)
   ========================================= */
.btn-add-addr {
    background: var(--brand-blue); /* Changed from Black #333 */
    color: white;
    border: none;
    padding: 12px; 
    border-radius: 30px; /* Pill Shape */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3); 
    transition: 0.2s;
}

.btn-add-addr:hover {
    background: #009ACD;
    transform: translateY(-2px);
}

/* Address Selection (Radio) */
.addr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.addr-selection { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: #555; }
.addr-selection input[type="radio"] { accent-color: var(--brand-blue); width: 16px; height: 16px; cursor: pointer; }
.default-badge { background: #007600; color: white; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; margin-left: 5px; display: none; }
.addr-card.default-active { border: 2px solid var(--brand-blue); background: #f0f8ff; }
.addr-card.default-active .default-badge { display: inline-block; }

/* =========================================
   14. PREMIUM CHECKOUT HEADER (WHITE)
   ========================================= */
.checkout-nav-header {
    background: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* =========================================
   15. PREMIUM CHECKOUT UI (Fixed Layout)
   ========================================= */
.checkout-wrapper { max-width: 1200px; margin: 10px auto; padding: 0 20px; }
.checkout-title { font-size: 26px; font-weight: 600; margin-bottom: 25px; color: var(--text-main); }

/* Grid Layout */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }

/* Left Column */
.checkout-section { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 25px; margin-bottom: 25px; }
.checkout-header { font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }

/* Address Selection Cards */
.checkout-addr-card { border: 1px solid #eee; border-radius: 6px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: all 0.2s; display: flex; align-items: flex-start; gap: 15px; }
.checkout-addr-card:hover { border-color: #bbb; background: #fdfdfd; }
.checkout-addr-card.selected { border: 2px solid var(--brand-blue); background: #f0f8ff; }
.radio-custom { accent-color: var(--brand-blue); width: 18px; height: 18px; margin-top: 3px; cursor: pointer; }

/* Payment Options */
.payment-option { display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 10px; cursor: pointer; }
.payment-option.selected { border-color: var(--brand-blue); background: #f0f8ff; }

/* Right Column (Sticky Wrapper) */
.checkout-right { position: sticky; top: 90px; height: fit-content; display: flex; flex-direction: column; gap: 20px; }

/* Summary Card */
.checkout-summary-card { position: relative; top: 0; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 14px; color: #555; }
.summary-total { border-top: 1px solid #eee; padding-top: 15px; margin-top: 15px; font-size: 20px; font-weight: 700; color: #b12704; display: flex; justify-content: space-between; }

/* Brand Blue Place Order Button */
.btn-place-order { width: 100%; background: var(--brand-blue) !important; color: white !important; border: none; padding: 14px; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 5px; box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3); transition: background 0.2s, transform 0.1s; }
.btn-place-order:hover { background: #009ACD !important; transform: translateY(-1px); }

/* Success Icon */
.success-icon-box { width: 70px; height: 70px; background: #e6ffed; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; box-shadow: 0 4px 10px rgba(0, 200, 83, 0.2); }

/* =========================================
   16. ORDER HISTORY (Compact)
   ========================================= */
.orders-wrapper { max-width: 1000px; margin: 30px auto; padding: 0 20px; }
.page-header-compact { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.page-title-text { font-size: 22px; font-weight: 700; color: var(--text-main); }

.order-card { background: white; border: 1px solid #e3e6e6; border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: box-shadow 0.2s; }
.order-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

.order-header-bar { background: #f0f2f2; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d5d9d9; font-size: 12px; color: #565959; }
.header-group { display: flex; flex-direction: column; gap: 2px; }
.header-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.header-val { font-weight: 600; color: #333; font-size: 13px; }
.order-id-text { font-family: monospace; font-size: 12px; color: #555; }

.status-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.status-shipped { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.status-delivered { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.order-body { padding: 15px; }
.order-item-row { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.order-item-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.order-thumb { width: 50px; height: 50px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; }
.item-details { flex: 1; }
.item-name { font-size: 14px; font-weight: 600; color: #007185; text-decoration: none; display: block; line-height: 1.2; margin-bottom: 3px; }
.item-name:hover { text-decoration: underline; color: #C7511F; }
.item-meta { font-size: 12px; color: #555; }

/* =========================================
   17. RESPONSIVE UTILS
   ========================================= */
@media (max-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-right { position: static; margin-top: 20px; }
    .detail-container { grid-template-columns: 1fr; gap: 20px; }
    .thumb-list { flex-direction: row; order: 2; width: 100%; justify-content: center; }
    .main-image-container { order: 1; height: 350px; }
    .info-section { order: 3; }
}
@media (max-width: 768px) {
    .header-container { flex-wrap: wrap; }
    .search-container { order: 3; max-width: 100%; margin: 10px 0 0; min-width: 100%; }
    .cart-layout { grid-template-columns: 1fr; }
    .profile-layout { grid-template-columns: 1fr; }
    .order-header-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-right { align-self: flex-end; }
}

/* =========================================
   NEW: CUSTOM ALERT MODAL STYLES
   ========================================= */
.alert-icon {
    width: 50px;
    height: 50px;
    background: #fff5f5;
    color: #d32f2f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
}

.btn-alert-ok {
    background: var(--brand-blue);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* =========================================
   PREMIUM LOADING ANIMATIONS (SKELETON)
   ========================================= */

/* The Shimmer Animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton Card Structure */
.skeleton-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Gray Lines */
.skeleton-line {
    height: 12px;
    background: #f0f0f0;
    /* The Magic Gradient for Shimmer */
    background: linear-gradient(90deg, #f0f0f0 25%, #f9f9f9 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
}

.skeleton-content { flex: 1; }
.skeleton-line.short { width: 30%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long { width: 90%; }

/* Smooth Fade In for Real Content */
.fade-in {
    animation: fadeIn 0.4s ease-in-out forwards;
    opacity: 0; /* Start hidden */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* main.css - Modern Success Alert Styling */

/* Success State for the Alert Icon */
.alert-icon.success {
    background: #e6f7ff; /* Light Zerobi Blue tint */
    color: var(--brand-blue); /* #00bfff */
    border: 1px solid #b3e5fc;
}

/* Success OK Button */
.btn-alert-ok.success {
    background: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);
}

.btn-alert-ok.success:hover {
    background: #009ACD;
    transform: translateY(-1px);
}

/* main.css - Interactive Hover for Back to Store Button */
#btn-back-to-store:hover {
    background-color: var(--brand-blue) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
    transform: translateY(-1px);
    text-decoration: none;
}

#btn-back-to-store:active {
    transform: translateY(0);
}

/* main.css - Subtle Pulsing Glow for Primary Action Button */

@keyframes button-glow {
    0% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.4); }
    50% { box-shadow: 0 0 20px rgba(0, 191, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(0, 191, 255, 0.4); }
}

.btn-place-order {
    /* Keep your existing styles and add the animation */
    animation: button-glow 3s infinite ease-in-out;
    transition: all 0.3s ease !important;
}

.btn-place-order:hover {
    background: #009ACD !important;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 15px rgba(0, 191, 255, 0.5) !important;
    animation: none; /* Stops pulsing when user interacts with it */
}

/* main.css */
.payment-option {
    transition: all 0.2s ease;
    border: 1px solid #eee;
}

.payment-option.selected {
    border-color: var(--brand-blue) !important;
    background: #f0faff !important;
}

/* =========================================
   ORDER CANCELLATION STYLES (Add to bottom)
   ========================================= */

/* Active Cancel Button (Red Outline) */
.btn-cancel-order {
    background: white;
    color: #d32f2f;
    border: 1px solid #d32f2f;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-order:hover {
    background: #d32f2f;
    color: white;
    box-shadow: 0 2px 5px rgba(211, 47, 47, 0.2);
}

/* Disabled Cancel Button (Greyed Out) */
.btn-cancel-disabled {
    background: #f5f5f5;
    color: #999;
    border: 1px solid #ddd;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: not-allowed;
    opacity: 0.8;
}

/* New Status Color: Accepted (Blue) */
.status-accepted {
    background-color: #e0f2fe; /* Light Blue */
    color: #0284c7;            /* Dark Blue Text */
    border: 1px solid #bae6fd;
}

/* =========================================
   MODERN ORDERS UI (Amazon Style)
   ========================================= */

/* 1. The Container */
.modern-order-card {
    background: white;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden; /* Keeps header inside curves */
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
}
.modern-order-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #ccc;
}

/* 2. The Header Bar */
.order-header {
    background-color: #f0f2f2;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d5d9d9;
    font-size: 12px;
    color: #565959;
}

.header-col { display: flex; flex-direction: column; gap: 2px; }
.header-col label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
.header-col span { font-size: 13px; font-weight: 600; color: #333; }
.header-col.right-align { text-align: right; margin-left: auto; }

.ship-name { color: #007185 !important; cursor: pointer; position: relative; }
.ship-name:hover { text-decoration: underline; color: #c7511f !important; }

/* 3. Status Pills */
.status-pill { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-top: 4px; }
.badge-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.badge-accepted { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-shipped { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.badge-delivered { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.badge-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* 4. Order Content & Items */
.order-content { padding: 20px; }

.modern-order-item {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.modern-order-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.item-img-box { width: 70px; height: 70px; flex-shrink: 0; }
.item-img-box img { width: 100%; height: 100%; object-fit: contain; }

.item-info-box { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.item-link { font-size: 15px; font-weight: 600; color: var(--brand-blue); text-decoration: none; margin-bottom: 4px; display: inline-block; }
.item-link:hover { text-decoration: underline; color: #0056b3; }
.item-meta { font-size: 13px; color: #555; }

/* 5. Footer Actions */
.order-card-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info-text { font-size: 12px; color: #666; font-style: italic; }
.info-text.success { color: #007600; font-style: normal; font-weight: 500; }

/* Buttons */
.btn-cancel-outline {
    background: white; color: #d32f2f; border: 1px solid #d32f2f;
    padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: 0.2s;
}
.btn-cancel-outline:hover { background: #fff5f5; box-shadow: 0 2px 5px rgba(211,47,47,0.15); }

.btn-rate-item {
    background: #ffd814; color: #111; border: 1px solid #fcd200;
    padding: 5px 12px; border-radius: 15px; font-size: 11px; font-weight: 600;
    cursor: pointer; margin-top: 8px; width: fit-content;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-rate-item:hover { background: #f7ca00; border-color: #f2c200; }

/* 6. Star Rating Modal */
.star-rating-input { font-size: 32px; cursor: pointer; color: #ccc; margin-top: 5px; }
.star-rating-input span { transition: color 0.2s; }
.star-rating-input span:hover { color: #ffbf00; }

/* Mini Rate Button in Notification Modal */
.btn-rate-mini {
    background: #ffd814; 
    border: 1px solid #fcd200; 
    border-radius: 20px; 
    padding: 5px 15px; 
    font-size: 11px; 
    font-weight: 600; 
    cursor: pointer;
    transition: 0.2s;
}
.btn-rate-mini:hover {
    background: #f7ca00;
}

/* =========================================
   MODERN ORDERS UI (Updated)
   ========================================= */

/* 1. Container */
.modern-order-card {
    background: white;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
}
.modern-order-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #ccc;
}

/* 2. Header Bar with Spacing Gap */
.order-header {
    background-color: #f0f2f2;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns to top if ref adds height */
    border-bottom: 1px solid #d5d9d9;
    font-size: 12px;
    color: #565959;
}

/* Grouping Left Columns with GAP */
.header-left-group {
    display: flex;
    gap: 40px; /* Increased gap as requested */
}

.header-col { display: flex; flex-direction: column; gap: 4px; }
.header-col label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8; }
.header-col span { font-size: 13px; font-weight: 600; color: #333; }

/* Right Align Group for IDs */
.right-align-group {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
}

/* ID Rows (Ref & Order ID) */
.id-row {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.id-label { font-size: 10px; font-weight: 700; color: #777; }
.id-val { font-family: monospace; font-size: 12px; color: #333; font-weight: 600; }

/* Copy Button */
.btn-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    opacity: 0.6;
    transition: 0.2s;
}
.btn-copy:hover { opacity: 1; transform: scale(1.1); }

.ship-name { color: #007185 !important; cursor: pointer; position: relative; }
.ship-name:hover { text-decoration: underline; color: #c7511f !important; }

/* 3. Status Pills */
.status-pill { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.badge-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.badge-accepted { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-shipped { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.badge-delivered { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.badge-cancelled { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* 4. Content */
.order-content { padding: 20px; }

.modern-order-item {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.modern-order-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.item-img-box { width: 70px; height: 70px; flex-shrink: 0; }
.item-img-box img { width: 100%; height: 100%; object-fit: contain; }

.item-info-box { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.item-link { font-size: 15px; font-weight: 600; color: var(--brand-blue); text-decoration: none; margin-bottom: 4px; display: inline-block; }
.item-link:hover { text-decoration: underline; color: #0056b3; }
.item-meta { font-size: 13px; color: #555; margin-bottom: 4px; }

/* Delivered Date Text */
.delivered-date-text { font-size: 12px; color: #007600; font-weight: 600; margin-bottom: 5px; }

/* 5. Footer */
.order-card-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info-text { font-size: 12px; color: #666; font-style: italic; }
.info-text.success { color: #007600; font-style: normal; font-weight: 500; }

.btn-cancel-outline {
    background: white; color: #d32f2f; border: 1px solid #d32f2f;
    padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: 0.2s;
}
.btn-cancel-outline:hover { background: #fff5f5; box-shadow: 0 2px 5px rgba(211,47,47,0.15); }

.btn-cancel-disabled {
    background: #f5f5f5; color: #999; border: 1px solid #ddd;
    padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
    cursor: not-allowed;
}

.btn-rate-item {
    background: #ffd814; color: #111; border: 1px solid #fcd200;
    padding: 5px 12px; border-radius: 15px; font-size: 11px; font-weight: 600;
    cursor: pointer; margin-top: 5px; width: fit-content;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-rate-item:hover { background: #f7ca00; border-color: #f2c200; }

/* 6. Rating Modal */
.star-rating-input { font-size: 32px; cursor: pointer; color: #ccc; margin-top: 5px; }
.star-rating-input span { transition: color 0.2s; }
.star-rating-input span:hover { color: #ffbf00; }


/* =========================================
   EXISTING STYLES PRESERVED ...
   (Add these new styles to the bottom)
   ========================================= */

/* Ensure the parent button allows absolute positioning of the dot */
.account-btn {
    position: relative !important;
}

/* The Red Notification Dot */
.nav-dot {
    position: absolute;
    top: 0px;        /* Adjusted for the new icon layout */
    left: 20px;      /* Positioned near the user icon */
    width: 10px;
    height: 10px;
    background-color: #cc0c39; /* Brand Red */
    border-radius: 50%;
    border: 2px solid #000; /* Black border to blend with header */
    z-index: 10;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

/* Ensure the notification link inside dropdown looks good */
#nav-notif-link:hover {
    background-color: #f5f5f5;
    color: var(--brand-blue);
}

@keyframes pulse-dot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(204, 12, 57, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(204, 12, 57, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(204, 12, 57, 0); }
}

/* 2. NOTIFICATION DROPDOWN SECTION */
.notification-section {
    background-color: #fff8e1; /* Light yellow background */
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.notif-header {
    font-size: 11px;
    font-weight: 700;
    color: #b12704;
    padding: 10px 16px 5px 16px;
    text-transform: uppercase;
}

.notif-item {
    font-size: 13px;
    color: var(--brand-blue) !important;
    font-weight: 600;
    padding: 8px 16px !important;
    display: block;
    transition: 0.2s;
}
.notif-item:hover {
    background-color: #fff;
    padding-left: 20px !important; /* Slight slide effect */
}

/* 3. ORDER CARD UI UPDATES */
.modern-order-card {
    background: white; border: 1px solid #d5d9d9; border-radius: 8px;
    margin-bottom: 20px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.order-header {
    background-color: #f0f2f2; padding: 14px 20px; display: flex;
    justify-content: space-between; border-bottom: 1px solid #d5d9d9;
}

.header-left-group { display: flex; gap: 40px; }
.header-col label { font-size: 10px; font-weight: 700; opacity: 0.7; }
.header-col span { font-size: 13px; font-weight: 600; color: #333; }

.right-align-group { text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }

.id-row { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.id-label { font-weight: 700; color: #777; font-size: 10px; }
.id-val { font-family: monospace; font-weight: 600; color: #333; }

.btn-copy { background: none; border: none; cursor: pointer; font-size: 14px; padding: 0; opacity: 0.6; }
.btn-copy:hover { opacity: 1; transform: scale(1.1); }

/* 4. CONTENT & RATING */
.order-content { padding: 20px; }
.modern-order-item { display: flex; gap: 20px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.modern-order-item:last-child { border: none; margin: 0; padding: 0; }

.item-img-box img { width: 70px; height: 70px; object-fit: contain; }
.item-info-box { flex: 1; display: flex; flex-direction: column; }

.delivered-date-text { font-size: 12px; color: #007600; font-weight: 600; margin: 3px 0; }

.btn-rate-item {
    background: white; border: 1px solid #ddd; padding: 5px 12px;
    border-radius: 15px; font-size: 12px; font-weight: 600; cursor: pointer;
    width: fit-content; margin-top: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.btn-rate-item:hover { background: #f7fa00; border-color: #f7ca00; }

.badge-rated {
    color: #e67a00; font-size: 12px; font-weight: 600; margin-top: 5px;
    display: inline-flex; align-items: center; gap: 4px;
}

/* 5. Rating Modal Stars */
.star-rating-input span { font-size: 32px; color: #ccc; cursor: pointer; transition: color 0.2s; }
.star-rating-input span:hover { color: #ffa41c; }


/* =========================================
   ORDERS STICKY HEADER & HELP BLOCK
   ========================================= */

.orders-sticky-header {
    position: sticky;
    top: 60px; /* Aligns below the main navbar (assuming nav is 60px) */
    z-index: 90;
    background-color: var(--gray-bg); /* Use page bg color to hide scrolling items */
    padding: 15px 0 20px 0; /* Add vertical spacing */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid transparent; /* Optional separator */
}

/* Mini Help Block (Right Side) */
.help-mini-block {
    text-align: right;
    background: #e3f2fd; /* Light Blue Background */
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #bbdefb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.help-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 5px;
}

.help-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.help-link {
    font-size: 12px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    transition: 0.2s;
}

.help-link:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

/* Ensure Page Title aligns nicely */
.page-title-text {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    align-self: center; /* Vertically center with the help block */
}

/* Mobile Adjustment */
@media (max-width: 600px) {
    .orders-sticky-header {
        flex-direction: column;
        gap: 15px;
        top: 50px; /* Adjust if mobile header is shorter */
        align-items: stretch;
    }
    .page-title-text {
        align-self: flex-start;
    }
    .help-mini-block {
        text-align: left;
    }
    .help-link {
        justify-content: flex-start;
    }
}

/* =========================================
   REVIEW MODAL STYLES
   ========================================= */

.review-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.review-item:last-child {
    border-bottom: none;
}

.review-avatar {
    width: 30px; 
    height: 30px; 
    background: #e6f7ff; 
    color: var(--brand-blue); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 14px;
}

/* Amazon-style Rating Box on Product Page */
.amz-rating-box {
    display: flex; 
    align-items: center; 
    gap: 5px; 
    transition: 0.2s;
}
.amz-rating-box:hover .amz-count {
    color: #c7511f;
    text-decoration: underline;
}

.amz-avg {
    font-weight: 700;
    color: #333;
    padding-top: 2px;
}

.amz-stars {
    font-size: 16px;
    letter-spacing: -1px;
}

.amz-count {
    color: #007185;
    font-size: 14px;
    font-weight: 500;
}

/* =========================================
   MODERN REVIEW MODAL STYLES
   ========================================= */

.review-item {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.review-avatar {
    width: 32px; 
    height: 32px; 
    background: #e6f7ff; /* Brand Light Blue */
    color: var(--brand-blue); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 14px;
    border: 1px solid #b3e5fc;
}

.review-user {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.review-rating-row {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 6px;
}

.stars-static {
    color: #FFA41C; 
    letter-spacing: -1px;
    font-size: 14px;
}

.verified-badge {
    font-size: 11px; 
    color: #c45500; /* Amazon Verified Color */
    font-weight: 700;
    background: #fff3e0;
    padding: 2px 6px;
    border-radius: 4px;
}

.review-date {
    font-size: 11px; 
    color: #777; 
    margin-bottom: 10px;
}

.review-content {
    font-size: 14px; 
    color: #444; 
    line-height: 1.5;
}

.empty-reviews {
    text-align: center;
    padding: 40px 20px;
    color: #777;
}


/* ADMIN COST INPUTS */
.input-cost-sm {
    width: 70px;
    padding: 4px;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 4px;
    display: block;
    text-align: right;
}

.btn-save-costs {
    background: var(--brand-blue);
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

.profit-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 13px;
}
.profit-pos { background: #d1e7dd; color: #0f5132; }
.profit-neg { background: #f8d7da; color: #842029; }


/* =========================================
   MOBILE LANDSCAPE ENFORCER (ADMIN ONLY)
   ========================================= */

/* Default: Hidden */
#landscape-warning { display: none; }

/* Trigger: Mobile Phones in Portrait Mode */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    
    /* Show the overlay only if it exists on the page */
    #landscape-warning {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000000; /* Solid Black Background */
        z-index: 99999; /* Sit on top of everything */
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: white;
        text-align: center;
    }

    .rotate-msg-box {
        padding: 30px;
    }

    .rotate-icon {
        font-size: 60px;
        margin-bottom: 20px;
        display: inline-block;
        animation: rotate-anim 2s infinite ease-in-out;
    }

    /* Simple Rotation Animation */
    @keyframes rotate-anim {
        0% { transform: rotate(0deg); }
        50% { transform: rotate(-90deg); }
        100% { transform: rotate(0deg); }
    }
}


/* =========================================
   MOBILE HEADER FIXES
   ========================================= */

@media only screen and (max-width: 768px) {
    
    /* 1. Make Header taller to fit stacked items */
    .main-header {
        height: auto;       /* Let it grow automatically */
        padding: 10px 0;    /* Add breathing room */
        position: relative; /* Stop it from floating over content badly */
    }

    /* 2. Stack the layout vertically */
    .header-container {
        flex-direction: column; 
        align-items: flex-start;
        gap: 10px;
    }

    /* 3. Adjust Logo Size */
    .logo a {
        font-size: 20px; /* Smaller text */
    }
    .logo img {
        width: 25px; /* Smaller icon */
        height: 25px;
    }
    .header-tagline {
        display: none; /* Hide tagline to save space */
    }

    /* 4. Fix Search Bar Width */
    .search-container {
        width: 100%;       /* Full width */
        margin: 5px 0;     /* Add spacing */
        order: 3;          /* Move below logo/nav if needed */
        max-width: none;
    }

    /* 5. Compact Navigation */
    .top-nav {
        width: 100%;
        justify-content: space-between; /* Uses available space */
        gap: 0px; /* minimal gap */
        margin-top: 1px;
    }
    
    .nav-link {
        font-size: 11px;       /* Smaller font */
        padding: 1px 1px;      /* Reduce side padding */
        text-align: center;    /* Center the text */
        
        /* This forces the text to wrap to the next line */
        white-space: normal;   
        display: inline-flex;  
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        line-height: 1.1;      /* Tighter line height */
    }

    /* 6. Push page content down so it's not hidden */
    /* This matches the new taller header height */
    .admin-container, 
    .container {
        margin-top: 10px !important; 
    }
    
    /* 3. Specific fix for "Seller Central" Tab */
    /* 3. Specific fix for "Seller Central" Tab */
    #admin-nav-link {
        /* Remove "display: inline-flex !important" */
        /* Let JavaScript decide if it's none or inline-block */
        
        white-space: normal; /* Allow text wrapping */
        line-height: 1.1;
        text-align: center;
        max-width: 60px; /* Slightly wider for 2 lines */
    }
    
    /* Only force display if the JS has actually activated it */
    #admin-nav-link[style*="display: inline-block"] {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


/* =========================================
   MOBILE ORDERS LIST OPTIMIZATION
   ========================================= */

@media only screen and (max-width: 600px) {

    /* 1. Stack the Order Header (Date, Total, ID) */
    .order-header {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    /* 2. Organize Top Row: Date, Total, Ship To */
    .header-left-group {
        width: 100%;
        display: flex; 
        justify-content: space-between;
        gap: 0; /* Let space-between handle it */
    }

    /* 3. Hide "Ship To" on Mobile (User knows who they are) to save space */
    .header-left-group .header-col:last-child {
        display: none; 
    }

    /* 4. Organize Bottom Row: Order ID & Status */
    .right-align-group {
        width: 100%;
        flex-direction: row; /* Keep side-by-side */
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd; /* Separator line */
        padding-top: 10px;
        text-align: left; /* Reset alignment */
    }

    /* 5. Make Items Bigger/Cleaner */
    .modern-order-item {
        align-items: flex-start;
    }
    
    .item-img-box {
        width: 60px;
        height: 60px;
    }
    
    .item-link {
        font-size: 14px;
        line-height: 1.4;
        display: block; /* Ensure title gets its own line */
    }

    /* 6. Big "Finger-Friendly" Buttons */
    .order-card-footer {
        flex-direction: column; /* Stack text and button */
        gap: 12px;
        text-align: center;
        background: #fcfcfc;
    }

    .btn-cancel-outline, 
    .btn-cancel-disabled {
        width: 100%;      /* Full width button */
        padding: 12px 0;  /* Taller touch target */
        font-size: 14px;
        display: block;
        margin-top: 5px;
    }

    /* 7. Ensure Copy Button is tappable */
    .btn-copy {
        padding: 5px 10px;
        font-size: 16px;
    }
}

/* =========================================
   STICKY HEADER FIX
   ========================================= */
.main-header {
    position: sticky;       /* Sticks to the screen */
    top: 0;                 /* Sticks at the very top */
    z-index: 1000;          /* Stays above all other content */
    width: 100%;            /* Ensures full width */
}


/* =========================================
   MOBILE ADMIN TABS (SCROLLABLE)
   ========================================= */

@media only screen and (max-width: 768px) {
    
    .admin-tabs {
        display: flex;
        flex-wrap: nowrap;          /* Force them into one single row */
        overflow-x: auto;           /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scroll for iPhones */
        padding-bottom: 5px;        /* Space for scrollbar */
        background: #fff;           /* Keep background clean */
        
        /* Hide the scrollbar for a cleaner look (optional) */
        scrollbar-width: none;      /* Firefox */
    }
    
    .admin-tabs::-webkit-scrollbar { 
        display: none;              /* Chrome/Safari */
    }

    .admin-tab {
        white-space: nowrap;        /* Prevent text from breaking into 2 lines */
        flex-shrink: 0;             /* Prevent tabs from shrinking */
        padding: 15px 20px;         /* Keep nice touch targets */
        font-size: 13px;            /* Readable size */
    }
}