/* Credit System Styles */

/* Credit price */
.wc-credit-system-price {
  font-weight: bold;
}

/* Transaction amounts */
.wc-credit-system-transactions .positive,
.woocommerce-table--my-account-credits .positive {
  color: #28a745;
  font-weight: bold;
}

.wc-credit-system-transactions .negative,
.woocommerce-table--my-account-credits .negative {
  color: #dc3545;
  font-weight: bold;
}

/* My account credits table */
.woocommerce-table--my-account-credits .positive {
  font-weight: bold;
}

.woocommerce-table--my-account-credits .negative {
  font-weight: bold;
}

/* Admin styles */
.wc-credit-system-manage-credits {
  margin-top: 20px;
}

.displaying-filter {
  margin-left: 10px;
  line-height: 28px;
}

.remove-filter {
  margin-left: 5px;
  font-size: 12px;
}

/* Modal styles */
#wc-credit-system-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  color: #333; /* Consistent text color */
}

.wc-credit-donation-modal-overlay,
.wc-credit-system-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999998;
  animation: fadeIn 0.3s ease-out;
}

.wc-credit-donation-modal-content,
.wc-credit-system-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 480px;
  z-index: 999999;
  animation: modalSlideIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.wc-credit-donation-modal-header,
.wc-credit-system-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wc-credit-donation-modal-title,
.wc-credit-system-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
}

.wc-credit-donation-modal-close,
.wc-credit-system-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  line-height: 1;
}

.wc-credit-donation-modal-body,
.wc-credit-system-modal-body {
  padding: 24px;
  color: #374151;
  font-size: 0.95rem;
}

.wc-credit-donation-modal-footer,
.wc-credit-system-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: #f9fafb;
  border-radius: 0 0 12px 12px;
}

/* --- Donation Modal Specific Styles --- */
#wc-credit-donation-modal .wc-credit-donation-intro {
  margin-top: 0;
  margin-bottom: 20px;
  color: #4b5563;
}

#wc-credit-donation-modal .wc-credit-donation-input-group {
  position: relative;
  margin-bottom: 16px;
}

#wc-credit-donation-modal .wc-credit-donation-input-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

#wc-credit-donation-modal #wc-credit-donation-amount {
  width: 100%;
  padding: 10px 70px 10px 12px;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#wc-credit-donation-modal #wc-credit-donation-amount:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

#wc-credit-donation-modal .wc-credit-donation-input-group span {
  position: absolute;
  right: 12px;
  top: 10px; /* Adjust based on label height */
  color: #6b7280;
  font-size: 0.9rem;
}

#wc-credit-donation-modal .wc-credit-donation-balance-summary {
  font-size: 0.9rem;
  color: #4b5563;
    background-color: #caf8cc;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

#wc-credit-donation-modal .summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

#wc-credit-donation-modal .summary-row span:last-child {
  font-weight: 600;
  color: #111827;
}

#wc-credit-donation-modal .final-balance-row {
  border-top: 1px solid #e5e7eb;
  margin-top: 4px;
  padding-top: 8px;

}

#wc-credit-donation-modal .wc-credit-donation-feedback {
  font-size: 0.9rem;
  padding: 10px;
  border-radius: 6px;
  margin-top: 8px;
  display: none; /* Hidden by default */
}

#wc-credit-donation-modal .wc-credit-donation-feedback.error {
  display: block;
  background-color: #fee2e2;
  color: #b91c1c;
}

#wc-credit-donation-modal .wc-credit-donation-feedback.success {
  display: block;
  background-color: #dcfce7;
  color: #166534;
}

#wc-credit-donation-modal .wc-credit-donation-modal-confirm:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* --- Existing Modal Styles (for reference and consistency) --- */
#wc-credit-system-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
}

.wc-credit-system-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 17%) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
}

.wc-credit-system-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f9fa; /* Changed from white to a soft light gray with blue hint */
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 640px; /* Increased from 520px */
  overflow: visible; /* Changed back to visible to allow the close button to overlap */
  animation: modalSlideIn 0.3s ease-out;
  position: relative; /* Ensure the modal content is a positioning context for the close button */
}

.wc-credit-system-modal-header {
  padding: 20px 24px 12px 24px; /* Reduced padding-bottom from 20px to 12px */
  border-bottom: 1px solid #e5e5e5; /* Added border-bottom */
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Changed from center to flex-start */
  background-color: #f8f9fa; /* Match the modal background */
  border-radius: 12px 12px 0 0; /* Maintain border radius for the header */
  overflow: hidden; /* Prevent content from breaking the border radius */
}

.wc-credit-system-modal-header h3 {
  margin: 0 0 4px 0; /* Reduced bottom margin from 8px to 4px */
  font-size: 1rem !important; /* Set to 1rem with !important */
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}

.wc-credit-system-intro-text {
  font-size: 13px; /* Same as note */
  color: #333;
  line-height: 1.4;
  margin: 0; /* Removed bottom margin */
}

.wc-credit-system-modal-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  background-color: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
  line-height: 1;
}

.wc-credit-system-modal-close:hover {
  background-color: #f2f2f2;
  color: #333;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.wc-credit-system-modal-body {
  padding: 24px;
  color: #333; /* Consistent text color */
  font-size: 14px; /* Consistent font size */
  line-height: 1.4; /* Reduced line height */
  overflow: hidden; /* Prevent content from breaking the modal shape */
}

.wc-credit-system-modal-body p {
  margin: 0 0 16px;
  line-height: 1.4; /* Reduced line height for paragraphs */
}

/* Receipt-style layout */
.wc-credit-system-receipt {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

/* Common styles for receipt rows */
.wc-credit-system-receipt-row {
  display: flex;
  align-items: flex-start;
}

/* Product info row - more prominent */
.wc-credit-system-product-info {
  padding: 12px 0;
  /* Removed dashed border as requested */
}

/* Balance and cost rows - more compact */
.wc-credit-system-balance-info,
.wc-credit-system-cost-info {
  padding: 6px 0;
  font-size: 13px; /* Slightly smaller font */
}

/* Empty space to maintain alignment with product image */
.wc-credit-system-empty-space {
  width: 60px;
  margin-right: 16px;
  flex-shrink: 0;
}

/* Icon styles for product section */
.wc-credit-system-product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-credit-system-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title and value container styles for all sections */
.wc-credit-system-product-title-container,
.wc-credit-system-balance-title-container,
.wc-credit-system-cost-title-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.wc-credit-system-product-price-container,
.wc-credit-system-balance-value-container,
.wc-credit-system-cost-value-container {
  min-width: 120px;
  margin-left: 16px;
  text-align: right;
  display: flex;
  flex-direction: column;
}

/* Tagline styles for all sections */
.wc-credit-system-tagline {
  font-size: 11px;
  color: #777;
  margin-bottom: 4px;
  font-weight: normal;
  letter-spacing: 0.5px;
  /* Removed text-transform: uppercase; as requested */
}

/* Title and value styles for product info */
.wc-credit-system-product-title,
.wc-credit-system-product-price {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: #333;
}

/* Title and value styles for balance and cost - now same color as product info */
.wc-credit-system-balance-label,
.wc-credit-system-cost-label,
.wc-credit-system-current-balance-value,
.wc-credit-system-cost-value {
  font-size: 13px;
  font-weight: 500; /* Slightly less bold */
  margin: 0;
  color: #333; /* Changed from #555 to #333 to match product info */
}

/* Note with icon - styled as a notice with reddish color */
.wc-credit-system-note {
  margin-top: 20px;
  padding: 12px 16px;
  /* Removed border-top as requested */
  /* Removed left border as previously requested */
  font-size: 13px;
  color: #d32f2f; /* Reddish text color */
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  background-color: #ffebee; /* Light red background */
  border-radius: 6px; /* Rounded corners */
}

.wc-credit-system-note-icon {
  margin-right: 12px;
  color: #d32f2f; /* Matching red color for icon */
  flex-shrink: 0;
}

.wc-credit-system-note-text {
  flex-grow: 1;
}


.wc-credit-system-modal-footer button {
  min-width: 100px; /* Reduced from 120px to 100px */
  padding: 8px 16px; /* Reduced from 12px 20px to 8px 16px */
  border-radius: 9999px; /* Pill shape */
  font-weight: 500;
  font-size: 13px; /* Reduced from 14px to 13px */
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: none; /* Removed uppercase */
  letter-spacing: 0.5px;
  border: 1px solid transparent; /* Add base border */
}

.wc-credit-system-modal-buy-credits {
  background-color: #e9ecef; /* Changed to a standard UI/UX light gray */
  border: 1px solid #ced4da; /* Slightly darker border */
  color: #495057; /* Darker text for better contrast */
  margin-right: auto; /* Push to the left */
}

.wc-credit-system-modal-buy-credits:hover {
  background-color: #dee2e6; /* Slightly darker on hover */
  border-color: #adb5bd;
  color: #212529; /* Darker text on hover */
}

.wc-credit-system-modal-cancel {
  background-color: #dc3545;
  color: #fff;
}
.wc-credit-system-modal-cancel:hover {
  background-color: #c82333;
}

.wc-credit-system-modal-confirm {
  background-color: #00c853 !important; /* More vibrant green */
  border: 1px solid #00c853 !important; /* More vibrant green */
  color: white !important;
}

.wc-credit-system-modal-confirm:hover {
  background-color: #00b34a !important; /* Darker shade for hover */
  border-color: #00b34a !important;
  box-shadow: 0 2px 5px rgba(0, 200, 83, 0.3) !important;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .wc-credit-system-modal-content {
    width: 95%;
    max-width: none;
  }

  .wc-credit-system-modal-header {
    padding: 16px 20px 10px 20px; /* Reduced padding-bottom for mobile as well */
  }

  .wc-credit-system-modal-body {
    padding: 20px;
  }

  /* Adjust all info sections for mobile */
  .wc-credit-system-receipt-row {
    flex-direction: column;
  }

  .wc-credit-system-product-image,
  .wc-credit-system-empty-space {
    margin-bottom: 12px;
    align-self: center;
  }

  .wc-credit-system-empty-space {
    display: none; /* Hide empty space on mobile */
  }

  .wc-credit-system-product-title-container,
  .wc-credit-system-balance-title-container,
  .wc-credit-system-cost-title-container,
  .wc-credit-system-product-price-container,
  .wc-credit-system-balance-value-container,
  .wc-credit-system-cost-value-container {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .wc-credit-system-modal-footer {
    padding: 16px 20px;
    flex-direction: column-reverse;
  }

  .wc-credit-system-modal-footer button {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 12px; /* Even more compact on mobile */
  }

  .wc-credit-system-modal-buy-credits {
    margin-right: 0; /* Reset margin for mobile */
    order: 3; /* Put at the bottom */
  }
}

/* --- Credit Purchase Modal --- */
#wc-credit-purchase-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999; 
  display: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#wc-credit-purchase-modal .wc-credit-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

#wc-credit-purchase-modal .wc-credit-modal-content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 70vw;
  max-width: 70vw;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

#wc-credit-purchase-modal .wc-credit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

#wc-credit-purchase-modal .wc-credit-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
}

#wc-credit-purchase-modal .wc-credit-modal-close {
  background: #2787db;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  padding: 0;
  font-size: 20px;
}

#wc-credit-purchase-modal .wc-credit-modal-close:hover {
  background: #1f7ac5;
}

#wc-credit-purchase-modal .wc-credit-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 80px); /* leaves room for header */
}

/* --- REDESIGNED Payment Confirmation Modal --- */
#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-content {
  max-width: 480px;
  width: 90%;
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-header {
  background: white;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
  text-align: center;
  position: relative;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-title {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #2787db;
  color: #fff;
  border: 1px solid #cbd5e1;
  width: 32px;
  height: 32px;
  font-size: 16px;
}
/*
#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-close:hover {
  background: #e2e8f0;
  color: #475569;
}*/

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-body {
  padding: 0;
  background: white;
}

/* NEW LAYOUT STRUCTURE */
/* Big Product Image Section - Two Column Layout */
.wc-credit-booking-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px;
  border-bottom: 1px solid #f1f5f9;
}

.wc-credit-booking-image {
  width: 120px;
  height: auto;
  min-height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #f1f5f9;
  flex-shrink: 0;
}

.wc-credit-booking-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wc-credit-booking-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wc-credit-booking-title {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0 0 10px 0;

  text-transform: capitalize;
}

.wc-credit-booking-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: #64748b;
}

.wc-credit-booking-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wc-credit-booking-detail svg {
  width: 16px;
  height: 16px;
  color: #2687db;
  flex-shrink: 0;
}

/* Price Summary Section - Left Aligned with smaller font */
.wc-credit-price-summary {
  padding: 24px 28px;
  background: #fafbfc;
  border-bottom: 1px solid #f1f5f9;
}

.wc-credit-price-summary-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0 0 16px 0;
  text-align: left;
}

.wc-credit-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wc-credit-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}

.wc-credit-price-row.total {
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-weight: 500;
  font-size: 0.9rem;
}

.wc-credit-price-label {
  color: #64748b;
}

.wc-credit-price-value {
  color: #1e293b;
  font-weight: 500;
}

.wc-credit-price-row.total .wc-credit-price-label,
.wc-credit-price-row.total .wc-credit-price-value {
  color: #1e293b;
}

.wc-credit-price-value.positive {
  color: #059669;
}

.wc-credit-price-value.negative {
  color: #dc2626;
}
h3.wc-credit-modal-hl{
	font-size:.9rem;
	    padding-top: 8px;
}
#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer {
  padding: 14px 24px;
  background: white;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-direction: row;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer button,
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer button
{
  flex: 1;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer .wc-credit-modal-cancel,
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer .wc-credit-modal-cancel{
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer .wc-credit-modal-cancel:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer .wc-credit-modal-confirm-payment,
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer .wc-credit-modal-confirm-payment {
  background: #059669;
  color: white;
  border-color: #059669;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer .wc-credit-modal-confirm-payment:hover {
  background: #047857;
  border-color: #047857;
}

#wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer .wc-credit-modal-confirm-payment:disabled {
  background: #9ca3af;
  border-color: #9ca3af;
  cursor: not-allowed;
}

/* Responsive adjustments for payment confirmation */
@media (max-width: 600px) {
  #wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-content {
    width: 95%;
    margin: 20px;
  }

  .wc-credit-booking-hero {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }

  .wc-credit-booking-image {
    width: 150px;
    height: 100px;
    align-self: left;
    margin-bottom: 16px;
  }

  .wc-credit-booking-title {
    font-size: 1.2rem;
  }

  .wc-credit-price-summary {
    padding: 20px;
  }

  #wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer {
    padding: 20px;
    flex-direction: column;
  }

  #wc-credit-purchase-modal.payment-confirmation-mode .wc-credit-modal-footer button,
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer button
{
    flex: 1;
    min-width: auto;
  }

  .wc-credit-booking-details {
    align-items: flex-start;
  }

  .wc-credit-booking-detail {
    justify-content: flex-start;
  }
}

/*#wc-credit-purchase-modal .wc-credit-modal-footer {
  padding: 24px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column-reverse; 
  gap: 12px;
}
*/
#wc-credit-purchase-modal .wc-credit-modal-footer button {
  border-radius: 9999px;
  padding: 10px 20px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#wc-credit-purchase-modal .wc-credit-modal-footer .wc-credit-modal-confirm-payment {
  background-color: #28a745;
  color: #fff;
}
#wc-credit-purchase-modal .wc-credit-modal-footer .wc-credit-modal-confirm-payment:hover {
  background-color: #218838;
}
#wc-credit-purchase-modal .wc-credit-modal-footer .wc-credit-modal-confirm-payment:disabled {
  background-color: #9ddcb2;
  cursor: not-allowed;
}

#wc-credit-purchase-modal .wc-credit-modal-footer .wc-credit-modal-cancel {
  background-color: #dc3545;
  color: #fff;
}
#wc-credit-purchase-modal .wc-credit-modal-footer .wc-credit-modal-cancel:hover {
  background-color: #c82333;
}

/* --- Payment Success Modal --- */
/* Success view: modal adapts to its inner content */
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-content{
  width: auto !important;
  max-width: 420px !important;
}


#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-header {
  border-bottom: none;
  padding: 20px 24px 0 24px;
  justify-content: flex-end;
}
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-body {
  text-align: center;
  padding: 2rem;
}
#wc-credit-purchase-modal.payment-success-mode .success-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
      background-color: #049669;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

#wc-credit-purchase-modal.payment-success-mode .success-icon svg {
  width: 32px;
  height: 32px;
  stroke: #2e7d32;
}
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-title {
  font-size: 1.3rem;
}
#wc-credit-purchase-modal.payment-success-mode .success-message {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 25px;
}
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer {
  padding: 15px 30px 30px;
  border-top: none;
  background: none;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}


/*#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-footer button {
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}*/



.wc-credit-payment-items-wrapper {
  padding: 10px 0;
  margin-bottom: 20px;
}

.wc-credit-payment-item-meta .icon-placeholder {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.wc-credit-payment-item-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
}

.wc-credit-payment-item-meta .meta-item svg {
  flex-shrink: 0;
}

/* Responsive for Modal Grid */
/* (auto-fit handles intermediate widths automatically — no fixed 1024px override needed) */

@media (max-width: 768px) {
  #wc-credit-purchase-modal .wc-credit-modal-content {
    max-width: 95%;
    width: 500px; /* A bit wider for single card view */
  }
  #wc-credit-purchase-modal .credit-packs-grid {
    grid-template-columns: 1fr !important;
	  
  }
	
	#wc-credit-purchase-modal .wc-credit-modal-body{
	max-height: 500px;
    overflow: scroll;
		padding:1rem;
	}	
	
  #wc-credit-purchase-modal .credit-pack-card.popular-pack {
    transform: none;
  }
	
	
#wc-credit-purchase-modal.payment-success-mode .wc-credit-modal-body {
  text-align: center;
  padding: 1rem;
}	
	
}

/* --- Credit Packs Grid (for top-up) --- */
#wc-credit-purchase-modal .credit-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

#wc-credit-purchase-modal .credit-pack-card {
  background: linear-gradient(180deg, #f5f7fa 0%, #e4ecfb 100%);
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #333;
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
  min-height: 480px; /* Adjusted for modal */
}

#wc-credit-purchase-modal .credit-pack-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

#wc-credit-purchase-modal .credit-pack-card.popular-pack {
  border-color: #4ade80;
  transform: scale(1.02);
}

#wc-credit-purchase-modal .popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #4ade80;
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 10;
}

#wc-credit-purchase-modal .pack-top-section {
  padding: 24px 20px 0 20px;
  flex-shrink: 0;
}

#wc-credit-purchase-modal .pack-header {
  margin-bottom: 0;
}

#wc-credit-purchase-modal .pack-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

#wc-credit-purchase-modal .lightning-icon {
  flex-shrink: 0;
}

#wc-credit-purchase-modal .pack-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}

#wc-credit-purchase-modal .pack-description {
  color: #666;
  font-size: 0.9rem;
  margin: 6px 0 0 0;
  line-height: 1.4;
  min-height: 40px; /* To align cards */
}

#wc-credit-purchase-modal .pack-middle-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 20px;
}

#wc-credit-purchase-modal .pack-credits {
  text-align: left;
  margin-bottom: 24px;
}

#wc-credit-purchase-modal .credits-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
}

#wc-credit-purchase-modal .credits-amount {
  font-size: 2.5rem;
  color: #333;
  line-height: 1;
}

#wc-credit-purchase-modal .extra-credits {
  font-size: 1rem;
  font-weight: 500;
  color: #4ade80;
}

#wc-credit-purchase-modal .credits-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 2px;
}

#wc-credit-purchase-modal .pack-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px; /* Reserve space for 3 feature items to prevent jump */
}

#wc-credit-purchase-modal .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #555;
}

#wc-credit-purchase-modal .feature-item:last-child {
  margin-bottom: 0;
}

#wc-credit-purchase-modal .check-icon {
  flex-shrink: 0;
}

#wc-credit-purchase-modal .pack-bottom-section {
  padding: 0 20px 20px 20px;
  flex-shrink: 0;
  margin-top: auto; /* Pushes button to the bottom */
}



#wc-credit-purchase-modal .pack-buy-button {
  width: 100%;
  padding: 12px 20px;
  border-radius: 20px;
  border: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #333;
  color: white;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

#wc-credit-purchase-modal .pack-buy-button:hover {
  background: #555;
  transform: translateY(-2px);
}

#wc-credit-purchase-modal .pack-buy-button.popular-button {
  background: #4ade80;
  color: white;
}

#wc-credit-purchase-modal .pack-buy-button.popular-button:hover {
  background: #22c55e;
}

#wc-credit-purchase-modal .pack-buy-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* --- NEW: Custom Credit Card in Modal --- */
#wc-credit-purchase-modal .custom-credit-card-modal {
  /* Inherits most styles from .credit-pack-card */
}

#wc-credit-purchase-modal .custom-credit-input-wrapper-modal {
  position: relative;
  margin-bottom: 8px;
}

#wc-credit-purchase-modal .custom-credit-input-modal {
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px 80px 10px 15px;
  text-align: left;
  -moz-appearance: textfield;
  /* --- FIX START --- */
  height: 58px;
  box-sizing: border-box;
  /* --- FIX END --- */
}

#wc-credit-purchase-modal .custom-credit-input-modal::-webkit-outer-spin-button,
#wc-credit-purchase-modal .custom-credit-input-modal::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#wc-credit-purchase-modal .custom-credit-input-modal:focus {
  outline: none;
  border-color: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
}

#wc-credit-purchase-modal .custom-credit-input-label-modal {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 500;
  color: #666;
}

#wc-credit-purchase-modal .custom-price-realtime-wrapper-modal {
  position: relative;
  width: 100%;
  background-color: #f0f2f5;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  /* --- FIX START --- */
  height: 58px;
  /* --- FIX END --- */
}

#wc-credit-purchase-modal .custom-price-realtime-value-modal {
  font-size: 1.6rem;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

#wc-credit-purchase-modal .custom-price-realtime-label-modal {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
}

#wc-credit-purchase-modal .custom-pack-message-modal {
  font-size: 0.85rem;
  color: #6b7280;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  padding: 10px;
  text-align: left;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

#wc-credit-purchase-modal .custom-pack-message-modal.active {
  color: #155724;
  background-color: #d4edda;
}

#wc-credit-purchase-modal .custom-price-display-modal {
  transition: all 0.3s ease;
}

/* --- Thank You Page Restore Notice --- */
.wc-credit-restore-cart-notice {
  background-color: #f7f6f7;
  border: 1px solid #e0e0e0;
  border-left-color: #4caf50;
  border-left-width: 4px;
  padding: 20px;
  margin: 2em 0;
  border-radius: 4px;
}

.wc-credit-restore-cart-notice h3 {
  margin-top: 0;
  color: #333;
}

.wc-credit-restore-cart-notice p {
  margin-bottom: 1em;
}

.wc-credit-restore-cart-notice .button {
  font-size: 1em;
  padding: 10px 20px;
}

/* --- Donation Modal Specific Styles --- */
#wc-credit-donation-modal .wc-credit-donation-modal-close {
  background: #2787db;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  padding: 0;
  font-size: 20px;
}

#wc-credit-donation-modal .wc-credit-donation-modal-close:hover {
  background: #1f7ac5;
}

#wc-credit-donation-modal .wc-credit-donation-modal-footer {
  display: flex;
  gap: 12px;
}

#wc-credit-donation-modal .wc-credit-donation-modal-footer button {
  flex: 1;
  border-radius: 9999px; /* pill shape */
  padding: 10px 20px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}

#wc-credit-donation-modal .wc-credit-donation-modal-confirm {
  background-color: #28a745; /* green */
  color: #fff;
}
#wc-credit-donation-modal .wc-credit-donation-modal-confirm:hover {
  background-color: #218838;
}

#wc-credit-donation-modal .wc-credit-donation-modal-cancel {
  background-color: #dc3545; /* red */
  color: #fff;
}
#wc-credit-donation-modal .wc-credit-donation-modal-cancel:hover {
  background-color: #c82333;
}
/****WC credit system - buy credits template ***/


/* Existing styles remain the same */
.credit-packs-container {
background: white;
min-height: 100vh;
padding: 0px 20px;
color: #333;
}
.current-balance-section { margin-bottom: 60px; }
.balance-card { background: linear-gradient(135deg, #f5f7fa 0%, #e4ecfb 100%); border-radius: 24px; padding: 32px; color: #333;}
.balance-content { margin-bottom: 24px; }
.balance-info { text-align: left; }
.balance-label-section { margin-bottom: 12px; }
.balance-label { display: block; font-size: 1rem; font-weight: 500;  margin-bottom: 4px; }
.balance-subtitle { display: block; font-size: 0.85rem; color: #64748b; }
.balance-amount-section {     margin: 0px 0px 20px; display: flex; align-items: baseline; gap: 8px; }
.balance-amount { font-size: 2.8rem;    font-weight: 500; color: #2687DB; line-height: 1; }
.balance-unit { font-size: 1rem; font-weight: 500; color: #64748b; margin-top: 8px; }
.balance-actions { display: flex; gap: 12px; justify-content: flex-start; }
.balance-action-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.2s ease; }
.balance-action-link.primary { background: #2687DB; color: white; border: 1px solid #2687DB; }
.balance-action-link.primary:hover { background: #1f7ac5; border-color: #1f7ac5; color: white; text-decoration: none; transform: translateY(-1px); }
.balance-action-link.secondary { background: white; color: #374151; border: 1px solid #d1d5db; }
.balance-action-link.secondary:hover { background: #f9fafb; border-color: #9ca3af; color: #374151; text-decoration: none; transform: translateY(-1px); }
.login-prompt-section { margin-bottom: 60px; }
.login-prompt-card { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 20px; padding: 32px; color: #333;  text-align: left; }
.login-prompt-header { display: flex; align-items: flex-start; flex-direction: row; margin-bottom: 24px; gap: 16px; }
.login-icon { width: 64px; height: 64px; background: rgba(38, 135, 219, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(38, 135, 219, 0.2); }
.login-content { text-align: left; }
.login-title { font-size: 1.5rem;  color: #1e293b; margin: 0 0 8px 0; line-height: 1.3; }
.login-subtitle { font-size: 1rem; color: #64748b; margin: 0; line-height: 1.5; max-width: 600px; }
.login-actions { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.login-action-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 50px; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.2s ease; }
.login-action-link.primary { background: #2687DB; color: white; border: 1px solid #2687DB; }
.login-action-link.primary:hover { background: #1f7ac5; border-color: #1f7ac5; color: white; text-decoration: none; transform: translateY(-1px); }
.login-action-link.secondary { background: white; color: #374151; border: 1px solid #d1d5db; }
.login-action-link.secondary:hover { background: #f9fafb; border-color: #9ca3af; color: #374151; text-decoration: none; transform: translateY(-1px); }
.header-info-section {     padding: 30px;
    background: #f7f7f7;
    border-radius: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0px; margin: 60px auto 30px auto; align-items: flex-start; }
.header-content { padding-right: 20px; }
.coaching-platform-header { margin-bottom: 32px; }
.main-title { font-size: 1.2rem !important; font-weight: 500 !important; color: #1f2937; }
.main-subtitle { font-size: 1.05rem; color: #6b7280; margin-bottom: 28px; line-height: 1.6; }
.value-propositions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.value-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #374151; }
.value-icon { flex-shrink: 0; width: 32px; height: 32px; background: rgba(74, 222, 128, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cart-preservation-notice { background: linear-gradient(135deg, #2687DB 0%, #5db1fa 100%); color: white; padding: 20px; border-radius: 12px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; }
.notice-icon { flex-shrink: 0; margin-top: 2px; }
.notice-content h3 { margin: 0 0 8px 0; font-size: 1.1rem; font-weight: 500; color: white !important; }
.notice-content p { margin: 0 0 12px 0; opacity: 0.95; line-height: 1.4; color: white !important; }
.return-to-cart-btn { background: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; }
.return-to-cart-btn:hover { background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); }
.info-content { padding-left: 20px; }
.info-card { padding: 24px; }
.info-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.info-header h3 { font-size: 1.1rem; font-weight: 500; margin: 0; color: #374151; }
.info-steps { display: flex; flex-direction: column; gap: 20px; }
.step-item { display: flex; align-items: flex-start; gap: 16px; }
.step-number { flex-shrink: 0; width: 28px; height: 28px; background: #4ADE80; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 500; }
.step-content h4 { color: #374151; margin: 0 0 4px 0; font-size: 0.95rem; font-weight: 500; }
.step-content p { color: #6b7280; line-height: 1.5; font-size: 0.9rem; margin: 0; }
.step-content a { color: #4ADE80; text-decoration: none; }
.step-content a:hover { text-decoration: underline; }

/* --- UPDATED: 5 cards per row on large screens --- */
.credit-packs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; margin: 0 auto; }

.credit-pack-card { background: linear-gradient(180deg, #f5f7fa 0%, #e4ecfb 100%); border-radius: 12px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; color: #333; border: 2px solid transparent; display: flex; flex-direction: column; min-height: 520px; }
.credit-pack-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }
.credit-pack-card.popular-pack { border-color: #4ADE80; transform: scale(1.02); }
.popular-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #4ADE80; color: white; padding: 4px 12px; border-radius: 16px; font-size: 0.8rem; font-weight: 500; z-index: 10; }
.pack-top-section { padding: 24px 20px 0 20px; flex-shrink: 0; }
.pack-header { margin-bottom: 0; }
.pack-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lightning-icon { flex-shrink: 0; }
.pack-title { font-size: 1.3rem; font-weight: 500; color: #333; margin: 0; }
.pack-description { color: #666; font-size: 0.9rem; margin: 6px 0 0 0; line-height: 1.4; min-height: 40px; }
.pack-middle-section { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 20px; }
.pack-credits { text-align: left; margin-bottom: 24px; }
.credits-main { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; }
.credits-amount { font-size: 2.5rem; /*font-weight: 800;*/ color: #333; line-height: 1; }
.extra-credits { font-size: 1rem; font-weight: 500; color: #4ADE80; }
.credits-label { display: block; color: #666; font-size: 0.9rem; font-weight: 500; margin-top: 2px; }
.pack-features { display: flex; flex-direction: column; justify-content: center; }
.feature-item { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; color: #555; }
.feature-item:last-child { margin-bottom: 0; }
.check-icon { flex-shrink: 0; }
.pack-bottom-section { padding: 0 20px 20px 20px; flex-shrink: 0; margin-top: auto; }
.pack-buy-button { width: 100%; padding: 12px 20px; border-radius: 50px; border: none; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; background: #333; color: white; }
.pack-buy-button:hover { background: #555; transform: translateY(-2px); }
.pack-buy-button.popular-button { background: #4ADE80; color: white; }
.pack-buy-button.popular-button:hover { background: #22c55e; }
.pack-buy-button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.no-credit-packs { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #666; }
.no-credit-packs h3 { font-weight: 500; }

/* --- NEW STYLES FOR CUSTOM CREDIT CARD --- */
.custom-credit-input-wrapper {
position: relative;
margin-bottom: 8px;
}
.custom-credit-input {
width: 100%;
font-size: 1.6rem;
font-weight:500;
color: #333;
border: 2px solid #ccc;
border-radius: 8px;
padding: 10px 80px 10px 15px;
text-align: left;
-moz-appearance: textfield;
}
.custom-credit-input::-webkit-outer-spin-button,
.custom-credit-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-credit-input:focus {
outline: none;
border-color: #4ADE80;
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
}
.custom-credit-input-label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
font-weight: 500;
color: #666;
}
.custom-price-realtime-wrapper {
position: relative;
width: 100%;
background-color: #f0f2f5;
border: 2px solid #ccc;
border-radius: 8px;
padding: 10px 15px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.custom-price-realtime-value {
font-size: 1.6rem;
	font-weight:500;

color: #333;
line-height: 1.2;
}
.custom-price-realtime-label {
font-size: 1rem;
font-weight: 500;
color: #666;
}
.custom-pack-message {
font-size: 0.85rem;
color: #6b7280;
background-color: transparent;
border: none;
border-radius: 6px;
padding: 10px;
text-align: left;
min-height: 44px; /* Reserve space to prevent jump */
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 16px;
transition: all 0.3s ease;
}
.custom-pack-message.active {
color: #155724;
background-color: #d4edda;
}
.custom-price-display {
transition: all 0.3s ease;
}
.custom-credit-card .pack-features {
  min-height: 90px; /* Reserve space for 3 feature items to prevent jump */
}

@media (max-width: 1280px) {
.credit-packs-grid {
    grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 1024px) {
.header-info-section { grid-template-columns: 1fr; gap: 40px; text-align: left; }
.header-content, .info-content { padding: 0; }
.credit-packs-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.balance-actions, .login-actions { flex-direction: column; }
}
@media (max-width: 768px) {
.credit-packs-container { padding: 30px 15px; }
.current-balance-section, .login-prompt-section { margin-bottom: 40px; }
.balance-card, .login-prompt-card { padding: 24px; }
.balance-amount { font-size: 2.4rem; }
.login-title { font-size: 1rem; }
.login-icon { width: 56px; height: 56px; }
.main-title { font-size: 1.5rem !important; }
.value-propositions { flex-direction: column; }
.credit-packs-grid { grid-template-columns: 1fr; gap: 24px; }
.credit-pack-card.popular-pack { transform: none; }
.credit-pack-card { min-height: auto; }
.credits-amount { font-size: 2.2rem; }
}