/* Page-specific styles */

/* Stats Section Fix for Tablet */
    @media screen and (max-width: 991px) {
      .stats-block {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 16px !important;
        width: 100% !important;
        height: auto !important;
      }

      .flex-block,
      .flex-block-2 {
        display: contents !important;
      }

      .stats1 {
        grid-row: span 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 420px !important;
      }

      .stats2,
      .stats3,
      .stats4,
      .stats5 {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
      }

      .stats-num {
        font-size: 2.5rem !important;
      }

      .h3,
      .h3-2 {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
      }
    }

    /* Other Amount Field - Locked State */
    #Other-amount {
      transition: opacity 0.3s, background-color 0.3s;
    }

    #Other-amount:disabled {
      opacity: 0.5;
      background-color: #f0f0f0;
      cursor: not-allowed;
    }

/* Internal Payment Modal */
    .stax-payment-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 10000;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .stax-payment-modal.active {
      display: flex;
    }

    .stax-payment-container {
      background: white;
      border-radius: 20px;
      width: 100%;
      max-width: 550px;
      max-height: 95vh;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    }

    .stax-payment-header {
      padding: 20px 25px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, #1F78C1 0%, #165a94 100%);
      color: white;
    }

    .stax-payment-header h3 {
      margin: 0;
      font-family: 'Orelega One', sans-serif;
      font-size: 1.4rem;
    }

    .stax-payment-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }

    .stax-payment-close:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    .stax-payment-info {
      padding: 15px 25px;
      background: #f8f9fa;
      border-bottom: 1px solid #eee;
    }

    .stax-payment-info-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .stax-payment-info-row:last-child {
      margin-bottom: 0;
    }

    .stax-payment-info-label {
      color: #666;
      font-size: 0.9rem;
    }

    .stax-payment-info-value {
      font-weight: 600;
      color: #333;
    }

    .stax-payment-info-value.amount {
      color: #C41E3A;
      font-size: 1.2rem;
    }

    .stax-payment-iframe-container {
      flex: 1;
      overflow: auto;
      min-height: 500px;
    }

    .stax-payment-iframe {
      width: 100%;
      height: 100%;
      min-height: 500px;
      border: none;
    }

    .stax-payment-note {
      padding: 15px 25px;
      background: #fff9e6;
      border-top: 1px solid #f0e6c0;
      font-size: 0.85rem;
      color: #856404;
    }

    .stax-payment-note strong {
      display: block;
      margin-bottom: 5px;
    }

    /* Action buttons for payment confirmation */
    .stax-payment-actions {
      padding: 15px 25px;
      background: #f8f9fa;
      border-top: 1px solid #eee;
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .stax-payment-actions .confirm-btn {
      background: #28a745;
      color: white;
      border: none;
      padding: 14px 35px;
      border-radius: 30px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
    }

    .stax-payment-actions .confirm-btn:hover {
      background: #218838;
      transform: scale(1.02);
    }

    .stax-payment-actions .cancel-btn {
      background: transparent;
      border: 2px solid #C41E3A;
      color: #C41E3A;
      padding: 14px 35px;
      border-radius: 30px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
    }

    .stax-payment-actions .cancel-btn:hover {
      background: #C41E3A;
      color: white;
    }

    /* Loading State for iframe */
    .stax-payment-loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      flex-direction: column;
    }

    .stax-payment-loading .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(31, 120, 193, 0.2);
      border-top-color: #1F78C1;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .stax-payment-loading p {
      margin-top: 15px;
      color: #666;
    }

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

    /* Responsive */
    @media (max-width: 600px) {
      .stax-payment-container {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
      }

      .stax-payment-header {
        padding: 15px 20px;
      }

      .stax-payment-info {
        padding: 12px 20px;
      }

      .stax-payment-header h3 {
        font-size: 1.2rem;
      }
    }