/*how to make my website title by the left multiple button with link  bellow down in the middle and search button with link on top and  login by the right side card button by the right side at the end*/
 /* --- 1. Overall Header Layout --- */
.main-header {
    display: flex;
    /* Horizontally spaces the Left, Middle, and Right sections */
    justify-content: space-between; 
    /* Vertically aligns all section content to the center */
    align-items: center; 
    padding: 10px 20px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

/* --- 2. Middle Section (Buttons Bellow Down) --- */
.header-middle {
    /* Auto margins push the left and right sections away, centering the middle */
    margin-left: auto;
    margin-right: auto;
    /* This ensures the middle section doesn't stretch too wide */
    flex-grow: 0; 
}

.main-nav {
    display: flex; /* Makes the buttons sit next to each other */
    gap: 15px; /* Adds space between the buttons */
}

.nav-button {
    /* Style for the buttons */
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-button:hover {
    background-color: #007bff;
    color: white;
}

/* --- 3. Right Section (Search, Login, Cart) --- */
.header-right {
    display: flex;
    /* Aligns the items to the right side of the screen */
    align-items: center; 
    gap: 15px; /* Space between the items */
}

/* Style for the title, login, and cart links */
.site-title, .login-btn, .cart-btn, .search-btn {
    text-decoration: none;
    color: #333;
    padding: 5px 0;
}

.site-title {
    font-size: 1.5em;
    font-weight: bold;
}

.cart-btn {
    font-weight: bold;
    color: #cc0000;
}














/*one picture at top by the left side of the screen with zoom + and - inside the picture and two  small picture under the picture at the top by the left side the picture should be connected to the picture at the top and on the right side should be text and Categories link */


/* --- 1. Two-Column Layout --- */
.product-layout {
    display: flex; /* Enables flexbox layout */
    gap: 30px; /* Space between the two columns */
    padding: 20px;
}

.image-gallery {
    flex: 1; /* Takes up one part of the space (e.g., 40% of the screen) */
    max-width: 40%;
}

.details-panel {
    flex: 2; /* Takes up two parts of the space (e.g., 60% of the screen) */
}

/* --- 2. Main Picture and Zoom --- */
.main-picture-container {
    position: relative; /* **Crucial** for positioning zoom controls inside it */
    overflow: hidden; /* Important for the zoom effect */
    border: 1px solid #ddd;
    margin-bottom: 10px;
    cursor: zoom-in; /* Indicate to the user that it is zoomable */
}

#main-image {
    width: 100%;
    height: auto;
    display: block;
    /* Base zoom level and smooth transition */
    transform: scale(1.0); 
    transition: transform 0.3s ease-in-out; 
}

/* Position and style the zoom controls */
.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.zoom-controls button {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1.2em;
}

/* --- 3. Thumbnails --- */
.thumbnail-container {
    display: flex;
    gap: 10px;
}

.thumbnail {
    width: 100px; /* Small fixed width for thumbnails */
    height: 100px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.thumbnail:hover {
    border-color: #007bff; /* Highlight on hover */
}








/*how to right a three text with link inside the text that if you click the link it will show the next items bellow the text should be Streat across my website page.*/
/* Style for the clickable bar */
.accordion-header {
    width: 100%; /* Stretches the link area across the page */
    background-color: #f4f4f4;
    border-bottom: 1px solid #ccc;
    padding: 15px 20px;
    cursor: pointer;
    margin: 0; /* Remove default margin from h3 */
    text-align: center;
}

/* Style the link text inside the header */
.accordion-header a {
    text-decoration: none;
    color: #333;
    font-size: 1.2em;
    display: block; /* Ensures the whole H3 is the clickable area */
}

.accordion-header:hover {
    background-color: #e0e0e0;
}

/* **CRUCIAL**: Hide the content section by default */
.accordion-content {
    display: none; 
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: white;
}

/* Optional: Style for when content is visible */
.accordion-content.active {
    display: block; 
}




/* how to right my text to a website to be red*/
.red-text {
    /* You can use a color name, a hex code, or an RGB value */
    color: red; 
    /* color: #FF0000; */ /* Hex code for pure red */
    /* color: rgb(255, 0, 0); */ /* RGB for pure red */
}







/*how to make 4 and half star to my webpage*/
/* Style for the Big Paragraph */
.big-text {
    /* Sets the font size much larger than default */
    font-size: 24px; 
    /* Or you could use an em/rem unit: font-size: 1.8em; */
    color: #333; /* Optional: Sets a color */
}

/* Style for the Small Paragraph */
.small-text {
    /* Sets the font size much smaller than default */
    font-size: 12px; 
    /* Or you could use an em/rem unit: font-size: 0.8em; */
    color: #333; /* Optional: Sets the same color */
}






/*Returns & exchanges accepted with good beside*/
/* 1. Container for alignment */
.return-policy-box {
    display: flex; /* Puts items side-by-side */
    align-items: center; /* Vertically aligns them in the middle */
    gap: 8px; /* Adds space between the icon and the text */
    padding: 10px;
    border: 1px solid #e0e0e0;
    width: fit-content; /* Keeps the box from stretching across the page */
    margin: 10px 0;
}

/* 2. Styling the "Good" Icon */
.icon {
    font-size: 20px;
    color: #4CAF50; /* A friendly green color */
    font-weight: bold;
}

/* 3. Styling the Text */
.policy-text {
    font-size: 16px;
    color: #333;
    margin: 0; /* Remove default paragraph margins */
}








/* Base Styling for the cart container */
.cart-container {
    position: relative; /* Crucial for positioning the dropdown */
    display: inline-block;
}

/* Style for the visible cart link */
.cart-icon-link {
    text-decoration: none;
    background-color: #f8f8f8;
    color: #333;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* 🌟 "Style when you" hover: Change the icon link appearance 🌟 */
.cart-icon-link:hover {
    background-color: #e0e0e0;
    color: #007bff; /* Change text color on hover */
}

/* --- Dropdown Cart Styling --- */
.cart-dropdown {
    /* Initially hide the dropdown */
    display: none; 
    
    /* Position the dropdown right below the icon */
    position: absolute;
    top: 100%; /* Pushes it down below the icon link */
    right: 0; 
    
    width: 280px;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 1000; /* Ensures it appears over other elements */
}

/* Style for the link *inside* the shopping cart */
.checkout-btn {
    display: block;
    text-align: center;
    background-color: #007bff; /* Blue button */
    color: white;
    padding: 10px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 15px;
}

.checkout-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Class to make the dropdown visible (added by JavaScript) */
.cart-dropdown.active {
    display: block; 
}



 .step-down-btn {
    /* Transforms the link into a block element with padding */
    display: inline-block; 
    
    /* Button Aesthetics */
    background-color: #5cb85c; /* A nice green color */
    color: white; 
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    
    /* Removes the default link underline */
    text-decoration: none; 
    
    /* Optional smooth effect */
    transition: background-color 0.3s;
}

.step-down-btn:hover {
    background-color: #4cae4c; /* Darken on hover */
    cursor: pointer;
}







/* Style for the hidden content */
.hidden-content {
    /* CRUCIAL: Hides the content by default */
    max-height: 0; 
    overflow: hidden;
    
    /* Optional: Adds smooth animation when opening/closing */
    transition: max-height 0.3s ease-out; 
    
    /* Visual separation for the revealed text */
    padding: 0 15px; 
    background-color: #f0f0f0; 
}

/* Style for when the content is shown (added by JavaScript) */
.hidden-content.active {
    /* Set a height greater than the content to reveal it */
    max-height: 200px; /* Adjust this value if your hidden text is very long */
    padding: 15px;
}

/* Button Styling */
.toggle-button {
    background: none;
    border: 1px solid #ccc;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 10px;
}






/*how can i make a text should be passing from right to left at the top of my screen website */
/* 1. Container for the scrolling text */
.marquee-container {
    /* Puts the bar across the entire top width */
    width: 100%; 
    /* Ensures nothing overflows the container */
    overflow: hidden; 
    /* Sets the height of the bar */
    height: 30px; 
    /* Style for the bar itself */
    background-color: #ff9900; /* Bright orange background */
    color: #ffffff; /* White text color */
    white-space: nowrap; /* Forces text onto a single line */
    box-sizing: border-box;
    padding: 0;
    line-height: 30px; /* Vertically centers the text */
}

/* 2. The Text Element that will be animated */
.marquee-text {
    /* Removes default paragraph margin */
    margin: 0; 
    /* Apply the animation */
    animation: scroll-right-to-left 15s linear infinite;
    /* Adjust this time (15s) to control the speed. Lower = Faster. */
    
    /* Ensure the text is long enough to cover the screen */
    display: inline-block;
    padding-left: 100%; /* Pushes the text off-screen to the right to start the scroll */
}

/* 3. The Animation Rule */
/* This is what tells the browser *how* to move the text */
@keyframes scroll-right-to-left {
    /* 0% is the starting position (completely off-screen to the right) */
    0% {
        transform: translateX(0); /* The starting point, relative to its own padding */
    }
    /* 100% is the ending position (completely off-screen to the left) */
    100% {
        transform: translateX(-100%); /* Moves text to the left by 100% of its own width */
    }
}








/*Media Queries for small phones to big phones to tablet to laptop to pc */
/* 1. Reset everything to zero gaps */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Lock the width so it doesn't "re-flow" on smaller screens */
html, body {
    width: 1280px; /* This MUST match your meta tag above */
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Or your preferred color */
    overflow-x: hidden; /* Stops the page from shaking left-to-right */
}

/* 3. Ensure your main container fills that locked width */
.wrapper {
    width: 100%;
    min-height: 100vh;
}