/* Add to head of HTML or @import in CSS */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand:wght@400;600;700&display=swap');

body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    /* A very subtle, less dramatic light pink gradient */
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 {
    font-family: 'Pacifico', cursive;
    letter-spacing: 1px;
}

/* Star Animation Container */
.star-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Star Generation using box-shadow */
#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 10vw 10vh rgba(255, 255, 224, 0.9), 15vw 80vh rgba(255, 255, 224, 0.9), 35vw 15vh rgba(255, 255, 224, 0.9), 80vw 10vh rgba(255, 255, 224, 0.9), 60vw 40vh rgba(255, 255, 224, 0.9),
                70vw 80vh rgba(255, 255, 224, 0.9), 40vw 60vh rgba(255, 255, 224, 0.9), 20vw 30vh rgba(255, 255, 224, 0.9), 30vw 90vh rgba(255, 255, 224, 0.9), 90vw 50vh rgba(255, 255, 224, 0.9),
                50vw 20vh rgba(255, 255, 224, 0.9), 10vw 50vh rgba(255, 255, 224, 0.9), 95vw 90vh rgba(255, 255, 224, 0.9), 5vw 95vh rgba(255, 255, 224, 0.9), 85vw 25vh rgba(255, 255, 224, 0.9);
    animation: animStar 50s linear infinite;
}

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 12vw 15vh rgba(255, 255, 224, 0.9), 25vw 85vh rgba(255, 255, 224, 0.9), 45vw 25vh rgba(255, 255, 224, 0.9), 85vw 15vh rgba(255, 255, 224, 0.9), 65vw 45vh rgba(255, 255, 224, 0.9),
                75vw 85vh rgba(255, 255, 224, 0.9), 45vw 65vh rgba(255, 255, 224, 0.9), 25vw 35vh rgba(255, 255, 224, 0.9), 35vw 95vh rgba(255, 255, 224, 0.9), 95vw 55vh rgba(255, 255, 224, 0.9);
    animation: animStar 100s linear infinite, twinkle 3s ease-in-out infinite;
}

#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 5vw 5vh rgba(255, 255, 224, 0.9), 20vw 20vh rgba(255, 255, 224, 0.9), 40vw 40vh rgba(255, 255, 224, 0.9), 60vw 60vh rgba(255, 255, 224, 0.9), 80vw 80vh rgba(255, 255, 224, 0.9),
                90vw 10vh rgba(255, 255, 224, 0.9), 10vw 90vh rgba(255, 255, 224, 0.9);
    animation: animStar 150s linear infinite, twinkle 5s ease-in-out infinite;
}

/* Animations */
@keyframes animStar {
    from { transform: translateY(0); }
    to { transform: translateY(-100vh); }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

header {

    background: rgba(233, 30, 99, 0.95); /* Slight transparency */

    color: white;

    padding: 0.5rem 2rem; /* Reduced padding */

    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);

    position: relative;

    backdrop-filter: blur(5px);

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 100;

}



/* Header Specifics */

.header-content {

    display: flex; 

    align-items: center; 

    gap: 1rem;

    /* Removed flex-direction: column */

}



.header-logo {

    width: 40px; /* Smaller logo */

    height: 40px; 

    margin-bottom: 0; /* Removed margin */

}



.header-title {

    margin: 0; 

    font-size: 1.5rem; /* Smaller font */

}



.header-subtitle {

    display: none; /* Hide subtitle for compact header */

}



.header-actions {
    display: flex; 
    gap: 1rem;
    /* Removed position: absolute */
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 4rem 2rem 2rem 2rem; 
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; 
}

.grid:has(> .card:only-child) {
    grid-template-columns: 1fr;
}
.card:only-child {
    max-width: 1000px;
    margin: 0 auto;
}

.card {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(233, 30, 99, 0.15);
}

.card:hover img {
    transform: scale(1.05); /* Subtle zoom effect */
}

.card img { 
    width: calc(100% - 2rem);
    height: 400px; 
    object-fit: cover;
    margin: 1rem 1rem 0 1rem;
    border-radius: 8px;
    transition: transform 0.5s ease; /* Smooth transition for the zoom */
}

.card-body { 
    padding: 1.5rem; 
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
}

.card-body .order-btn {
    margin-top: auto;
}
.card-title { font-size: 1.25rem; margin: 0 0 0.5rem 0; color: #c2185b; font-family: 'Pacifico', cursive; }
.card-price { font-size: 1.2rem; font-weight: 700; color: #333; margin-bottom: 0.5rem; }
.card-text { font-size: 0.95rem; color: #555; margin-bottom: 1rem; line-height: 1.6; }

.badge {
    display: inline-block;
    background: linear-gradient(45deg, #f8bbd0, #f48fb1);
    color: #880e4f;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(136, 14, 79, 0.1);
}

.header-login-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    font-size: 0.9rem;
}

.header-login-btn:hover {
    background: white;
    color: #e91e63;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.header-login-btn.active {
    background: rgba(255, 255, 255, 0.95);
    color: #e91e63;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: default;
}

footer {
    text-align: center;
    padding: 2rem;
    background: #333;
    color: rgba(255,255,255,0.8);
    margin-top: 4rem;
}

/* Image Modal (Lightbox) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); 
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(255,255,255,0.2);
    animation: zoom 0.3s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.order-btn {
    display: block;
    background-color: #e91e63;
    color: white;
    text-align: center;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
    margin-top: 1rem;
}
.order-btn:hover {
    background-color: #c2185b;
}

/* Auth/Status Request Container */
.auth-container {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
    margin: auto; /* Centers in flex column */
    text-align: center;
    box-sizing: border-box;
}

/* Re-use order-container but ensure it centers */
.order-container {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 600px;
    width: 100%;
    margin: auto; /* Changed from 2rem to auto for centering */
    box-sizing: border-box;
}

/* Status Page Specifics */
.status-header { text-align: center; border-bottom: 1px solid #eee; padding-bottom: 1rem; margin-bottom: 2rem; }

.timeline { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; }
.timeline::before { content: ''; position: absolute; top: 15px; left: 0; width: 100%; height: 4px; background: #eee; z-index: 0; }

.step { text-align: center; position: relative; z-index: 1; width: 33%; }
.step-dot { width: 30px; height: 30px; background: #ddd; border-radius: 50%; margin: 0 auto 0.5rem auto; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
.step.active .step-dot { background: #e91e63; }
.step.completed .step-dot { background: #4caf50; }
.step-label { font-size: 0.9rem; color: #666; }

.item-details { display: flex; gap: 1.5rem; align-items: center; background: #f9f9f9; padding: 1.5rem; border-radius: 8px; }
.item-details img { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; }

.success-msg { color: green; background: #e8f5e9; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; }
.error-msg { color: red; margin-bottom: 1rem; text-align: center; }


.order-title {
    color: #e91e63; 
    text-align: center; 
    font-family: 'Pacifico', cursive;
}

.item-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    background: #fff0f5;
    padding: 1rem;
    border-radius: 8px;
}

.item-summary img { 
    width: 80px; 
    height: 80px; 
    object-fit: cover; 
    border-radius: 4px; 
}

.form-grid {
    display: grid; 
    gap: 1rem;
}

.form-label {
    font-weight: bold; 
    display: block; 
    margin-bottom: 0.5rem;
}

.form-input, .form-textarea {
    width: 100%; 
    padding: 0.75rem; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-sizing: border-box;
    font-size: 1rem; /* Prevents auto-zoom on iOS */
}

.submit-btn {
    background-color: #e91e63; 
    color: white; 
    border: none; 
    padding: 1rem; 
    border-radius: 4px; 
    font-size: 1.1rem; 
    cursor: pointer; 
    width: 100%; 
    font-weight: bold;
}

.submit-btn:hover {
    background-color: #d81b60;
}

.cancel-link {
    display: block; 
    text-align: center; 
    margin-top: 1rem; 
    color: #666; 
    text-decoration: none;
}

/* Flash Messages */
.flash-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    font-weight: bold;
}

.flash-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.flash-error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

/* Mobile responsiveness for header actions */
@media (max-width: 768px) {
    header {
        padding: 0.5rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-content {
        width: 100%;
        justify-content: center;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .header-login-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        flex: 1 1 auto; /* Allow buttons to grow/shrink but stay proportional */
        text-align: center;
        min-width: 80px; /* Prevent them from becoming too thin */
    }

    .container {
        padding: 2rem 1rem;
    }
    
    .card img {
        height: 250px;
    }

    .hero {
        padding: 3rem 1rem;
    }

    .hero-headline {
        font-size: 2.5rem;
    }

    .auth-container, .order-container {
        padding: 1.5rem;
        margin: 1rem auto;
        width: 95%; /* Use almost full width on mobile */
    }
    
    .timeline {
        font-size: 0.8rem;
    }
    
    .step-dot {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    .item-details {
        flex-direction: column;
        text-align: center;
    }
    
    /* Target the container of the buttons in order_status.html which has inline flex style */
    .order-container > div[style*="display: flex"] {
        flex-wrap: wrap;
    }
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url('/static/img/hero-bg.svg') no-repeat center center; /* Placeholder image */
    background-size: cover;
    color: #e91e63;
    position: relative;
    z-index: 0;
    box-shadow: inset 0 -5px 15px rgba(0,0,0,0.05);
}

.hero-headline {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Pacifico', cursive;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.hero-subheadline {
    font-size: 1.5rem;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    line-height: 1.5;
    color: #333;
}

.hero-button {
    display: inline-block;
    background-color: #e91e63;
    color: white;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
}

.hero-button:hover {
    background-color: #c2185b;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(233, 30, 99, 0.4);
}

/* Toast Notifications (for flash messages) */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050; /* Above modals */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
}

.toast {
    background-color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    animation: slideIn 0.5s forwards;
    opacity: 0; /* Hidden by default */
    transform: translateX(100%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.toast-success {
    border-left: 5px solid #4CAF50;
    color: #333;
}

.toast.toast-error {
    border-left: 5px solid #F44336;
    color: #333;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Admin Orders Page Specifics */
body.admin-body { /* Use a specific body class for admin pages if desired */
    background-color: #f8f9fa;
    padding: 0; /* Let main container handle padding */
}

.admin-page-container {
    max-width: 1600px; /* Increased from 1000px */
    width: 95%; /* Make it fluid */
    margin: 2rem auto; /* Top/bottom margin, horizontally centered */
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Ensure padding doesn't overflow width */
    flex: 1;
}

.admin-header { /* For the local header within the admin-page-container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.admin-btn { /* Generic admin button style */
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
}

.admin-btn-back {
    background-color: #6c757d;
}

.admin-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    margin-top: 1rem;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.admin-table th, .admin-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.admin-table th {
    background-color: #f8f9fa;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: #555;
}

.admin-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.admin-table tbody tr:hover {
    background-color: #f0f0f0;
}

select.admin-select {
    padding: 0.4rem;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.admin-update-btn {
    background-color: #e91e63;
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 0.5rem;
}

/* Pagination - re-using global nav-btn for now, but could be admin-specific */
.btn.nav-btn {
    background-color: #007bff; /* Example: Bootstrap primary blue */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}
/* Empty State Illustration */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}
.empty-state svg {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
    opacity: 0.5;
    fill: #f48fb1; /* Soft pink fill */
}
.empty-state h3 {
    margin: 0 0 0.5rem 0;
    color: #555;
    font-family: 'Quicksand', sans-serif; /* Keep it clean */
    font-size: 1.5rem;
}
.empty-state p {
    margin: 0;
    font-size: 1rem;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #fce4ec;
}
::-webkit-scrollbar-thumb {
    background: #f48fb1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e91e63;
}

/* Page Fade-in Animation */
.container, .auth-container, .order-container, .admin-page-container {
    animation: fadeIn 0.8s ease-out;
}

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

/* Smooth Input Transitions */
input, textarea, select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
}

/* Enhanced Button Hovers */
button, .btn, .nav-btn, .admin-btn, .update-btn, .submit-btn, .order-btn, .header-login-btn {
    transition: all 0.2s ease-in-out;
}
button:active, .btn:active, .nav-btn:active, .admin-btn:active, .update-btn:active, .submit-btn:active, .order-btn:active, .header-login-btn:active {
    transform: scale(0.98);
}

/* Customer Info Styles */
.customer-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.customer-name {
    font-weight: bold;
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 0.2rem;
}

.customer-detail {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.customer-detail .label {
    font-weight: 600;
    color: #777;
    margin-right: 0.3rem;
}

.customer-detail .address {
    margin-top: 0.2rem;
    padding-left: 0.5rem;
    border-left: 2px solid #eee;
    color: #666;
    font-size: 0.85rem;
}

.customer-note {
    margin-top: 0.4rem;
    background: #fff0f5;
    padding: 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #c2185b;
    border: 1px solid #f8bbd0;
}

.customer-note .label {
    font-weight: bold;
    color: #e91e63;
}

/* Specific Badges */
.badge-shipping {
    background: #e3f2fd;
    color: #1565c0;
    font-size: 0.75rem;
}

.badge-hand {
    background: #f3e5f5;
    color: #7b1fa2;
    font-size: 0.75rem;
}

/* Dashboard Stat Card Improvements */
.stat-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
    border-top: 4px solid #e91e63;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(233, 30, 99, 0.15);
}

/* Hero Text Readability */
.hero-subheadline {
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
    font-weight: 600;
}