/* cSpell:ignore paybill mpesa paybar */
/* ============================================
  BUTTON STATE FIXES
  ============================================ */

/* Ensure all buttons are clickable */
button, .btn, [class*="btn"], a {
  cursor: pointer;
  position: relative;
  z-index: 10;
}

/* Fix disabled states */
button:disabled, .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Notification toast */
.notification-toast {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Ensure modals are on top */
.modal, .modal-overlay {
  z-index: 9999;
}

/* Fix mobile menu */
.mobile-nav.active, .nav-links.active {
  display: flex !important;
}

/* Cart badge animation */
.cart-count {
  transition: transform 0.3s ease;
}

.cart-count.updated {
  transform: scale(1.3);
}

/* ============================================
   RESPONSIVE DESIGN FIXES
   ============================================ */

/* Base responsive settings */
* {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.6;
}

/* Mobile-first approach */

/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .navbar {
    padding: 0.5rem 1rem;
  }

  .nav-logo span {
    font-size: 18px;
  }

  .payment-container {
    padding: 20px 10px;
  }

  .payment-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .payment-card {
    padding: 20px;
  }

  .card-title {
    font-size: 18px;
  }

  .paybill-number {
    font-size: 2rem;
  }

  .account-number {
    font-size: 1.5rem;
  }

  .btn-mpesa, .btn-manual {
    padding: 14px;
    font-size: 14px;
  }

  .sticky-paybar {
    width: calc(100% - 20px);
    padding: 8px 12px;
    top: 60px;
  }

  .sticky-inner {
    flex-direction: column;
    gap: 8px;
  }

  .sticky-actions {
    flex-direction: column;
    gap: 6px;
  }

  .sticky-total {
    font-size: 14px;
  }

  /* Order summary responsive */
  .order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .item-info h4 {
    font-size: 14px;
  }

  .item-price {
    align-self: flex-end;
  }

  /* Form groups */
  .form-group input {
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Modal responsive */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 10px;
    padding: 1.5rem;
    max-height: 90vh;
  }

  .review-form {
    gap: 1rem;
  }

  .form-group label {
    font-size: 12px;
  }

  .rating-select {
    justify-content: center;
  }

  .rating-star {
    width: 30px;
    height: 30px;
    font-size: 20px;
  }
}

/* Medium devices (tablets, 601px to 1024px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .payment-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .payment-card {
    padding: 24px;
  }

  .sticky-paybar {
    width: calc(100% - 30px);
    padding: 10px 14px;
  }

  .sticky-inner {
    gap: 10px;
  }

  .sticky-actions {
    gap: 8px;
  }
}

/* Large devices (desktops, 1025px and up) */
@media only screen and (min-width: 1025px) {
  .payment-container {
    max-width: 1400px;
  }

  .payment-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .payment-card {
    padding: 40px;
  }

  .card-title {
    font-size: 22px;
  }

  .paybill-number {
    font-size: 3rem;
  }

  .account-number {
    font-size: 2rem;
  }

  .btn-mpesa, .btn-manual {
    padding: 20px;
    font-size: 18px;
  }
}

/* Cross-browser compatibility */
.navbar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.payment-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Touch-friendly buttons for mobile */
@media (hover: none) and (pointer: coarse) {
  button, .btn, [class*="btn"] {
    min-height: 44px;
    min-width: 44px;
  }

  .rating-star {
    min-width: 40px;
    min-height: 40px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .payment-card {
    border: 2px solid #D4AF37;
  }

  .btn-mpesa {
    background: #00A650;
    border: 2px solid #008F43;
  }

  .btn-manual {
    border: 2px solid #D4AF37;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  .navbar, .sticky-paybar, .modal-overlay {
    display: none !important;
  }

  .payment-card {
    border: 1px solid #000;
    box-shadow: none;
  }
}

/* Payment page specific styles */
.btn-continue-shopping {
  padding: 16px 22px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.order-breakdown {
  margin-top: 12px;
}

.detail-row span:first-child {
  color: #8892b0;
}

.detail-row span:last-child {
  color: #e0e0e0;
}

.paybill-display-extra {
  margin-top: 24px;
}

.paybill-label-extra {
  margin-top: 12px;
}

.mpesa-instruction {
  color: #8892b0;
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
}

.form-group-extra {
  margin-top: 12px;
}

.manual-instruction {
  display: block;
  margin-top: 8px;
  color: #8892b0;
}

/* Safari backdrop-filter support */
.navbar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.payment-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}