/* CSS Variables for colors and common values */
:root {
    --primary-color: #4CAF50; /* Green */
    --primary-color-dark: #388E3C; /* Dark Green */
    --primary-color-hover: #66BB6A; /* Light Green */
    --primary-color-hover-dark: #2E7D32; /* Darker Green */
    --background-color: #2E2E2E; /* Gray */
    --text-color: #E0E0E0; /* Light Gray */
    --secondary-text-color: #B0B0B0; /* Medium Gray */
    --highlight-color: #FF4081; /* Pink */
    --container-bg-color: #2A2A2A; /* Dark Container Gray */
    --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    --border-radius: 10px;
    --padding: 10px;
    --margin: 10px;
    --font-family: 'Roboto', sans-serif; /* Added Google Font */
}

/* Global Styles */
body {
    font-family: var(--font-family);
    background: var(--background-color); /* Updated to solid gray background */
    color: var(--text-color);
    text-align: center;
    padding: var(--padding);
    margin: 0;
    box-sizing: border-box; /* Ensure all elements use border-box model */
}

/* Navigation (Sticky Header) */
nav {
    position: sticky;
    top: 0;
    background: var(--container-bg-color);
    padding: var(--padding);
    z-index: 1000;
    margin-bottom: 20px;
    width: 100%; /* Ensure nav fits the page width */
    box-sizing: border-box;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
}

nav a.active {
    color: var(--highlight-color);
}

/* Logo Container */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Added margin-top to position it below the navigation bar */
}

.logo, .small-logo {
    background: var(--container-bg-color); /* Ensure logo background contrasts with page background */
    border-radius: var(--border-radius);
    padding: var(--padding);
    margin-bottom: 20px; /* Added margin to prevent overlap */
}

.logo {
    width: 100px;
    height: auto;
}

.small-logo {
    width: 75px;
    height: auto;
}

h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.5em;
    margin: 0;
    padding-top: var(--padding);
}

/* Store Container */
.store-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column; /* Changed to vertical layout */
    align-items: center;
}

/* Product Section */
.product-section {
    display: flex;
    flex-direction: column; /* Changed to vertical layout */
    align-items: center;
    gap: var(--margin);
}

/* Product Styling */
.product {
    background: var(--container-bg-color);
    padding: var(--padding);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%; /* Ensure products take full width */
    max-width: 600px; /* Limit max width for better readability */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
}

.product img {
    width: 100%;
    border-radius: var(--border-radius);
    height: auto;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

.product p {
    margin-top: var(--margin);
    flex-grow: 1;
}

/* Outer Form Box */
.form-container {
    background: var(--container-bg-color);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Individual Question Boxes */
.question-box {
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 15px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
    color: white;
    font-weight: bold;
}

/* Custom Light Gray Question Boxes */
.box-lightgray {
    background: #3a3a3a; /* Darker Gray */
    color: #e0e0e0; /* Lighter text for contrast */
}

/* Inputs Inside Question Boxes */
.question-box input,
.question-box textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 1em;
    margin-top: 5px;
    box-sizing: border-box;
    background: #4a4a4a; /* Slightly lighter gray than the box */
    color: white;
}

/* Custom-Themed Submit Button */
.custom-submit {
    margin-top: 15px;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53); /* Custom red-orange gradient */
    transition: background 0.3s ease, transform 0.2s ease;
}

.custom-submit:hover {
    background: linear-gradient(135deg, #ff4b4b, #ff7b33);
    transform: scale(1.05);
}




/* Buttons */
.paypal-button, .purchase-button {
    margin-top: var(--margin);
    padding: var(--padding) 20px;
    background: linear-gradient(to right, var(--primary-color), var(--primary-color-dark));
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1em;
    transition: background 0.3s ease, transform 0.2s ease; /* Added transform transition */
}

.paypal-button:hover, .purchase-button:hover {
    background: linear-gradient(to right, var(--primary-color-hover), var(--primary-color-hover-dark));
    transform: scale(1.05); /* Added hover effect */
}

.purchase-button {
    position: absolute;
    top: var(--padding);
    right: var(--padding);
}

/* Footer */
footer {
    margin-top: var(--margin);
    color: var(--secondary-text-color);
}

footer a {
    color: var(--highlight-color);
    text-decoration: none;
}

/* Terms of Service Container */
.tos-container {
    max-width: 800px;
    margin: auto;
    text-align: left;
    padding: 20px;
    background: var(--container-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .product, .box {
        width: 100%; /* Ensure products and boxes take full width on smaller screens */
    }
}

@media (max-width: 600px) {
    .product, .box {
        width: 100%; /* Ensure products and boxes take full width on smaller screens */
    }
}