/* Cart Delivery Fee Breakdown Styles */

.delivery-breakdown-row {
  border-bottom: 1px solid #f0f0f0;
}

.delivery-fee-label {
  font-weight: 500;
  color: #333;
}

.delivery-details {
  margin-top: 3px;
  font-size: 0.85rem;
  line-height: 1.3;
}

.delivery-details small {
  color: #666;
  font-style: italic;
}

/* Enhanced cart totals table */
.shoping-cart-total table {
  border-collapse: separate;
  border-spacing: 0;
}

.shoping-cart-total table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.shoping-cart-total table tr:last-child td {
  border-bottom: 2px solid #76a713;
  font-weight: bold;
}

/* Delivery breakdown specific styling */
.delivery-breakdown-row td {
  background-color: #f0f8f0;
}

.delivery-total-row td {
  background-color: #e8f5e8;
  font-weight: 600;
  color: #2d5016;
}

.delivery-breakdown-row:first-of-type td {
  border-top: 1px solid #e9ecef;
}

.delivery-breakdown-row:last-of-type td {
  border-bottom: 1px solid #e9ecef;
}

/* Hover effects for better UX */
.delivery-breakdown-row:hover td {
  background-color: #e8f5e8;
}

/* Total calculation improvements */
.shoping-cart-total table tr:nth-last-child(1) {
  background-color: #f8f9fa;
  color: #333;
}

.shoping-cart-total table tr:nth-last-child(1) td {
  background-color: #f8f9fa;
  color: #333;
  border-bottom: none;
  font-size: 1.1rem;
  border-top: 2px solid #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .delivery-details {
    font-size: 0.8rem;
  }
  
  .shoping-cart-total table td {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
  
  .delivery-fee-label {
    font-size: 0.9rem;
  }
}

/* Delivery info notice */
.delivery-info-notice {
  border: 1px solid #d4edda;
  background-color: #f8f9fa !important;
}

.delivery-info-notice .fas {
  color: #76a713;
}

/* Loading state for delivery calculations */
.delivery-calculating {
  color: #76a713;
  font-style: italic;
}

.delivery-calculating::after {
  content: '...';
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);
  }
  40% {
    color: #76a713;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);
  }
  60% {
    text-shadow:
      .25em 0 0 #76a713,
      .5em 0 0 rgba(0,0,0,0);
  }
  80%, 100% {
    text-shadow:
      .25em 0 0 #76a713,
      .5em 0 0 #76a713;
  }
}