/* ===============================
  GENERAL STYLES OR PAGE DEFAULTS
==================================*/
/* ======== For all Elements ======= */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: Roboto,Helevetica,system-ui;
  font-size: 18px;
}
h1,h2{
  font-family:  Oswald,Helevetica,system-ui;
}
.cart-sidebar > h2,.category-sidebar h2{
  color: hsl(320, 100%, 52%);
  text-align: center;
}
/* ======== links =========== */
a{
  text-decoration: none;
  color: #007bff;
}
a:visited{
  color: #007bff;
}
a:hover{
  color: blue;
}
a:active{
   color: orangered; 
}
.main-header{
  width: 100%;
  padding: 0%;
}
main{
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
footer{
  background-color: #222;
  color: #fff;
  text-align: center;
}

/* ==================================
  HEADER STYLES
  =================================== */

/* Top bar on header - styles */

.top-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  padding: 0.5rem;
  background-color: #007bff;
}
.top-bar select{
  border: none;
  border-radius: 1rem;
}
.logo{
  font-size: 2rem;
  font-weight: bolder;
  color: #007bff;
}

/* Middle bar on header - styles*/

.middle-bar{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10rem;
  background-color: #f4f4f4;
  /* justify-content: space-evenly; */
  padding: 0.5rem;
}
.searchbox{
  width: 50vw;
  height: 2vw;
  border-radius: 0.5rem;
  border: 1px solid #6610f2;
  box-shadow: inset;
}
.search-bar{
  display: flex;
}

/* navbar links on header - styles */

.navbar > ul{
  display: flex;
  justify-content: space-evenly;
  padding: 0.5rem;
  align-items: center;
  background-color: #fff;
  list-style: none;
}
.profile-image{
  height: 2rem;
  width: 2rem;
  border-radius: 2rem;
}

/* =================================
  BANNER STYLES 
  ==================================*/

  .hero-banner{
    overflow: hidden;
    width: 100%;
    background: #f5f5f5;
    padding: 10px;
  }
  .scrolling-banners {
    display: flex;
    gap: 2rem;
    animation: scroll-back-and-forth 45s linear infinite;
    width: max-content;
  }
  .banner1, .banner2, .banner3{
    background: #fff;
   border-radius: 10px;
   padding: 20px;
   min-width: 150px;
   text-align: center;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  /* Keyframes for back-and-forth */
@keyframes scroll-back-and-forth{
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(calc(-100% + 100vw));
  }
  100% {
    transform: translateX(0%);
  }
}
 .banner1, .banner2, .banner3{
  background-size: cover;
  background-position:  center;
  height: 40vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  text-align: center;
 }
 .banner1{
  background-image: url(../img/products/hamburger.webp);
 }
 .banner2{
  background-image: url(../img/products/beats.jpg);
 }
  .banner3{
  background-image: url(../img/products/jumper.jpg);
 }    
 .overlay{
  background-color: rgba(0,0,0,0.5); /*dark overlay for visibility*/
  padding: 2rem;
  border-radius: 1rem;
 }
.cta-button{
  background-color: hsl(320, 100%, 52%);
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: 999px;
  margin-top: 1rem;
  display: inline-block;
}

/* =======================================
  CATEGORY SHOW OFF
  =======================================*/
.cat-container{
  display: flex;
  overflow: auto;
  gap: 1rem;
  padding: 1rem; 
  background: #f5f5f5;
}
.cat{
  display: inline-flex;
}
.cat-info button{
  border: none;
  background: #007bff;
  color: white;
  border-radius: 5px;
}
.cat-info button:hover{
  cursor: pointer;
}
.cat-container img{
  height: 5rem;
  width: 5rem;
}
.cat{
  border:lightgray solid 0.1rem;
  border-radius: 1rem;
  padding: 1rem;
  background: white;
}
/* ====================================
  MOBILE NAV BAR
  ================================== */
.mobile-navbar{
  display: none;
  justify-content: space-between;
}
.mobile-navbar img{
  width: 2rem;
}
/* Close buttons for pop-up menus */
#closebutton,#closeButton{
  display: none;
}
/* ========================================
  STYLES FOR THE MARKET PLACE
  ========================================== */

  /* layout for the market section */
.market{
  border-top: solid 1px gray;
  margin-top: 1rem;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

/* category-sidebar styles */

.category-sidebar{
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #ccc;
  flex-shrink: 0;
  padding: 1rem;
  width: 15vw;
}
.items{
  list-style: none;
  padding: 1rem;
}
.category{
  font-weight: bold;
}
.category a{
  text-decoration: none;
}
.title{
  text-align: center;
}

/* product display area */

.product-display{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  overflow-y: auto;
  /* flex-grow: 1; */
  width: 70vw;
}
.category-container{
  border-right: solid 1px red;
  margin-left: 0.5rem;
}
.products-container{
  display: flex;
  flex-direction: row;
  width: 70vw;
  flex-wrap: wrap;
  gap: 1rem;
}
.product{
  border: solid 0.1rem lightgrey;
  padding: 1rem;
  border-radius: 1rem;
  padding-bottom: 0rem;
  
}
.product img{
  height: 10rem;
  width: 10rem; 
  border-radius: 1rem;
}
.product p{
  text-align: center;
}

/* ===============================
  ADD TO CART BUTTON STYLES
=================================== */

.add-to-cart{
  display: block;
  margin: auto; /* when margin is set to auto, it automatically centers a block element*/
  color: white;
  background-color: 	#007bff;
  border-radius: 1.5rem;
  border: none;
  padding: 1rem;
}
.add-to-cart:hover{
  background-color: #1014f2;
  cursor: pointer;
}

.cart-sidebar{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100vh;
  width: auto;
  border-left: solid 1px lightgrey;
}

.go-to-checkout{
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 8px;
  font-size: 1rem;
  text-align: center;
  background-color: #007bff;
}
.go-to-checkout:hover{
  background-color: #0056b3;
}
.go-to-checkout > a{
  color: white;
}

/* ==========================
  style for the footer
  =========================== */

.footer-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rem;
}
.footer-column{
  flex: 1 1 5rem;
  margin: 1rem;
}
.footer-column h4{
  margin-bottom: 0.5rem;
}
.footer-column ul{
  list-style: none;
  padding: 0;
}
.footer-column ul li{
  margin-bottom: 0.4rem;
}
.footer-bottom{
  text-align: center;
  padding: 1rem;
}
.social-icons span{
  margin-right: 1rem;
  cursor: pointer;
}
.social-icons img{
  width: 2rem;
  height: 2rem;
}

/*===============================
 styles for contact page 
 ================================
 */

.page-contact {
  margin: 0;
  padding: 0;
  background: #f8f9fa;
  color: #333;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}
h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.contact-form, .contact-info {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.contact-form form {
  display: flex;
  flex-direction: column;
}
.contact-form label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.contact-form button {
  padding: 0.75rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.contact-form button:hover {
  background-color: #0056b3;
}
.contact-info h2 {
  margin-bottom: 1rem;
}
.contact-info p {
  margin-bottom: 0.5rem;
}
.map {
  margin-top: 2rem;
  border-radius: 8px;
  overflow: hidden;
}
iframe {
  width: 100%;
  height: 300px;
  border: none;
}
  
/* ==========================
  Custom fonts of type ttf
  ===========================
  */

 @font-face{
  font-family: 'Roboto';
  src: url(../fonts/Roboto/static/Roboto_Condensed-Bold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'Oswald';
  src: url(../fonts/Oswald/static/Oswald-Bold.ttf) format('truetype') ;
  font-weight: bold;
  font-style: normal;
}

/* ======================
   CART UI STYLES
   ====================== */

#cart-container {
  padding: 12px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: #fff;
  color: #222;
  border-left: 2px solid #eee;
}

.empty-cart {
  font-size: 16px;
  color: #777;
  text-align: center;
  padding: 10px 0;
}

#cart-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#cart-container li {
  margin-bottom: 10px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.remove-btn,.add-btn {
  margin-left: 10px;
  color: white;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.add-btn{
  background-color: #007bff;
}
.add-btn:hover{
   background-color: #0562c5;
}
.remove-btn{
  background-color: hsl(320, 100%, 52%);
}

.remove-btn:hover {
  background-color: hsl(320, 93%, 41%);
}
.quantitySelectors{
  display: flex;
}

/* floating cart */
#floating-cart {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #222;
  color: white;
  padding: 10px 14px;
  border-radius: 50%;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#floating-cart .cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 50%;
}
/* ======================
   TOAST STYLES
   ====================== */

/* toast container feature for add to cart */
#toast-container {
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 9999;
}
.toast {
  color: #fff;
  background-color: hsl(320, 100%, 52%);
  padding: 10px 14px;
  border-radius: 4px;
  margin-top: 8px;
  opacity: 0.95;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 0.95; transform: translateY(0); }
}
@keyframes fadeout {
  from { opacity: 0.95; }
  to { opacity: 0; }
}
.toastImg img{
  width: 1rem;
}

/* ================================
    CHECKOUT PAGE STYLES
   ================================  */

.checkout-summary {
  max-width: 600px;
  margin: 2rem auto;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.checkout-summary ul {
  list-style: none;
  padding: 0;
}

.checkout-summary li {
  margin: 10px 0;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.checkout-button {
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin: auto;
}
.checkout-button:hover {
  background-color: #0562c5;
}


/* =============================
ABOUT PAGE STYLES
================================ */

.founder-info{
  display: flex;
  gap: 1rem;
}
.founder-bio{
  border-radius: 1rem;
  background-color: rgba(243, 237, 237, 0.986);
  padding: 1rem;
}
.founder-photo img{
  width: 10rem;
  height: auto;
  border-radius: 1rem;
}
.CEO{
  display: none;
}

/* ================================
LEGAL INFO PAGE STYLES
=================================== */
.legal-info{
  padding: 1rem;
}
#user-tips{
  padding-left: 2rem;
}
.alt-header{
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #1014f2;
  background-color: #fff;
  box-shadow: 0 0 1rem 8px rgba(0,0,0,0.05);
  border-radius: 1rem;
}

/* ===================================
PROFILE PAGE STYLES
====================================== */
.register{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.registration-form{
  display: flex;
  gap: 1rem;
}
.labels,.inputs{
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.profiler button{
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  color: white;
  border-radius: 0.2rem;
}
.login-btn{
  background-color: #080baa;
}
.login-btn:hover{
  background-color: #3336f3;
}
.signup-btn,.privacy-btn,.login-btn{
  width: 8vw;
  margin-top: 1rem;
  cursor: pointer;
  border: none;
}
.signup-btn{
  background-color: #c4001a;
}
.signup-btn:hover{
  background-color: #eb0927;
}
.privacy-btn{
  background-color: #27ae60;
  border-radius: 2px;
}

/* =========================================
            ACCOUNT STYLES
  ========================================== */
.accountQuery{
  height: 60vh;
  display: flex;
  gap: 5rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.buttonWrapper{
  display: flex;
  gap: 80%;
}
.accountStatus{
  display: flex;
  gap: 10%;
  justify-content: center;
  align-items: center;
}
#hasAccount,#hasNoAccount{
  width: 5rem;
  cursor: pointer;
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: none;
}
#hasAccount{
  background-color: blue;
}
#hasAccount:hover{
  background-color: rgb(0, 0, 255);
}
#hasNoAccount{
  background-color: red;
}
#hasNoAccount:hover{
  background-color: rgb(226, 31, 31);
}
/* =====================================
            ACCOUNT STYLES
  =================================== */
  .payment-form-wrapper {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}

/* keep form clean & card-like */
#paymentForm {
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  padding: 1.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-width: 400px;   /* ✅ optional: keeps it compact */
}

/* labels */
#paymentForm label {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/* spacing between inputs */
#paymentForm > div {
  margin-bottom: 1rem;
}

/* phone + amount inputs */
#paymentNumber,
#paymentForm input[type="number"] {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;  /* ✅ stretch inside the form, not fixed width */
  box-sizing: border-box;
}

/* button */
#payment-button {
  background: #007bff;
  color: white;
  font-size: 1rem;
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
}

#payment-button:hover {
  background-color: #0056b3;
}

/* ====================================
 PARTNER PAGE STYLES
 =====================================*/
 .partner-registrar{
  background-color: #27ae60;
  text-align: center;
 }
 .partner-details-form{
  display: flex;
  justify-content: center;
  padding-top: 1rem;
 }
 /* ====================================
  MAXWIDTH 1200px
  ==================================== */
  @media (max-width: 1200px){
    body{
      font-size: 16px;
    }
    .middle-bar{
      gap: 15rem;
    }
    .searchbox{
      height: 2.5vw;
    }
  }

/* ==================================
  STYLES FOR TABLET 
  ===================================*/

@media (max-width: 768px){
  body{
    font-size: 16px;
  }
  main{
    padding-top: 0px;
  }
  .middle-bar{
    gap: 8rem;
  }
  .searchbox{
    height: 4vw;
    width: 40vw;
    font-size: 12px;
  }
  /* product display area */
  .product-display{
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .products-container{
    gap: 1rem;
  }
  .product{
    border: solid 0.1rem lightgrey;
    padding: 0.5rem;
    border-radius: 1rem;
    padding-bottom: 0rem; 
  }
  .product img{
    height: 5rem;
    width: 5rem; 
    border-radius: 1rem;
  }
  .add-to-cart{
    padding: 0.5rem;
  }
  #cart-container{
    font-size: 11px;
  }
}

/* small screen 1 */
@media (max-width: 480px){
  h1{
    margin-bottom: 0.5rem;
  }
  body{
    font-size: 12px;
  }
  /* ============HEADER=========== */
  .top-bar{
    display: none;
  }
  .logo{
    font-size: 1.5rem;
  }
  .middle-bar{
    gap: 0.5rem;
    flex-direction: column;
  }
  .searchbox{
    width: 70vw;
    height: 5vh;
    font-size: 10px;
  }
  .profile-image{
    display: none;
  }
 .hero-banner{
  width: 100vw;
  height: 30vh;
 }
   /*overlay and banner*/
  .banner1,.banner2,.banner3{
    height: 25vh;
    padding: 15px;
  }
  .overlay{
    padding: 0rem;
  }
  .cta-button{
    margin-top: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  /* Close buttons for pop-up menus */
  #closebutton,#closeButton{
    display: block;
  }
/*===================navbarBAR================*/
  .navbar{
    display: none;
  }
  .mobile-navbar{
    display: flex;
  }
  /* ===============BANNERS==================== */
  /* .banner1, .banner2, .banner3{

  } */
  /*==============CATEGORY================= */
  .cat-container{
    display: none;
  }
  .cat{
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
  }
  .cat-info{
    display: flex;
    flex-direction: row;
  }
  /*=============== MARKET ==================*/
  .market{
    margin-right: 0rem;
  }

  /*==============Category sidebar========== */
  .category-sidebar{
   position: fixed;
   top: 0;
   right: -100%;
   height: 100%;
   width: 50%;
   z-index: 999;
   background-color: white;
   box-shadow: 0 0 8px black;
  }
  .category-sidebar div{
    width: max-content;
    padding-right: 0rem;
  }
  .visible-category-sidebar{
    right: 0%;
  }
  .items{
    display: inline-block;
    padding: 0.5rem;
  }
  /*=============product display area=========*/
  .category-container{
    margin-left: 0rem;
  }
  .products-container{
    gap: 0.3rem;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
  }
  .product{
    border: solid 0.1rem lightgrey;
    padding: 0.5rem;
    border-radius: 1rem;
    padding-bottom: 0rem; 
  }
  .product img{
    height: 5rem;
    width: 5rem; 
    border-radius: 1rem;
  }
  .product p{
    text-align: center;
  } 
  .product button{
    font-size: 10px;
    padding: 0.5rem;
  }
  /* ================Product Display area========== */
  .product-display{
    width: 100%;
    padding-left: 0;
  }
  /*================cart side bar=============*/
  .cart-sidebar{
   position: fixed;
   top: 0;
   height: 100%;
   width: 50%;
   right: -100%;
   z-index: 999;
   background-color: white;
   box-shadow: 0 0 8px black;
  }
  .privacy-btn{
    width: 50px;
  }
  .visibleCartSidebar{
    right: 0%;
  }
  #closebutton{
    font-size: large;
  }
  /*==============cart Icon ============= */
  .cartIcon{
    display: unset;
    padding: 2px;
  }
  .cartIcon img,.catIcon img{
    width: 2rem;
    height: auto;
  }
  /* ================= Profile page styles on mobile================= */
  .signup-btn,.login-btn{
    width: fit-content;
    font-size: inherit;
  }
  /* ================= Payment page styles on mobile =============== */
  #payment-form > button,#payment-number{
    width: 100%;
  }
  .checkout-button{
    font-size: 12px;
  }
}
@media (max-width: 430px){
  .founder-info{
    flex-direction: column;
  }
  .founder-photo img{
    width: 50%;
    height: auto;
    border-radius: 1rem;
    display: block;
    margin: auto;
  }  
}