/* Global styles */
body {
    background-color: #ffffff; /* White background for overall site */
    color: #223752; /* Dark blue text for readability */
    font-family: Arial, sans-serif;
    overflow-y: auto;
    margin-bottom: 60px; /* Allows space for fixed footer */
    /* Decorative dotted background with branded colors */
    background-image: radial-gradient(circle at 10% 15%, #1e6f34 8px, transparent 10px), radial-gradient(circle at 20% 30%, #223752 6px, transparent 8px), radial-gradient(circle at 25% 70%, grey 10px, transparent 12px), radial-gradient(circle at 40% 50%, #1e6f34 12px, transparent 14px), radial-gradient(circle at 60% 20%, #223752 9px, transparent 11px), radial-gradient(circle at 70% 80%, grey 8px, transparent 10px), radial-gradient(circle at 85% 60%, #1e6f34 10px, transparent 12px), radial-gradient(circle at 90% 25%, #223752 6px, transparent 8px), radial-gradient(circle at 55% 75%, grey 9px, transparent 11px), radial-gradient(circle at 35% 90%, #1e6f34 7px, transparent 9px);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Link styles */
a {
    color: #1e6f34; /* Green for standard links */
}

    a:hover {
        color: #716765; /* Light brown hover effect for links */
    }

/* Navbar styles */
.navbar {
    background-color: #223752; /* Dark blue navbar background */
}

    .navbar .navbar-brand {
        color: #223752; /* Keep brand text consistent with brand color */
        font-family: "Great Vibes", cursive; /* Elegant branding font */
        font-weight: 400;
        font-style: normal;
    }

    .navbar .nav-link {
        color: #223752; /* Dark blue for nav links to match brand */
    }

/* Header styles (if used separately from navbar) */
header {
    background-color: #716765; /* Light brown background */
    color: #ffffff; /* White text for contrast */
    padding: 20px;
}

    header h1 {
        font-size: 2.5rem;
        text-align: center;
    }

/* Button styles */
.btn-primary {
    background-color: #1e6f34; /* Green base color for primary buttons */
    border-color: #1e6f34;
}

    .btn-primary:hover {
        background-color: #223752; /* Dark blue on hover */
        border-color: #223752;
    }

/* Form styling */
.form-group label {
    color: #223752; /* Label color to match theme */
}

.form-control {
    border-color: #223752; /* Input borders themed to dark blue */
}

    .form-control:focus {
        border-color: #1e6f34; /* Highlight border green when focused */
        box-shadow: 0 0 5px rgba(30, 111, 52, 0.5); /* Subtle green glow */
    }

/* Footer styles */
footer {
    background-color: #223752; /* Dark blue background */
    color: #ffffff; /* White text */
    text-align: center;
    padding: 15px;
}

    footer a {
        color: #ffffff; /* White links in footer */
    }

        footer a:hover {
            color: #1e6f34; /* Hover effect green */
        }

/* Alert for success messages (like order confirmation) */
.alert-success {
    background-color: #1e6f34; /* Green background */
    color: #ffffff; /* White text */
}

/* Heading styles */
h2, h3 {
    color: #223752; /* Use dark blue for subheadings */
}

/* Responsive base font sizes */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px; /* Larger base font for wider screens */
    }
}

/* Focus styling for accessibility */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, /* White inner glow */
    0 0 0 0.25rem #258cfb; /* Blue outline */
}

/* General page setup */
html, body {
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Mobile-specific spacing */
@media (max-width: 768px) {
    .container {
        padding-bottom: 250px !important; /* Ensure enough space for footer */
    }
}