/* ================================
   Crystal Elegance - Main CSS
   Pages: Store, Cart, Products,
          Checkout, Wishlist
   ================================ */

/* ---- Hero Carousel & Category Hover ---- */
.carousel-item {
  height: 400px;
}

.slider-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .carousel-item {
    height: 200px;
  }
}

.hover-img {
  transition: all 0.3s ease;
}

.hover-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}


/* ================================
   Variables (Same as auth.css)
   ================================ */
:root {
  --bg:          #f5efe6;
  --surface:     #ffffff;
  --surface2:    #fdf8f2;
  --brown:       #7c5c3e;
  --brown-light: #a07850;
  --brown-dim:   #c4a882;
  --brown-dark:  #4e3728;
  --white:       #ffffff;
  --text:        #3b2a1a;
  --muted:       #9e8572;
  --border:      #e8d9c8;
  --border2:     #d6c4ae;
  --red:         #c0392b;
  --red-light:   #f9eceb;
  --green:       #2d7a4f;
  --green-light: #edf7f2;
}

/* ================================
   Body
   (No flex center — store pages
   normal flow mein hain)
   ================================ */
body {
  font-family: 'Jost', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ================================
   Form Input
   ================================ */
.form-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .72rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(124,92,62,.1);
  background: white;
}

.form-input::placeholder {
  color: var(--muted);
}

/* ================================
   Wishlist Image Hover
   ================================ */
.wishlist-img:hover {
  transform: scale(1.05);
}

/* ================================
   Button Hover
   ================================ */
button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* ================================
   CART DETAIL PAGE
   ================================ */

/* Page wrapper — beige background */
.page-wrapper {
  background: var(--bg);
  min-height: 80vh;
  padding: 3rem 0;
}

/* Page heading */
.page-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--brown-dark);
  margin: 0;
}

/* Item count badge */
.item-badge {
  background: var(--brown);
  color: white;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 20px;
  letter-spacing: .5px;
}

/* ---- Cart Card ---- */
.cart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.cart-card-header {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cart-card-header i {
  color: var(--brown);
  font-size: 1.1rem;
}

.cart-card-header span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- Cart Item Row ---- */
.cart-item {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background .15s;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item:hover {
  background: #fdfaf6;
}

/* Product image */
.cart-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

/* Image placeholder when no image */
.cart-item-img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--brown-dim);
  font-size: 1.5rem;
}

/* Category text above product name */
.cart-item-category {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 .2rem;
}

/* Product name */
.cart-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brown-dark);
  margin: 0 0 .3rem;
  line-height: 1.3;
}

/* Product price per unit */
.cart-item-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--brown);
  margin: 0;
}

/* Variant badge */
.cart-item-variant {
  font-size: .75rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .15rem .5rem;
  display: inline-block;
  margin-top: .2rem;
}

/* Quantity badge */
.qty-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--brown-dark);
  white-space: nowrap;
}

/* Item total price */
.item-total {
  font-weight: 700;
  color: var(--brown);
  font-size: .95rem;
  white-space: nowrap;
  min-width: 90px;
  text-align: right;
}

/* Remove button */
.remove-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: .4rem;
  border-radius: 8px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}

.remove-btn:hover {
  color: var(--red);
  background: var(--red-light);
  transform: none; /* button:hover override hata do */
  opacity: 1;
}

/* ---- Order Summary Card ---- */
.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}

.summary-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}

.summary-label {
  font-size: .85rem;
  color: var(--muted);
}

.summary-value {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
}

.summary-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.summary-total-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brown-dark);
}

.summary-total-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brown);
}

/* Shipping/delivery note */
.shipping-note {
  background: var(--green-light);
  border: 1px solid #b8e0ca;
  border-radius: 8px;
  padding: .6rem .9rem;
  font-size: .78rem;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.2rem;
}

/* ---- Cart Buttons ---- */
.btn-checkout {
  width: 100%;
  background: linear-gradient(135deg, var(--brown), var(--brown-light));
  color: white;
  border: none;
  border-radius: 10px;
  padding: .88rem;
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  margin-bottom: .75rem;
}

.btn-checkout:hover {
  opacity: .9;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,92,62,.3);
}

.btn-continue {
  width: 100%;
  background: transparent;
  color: var(--brown);
  border: 1.5px solid var(--brown-dim);
  border-radius: 10px;
  padding: .8rem;
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  text-align: center;
  transition: background .2s, border-color .2s, transform .15s;
}

.btn-continue:hover {
  background: var(--bg);
  border-color: var(--brown);
  color: var(--brown-dark);
  transform: translateY(-1px);
  opacity: 1;
}

/* Secure badge */
.secure-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--muted);
  margin-top: .8rem;
}

.secure-badge i {
  color: var(--green);
}

/* ---- Empty Cart ---- */
.empty-cart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 5rem;
  color: var(--brown-dim);
  display: block;
  margin-bottom: 1rem;
}

.empty-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin-bottom: .5rem;
}

.empty-subtitle {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 2rem;
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--brown);
  color: white;
  text-decoration: none;
  border-radius: 10px;
  padding: .8rem 2rem;
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: opacity .2s, transform .15s;
}

.btn-explore:hover {
  opacity: .9;
  color: white;
  transform: translateY(-1px);
}

/* ---- Breadcrumb ---- */
.breadcrumb-area {
  margin-bottom: 1.5rem;
}

.breadcrumb-area a {
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}

.breadcrumb-area a:hover {
  color: var(--brown);
}

.breadcrumb-area span {
  font-size: .8rem;
  color: var(--muted);
  margin: 0 .4rem;
}

.breadcrumb-area p {
  font-size: .8rem;
  color: var(--brown);
  font-weight: 600;
  display: inline;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 576px) {
  .cart-item {
    flex-wrap: wrap;
  }

  .item-total {
    min-width: unset;
  }

  .page-heading {
    font-size: 1.6rem;
  }

  .summary-card {
    position: static;
  }
}