/*
Theme Name: Product Theme
Theme URI: http://yourwebsite.com/product-theme
Author: Your Name
Author URI: http://yourwebsite.com
Description: A custom WordPress theme for displaying Products.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: product-theme
*/

/* Add your custom styles here */

/* Add your custom styles here */

/* General body and html styling for full height and centering */
html, body {
    /*height: 100%;*/
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
}

/* Centering header content */
header {
    margin-top: -14px;
    height: 45px;

    width: 100%;
    text-align: center;
    padding: 0px 0;
    background-color: #8ef9a5;
 
}

/* Centering article content */
article {
    width: 100%; /* Setting the width of the article to 80% of its parent */
    max-width: 960px; /* Maximum width */
    /*margin: 20px;*/
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Shadow for depth */
    background: #fff; /* White background */
    text-align: center; /* Center align the text */
}

article img {
    max-width: 100%; height: auto;
}

figure img {
    max-width: 100%; height: auto;
}


/* Centering footer content */
footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background-color: #222; /* Dark background for footer */
    color: #fff; /* White text color */
}

/* Media Query for Mobile Phones */
@media only screen and (max-width: 600px) {
    article, header, footer {
        width: 90%; /* Adjusting width for smaller screens */
        padding: 10px; /* Adjusting padding for smaller screens */
    }

    .post-thumbnail img {
        max-width: 100%; /* Making images responsive within their container */
        height: auto; /* Ensuring aspect ratio */
        border-radius: 15px;
    }
}

/* Rest of your CSS remains unchanged */


#preContentText
{
    text-align: left;
}

.reduction
{
    border-radius: 20px;
    padding: 5px;
    color: white;
    background: red;
}

.post-thumbnail img {
    width: 100%; /* Makes the image responsive */
    height: auto;
    margin-bottom: 20px; /* Adds space below the image */
    border-radius: 35px;
}
.product-container {
 
    display: flex;
    flex-direction: column; /* Align children vertically */
    width: 100%; /* Adjust width as needed */

}

.product-card {
    border-radius: 15px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: space-between; /* Space between main items */
    cursor: pointer;
    background: #f9f9f9;
    border: 1px solid #ccc;
    margin-bottom: 10px; /* Space between cards if multiple */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

 
.product-card:hover  {
    background-color: #e9f5ff;
}

.product-card.active {
    border: solid 5px #1d69a7; /* Highlight the active card */
    background-color: #e9f5ff;
}


.product-card img {
    border-radius: 15px;
    width: 80px; /* Fixed width, adjust as needed */
    height: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Space between the image and the product info */
}

.product-info {
    flex-grow: 1; /* Allows the info section to take up remaining space */
    padding-right: 10px; /* Space before the price */
}

.product-info > * {
    margin-top: 0;
    margin-bottom: 0;
}

.product-info > * + * {
    margin-top: 5px; /* Minimal space between elements */
}

.price {
    text-align: right;
    white-space: nowrap; /* Ensures the price does not break into multiple lines */
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-size: 1.2em;
}

.reductionValue {
    display: inline-block; /* Makes the element behave like an inline element but respect padding, margin, and width */
    width: auto; /* Width depends on the content inside */
    border-radius: 5px;
    padding: 5px;
    background: #cf7c00;
    color: white;
    font-size: smaller;
}

.stikedPrice
{
    text-decoration: line-through;
    color: #676767;
    font-size: smaller;
}

.product-delivery-card {
    text-align: left;
    border-radius: 15px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    align-items: center; /* Align items vertically in the center */
    justify-content: flex-start; /* Align items horizontally to the left */
    cursor: pointer;
    background: #f9f9f9;
    border: solid 5px #1d69a7; /* Highlight the active card */
    margin-bottom: 10px; /* Space between cards if multiple */
}

.deliveryButtonRadio
{    
    width: 18px;
    border: 1px solid silver;
    height: 18px;
    display: block !important;
    border-radius: 50%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}

.deliveryButtonRadio::before
{
    
    content: "";
    width: 12px;
    height: 12px;
    background-color: #000;
    position: absolute;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}
/* FORM */
/* FORM */
.input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #d9d5d5;
    font-size: 20px; /* Ensuring text size is proportional to the icon */
}

.input-container .icon-container {
    background-color: #f0f0f0; /* Light gray background for the icon area */
    padding: 12px; /* Adjusted padding to better fit larger icon */
    display: flex;
    align-items: center;
    border-top-left-radius: 4px; /* Match the parent's border radius */
    border-bottom-left-radius: 4px; /* Match the parent's border radius */
}

.input-container input[type="text"] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 20px; /* Maintaining larger font size for readability */
    padding: 12px 15px; /* Adjusted padding to align text vertically with larger icon */
}

.input-container input[type="number"] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 20px; /* Maintaining larger font size for readability */
    padding: 12px 15px; /* Adjusted padding to align text vertically with larger icon */
}

.input-container i.dashicons {
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    font-size: 29px; /* Significantly increased icon size */
    margin-right: 10px; /* Adjusted space between the icon and the text field */
}

/* ORDER BUTTTon */
.animated-button {
    background-color: #074317; /* Gold background */
    color: white; /* Text color */
    border: none; /* No border */
    border-radius: 20px; /* Rounded corners */
    padding: 10px 20px; /* Padding around text */
    font-size: 16px; /* Text size */
    cursor: pointer; /* Cursor indicates button */
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center; /* Center items vertically */
    transition: transform 0.3s; /* Smooth transformation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    font-weight: bolder;
}

.animated-button i.dashicons {
    margin-right: 8px; /* Space between icon and text */
}

/* Animation */
@keyframes pulse-animation {
    0%, 100% {
        transform: scale(1); /* Original size */
    }
    50% {
        transform: scale(1.05); /* Slightly larger */
    }
}

.animated-button {
    animation: pulse-animation 3s infinite; /* Apply animation */
}


.error-message {
    color: red;
    font-size: 12px;
    height: 20px; /* Ensure space for error text is reserved */
}

.input-error {
    border: 1px solid red;
}