@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap');

/**{
  outline: 1px solid red;
}*/

html, body {
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Kumbh Sans', sans-serif;
    color: #000;
    background-color: #fff;
    letter-spacing: 0.05em;
}

/* For stars animation in INDEX.PHP  */

@keyframes move {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-200px);
    }
}

/*  For footer.php
Cannot link the CSS sheet outside of <header>
Can check if all pages bring in footer. 

*/

.footer {
    background: radial-gradient(circle at left, rgb(0, 226, 174), rgb(178, 105, 220));
}

.footer-wave {
    background-color: black;
    clip-path: path('M0 67.4 C 273,183.4 822,-49.8 1920.00,106.7 V 0 H 0 Z');
    height: 10rem;
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center; /*vertical alignment*/
    padding: 15rem 0 0 0;
    flex-wrap: wrap;
    background: linear-gradient(rgb(0, 226, 174), rgb(178, 105, 220));
    margin-top: -10rem; 

}

.footer-column-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    width: 80%; 
    flex-wrap: wrap;
    padding-bottom: 10rem;
}

.footer-column {
    flex-basis: 25%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    text-align: center;
    text-decoration: none;
}

.footer-column h4 {
    margin-bottom: 2rem; 
}

.footer-column h1 {
    margin-top: 2rem; 
}

.footer-column img {
    width: 50px;
    height: auto;
    margin-top: 2rem; 
}


.footer-column a {
    text-decoration: none;
    color: black;
}

.footer-link {
  color: #000;
  text-decoration: none;
}

.footer-link:hover {
    opacity: 0.8;
}

.footer-link .tcLink {
    display: block; /*link spans the full width of its container */
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0.2rem;
}

.footer-smallprint {
    padding-bottom: 1%;
}

.smallprint {
    font-size: 0.7rem;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); 
}

/* Modal content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
}

/* Close button */
.close-TCs {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-TCs:hover,
.close-TCs:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* For elements in shop.php, index.php, cart.js  */

#add-to-cart, .healthbenefits-learn-more-btn, .back-to-shop, #viewcart-button {
  font-family: 'Kumbh Sans', sans-serif;
  letter-spacing: 0.05em;
  border: 4px solid RGB(0,226,174);
  background-color: white;
  color: black;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  padding: 10px 20px;
  margin: 20px auto;
  position: relative; /* Make the element a positioning context for the pseudo-element for the gradient transition */
  overflow: hidden; /* Hide the overflow from the pseudo-element */
  z-index: 1;
  
}

#add-to-cart::before, .healthbenefits-learn-more-btn::before, .back-to-shop::before, #viewcart-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at left, rgba(0, 226, 174, 0.7), rgba(0, 226, 174, 1));
  transition: transform 0.3s;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
}


#add-to-cart:hover::before, #viewcart-button:hover::before, .healthbenefits-learn-more-btn:hover::before, .back-to-shop:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

#add-to-cart:hover, #viewcart-button:hover, .healthbenefits-learn-more-btn:hover, .back-to-shop:hover {
  color: white;
}


/* cart-item class only appears in cart.js. Will need to analyse
   how this is used before moving out of styles.css  */

.cart-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  margin-bottom: 1rem;
  gap: 1rem; /* Add gap to create space between grid cells */
}

.cart-item img {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
  width: 20rem;
  height: 20rem;
}
.cart-item .details {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.cart-item .quantity-container {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  align-items: center;
}

.cart-item .update-cart-button {
  grid-column: 2 / 3;
  grid-row: 3 / 3;
}
.cart-item .remove {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem; 
}

.update-cart-button, #backToShippingBtn, #successPrintBtn{
  font-family: 'Kumbh Sans', sans-serif;
  letter-spacing: 0.05em;
  border: 2px solid rgb(178, 105, 220);
  background-color: white;
  color: black;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
  transition: background-color 0.3s, color 0.3s;
}

.update-cart-button:hover, #backToShippingBtn:hover, #successPrintBtn:hover {
  background-color: rgb(178, 105, 220);
  color: white;
}

.cart-item p {
  margin: 1rem;
}

.cartItemsDiv{
  height: 100vh !important;
}

.cart-item img {
  width: 15rem;
  height: 15rem;
}


/* order-summary class occurs in both cart.php and
   checkout.php and mentioned in cart.js  */

.order-summary{
  display: flex;
  flex-direction: column;
  text-align: left;
  background-color: rgb(238,238,238);
  padding: 3% 5%;
}

.order-summary h2, .shipping-details h2 {
  margin-top: 0;
}

.order-summary p, .shipping-details form {
  margin-bottom: 1rem;
}

.cart-item p {
  margin: 0.3rem;
}



/* Adjustments for Small devices (landscape phones, 768px and down) */
@media only screen and (max-width: 768px) {
    
    /* menu in header.php, paragraph-text in index.php */
    .menu, .paragraph-text{
        font-size: 1rem;
    }
    
    h2 {
      font-size: 1em;
    }
    
    h1 {
      font-size: 1.1em;
    }
    
    /* Can't find class column, leave here till investigate */
    .portable-essential .column, .feature {
      width: inherit;
      text-align: center;
      justify-content: center;
      align-items: center;
      padding-left: 1em;
      padding-right: 1em;
    }
    
    /* footers stay in style.css */
    
     .footer-link{
      font-size: 0.8rem;
     }
    
    
    /* This class in both cart and checkout */
    .order-summary{
      width: 80%;
      text-align: center;
    }
}

/* Adjustments for Extra small devices (portrait phones, 480px and down) */
@media only screen and (max-width: 480px) {
  
    h1 {
      font-size: 1rem;
    }
    
    body {
        font-size: 0.9rem;
    }
    
 
    /* Only appears in cart.js. Need analysis before moving */
    
    .cart-item img {
      width: 5rem;
      height: 5rem;
    }
}

/* Adjustments for Extra extra small devices (small phones, 320px and up) */
@media only screen and (max-width: 320px) {
  body {
      font-size: 0.6rem;
  }
}