/* General styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #397dc7;
}

h2 {
  font-weight: bold;
  font-size: 1.5em; /* Fixed font size for h2 elements */
}

.subtitle {
    text-align: right;
    font-style: italic;
    font-weight: bold;
}

/* Form styling */
#purchase-form {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#purchase-form input[type=email],
#purchase-form input[type=text] {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

#buy-button {
    width: 25%; /* Set to half or any desired size */
    padding: 5px;
    margin: auto; /* Keeps the button centered */
    display: block;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#buy-button:hover {
    background-color: #218838;
}

/* Payment options styling */
.payment-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.payment-options div {
    flex: 1;
    margin-right: 10px; /* Spacing between options */
}

.payment-options div:last-child {
    margin-right: 0; /* Remove margin for the last item */
}

.payment-options label {
    display: block;
    cursor: pointer;
    text-align: center; /* Center the label (icon) */
}

.payment-info {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
    display: none; /* Start with hidden info */
}

/* Product container styling */
#product-container {
    margin-top: 20px;
}

.product {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px; /* Add margin to create space between product cards */
}

.product-content {
    display: flex;
    flex-direction: column; /* Stack product content vertically */
    align-items: center;
    padding: 10px;
}

.product-img-container {
    flex: 1;
    margin-bottom: 10px; /* Add margin to separate image from other content */
}

.product-img {
    max-width: 150px;
    height: auto;
    display: block;
    border-radius: 4px;
}

.product-info {
    text-align: left;
    flex: 1; /* Expand product info to fill the available space */
    padding: 10px;
}

.quantity-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.quantity {
    width: 50px; /* Adjust the width as needed */
    text-align: center;
    margin-bottom: 10px;
    border: 5px solid #ccc;
    border-radius: 10px;
    -moz-appearance: textfield; /* For Firefox */
}

/* Hide Default Browser Spinners */
/* For Chrome, Safari, Edge, Opera */
.quantity::-webkit-outer-spin-button,
.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-control {
    display: flex;
    align-items: center;
}

.quantity-control button {
    width: 30px; /* Original width */
    height: 30px; /* Original height */
    text-align: center;
    margin: 0 5px;
    border: 5px solid #ccc;
    border-radius: 10px;
    background-color: white;
    cursor: pointer;
    font-size: 16px; /* Original font size */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center content horizontally in flex container */
    align-items: center; /* Center content vertically in flex container */
    padding: 0; /* Reset padding to better align text */
}

.result {
    display: inline-block;
    margin-bottom: 20px; /* Adjust as needed */
}


/* Media Query for screens wider than 1024px */
@media screen and (min-width: 1025px) {
    .d-flex.align-items-center {
        height: 100vh; /* Apply full viewport height */
    }

    .row .col-md-4 {
        flex: 0 0 50%; /* Two products per row */
        max-width: 50%;
    }
}

/* Media Query for screens up to 1024px wide */
@media screen and (max-width: 1024px) {
    :root {
        --text-scale-factor: 1.7; /* Base scaling factor for text */
        --button-scale-factor: 2.2; /* Scaling factor for buttons */
        --input-scale-factor: 0.6; /* Reduced scaling factor for form inputs */
    }

    h1 {
        font-size: calc(1.7em * var(--text-scale-factor)); /* Adjust the font size of h1 */
    }


    body {
        font-size: calc(1em * var(--text-scale-factor)); /* Scales all text */
    }

    button, .btn, .quantity-control button {
        font-size: calc(16px * var(--button-scale-factor)); /* Scales button text based on original size */
    }

    .quantity-control button {
        width: calc(30px * var(--button-scale-factor)); /* Scales width based on original size */
        height: calc(30px * var(--button-scale-factor)); /* Scales height based on original size */
        border-radius: calc(10px * var(--button-scale-factor)); /* Scales border-radius based on original size */
    }

    /* Apply reduced scaling to #purchase-form input elements */
    #purchase-form input[type="text"], 
    #purchase-form input[type="email"] {
        font-size: calc(1em * var(--input-scale-factor) * var(--text-scale-factor)); /* Scales font size with reduced factor */
        padding: calc(10px * var(--input-scale-factor) * var(--text-scale-factor)); /* Scales padding with reduced factor */
    }

    .container {
        max-width: 1024px;
    }

    .row .col-md-4 {
        flex: 0 0 100%; /* Full width for stacked layout */
        max-width: 100%;
    }

    /* Adjusting product item layout for smaller screens */
    .product-item {
        display: flex;
        flex-direction: row; /* Horizontal layout */
        align-items: center; /* Center items */
        justify-content: space-between; /* Space out items */
    }

    .product-image {
        order: 1; /* Image first */
        width: 25%; /* 1/4 width for the image */
    }

    .product-name {
        order: 2; /* Name second */
        width: 75%; /* 3/4 width for the name */
    }

    .product-text,
    .product-anzahl {
        order: 3; /* Text and 'anzahl' below */
        width: 100%; /* Full width */
    }

    .product-flex-container {
        display: flex; /* Enable flexbox layout */
        flex-direction: row; /* Arrange items horizontally */
    }

    .image-and-quantity-container {
        flex: 30%; /* Flex grow to 30% */
        display: flex; /* Enable flexbox layout */
        flex-direction: column; /* Arrange items vertically */
        /* Add any other existing styles here */
    }

    .image-container {
        /* Your styles for image container */
    }

    .quantity {
        /* Styles for the quantity input */
        margin-top: 10px; /* Add space between image and quantity input */
    }

    .text-container {
        flex: 70%; /* Flex grow to 70% */
        margin-left: 10px; /* Minimum space between containers */
    }
}