/* Enhanced Sakura-Inspired Color Palette */
:root {
  --color-sakura-white: #fff5f7; /* Soft sakura white with a pinkish tint */
  --color-sakura-pink: #f8b8c3; /* Light, delicate sakura pink */
  --color-sakura-blush: #ffccd5; /* Subtle blush pink for backgrounds */
  --color-sakura-deep: #d4506e; /* Deep sakura red for bold accents */
  --color-sakura-accent: #ff99ac; /* Vibrant sakura pink for highlights */
  --color-sakura-shadow: #e8c3cc; /* Subtle sakura pink for borders and shadows */
  --color-sakura-leaf: #a8d5ba; /* Soft green for natural contrast */
  --color-sakura-dusk: #6b4b56; /* Deep dusk pink for text */
  --color-sakura-muted: #8a6a75; /* Muted sakura tone for secondary text */
}

/* Global Styles */
html,
body {
  background-color: var(--color-sakura-blush) !important; /* Light blush pink background */
  margin: 0;
  padding: 0;
  font-family: 'Lora', serif; /* Elegant, serif font for a refined look */
}

/* Card Components */
.product-card,
.server-card,
.select-server-card {
  background: var(--color-sakura-white) !important; /* Soft sakura white */
  border: 2px solid var(--color-sakura-shadow) !important; /* Subtle pink border */
  border-radius: 16px; /* Softer, rounded corners */
  box-shadow: 0 6px 12px rgba(232, 195, 204, 0.25); /* Deeper shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover,
.server-card:hover,
.select-server-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 16px rgba(232, 195, 204, 0.3); /* Enhanced shadow on hover */
}

/* Form Elements */
.form-control,
.modal-content,
.bg-soft {
  background-color: var(--color-sakura-white) !important; /* Soft white background */
  border: 2px solid var(--color-sakura-shadow) !important; /* Subtle pink border */
  border-radius: 8px; /* Slightly rounder for a softer look */
  color: var(--color-sakura-dusk) !important; /* Deep dusk pink for text */
}

input,
.text-black .text-muted {
  border: 2px solid var(--color-sakura-shadow) !important;
  color: var(--color-sakura-dusk) !important; /* Deep dusk pink for contrast */
}

/* Typography */
.text-black a:not(.btn),
.text-black h1,
.text-black h2,
.text-black h3,
.text-black h4,
.text-black h5,
.text-black h6,
.text-black .h1,
.text-black .h2,
.text-black .h3,
.text-black .h4,
.text-black .h5,
.text-black .h6,
.text-black .display-1,
.text-black .display-2,
.text-black .display-3,
.text-black .display-4,
.title,
.category,
.item-price,
.item-title,
.modal-title,
.label,
label,
.input-group .form-control,
.text-soft,
.text-soft:hover,
.text-black,
.text-black:hover,
h4,
p {
  color: var(--color-sakura-dusk) !important; /* Deep dusk pink for text */
}

/* Specific Text Overrides */
h5.font-weight-bolder.mb-1.text-black {
  color: var(--color-sakura-deep) !important; /* Deep sakura red for emphasis */
}

p.small.mb-0.text-uppercase.text-black {
  color: var(--color-sakura-muted) !important; /* Muted sakura tone for smaller text */
}

/* Cart Components */
.cart-cost {
  color: var(--color-sakura-accent) !important; /* Vibrant sakura pink for cost */
}

.cart-item-actions {
  border: 2px solid var(--color-sakura-shadow) !important;
  border-radius: 8px;
  background-color: var(--color-sakura-white) !important;
  transition: background-color 0.3s ease;
}

.cart-item-actions:hover {
  background-color: var(--color-sakura-pink) !important; /* Light sakura pink on hover */
}

/* Margin and Icon Styles */
.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
  color: var(--color-sakura-leaf) !important; /* Soft green for icons */
  fill: var(--color-sakura-leaf) !important;
}

/* Product Button Styles */
.product-card .btn,
.server-card .btn {
  border-radius: 50px !important; /* Retain semi-circular buttons */
  padding: 0.6rem 1.8rem;
  background-color: var(--color-sakura-accent) !important; /* Vibrant sakura pink buttons */
  color: var(--color-sakura-white) !important; /* Soft white text */
  border: none;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-card .btn:hover,
.server-card .btn:hover {
  background-color: var(--color-sakura-deep) !important; /* Deep sakura red on hover */
  transform: scale(1.05); /* Slight scale-up on hover */
}

/* Recent Purchases Image Styles */
.recent-purchases img,
.recent-purchases .purchase-image {
  border-radius: 50% !important; /* Circular images */
  object-fit: cover;
  border: 2px solid var(--color-sakura-leaf) !important; /* Soft green border for contrast */
}

/* Additional Hover Effects for Interactivity */
.form-control:hover,
.modal-content:hover {
  border-color: var(--color-sakura-accent) !important; /* Vibrant pink border on hover */
}

/* Top Donators Section */
.top-donators {
  background: var(--color-sakura-white) !important;
  border: 2px solid var(--color-sakura-shadow) !important;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(232, 195, 204, 0.25);
  padding: 1.5rem;
  margin: 1rem 0;
  max-width: 300px;
}

.top-donators h3 {
  color: var(--color-sakura-deep) !important;
  text-align: center;
  margin-bottom: 1rem;
}

.top-donators ul {
  list-style: none;
  padding: 0;
}

.top-donators li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: var(--color-sakura-dusk) !important;
  border-bottom: 1px solid var(--color-sakura-shadow);
}

.top-donators li:last-child {
  border-bottom: none;
}

.top-donators .donator-amount {
  color: var(--color-sakura-accent) !important;
  font-weight: 500;
}