/* base.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fahkwang:wght@700&display=swap');

/* Global Styles */
body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100%; /* Ensure the body doesn't exceed the viewport width */
    box-sizing: border-box; /* Include padding and border in width calculations */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* Ensure padding is included in the element's total width */
}

/* Button Styles */
button, .btn {
    background-color: #ff6600; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding for buttons */
    font-size: 18px; /* Button font size */
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); /* Subtle shadow */
}

/* Remove focus outline on buttons */
button:focus, .btn:focus {
    outline: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Slightly increased shadow on focus */
}

/* Hover effect for buttons */
button:hover, .btn:hover {
    background-color: #e65c00; /* Darker shade on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Slightly more pronounced shadow */
}

/* Lighter button variant (for the 'Back to Shop' button, for example) */
button.btn-light, .btn-light {
    background-color: #ccc; /* Light gray background */
    color: #333; /* Darker text color */
    box-shadow: none; /* No shadow for lighter buttons */
}

/* Hover effect for lighter buttons */
button.btn-light:hover, .btn-light:hover {
    background-color: #bbb; /* Slightly darker gray on hover */
}

/* Remove underline from links styled as buttons */
a.btn {
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make it behave like a button */
}

/* Apply the button styles to anchor tags */
a.btn {
    background-color: #ff6600; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Padding for buttons */
    font-size: 18px; /* Button font size */
    cursor: pointer;
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); /* Subtle shadow */
}

/* Hover effect for anchor tags styled as buttons */
a.btn:hover {
    background-color: #e65c00; /* Darker shade on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Slightly more pronounced shadow */
}

/* Floating Cart Icon */
.floating-cart {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    border: 2px solid #ff6600;
    border-radius: 50%;
    padding: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Ensure it's styled as a clickable button */
    box-sizing: border-box; /* Ensure padding and border don't affect layout */
}

.floating-cart img {
    width: 32px;
    height: 32px;
    position: relative; /* Set position relative to use absolute positioning for the count */
}

#floating-cart-count {
    position: absolute;
    bottom: -4px; /* Positioning relative to the bottom of the cart icon */
    right: -4px;  /* Positioning relative to the right side of the cart icon */
    background-color: #ff6600;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    border: 2px solid #fff; /* Add a white border for better visibility */
}

/* Remove arrows from number input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

input[type=number] {
    -moz-appearance: textfield;
}