:root {
  --primary-color: #1e4e5e;
  --secondary-color: #dcb668;
  --border-radius: 12px;
}
body {
  background-color: #f8f9fa;
}

.product-page .card {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
}
.breadcrumb-item a {
  color: #555;
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--primary-color);
}

/* Image Styles */
.product-image-container .main-product-image {
  max-width: 100%;
  max-height: 550px;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Details Styles */
.product-details .product-title {
  color: var(--primary-color);
}
.product-details .product-author a {
  color: #555;
  text-decoration: none;
}
.product-details .product-author a:hover {
  color: var(--primary-color);
}
.product-price {
  color: var(--primary-color);
}

/* Action Icons Bar (Inspired by your app) */
.action-icons-bar {
  display: flex;
  gap: 10px;
}
.action-icons-bar .action-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid #ddd;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}
.action-icons-bar .action-icon:hover {
  background-color: #f1f1f1;
  color: var(--primary-color);
}
.action-icons-bar .action-icon.text-danger:hover {
  color: #dc3545;
}
.action-icons-bar .fa-heart.active {
  color: #dc3545;
} /* Add an 'active' class via JS for favorited items */

/* Button Styles */
.action-buttons .btn {
  font-weight: bold;
  padding: 12px 0;
}

/* Seller Info Card */
.seller-info-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: var(--border-radius);
  transition: all 0.3s;
  position: relative;
}
.seller-info-card:hover {
  border-color: var(--secondary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.seller-info-card img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 15px;
}
.seller-info-card a {
  text-decoration: none;
  color: var(--primary-color);
}
.seller-info-card .stretched-link::after {
  border-radius: var(--border-radius);
} /* To make the link cover the card */

/* ==================== Purchase Modal Styles ==================== */
.purchase-modal-content {
  border-radius: var(--border-radius);
  border: none;
  background-color: var(--light-bg, #fdfaf3);
  /* Adding subtle pattern from your app screenshot */
  background-image: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23dcb668" fill-opacity="0.05"><path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/></g></g></svg>');
}
.purchase-modal-content .modal-title {
  font-weight: 900;
  color: var(--primary-color);
}
.purchase-modal-content .input-with-icon {
  position: relative;
}
.purchase-modal-content .input-with-icon i {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #aaa;
}
.purchase-modal-content .form-control {
  border-radius: var(--border-radius);
  padding: 12px 40px 12px 12px;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) inset;
}

.delivery-options .delivery-btn {
  border-radius: var(--border-radius);
  border: 2px solid #ddd;
  padding: 10px;
  font-weight: bold;
  color: #555;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}
.delivery-options .delivery-btn:hover {
  background-color: #f8f9fa;
}
.delivery-options .delivery-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 4px 10px rgba(30, 78, 94, 0.2);
}
.delivery-options .delivery-btn i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.pickup-details-card {
  background-color: rgba(220, 182, 104, 0.1);
  border: 1px solid rgba(220, 182, 104, 0.3);
  border-radius: var(--border-radius);
  padding: 15px;
  color: #6c5a34;
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-submit-purchase {
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  border-radius: var(--border-radius);
}
.btn-submit-purchase:hover {
  background-color: #163a46;
}