/*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;
}













/*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 */
    }
}






/*HOW CAN I PUT A three small round box with styling and color and small text InSite the box on my website box*/
/* Container for alignment (puts the boxes next to each other) */
.box-container {
  display: flex; /* Use flexbox for easy horizontal layout */
  justify-content: space-around; /* Distributes space evenly */
  align-items: center;
  width: 100%; /* Take up the full width of its parent element */
  margin-top: 20px;
}

/* Base styling for all three boxes */
.round-box {
  /* Dimensions for a small box */
  width: 100px;
  height: 100px;
  /* Make it round */
  border-radius: 50%;
  /* Optional: Add a shadow for depth */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Center the text inside the box */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the small text inside the box */
.box-text {
  font-family: sans-serif;
  font-size: 0.9em; /* Small text size */
  color: #fff; /* White text for contrast */
  text-align: center;
  padding: 5px;
}

/* Specific colors for each box */
#box1 {
  background-color: #ff5733; /* Bright Red */
}

#box2 {
  background-color: #33ff57; /* Bright Green */
}

#box3 {
  background-color: #3357ff; /* Bright Blue */
}







/* General Setup */
.main-content-area {
    /* Required for 'position: absolute' of surrounding text to work relative to this container */
    position: relative;
    width: 600px; /* Adjust as needed */
    margin: 50px auto; /* Centers the whole block */
    padding: 20px;
    border: 1px solid #ccc; /* Optional: for visualization */
}

/* 1. Text Above the Boxes Styling */
.text-above-container {
    display: flex; /* Aligns the three text elements horizontally */
    justify-content: space-around; /* Spreads them out */
    margin-bottom: 20px;
}

.styled-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}

/* 2. The Three Styled Boxes Styling */
.boxes-container {
    display: flex; /* Crucial: Lays the boxes out in a row */
    justify-content: space-around; /* Adds space between them */
    align-items: center;
}












/* 1. Overall Container Setup (Optional, but good practice) */
.container {
  max-width: 1000px;
  margin: 40px auto; /* Centers the whole section */
  padding: 20px;
  text-align: center;
}

/* 2. Top Texts Styling */
.top-texts {
  display: flex; /* Aligns the texts horizontally */
  justify-content: space-around; /* Distributes space evenly */
  margin-bottom: 20px;
}

.top-heading {
  font-family: Arial, sans-serif;
  font-size: 1.5em;
  padding: 10px 15px;
  border-radius: 5px;
  flex-basis: 30%; /* Makes each text take up about 30% of the space */
}

/* Individual Top Text Colors/Styles */
.top-heading-1 { color: #007bff; background-color: #e6f0ff; }
.top-heading-2 { color: #28a745; background-color: #e6ffe6; }
.top-heading-3 { color: #ffc107; background-color: #fffae6; }


/* 3. Box Row Alignment */
.box-row {
  display: flex; /* Lays the boxes out horizontally */
  justify-content: space-around; /* Adds space between them */
  align-items: flex-start; /* Aligns items to the top (in case boxes were different heights) */
}

/* 4. The Round Boxes */
.round-box {
  width: 150px; /* Adjust size as needed */
  height: 150px;
  border-radius: 50%; /* **THIS makes the box perfectly round** */
  display: flex; /* Used to center the inner text */
  justify-content: center;
  align-items: center;
  position: relative; /* **Crucial for positioning the side texts** */
  margin: 30px; /* Space between boxes */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Individual Box Colors */
.box-1 { background-color: #17a2b8; border: 3px solid #007bff; }
.box-2 { background-color: #6c757d; border: 3px solid #28a745; }
.box-3 { background-color: #dc3545; border: 3px solid #ffc107; }

/* 5. Inner Text */
.inner-text {
  color: white; /* Text inside the boxes */
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  z-index: 1; /* Ensures text is above any other elements */
}

/* 6. Side Texts (Around Each Box) */
.side-text {
  position: absolute; /* Allows precise placement relative to the .round-box */
  font-size: 1.1em;
  font-weight: bold;
  padding: 5px;
  background-color: #333; /* Dark background for visibility */
  color: white;
  border-radius: 3px;
  z-index: 5; /* Ensures text is always on top */
}

/* Positioning for the side texts */
.top-left {
  top: -25px; /* Moves it above the box */
  left: -20px; /* Moves it to the left */
}

.top-right {
  top: -25px; /* Moves it above the box */
  right: -20px; /* Moves it to the right */
}

.bottom-center {
  bottom: -25px; /* Moves it below the box */
  left: 50%;
  transform: translateX(-50%); /* Centers it horizontally */
}








/*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;
}