/* Import Cairo Font for form text only */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Font Awesome Icon Protection - Ensure icons work properly */
.fas, .fa, .far, .fab {
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.far {
  font-weight: 400 !important;
}

.fab { font-weight: 400 !important; }

/* Protect icons from inheriting Cairo font */
.digits_form_wrapper .fas,
.digits_form_wrapper .fa,
.digits_form_wrapper .far,
.digits_form_wrapper .fab,
#ccc-unitedover-login-form .fas,
#ccc-unitedover-login-form .fa,
#ccc-unitedover-login-form .far,
#ccc-unitedover-login-form .fab { }

/* Debug Font Awesome loading - show if icons are missing */
.fas:before { }

/* Specific icon fallbacks for common icons */
.fas.fa-lock:before { }
.fas.fa-paper-plane:before { }
.fas.fa-right-to-bracket:before { }
.fas.fa-spinner:before { }
.fas.fa-check:before { }
.fas.fa-exclamation-triangle:before { }

body, .site, .site-content, .content-area, main, article {
    text-align: inherit !important;
    margin-left: inherit !important;
    margin-right: inherit !important;
}

/* Ensure containers maintain their original alignment */
.container, .wrap, .site-main, .entry-content {
    text-align: inherit !important;
    margin-left: inherit !important;
    margin-right: inherit !important;
}

/* Font Awesome Icon Base Styles */
.ccc-quota-icon,
.ccc-credit-icon { font-weight: 900; }

.ccc-quota-icon::before {
  content: "\f06b"; /* Gift icon for quota */
}

.ccc-credit-icon::before {
  content: "\f3ff"; /* Gem icon for credits */
}

/* CSS Variables for consistent theming */
:root {
  --ccc-primary: #2563eb;
  --ccc-primary-dark: #1d4ed8;
  --ccc-success: #10b981;
  --ccc-success-light: #d1fae5;
  --ccc-warning: #d97706;
  --ccc-warning-light: #fef3c7;
  --ccc-danger: #dc2626;
  --ccc-danger-light: #fee2e2;
  --ccc-gray-50: #f9fafb;
  --ccc-gray-100: #f3f4f6;
  --ccc-gray-200: #e5e7eb;
  --ccc-gray-300: #d1d5db;
  --ccc-gray-600: #4b5563;
  --ccc-gray-800: #1f2937;
  --ccc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --ccc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --ccc-radius: 8px;
  --ccc-radius-lg: 12px;

/* ===== MYFATOORAH PAYMENT FORM OPTIMIZATIONS ===== */

/* Optimize modal size and spacing */
#ccc-quick-buy-popup .ccc-modal-content {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

/* MyFatoorah container optimizations */
#mf-card-element {
  font-family: 'Cairo', var(--ccc-font-family) !important;
}

/* REMOVED: Duplicate iframe styling - consolidated below */

/* REMOVED: Duplicate button styling - consolidated below */

/* Separator styling */
#mf-card-element > div:first-child {
  margin-bottom: 10px !important;
  margin-top: 5px !important;
}

/* Reduce overall container padding on mobile */
@media (max-width: 768px) {
  #mf-card-element {
    padding: 15px !important;
    min-height: 220px !important;
  }

  #ccc-quick-buy-popup .ccc-modal-content {
    margin: 10px !important;
    max-height: 95vh !important;
  }
}

/* Loading overlay improvements */
#mf-loading-overlay {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(2px) !important;
}

/* Compact payment status cards */
.ccc-payment-status-card {
  padding: 20px !important;
  margin: 0 !important;
}

.ccc-payment-status-card .ccc-payment-status-title {
  font-size: 18px !important;
  margin-bottom: 8px !important;
}

.ccc-payment-status-card .ccc-payment-status-message {
  font-size: 14px !important;
  margin-bottom: 15px !important;
}

/* Optimize 3D Secure popup */
.ccc-3ds-popup {
  max-height: 80vh !important;
}

.ccc-3ds-popup iframe {
  border-radius: var(--ccc-radius) !important;
}

/* ===== PROTECTED FIELD STYLES ===== */
.ccc-protected {
  background: linear-gradient(135deg, var(--ccc-gray-50) 0%, var(--ccc-gray-100) 100%);
  border: 2px dashed var(--ccc-gray-300);
  padding: 16px 20px;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--ccc-radius);
  transition: all 0.3s ease;
  position: relative;
  font-family: var(--ccc-font-family);
  overflow: hidden;
  color: var(--ccc-gray-600);
  font-size: 14px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ccc-protected:hover {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  border-color: var(--ccc-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-protected:active {
  transform: translateY(0);
  box-shadow: var(--ccc-shadow);
}

.ccc-protected::before {
  content: "\f023"; /* Font Awesome lock icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  margin-right: 4px;
}

.ccc-protected:hover::before {
  content: "\f06e"; /* Font Awesome eye icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  animation: pulse 1s infinite;
}

/* ===== REVEALED FIELD STYLES ===== */
.ccc-revealed {
  background: linear-gradient(135deg, var(--ccc-success-light) 0%, #ecfdf5 100%);
  color: var(--ccc-gray-800);
  padding: 16px 20px;
  border: 2px solid var(--ccc-success);
  border-radius: var(--ccc-radius);
  position: relative;
  font-weight: 500;
  box-shadow: var(--ccc-shadow);
  animation: revealAnimation 0.5s ease-out;
}

.ccc-revealed::before {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
  color: var(--ccc-success);
}

/* ===== LOGIN REQUIRED STYLES ===== */
.ccc-login-required {
  background: linear-gradient(135deg, var(--ccc-warning-light) 0%, #fffbeb 100%);
  color: var(--ccc-warning);
  padding: 20px;
  border: 2px solid var(--ccc-warning);
  border-radius: var(--ccc-radius);
  text-align: center;
  font-weight: 600;
  box-shadow: var(--ccc-shadow);
  position: relative;
}

.ccc-login-required::before {
  content: "\f084"; /* Font Awesome key icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  margin-right: 8px;
}

.ccc-login-required p {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

/* Digits Login Popup Integration */
.ccc-login-popup {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(217, 119, 6, 0.3);
}

.ccc-login-popup .digits-popup-button {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%) !important;
  color: white !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: var(--ccc-radius) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--ccc-shadow) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.ccc-login-popup .digits-popup-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--ccc-shadow-lg) !important;
  background: linear-gradient(135deg, var(--ccc-primary-dark) 0%, #1e40af 100%) !important;
}

.ccc-login-popup .digits-popup-button::before {
  content: "\f084 "; /* Font Awesome key icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 8px;
}

/* Enhanced login required for protected fields */
.ccc-protected.ccc-login-required {
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
  border-color: #f87171;
  color: #dc2626;
  cursor: default;
}

.ccc-protected.ccc-login-required:hover {
  transform: none;
  background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
  border-color: #f87171;
  color: #dc2626;
}

.ccc-protected.ccc-login-required::before {
  content: "\f084"; /* Font Awesome key icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -8px;
  right: -8px;
  background: #dc2626;
  color: white;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 10px;
  z-index: 1;
}

/* Mobile responsive for login popup */
@media (max-width: 768px) {
  .ccc-login-required {
    padding: 16px;
  }

  .ccc-login-required p {
    font-size: 14px;
  }

  .ccc-login-popup .digits-popup-button {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  /* Mobile responsive for new login form */
  #ccc-login-form-container {
    padding: 20px;
    margin: 10px auto;
    max-width: 95%;
  }

  .ccc-login-popup-content {
    max-width: 95% !important;
    margin: 10px !important;
  }

  #ccc-login-form-container .dig_sml_box_msg_head {
    font-size: 18px;
  }

  #ccc-login-form-container .dig_sml_box_msg {
    font-size: 14px;
  }



  #ccc-login-form-container .dig_login_va_otp {
    padding: 16px;
    font-size: 16px;
  }

  /* Mobile responsive for close button */
  .ccc-popup-close {
    top: 10px !important;
    left: 10px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }
}

/* =========================
   SMS Settings Page Styling
   ========================= */

/* SMS Statistics Table */
.ccc-sms-stats table.widefat {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.ccc-sms-stats table.widefat thead th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  padding: 15px;
  text-align: center;
  border: none;
}

.ccc-sms-stats table.widefat tbody td {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  border-bottom: 1px solid #e2e8f0;
}

.ccc-sms-stats table.widefat tbody td:first-child {
  color: #3182ce;
}

.ccc-sms-stats table.widefat tbody td:nth-child(2) {
  color: #38a169;
}

.ccc-sms-stats table.widefat tbody td:last-child {
  color: #d69e2e;
}

/* Test SMS Section */
.ccc-test-sms {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: 12px !important;
  padding: 25px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.ccc-test-sms h2 {
  color: #2d3748;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 700;
}

.ccc-test-sms h2 i {
  color: #4299e1;
  margin-left: 8px;
}

.ccc-test-sms p {
  color: #4a5568;
  margin-bottom: 20px;
}

.ccc-test-sms .form-table th {
  color: #2d3748;
  font-weight: 600;
  padding: 15px 10px 15px 0;
}

.ccc-test-sms .form-table td {
  padding: 15px 10px;
}

.ccc-test-sms input[type="text"] {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ccc-test-sms input[type="text"]:focus {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
  outline: none;
}

.ccc-test-sms .button-primary {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.ccc-test-sms .button-primary:hover {
  background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ccc-test-sms .button-primary:active {
  transform: translateY(0);
}

/* SMS Failures Section */
.ccc-sms-failures {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.ccc-sms-failures h2 {
  color: #2d3748;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
}

.ccc-sms-failures h2 i {
  color: #f56565;
  margin-left: 8px;
}

.ccc-sms-failures table.widefat {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.ccc-sms-failures table.widefat thead th {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  color: white;
  font-weight: 600;
  padding: 12px 15px;
  border: none;
}

.ccc-sms-failures table.widefat tbody td {
  padding: 12px 15px;
  border-bottom: 1px solid #e2e8f0;
  color: #4a5568;
}

.ccc-sms-failures table.widefat tbody tr:hover {
  background-color: #f7fafc;
}

/* SMS Settings Form Enhancements */
.ccc-settings-form .form-table th {
  color: #2d3748;
  font-weight: 600;
  padding: 20px 10px 20px 0;
  width: 200px;
}

.ccc-settings-form .form-table td {
  padding: 20px 10px;
}

.ccc-settings-form input[type="text"],
.ccc-settings-form input[type="password"],
.ccc-settings-form input[type="url"],
.ccc-settings-form select {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: white;
}

.ccc-settings-form input[type="text"]:focus,
.ccc-settings-form input[type="password"]:focus,
.ccc-settings-form input[type="url"]:focus,
.ccc-settings-form select:focus {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
  outline: none;
}

.ccc-settings-form input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

.ccc-settings-form .description {
  color: #718096;
  font-style: italic;
  margin-top: 8px;
}

.ccc-settings-form .button-primary {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  margin-top: 20px;
}

.ccc-settings-form .button-primary:hover {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Success/Error Messages */
.ccc-sms-stats + .notice,
.ccc-test-sms .notice {
  border-radius: 8px;
  padding: 15px 20px;
  margin: 15px 0;
  border-left-width: 4px;
}

.notice-success {
  background: #f0fff4;
  border-left-color: #38a169;
  color: #2f855a;
}

.notice-error {
  background: #fed7d7;
  border-left-color: #e53e3e;
  color: #c53030;
}

/* SMS Settings Grid Layout */
.ccc-settings-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

.ccc-settings-main {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.ccc-settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ccc-form-section h3 {
  color: #2d3748;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
}

.ccc-form-section h3 i {
  color: #4299e1;
  margin-left: 10px;
}

/* Info Card */
.ccc-info-card {
  background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
  border: 1px solid #81e6d9;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ccc-info-card h4 {
  color: #234e52;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.ccc-info-card h4 i {
  color: #38b2ac;
  margin-left: 8px;
}

.ccc-info-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccc-info-card li {
  color: #2c7a7b;
  margin-bottom: 8px;
  font-size: 14px;
}

.ccc-info-card li i {
  color: #38b2ac;
  margin-left: 8px;
  width: 16px;
}

/* Status Card */
.ccc-status-card {
  background: linear-gradient(135deg, #fef5e7 0%, #fed7aa 100%);
  border: 1px solid #f6ad55;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ccc-status-card h4 {
  color: #744210;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.ccc-status-card h4 i {
  color: #d69e2e;
  margin-left: 8px;
}

.ccc-status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #744210;
  font-weight: 600;
}

.ccc-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e53e3e;
  animation: pulse 2s infinite;
}

.ccc-status-dot.active {
  background: #38a169;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
  }
}

/* Mobile Responsive for SMS Settings */
@media (max-width: 768px) {
  .ccc-settings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ccc-settings-main {
    padding: 20px;
  }

  .ccc-info-card,
  .ccc-status-card {
    padding: 15px;
  }

  .ccc-form-section h3 {
    font-size: 16px;
  }
}

/* =========================
   LOGIN POPUP - SINGLE BACKGROUND CLASS
   ========================= */
.ccc-login-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ccc-login-popup-content {
  background: #fdfcf8 !important;
  padding: 24px !important;
  border-radius: 12px !important;
  border: 1px solid #a9937f !important;
  box-shadow: 0 4px 14px rgba(169, 147, 127, 0.25) !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 30px auto !important;
  text-align: center !important;
  position: relative !important;
  direction: rtl !important;
}

.digits_form_wrapper {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;

}

.digits_submit_button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.digits_submit_button:active {
  transform: translateY(0) !important;
}

#ccc-country-code {
  background: #f9f9f9 !important;
  border: 1px solid #e5e7eb !important;
  pointer-events: none !important;
  cursor: default !important;
  color: #666 !important;
}

#ccc-country-code:focus {
  border-color: #e5e7eb !important;
  outline: none !important;
  box-shadow: none !important;
}

.digits_field_column {
  flex-direction: row !important;
  gap: 8px !important;
}

#ccc-mobile-number {
  border: 1px solid #e5e7eb !important;
  transition: border-color 0.2s ease !important;
  flex: 1 !important;
  direction: ltr !important;
  text-align: left !important;
}

#ccc-mobile-number:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Phone group layout and connected corners */
.ccc-phone-group {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  direction: ltr !important;
  justify-content: center !important;
}

.ccc-phone-group #ccc-country-code {
  width: 110px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ccc-phone-group #ccc-mobile-number {
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  text-align: left !important;
  direction: ltr !important;
}

/* Ensure proper RTL layout for phone section */
.digits_field_column[style*="flex-direction: row-reverse"] {
  direction: rtl !important;
}

.ccc-otp-digit {
  border: 2px solid #e5e7eb !important;
  transition: all 0.2s ease !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  background: white !important;
}

.ccc-otp-digit:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  transform: scale(1.05) !important;
}

.ccc-otp-digit:valid {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
}

/* Perfect centering for OTP digits container */
#ccc-otp-section .digits_field_column > div:first-child {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Ensure OTP digits are perfectly centered */
.ccc-otp-digit {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border: 2px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 20px !important;
  text-align: center !important;
  font-weight: bold !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Center the entire OTP section */
#ccc-otp-section {
  text-align: center !important;
}

#ccc-otp-section .digits_field_row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#ccc-otp-section .digits_field_column {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* OTP digits container styling - PERFECT CENTERING */
.ccc-otp-digits-container {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 auto !important;
  direction: ltr !important;
  padding: 0 !important;
}

/* Force perfect centering of OTP section */
#ccc-otp-section .digits_field_container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

#ccc-otp-section .digits_field_row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

#ccc-otp-section .digits_field_column {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Additional centering for OTP */
#ccc-otp-section {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Clean OTP centering without conflicts */
#ccc-otp-section {
  text-align: center !important;
  display: none !important; /* Ensure hidden initially */
}

/* Show OTP section only when needed via JavaScript */
#ccc-otp-section.show-otp {
  display: block !important;
}

.ccc-otp-digits-container {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 auto !important;
  padding: 0 !important;
  direction: ltr !important;
}

/* Ensure OTP section has proper spacing */
#ccc-otp-section .digits_field_container {
  margin-bottom: 16px !important;
  text-align: center !important;
}

/* Form messages styling */
#ccc-form-messages {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 12px !important;
  text-align: center !important;
}


/* Button styling with Cairo font */
.digits_submit_button,
#ccc-send-otp-btn,
#ccc-login-btn,
#ccc-resend-otp-btn {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
  padding: 12px 24px !important;
}

/* Protect button icons from Cairo font */
/* Font Awesome weights inside popup (scoped to .drts to match site FA) */
.drts .fas,
.drts .fa-solid { font-weight: 900 !important; }

.drts .far,
.drts .fa-regular { font-weight: 400 !important; }

.drts .fab,
.drts .fa-brands { font-weight: 400 !important; }

/* Send OTP Button */
#ccc-send-otp-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}

#ccc-send-otp-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

/* Login Button */
#ccc-login-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

#ccc-login-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Resend Button */
#ccc-resend-otp-btn {
  background: none !important;
  color: #3b82f6 !important;
  text-decoration: underline !important;
  font-size: 14px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
}

#ccc-resend-otp-btn:hover {
  color: #2563eb !important;
  background: rgba(59, 130, 246, 0.1) !important;
  text-decoration: none !important;
}

#ccc-resend-otp-btn:disabled {
  color: #9ca3af !important;
  cursor: not-allowed !important;
  background: none !important;
}

#ccc-form-messages div {
  border-radius: 8px !important;
  font-weight: 500 !important;
  animation: slideInDown 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#ccc-resend-timer {
background: #f3f4f6 !important;
padding: 4px 8px !important;
border-radius: 4px !important;
display: inline-block !important;
}

input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #25D366 !important;
}

h3 {
  margin: 20px 0 10px 0 !important;
  color: #111 !important;
  font-size: 18px !important;
}

p {
  margin: 0 0 20px 0 !important;
  color: #333 !important;
  font-size: 15px !important;
  padding: 0 20px !important;
}

@media (max-width: 480px) {
  .ccc-login-popup-content {
    max-width: 95% !important;
    margin: 10px !important;
  }

  .digits_form_wrapper {
    padding: 20px !important;
  }

  /* Responsive phone group */
  .ccc-phone-group { flex-direction: row !important; }
  .ccc-phone-group #ccc-country-code { width: 96px !important; font-size: 12px !important; }
}

@media (max-width: 768px) {
  .ccc-login-popup-content {
    width: 95% !important;
    padding: 15px !important;
  }
}

.ccc-login-popup-close {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  width: 40px !important;     /* equal width */
  height: 40px !important;    /* equal height */
  background: rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  border-radius: 50% !important;  /* makes it perfectly circular */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #666 !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
}

  .ccc-login-popup-close:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
    transform: scale(1.1) !important;
  }

  .ccc-login-popup-close:active {
    transform: scale(0.95) !important;
  }

  /* Loading */
  .ccc-login-popup-loading {
    padding: 20px !important;
    text-align: center !important;
    color: #6b7280 !important;
    font-size: 14px !important;
  }
}

/* Fallback close button */
.ccc-close-popup {
  margin: 20px !important;
  padding: 10px 20px !important;
  background: #6c757d !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;

}

.ccc-close-popup:hover {
  background: #5a6268 !important;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fa-spinner.fa-spin {
  animation: spin 1s linear infinite !important;
}

/* =========================
   Login Card Styling
   ========================= */
#ccc-login-form-container {
  direction: rtl;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fdfcf8; /* light beige */
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #a9937f; /* brown border */
  box-shadow: 0 4px 14px rgba(169, 147, 127, 0.25);
  max-width: 420px;
  margin: 30px auto;
}

/* Hide unwanted titles and descriptions */
#ccc-login-form-container .dig_sml_box_msg_head {
  display: none !important;
}
#ccc-login-form-container .dig_sml_box_msg {
  font-size: 15px;
  color: #333;
  text-align: center;
  margin: 0 0 24px;
}



/* Country code box */
#ccc-login-form-container .countrycodecontainer input {
  width: 70px;
  border: none;
  outline: none;
  background: #fdfcf8;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #444;
  border-radius: 6px;
}

/* Mobile input */
#ccc-login-form-container .digits-input-wrapper input,
#ccc-login-form-container input[type="tel"],
#ccc-login-form-container input[name*="mobile"],
#ccc-login-form-container input[name*="phone"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: var(--ccc-warning-light);
  color: #222;
  direction: ltr;
}

/* Label */
#ccc-login-form-container label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  text-align: right;
}

/* Primary button */
#ccc-login-form-container .dig_login_va_otp {
  width: 100%;
  background: #007bff;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
#ccc-login-form-container .dig_login_va_otp:hover {
  background: #0056d2;
}
#ccc-login-form-container .dig_login_va_otp:active {
  transform: translateY(1px);
}

/* Resend OTP */
#ccc-login-form-container #dig_lo_resend_otp_btn {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #007bff;
  cursor: pointer;
}
#ccc-login-form-container #dig_lo_resend_otp_btn[dis="1"] {
  opacity: .5;
  cursor: not-allowed;
}



/* Additional input field styling for better compatibility */
#ccc-login-form-container input[type="number"] {
  border: none !important;
  outline: none !important;
  background: #ecebeb87 !important;
  font-size: 16px !important;
  color: #222 !important;
}

/* Mobile number input restrictions - 10 digits only */
#ccc-login-form-container input[type="tel"],
#ccc-login-form-container input[name*="mobile"],
#ccc-login-form-container input[name*="phone"] {
  maxlength: 10 !important;
  pattern: "[0-9]{10}" !important;
  inputmode: numeric !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* Remove spinner arrows from number inputs */
#ccc-login-form-container input[type="tel"]::-webkit-outer-spin-button,
#ccc-login-form-container input[type="tel"]::-webkit-inner-spin-button,
#ccc-login-form-container input[name*="mobile"]::-webkit-outer-spin-button,
#ccc-login-form-container input[name*="mobile"]::-webkit-inner-spin-button,
#ccc-login-form-container input[name*="phone"]::-webkit-outer-spin-button,
#ccc-login-form-container input[name*="phone"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}



/* OTP input fields styling - 4 fields with smooth jumping */
#ccc-login-form-container .dig-otp-field {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 20px 0 !important;
}

#ccc-login-form-container .dig-otp-field input {
  width: 50px !important;
  height: 50px !important;
  text-align: center !important;
  border: 2px solid #a9937f !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  cursor: pointer !important;
}

#ccc-login-form-container .dig-otp-field input:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2) !important;
  transform: scale(1.05) !important;
}

#ccc-login-form-container .dig-otp-field input:not(:placeholder-shown) {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
}

/* OTP field animations and spacing */
#ccc-login-form-container .dig-otp-field input {
  animation: fadeInUp 0.3s ease forwards;
}

#ccc-login-form-container .dig-otp-field input:nth-child(1) { animation-delay: 0.1s; }
#ccc-login-form-container .dig-otp-field input:nth-child(2) { animation-delay: 0.2s; }
#ccc-login-form-container .dig-otp-field input:nth-child(3) { animation-delay: 0.3s; }
#ccc-login-form-container .dig-otp-field input:nth-child(4) { animation-delay: 0.4s; }

/* Ensure OTP fields are properly spaced and sized */
#ccc-login-form-container .dig-otp-field input[type="text"],
#ccc-login-form-container .dig-otp-field input[type="number"] {
  width: 50px !important;
  height: 50px !important;
  text-align: center !important;
  border: 2px solid #a9937f !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prevent form input conflicts */
#ccc-login-form-container input {
  pointer-events: auto !important;
  user-select: auto !important;
}

#ccc-login-form-container form {
  position: relative !important;
}

/* Loading state for form */
#ccc-login-form-container form.submitting {
  opacity: 0.7;
  pointer-events: none;
}

#ccc-login-form-container form.submitting input,
#ccc-login-form-container form.submitting button {
  cursor: wait !important;
}

/* Error messages styling */
#ccc-login-form-container .dig-error,
#ccc-login-form-container .error-message {
  background: #fee2e2;
  color: #dc2626;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin: 10px 0;
  border: 1px solid #fca5a5;
}

/* Success messages styling */
#ccc-login-form-container .dig-success,
#ccc-login-form-container .success-message {
  background: #d1fae5;
  color: #065f46;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin: 10px 0;
  border: 1px solid #86efac;
}

/* Loading spinner styling */
#ccc-login-form-container .ccc-loading {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

#ccc-login-form-container .fa-spinner {
  color: #007bff;
  font-size: 20px;
  margin-bottom: 10px;
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes revealAnimation {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* ===== LOADING STATES ===== */
.ccc-loading {
  color: var(--ccc-gray-600);
  pointer-events: none;
  position: relative;
}

/* Override for protected fields - no background */
.ccc-protected.ccc-loading {
  background: none !important;
  color: #ffffff00 !important;
}

.ccc-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--ccc-gray-300);
  border-top: 2px solid var(--ccc-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== ADMIN PANEL STYLES ===== */
.ccc-admin-wrap {
  background: white;
  border-radius: var(--ccc-radius-lg);
  box-shadow: var(--ccc-shadow);
  overflow: hidden;
  margin: 20px 0;
}

.ccc-admin-header {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  padding: 24px 32px;
  position: relative;
}

.ccc-admin-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
}

.ccc-admin-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.ccc-admin-header p {
  margin: 8px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.ccc-admin-content {
  padding: 32px;
}

/* ===== FORM STYLES ===== */
.ccc-form-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: var(--ccc-radius);
  overflow: hidden;
  box-shadow: var(--ccc-shadow);
}

.ccc-form-table th {
  background: var(--ccc-gray-50);
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ccc-gray-800);
  border-bottom: 1px solid var(--ccc-gray-200);
  text-align: right;
  width: 200px;
}

.ccc-form-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ccc-gray-200);
  vertical-align: top;
}

.ccc-form-table tr:last-child th,
.ccc-form-table tr:last-child td {
  border-bottom: none;
}

.ccc-form-table tr:hover {
  background: var(--ccc-gray-50);
}

/* ===== FIELD PROTECTION CHECKBOXES ===== */
.ccc-field-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--ccc-gray-200);
  border-radius: var(--ccc-radius);
  margin-bottom: 8px;
  transition: all 0.2s ease;
  background: white;
}

.ccc-field-item:hover {
  border-color: var(--ccc-primary);
  box-shadow: var(--ccc-shadow);
}

.ccc-field-item.protected {
  background: var(--ccc-success-light);
  border-color: var(--ccc-success);
}

.ccc-field-checkbox {
  margin-right: 12px;
  transform: scale(1.2);
}

.ccc-field-label {
  flex: 1;
  font-weight: 500;
  color: var(--ccc-gray-800);
}

.ccc-field-key {
  background: var(--ccc-gray-100);
  color: var(--ccc-gray-600);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  margin-right: 12px;
}

/* ===== BUTTON STYLES ===== */
.ccc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--ccc-radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-family: var(--ccc-font-family);
}

.ccc-btn:focus {
  outline: 2px solid var(--ccc-primary);
  outline-offset: 2px;
}

.ccc-btn-primary {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  box-shadow: var(--ccc-shadow);
}

.ccc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-btn-success {
  background: linear-gradient(135deg, var(--ccc-success) 0%, #047857 100%);
  color: white;
  box-shadow: var(--ccc-shadow);
}

.ccc-btn-success:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-btn-danger {
  background: linear-gradient(135deg, var(--ccc-danger) 0%, #b91c1c 100%);
  color: white;
  box-shadow: var(--ccc-shadow);
}

.ccc-btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccc-shadow-lg);
}

/* ===== NOTIFICATION STYLES ===== */
.ccc-notice {
  padding: 16px 20px;
  border-radius: var(--ccc-radius);
  margin: 16px 0;
  border-left: 4px solid;
  animation: fadeIn 0.3s ease;
  position: relative;
}

.ccc-notice-success {
  background: var(--ccc-success-light);
  border-left-color: var(--ccc-success);
  color: #065f46;
}

.ccc-notice-error {
  background: var(--ccc-danger-light);
  border-left-color: var(--ccc-danger);
  color: #991b1b;
}

.ccc-notice-warning {
  background: var(--ccc-warning-light);
  border-left-color: var(--ccc-warning);
  color: #92400e;
}

.ccc-notice-info {
  background: #dbeafe;
  border-left-color: var(--ccc-primary);
  color: #1e40af;
}

/* ===== CREDIT DISPLAY ===== */
.ccc-credit-display {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  padding: 16px 20px;
  border-radius: var(--ccc-radius);
  text-align: center;
  box-shadow: var(--ccc-shadow);
  margin: 16px 0;
}

.ccc-credit-number {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}

.ccc-credit-label {
  font-size: 14px;
  opacity: 0.9;
}

/* ===== SMALL CREDITS DISPLAY ===== */
.ccc-credits-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.ccc-credits-container-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  padding: 4px;
}

/* Quick Actions Section */
.ccc-quick-actions {
  margin-top: 16px;
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
}

.ccc-open-quick-buy {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ccc-open-quick-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Small Daily Quota Display - Light Style */
.ccc-quota-display-small {
  background: #f8fafc;
  color: #3b82f6;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #e2e8f0;
  position: relative;
  transition: all 0.3s ease;
}

.ccc-quota-display-small:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.ccc-quota-header-small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

.ccc-quota-icon {
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.ccc-quota-display-small:hover .ccc-quota-icon {
  opacity: 1;
}

.ccc-quota-title-small {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.ccc-quota-number-small {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #3b82f6;
}

/* Small Paid Credits Display - Light Style */
.ccc-credit-display-small {
  background: #f0fdf4;
  color: #10b981;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #dcfce7;
  position: relative;
  transition: all 0.3s ease;
}

.ccc-credit-display-small:hover {
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
  transform: translateY(-1px);
}

.ccc-credit-header-small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}

.ccc-credit-icon {
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.ccc-credit-display-small:hover .ccc-credit-icon {
  opacity: 1;
}

.ccc-credit-title-small {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.ccc-credit-number-small {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #10b981;
}

.ccc-credits-login {
  padding: 8px 12px;
  background: var(--ccc-warning-light);
  color: var(--ccc-warning);
  border-radius: var(--ccc-radius);
  font-size: 14px;
  text-align: center;
  border: 1px solid var(--ccc-warning);
}

/* Login prompt styles */
.ccc-credits-login-prompt {
  transition: all 0.3s ease;
  border: 2px dashed #d1d5db;
  background: #f9fafb;
}

.ccc-credits-login-prompt:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Loading class for general use */
.ccc-loading {
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}



/* Mobile responsive for small credits */
@media (max-width: 768px) {
  .ccc-credits-container-small {
    gap: 12px;
    margin: 16px 0;
    padding: 0 4px;
  }

  .ccc-quota-display-small,
  .ccc-credit-display-small {
    padding: 14px 12px;
    border-width: 2px;
    border-radius: 12px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ccc-quota-header-small,
  .ccc-credit-header-small {
    margin-bottom: 8px;
    gap: 6px;
  }

  .ccc-quota-number-small,
  .ccc-credit-number-small {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .ccc-quota-title-small,
  .ccc-credit-title-small {
    font-size: 12px;
    font-weight: 700;
  }

  .ccc-quota-icon,
  .ccc-credit-icon {
    font-size: 14px;
  }

  .ccc-quota-usage-small,
  .ccc-credit-usage-small {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    opacity: 0.9;
  }

  .ccc-quick-actions {
    margin-top: 16px;
    text-align: center;
  }

  .ccc-open-quick-buy {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.3s ease !important;
  }

  .ccc-open-quick-buy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4) !important;
  }

  /* Mobile responsive adjustments handled in main .ccc-login-popup class */

  /* Enhanced warning messages for mobile */
  .ccc-quota-warning,
  .ccc-quota-info {
    margin: 12px 0 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .ccc-quota-warning p,
  .ccc-quota-info p {
    margin: 6px 0 !important;
  }
}

/* ===== STATS CARDS ===== */
.ccc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.ccc-stat-card {
  background: white;
  border-radius: var(--ccc-radius);
  padding: 24px;
  box-shadow: var(--ccc-shadow);
  text-align: center;
  border: 1px solid var(--ccc-gray-200);
  transition: transform 0.2s ease;
}

.ccc-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--ccc-primary);
  display: block;
  margin-bottom: 8px;
}

.ccc-stat-label {
  color: var(--ccc-gray-600);
  font-size: 14px;
  font-weight: 500;
}

/* ===== INPUT STYLES ===== */
.ccc-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--ccc-gray-200);
  border-radius: var(--ccc-radius);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.ccc-input:focus {
  outline: none;
  border-color: var(--ccc-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ccc-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .ccc-admin-header {
    padding: 20px 16px;
  }

  .ccc-admin-header h1 {
    font-size: 24px;
  }

  .ccc-admin-content {
    padding: 20px 16px;
  }

  .ccc-form-table th,
  .ccc-form-table td {
    padding: 12px 16px;
  }

  .ccc-form-table th {
    width: auto;
    display: block;
    border-bottom: none;
    padding-bottom: 8px;
  }

  .ccc-form-table td {
    display: block;
    padding-top: 0;
  }

  .ccc-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ccc-field-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ccc-field-checkbox {
    margin-right: 0;
    margin-bottom: 8px;
  }

  .ccc-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ccc-protected,
  .ccc-revealed,
  .ccc-login-required {
    padding: 12px 16px;
    font-size: 13px;
  }

  .ccc-stat-number {
    font-size: 28px;
  }

  .ccc-credit-number {
    font-size: 24px;
  }

  /* Extra small mobile adjustments for credits */
  .ccc-credits-container-small {
    gap: 10px;
    margin: 12px 0;
    padding: 0 2px;
  }

  .ccc-quota-display-small,
  .ccc-credit-display-small {
    padding: 12px 10px;
    min-height: 90px;
  }

  .ccc-quota-number-small,
  .ccc-credit-number-small {
    font-size: 20px;
  }

  .ccc-quota-title-small,
  .ccc-credit-title-small {
    font-size: 11px;
  }

  .ccc-quota-usage-small,
  .ccc-credit-usage-small {
    font-size: 10px !important;
  }

  .ccc-open-quick-buy {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .ccc-quota-warning,
  .ccc-quota-info {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --ccc-gray-50: #1f2937;
    --ccc-gray-100: #374151;
    --ccc-gray-200: #4b5563;
    --ccc-gray-300: #6b7280;
    --ccc-gray-600: #d1d5db;
    --ccc-gray-800: #f9fafb;
  }

  /* Override protected field loading state in dark mode - no background */
  .ccc-protected.ccc-loading {
    background: none !important;
    color: #aeaeae !important;
    border-color: #6b7280 !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.ccc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ccc-protected:focus,
.ccc-btn:focus {
  outline: 2px solid var(--ccc-primary);
  outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
  .ccc-protected {
    background: white !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }

  .ccc-protected::before {
    content: "[محمي] " !important;
  }

  .ccc-revealed {
    background: white !important;
    border: 1px solid #000 !important;
    color: #000 !important;
  }

  .ccc-admin-header {
    background: white !important;
    color: #000 !important;
  }
}

/* ===== DETAILED BALANCE WINDOW STYLES ===== */
.ccc-balance-window {
  background: white;
  border-radius: 12px;
  box-shadow: var(--ccc-shadow-lg);
  padding: 24px;
  margin: 20px 0;
  border: 1px solid var(--ccc-gray-200);
}

.ccc-balance-current {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.ccc-balance-card {
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.ccc-balance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ccc-balance-card:hover::before {
  opacity: 1;
}

.ccc-usage-stats {
  background: var(--ccc-gray-50);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid var(--ccc-gray-200);
}

.ccc-daily-progress {
  margin-bottom: 20px;
}

.ccc-progress-bar-container {
  background: var(--ccc-gray-200);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.ccc-progress-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 4px;
}

/* Custom Points Selector Styles */
.ccc-custom-points-selector {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.ccc-custom-points-selector:hover {
  border-color: var(--ccc-primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.ccc-points-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ccc-points-btn {
  background: var(--ccc-danger);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ccc-points-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ccc-points-btn.increase {
  background: var(--ccc-success);
}

.ccc-points-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#custom-points-input {
  width: 100px;
  padding: 12px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #1e293b;
  transition: border-color 0.2s ease;
}

#custom-points-input:focus {
  outline: none;
  border-color: var(--ccc-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ccc-price-display {
  margin-bottom: 16px;
}

#custom-price-display {
  font-size: 24px;
  font-weight: bold;
  color: var(--ccc-success);
  margin-bottom: 8px;
}

.ccc-price-note {
  font-size: 14px;
  color: #64748b;
}

.ccc-buy-custom-btn {
  background: linear-gradient(135deg, var(--ccc-success) 0%, #059669 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.ccc-buy-custom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ccc-buy-custom-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Mobile responsive for balance window */
@media (max-width: 768px) {
  .ccc-balance-window {
    padding: 16px;
    margin: 16px 0;
  }

  .ccc-balance-current {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ccc-balance-card {
    padding: 16px;
  }

  .ccc-usage-stats {
    padding: 16px;
  }

  .ccc-usage-stats > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ccc-custom-points-selector {
    padding: 16px;
  }

  .ccc-points-controls {
    gap: 8px;
  }

  .ccc-points-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  #custom-points-input {
    width: 80px;
    padding: 10px;
    font-size: 16px;
  }

  #custom-price-display {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .ccc-balance-window {
    padding: 12px;
  }

  .ccc-balance-card {
    padding: 12px;
  }

  .ccc-balance-card div[style*="font-size: 32px"] {
    font-size: 24px !important;
  }
}

/* ===== ENHANCED ADMIN DASHBOARD STYLES ===== */

/* Enhanced Admin Wrapper */
.ccc-enhanced-admin-wrap {
  background: #f8fafc;
  min-height: 100vh;
  margin: -20px -20px 0 -2px;
  padding: 0;
  font-family: var(--ccc-font-family);
}

/* Enhanced Header */
.ccc-admin-header-enhanced {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #06b6d4 100%);
  color: white;
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ccc-admin-header-enhanced::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
}

.ccc-header-content {
  position: relative;
  z-index: 2;
}

.ccc-header-content h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ccc-header-content p {
  margin: 8px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
}

.ccc-header-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 12px;
}

/* Dashboard Tabs */
.ccc-dashboard-tabs {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 40px;
  display: flex;
  gap: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ccc-tab-btn {
  background: none;
  border: none;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.ccc-tab-btn:hover {
  color: #3b82f6;
  background: #f8fafc;
}

.ccc-tab-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: #f8fafc;
}

.ccc-tab-btn i {
  font-size: 16px;
}

/* Tab Content */
.ccc-tab-content {
  display: none;
  padding: 40px;
  background: #f8fafc;
  min-height: 600px;
}

.ccc-tab-content.active {
  display: block;
}

/* Dashboard Grid */
.ccc-dashboard-grid {
  max-width: 1400px;
  margin: 0 auto;
}

/* Metrics Row */
.ccc-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

/* Enhanced Metric Cards */
.ccc-metric-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #f3f4f6;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
}

.ccc-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ccc-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ccc-primary), var(--ccc-primary-dark));
}

.ccc-metric-card.success::before {
  background: linear-gradient(90deg, var(--ccc-success), #047857);
}

.ccc-metric-card.warning::before {
  background: linear-gradient(90deg, var(--ccc-warning), #d97706);
}

.ccc-metric-card.info::before {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.ccc-metric-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  background: linear-gradient(135deg, var(--ccc-primary), var(--ccc-primary-dark));
  flex-shrink: 0;
}

.ccc-metric-card.success .ccc-metric-icon {
  background: linear-gradient(135deg, var(--ccc-success), #047857);
}

.ccc-metric-card.warning .ccc-metric-icon {
  background: linear-gradient(135deg, var(--ccc-warning), #d97706);
}

.ccc-metric-card.info .ccc-metric-icon {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.ccc-metric-content {
  flex: 1;
}

.ccc-metric-number {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 4px;
}

.ccc-metric-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;
}

.ccc-metric-change {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.ccc-metric-change.positive {
  background: #d1fae5;
  color: #065f46;
}

.ccc-metric-change.negative {
  background: #fee2e2;
  color: #991b1b;
}

.ccc-metric-change.neutral {
  background: #f3f4f6;
  color: #6b7280;
}

/* Charts Row */
.ccc-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.ccc-chart-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  position: relative;
  min-height: 400px;
}

/* Chart Canvas Styling - CRITICAL for preventing size issues */
.ccc-chart-container canvas {
  max-width: 100% !important;
  max-height: 400px !important;
  width: 100% !important;
  height: 300px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* FORCE canvas attributes to prevent Chart.js from setting crazy dimensions */
canvas[id*="Chart"] {
  width: 100% !important;
  height: 300px !important;
  max-width: 800px !important;
  max-height: 400px !important;
}

/* Specific fix for credits distribution chart */
#creditsDistributionChart {
  width: 400px !important;
  height: 300px !important;
  max-width: 400px !important;
  max-height: 300px !important;
}

/* Chart wrapper to control size and prevent infinite growth */
.ccc-chart-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  max-height: 400px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix chart gaps and alignment */
.ccc-chart-container .chart-title {
  text-align: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ccc-gray-800);
}

/* Remove gaps between chart elements */
.ccc-chart-container > * {
  margin: 0;
  padding: 0;
}

.ccc-chart-container canvas + * {
  margin-top: 16px;
}

/* Ensure consistent spacing */
.ccc-charts-row .ccc-chart-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 350px;
}

/* Fix chart legend spacing */
.ccc-chart-container .chartjs-legend {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ccc-gray-200);
}

/* Prevent Chart.js responsive issues */
.ccc-chart-container {
  overflow: hidden !important;
}

.ccc-chart-container canvas {
  position: relative !important;
  transform: none !important;
  transition: none !important;
}

/* Specific chart containers */
.ccc-chart-container.large {
  min-height: 450px;
}

.ccc-chart-container.medium {
  min-height: 350px;
}

.ccc-chart-container.small {
  min-height: 250px;
}

/* ULTIMATE PROTECTION: Prevent ANY canvas from growing beyond reasonable limits */
canvas {
  max-width: 100vw !important;
  max-height: 100vh !important;
}

canvas[width] {
  max-width: 1200px !important;
}

canvas[height] {
  max-height: 800px !important;
}

/* Emergency override for any canvas with crazy dimensions */
canvas[width="24292"], canvas[height="24292"],
canvas[width*="2429"], canvas[height*="2429"] {
  width: 400px !important;
  height: 300px !important;
  max-width: 400px !important;
  max-height: 300px !important;
}

/* Version stamp to track CSS updates */
.ccc-css-version::after {
  content: "CSS v2.1.1 - Chart Fix Applied";
  display: none;
}

/* CRITICAL: Prevent infinite chart growth */
.ccc-chart-container {
  contain: layout style !important;
}

.ccc-chart-container canvas {
  transform: none !important;
  transition: none !important;
  position: relative !important;
}

/* Force stable chart dimensions */
#usageChart, #creditsDistributionChart,
#userGrowthChart, #creditConsumptionChart,
#peakHoursChart, #deviceChart {
  max-width: 100% !important;
  max-height: 400px !important;
  width: 100% !important;
  height: 300px !important;
}

/* Doughnut charts specific sizing */
#creditsDistributionChart, #deviceChart {
  height: 250px !important;
  max-height: 300px !important;
}

/* Container overflow control */
.ccc-chart-container {
  overflow: hidden !important;
  position: relative !important;
}

/* Prevent Chart.js from modifying container */
.ccc-chart-container > div {
  position: relative !important;
  /* width: 100% !important; */ /* removed its impact */
  /* height: 300px !important; */ /* removed its impact */
  max-height: 400px !important;
}

.ccc-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.ccc-chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-chart-controls select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

/* Analytics Dashboard */
.ccc-analytics-dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.ccc-analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ccc-analytics-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-date-filter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-date-filter label {
  font-weight: 600;
  color: #6b7280;
}

.ccc-date-filter select {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.ccc-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.ccc-analytics-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-analytics-card h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

/* Revenue Section */
.ccc-revenue-section {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-revenue-section h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-revenue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.ccc-revenue-card {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
}

.ccc-revenue-amount {
  font-size: 28px;
  font-weight: 700;
  color: #059669;
  margin-bottom: 8px;
}

.ccc-revenue-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;
}

.ccc-revenue-change {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Users Management */
.ccc-users-management {
  max-width: 1400px;
  margin: 0 auto;
}

.ccc-users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ccc-users-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-users-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ccc-search-input {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  width: 250px;
  background: white;
}

.ccc-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Users Table */
.ccc-users-table-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-users-table {
  width: 100%;
  border-collapse: collapse;
}

.ccc-users-table thead {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.ccc-users-table th {
  padding: 16px 20px;
  text-align: right;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}

.ccc-users-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}

.ccc-users-table tbody tr:hover {
  background: #f8fafc;
}

.ccc-credits-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.ccc-btn-small {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ccc-btn-small.ccc-btn-primary {
  background: #3b82f6;
  color: white;
}

.ccc-btn-small.ccc-btn-info {
  background: #06b6d4;
  color: white;
}

.ccc-btn-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .ccc-enhanced-admin-wrap {
    margin: -20px -10px 0 -10px;
  }

  .ccc-admin-header-enhanced {
    padding: 24px 20px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .ccc-dashboard-tabs {
    padding: 0 20px;
    overflow-x: auto;
  }

  .ccc-tab-content {
    padding: 20px;
  }

  .ccc-metrics-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ccc-charts-row {
    grid-template-columns: 1fr;
  }

  .ccc-analytics-grid {
    grid-template-columns: 1fr;
  }

  .ccc-users-header {
    flex-direction: column;
    gap: 16px;
  }

  .ccc-users-actions {
    width: 100%;
    justify-content: space-between;
  }

  .ccc-search-input {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .ccc-admin-header-enhanced {
    padding: 20px 16px;
  }

  .ccc-header-content h1 {
    font-size: 24px;
  }

  .ccc-dashboard-tabs {
    padding: 0 16px;
  }

  .ccc-tab-content {
    padding: 16px;
  }

  .ccc-metric-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .ccc-metric-number {
    font-size: 24px;
  }

  .ccc-users-table {
    font-size: 12px;
  }

  .ccc-users-table th,
  .ccc-users-table td {
    padding: 12px 8px;
  }

  .ccc-search-input {
    width: 150px;
  }
}

/* ===== UTILITY CLASSES ===== */
.ccc-text-center { text-align: center; }
.ccc-text-right { text-align: right; }
.ccc-text-left { text-align: left; }
.ccc-mb-0 { margin-bottom: 0; }
.ccc-mb-1 { margin-bottom: 8px; }
.ccc-mb-2 { margin-bottom: 16px; }
.ccc-mb-3 { margin-bottom: 24px; }
.ccc-mt-0 { margin-top: 0; }
.ccc-mt-1 { margin-top: 8px; }
.ccc-mt-2 { margin-top: 16px; }
.ccc-mt-3 { margin-top: 24px; }
.ccc-hidden { display: none; }
.ccc-block { display: block; }
.ccc-inline-block { display: inline-block; }
.ccc-flex { display: flex; }
.ccc-grid { display: grid; }

/* ===== REPORTS PAGE STYLES ===== */

.ccc-reports-dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.ccc-report-filters {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-report-filters h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.ccc-filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccc-filter-item label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.ccc-filter-item select,
.ccc-filter-item input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

/* KPI Section */
.ccc-kpi-section {
  margin-bottom: 32px;
}

.ccc-kpi-section h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.ccc-kpi-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ccc-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.ccc-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.ccc-kpi-card.revenue::before {
  background: linear-gradient(90deg, #059669, #047857);
}

.ccc-kpi-card.users::before {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.ccc-kpi-card.activity::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.ccc-kpi-card.conversion::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.ccc-kpi-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.ccc-kpi-card.revenue .ccc-kpi-icon {
  background: linear-gradient(135deg, #059669, #047857);
}

.ccc-kpi-card.users .ccc-kpi-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.ccc-kpi-card.activity .ccc-kpi-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ccc-kpi-card.conversion .ccc-kpi-icon {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.ccc-kpi-content {
  flex: 1;
}

.ccc-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 4px;
}

.ccc-kpi-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 8px;
}

.ccc-kpi-trend {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* Detailed Charts */
.ccc-detailed-charts {
  margin-bottom: 32px;
}

.ccc-chart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.ccc-chart-row:last-child {
  grid-template-columns: 1fr 1fr;
}

.ccc-chart-container.large {
  grid-column: 1 / -1;
}

.ccc-chart-controls {
  display: flex;
  gap: 8px;
}

.ccc-chart-btn {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ccc-chart-btn.active,
.ccc-chart-btn:hover {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

/* Data Tables */
.ccc-data-tables {
  margin-bottom: 32px;
}

.ccc-table-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.ccc-table-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-data-table {
  width: 100%;
  border-collapse: collapse;
}

.ccc-data-table th {
  padding: 12px 16px;
  text-align: right;
  font-weight: 600;
  color: #374151;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}

.ccc-data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}

.ccc-data-table tbody tr:hover {
  background: #f8fafc;
}

/* Settings Page Styles */
.ccc-settings-form {
  max-width: 1000px;
  margin: 0 auto;
}

.ccc-settings-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.ccc-settings-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-settings-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.ccc-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.ccc-setting-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ccc-setting-item label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-setting-item input[type="checkbox"] {
  transform: scale(1.2);
}

.ccc-setting-item .description {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.ccc-settings-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

/* Advanced Users Management */
.ccc-users-advanced {
  max-width: 1400px;
  margin: 0 auto;
}

.ccc-advanced-search {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-advanced-search h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.ccc-bulk-actions {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-bulk-actions h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ccc-bulk-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ccc-enhanced-users-table {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6;
}

.ccc-table-controls {
  padding: 16px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ccc-table-info {
  font-size: 14px;
  color: #6b7280;
}

.ccc-table-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ccc-enhanced-table {
  width: 100%;
  border-collapse: collapse;
}

.ccc-enhanced-table th {
  padding: 12px 16px;
  text-align: right;
  font-weight: 600;
  color: #374151;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}

.ccc-enhanced-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}

.ccc-enhanced-table tbody tr:hover {
  background: #f8fafc;
}

/* Button Variants */
.ccc-btn-outline {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #374151;
}

.ccc-btn-outline:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Mobile Responsive for New Components */
@media (max-width: 1024px) {
  .ccc-filter-grid,
  .ccc-search-grid {
    grid-template-columns: 1fr;
  }

  .ccc-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .ccc-chart-row:last-child {
    grid-template-columns: 1fr;
  }

  .ccc-settings-grid {
    grid-template-columns: 1fr;
  }

  .ccc-bulk-controls {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .ccc-kpi-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .ccc-kpi-value {
    font-size: 24px;
  }

  .ccc-table-controls {
    flex-direction: column;
    gap: 12px;
  }

  .ccc-settings-actions {
    flex-direction: column;
  }

  .ccc-data-table,
  .ccc-enhanced-table {
    font-size: 11px;
  }

  .ccc-data-table th,
  .ccc-data-table td,
  .ccc-enhanced-table th,
  .ccc-enhanced-table td {
    padding: 8px 6px;
  }
}

/* ===== CUSTOM SCROLLBAR ===== */
.ccc-admin-content::-webkit-scrollbar {
  width: 8px;
}

.ccc-admin-content::-webkit-scrollbar-track {
  background: var(--ccc-gray-100);
  border-radius: 4px;
}

.ccc-admin-content::-webkit-scrollbar-thumb {
  background: var(--ccc-gray-300);
  border-radius: 4px;
}

.ccc-admin-content::-webkit-scrollbar-thumb:hover {
  background: var(--ccc-primary);
}

/* ===== WOOCOMMERCE INTEGRATION STYLES ===== */

/* ===== MYFATOORAH PAYMENT FORM - COMPLIANT STYLING ===== */

/* Main payment container - optimized for space */
#ccc-payment-iframe {
  width: 100% !important;
  min-height: 280px !important;
  max-height: 450px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: var(--ccc-radius-lg) !important;
  border: 1px solid var(--ccc-gray-200) !important;
  margin: 20px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* MyFatoorah embedded container - compact */
#mf-card-element {
  font-family: 'Cairo', var(--ccc-font-family) !important;
  width: 100% !important;
  min-height: 200px !important;
  max-height: 400px !important;
  padding: 12px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-radius: var(--ccc-radius-lg) !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

/* REMOVED: Duplicate iframe styling */

/* Apple Pay iframe - compact */
#mf-card-element #iframeApplePay {
  height: 50px !important;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

/* REMOVED: Duplicate Apple Pay styling */

/* Apple Pay progress indicator */
.ccc-payment-progress {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin: 15px 0;
}

.ccc-payment-progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Loading progress animation for faster perceived loading */
@keyframes loadingProgress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.ccc-loading-progress {
  transition: width 0.3s ease;
}

/* Card form iframe - simplified */
#mf-card-element #iframeCardView {
  height: 200px !important;
  margin-bottom: 8px !important;
}

/* REMOVED: Duplicate button styling */

#mf-card-element #MFSubmitCardPayment:disabled {
  background: var(--ccc-gray-300) !important;
  color: var(--ccc-gray-600) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Separator line - reduced spacing */
#mf-card-element > div:first-child {
  margin-bottom: 10px !important;
  margin-top: 5px !important;
}

/* Loading overlay - improved appearance */
#mf-loading-overlay {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(2px) !important;
  border-radius: var(--ccc-radius-lg) !important;
}

/* MyFatoorah error state styling support */
#mf-card-element .error-field,
#mf-card-element .mf-error,
#mf-card-element [data-error="true"] {
  border-color: var(--ccc-danger) !important;
  background-color: var(--ccc-danger-light) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Error message styling */
#mf-card-element .error-message,
#mf-card-element .mf-error-message {
  color: var(--ccc-danger) !important;
  font-size: 12px !important;
  font-family: 'Cairo', var(--ccc-font-family) !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  #mf-card-element {
    padding: 15px !important;
    min-height: 220px !important;
  }

  #ccc-payment-iframe {
    min-height: 250px !important;
    margin: 15px 0 !important;
  }

  #ccc-quick-buy-popup .ccc-modal-content {
    margin: 10px !important;
    max-height: 95vh !important;
  }
}

/* Payment status cards - compact styling */
.ccc-payment-status-card {
  padding: 20px !important;
  margin: 0 !important;
  border-radius: var(--ccc-radius-lg) !important;
}

.ccc-payment-status-card .ccc-payment-status-title {
  font-size: 18px !important;
  margin-bottom: 8px !important;
  font-family: 'Cairo', var(--ccc-font-family-heading) !important;
}

.ccc-payment-status-card .ccc-payment-status-message {
  font-size: 14px !important;
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
}

/* 3D Secure popup optimizations */
.ccc-3ds-popup {
  max-height: 80vh !important;
}

.ccc-3ds-popup iframe {
  border-radius: var(--ccc-radius) !important;
  border: 1px solid var(--ccc-gray-200) !important;
}

/* Ensure all MyFatoorah elements are visible */
#ccc-payment-iframe *,
#mf-card-element * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Simplified button styling */
#mf-card-element button,
#mf-card-element input[type="submit"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 12px auto 8px auto !important;
  background: #10b981 !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Cairo', sans-serif !important;
  cursor: pointer !important;
}

/* Simplified iframe styling - compact spacing */
#mf-card-element iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: white !important;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
}

/* Apple Pay specific iframe styling - compact */
#mf-card-element iframe[src*="apple"],
#mf-card-element iframe[id*="apple"],
#mf-card-element iframe[class*="apple"],
#mf-card-element #iframeApplePay {
  height: 48px !important;
  min-height: 48px !important;
  margin-bottom: 2px !important;
  margin-top: 0 !important;
}

/* Card form specific iframe styling - compact */
#mf-card-element iframe[src*="card"],
#mf-card-element iframe[id*="card"],
#mf-card-element #iframeCardView {
  height: 180px !important;
  min-height: 180px !important;
  margin-bottom: 4px !important;
  margin-top: 2px !important;
}

/* Main payment button - simplified */
#mf-card-element #MFSubmitCardPayment {
  display: block !important;
  visibility: visible !important;
  margin: 12px auto 8px auto !important;
  width: 100% !important;
  max-width: 350px !important;
  height: 60px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 16px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Removed hover effects for better performance */

/* Optimize spacing between form elements */
#mf-card-element > * {
  margin-bottom: 8px !important;
}

#mf-card-element > *:last-child {
  margin-bottom: 0 !important;
}

/* Removed excessive iframe styling rules for performance */

/* Credit Packages Grid */
.ccc-credit-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.ccc-credit-package {
  background: white;
  border: 2px solid var(--ccc-gray-200);
  border-radius: var(--ccc-radius);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ccc-credit-package:hover {
  border-color: var(--ccc-primary);
  transform: translateY(-4px);
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-credit-package::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ccc-primary), var(--ccc-primary-dark));
}

.ccc-package-credits {
  font-size: 32px;
  font-weight: 700;
  color: var(--ccc-primary);
  margin-bottom: 8px;
}

.ccc-package-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--ccc-gray-600);
  margin-bottom: 16px;
}

/* Saudi Riyal symbol in package cards - Enhanced */
.ccc-package-card .ccc-package-price.price-display {
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  white-space: nowrap;
  line-height: 1;
}

.ccc-package-card .ccc-package-price .amount {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

.ccc-package-card .saudi-riyal-symbol {
  margin-left: 4px;
  margin-right: 0;
  opacity: 0.8;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Saudi Riyal symbol in selected package summary */
.ccc-selection-summary .price-display {
  display: inline-flex;
  align-items: center;
  direction: ltr;
}

.ccc-selection-summary .saudi-riyal-symbol {
  margin-left: 3px;
  margin-right: 0;
  opacity: 0.9;
}

/* Ensure Saudi Riyal symbol is always visible */
.saudi-riyal-symbol {
  display: inline-block !important;
  background-image: url('../assets/saudi-riyal-symbol.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-width: 12px !important;
  min-height: 12px !important;
}

.ccc-quick-buy-btn {
  width: 100%;
  margin-top: 8px;
}

/* Quick Buy Section */
.ccc-quick-buy-section {
  background: var(--ccc-gray-50);
  border-radius: var(--ccc-radius);
  padding: 24px;
  margin: 24px 0;
}

.ccc-quick-buy-section h3 {
  margin: 0 0 16px 0;
  color: var(--ccc-gray-800);
  font-size: 20px;
}



/* No Credits Warning */
.ccc-no-credits {
  background: var(--ccc-warning-light);
  border: 1px solid var(--ccc-warning);
  border-radius: var(--ccc-radius);
  padding: 12px 16px;
  margin-top: 8px;
  text-align: center;
}

.ccc-no-credits p {
  margin: 0;
  color: var(--ccc-warning);
  font-weight: 500;
}

.ccc-no-credits a {
  color: var(--ccc-warning);
  text-decoration: underline;
  font-weight: 600;
}

.ccc-no-credits a:hover {
  color: #92400e;
}

/* Credit Display Enhancement - Smaller */
.ccc-credit-display {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 12px 16px;
  border-radius: var(--ccc-radius);
  text-align: center;
  box-shadow: var(--ccc-shadow);
  margin: 0;
  position: relative;
  overflow: hidden;
  font-family: var(--ccc-font-family);
}

.ccc-credit-display::before {
  content: "\f3ff"; /* Font Awesome gem icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  opacity: 0.7;
}

/* Responsive Design for Credit Packages */
@media (max-width: 768px) {
  .ccc-credit-packages {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0;
  }

  .ccc-credit-package {
    padding: 20px;
  }

  .ccc-package-credits {
    font-size: 32px;
  }

  .ccc-package-price {
    font-size: 18px;
  }

  .ccc-quick-buy-btn {
    padding: 14px 20px;
    font-size: 16px;
  }
}



/* ===== DISABLE OLD MODAL COMPLETELY ===== */
#ccc-quick-buy-modal,
.ccc-modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== FLOATING QUICK BUY BUTTON - DISABLED ===== */
/* Floating button styles removed - feature disabled */

/* ===== QUICK BUY POPUP ===== */
.ccc-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
  font-family: var(--ccc-font-family);
}

.ccc-popup-content {
  background: white !important;
  border-radius: var(--ccc-radius-lg) !important;
  max-width: 900px !important;
  width: 95% !important;
  max-height: 95vh !important;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.1);
  animation: slideInUp 0.4s ease;
  margin: 20px auto;
  position: relative;
}

@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ccc-popup-header {
  background: linear-gradient(135deg, var(--ccc-primary), var(--ccc-primary-dark));
  color: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--ccc-radius-lg) var(--ccc-radius-lg) 0 0;
}

.ccc-popup-header h3 {
  color: white;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ccc-popup-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccc-popup-close:hover {
  opacity: 1;
}

.ccc-popup-body {
  padding: 24px 0 24px 0;
  text-align: center;
  background: white;
}

.ccc-popup-body > p {
  padding: 0 24px;
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--ccc-gray-600);
}

.ccc-popup-footer {
  padding: 20px 24px;
  background: #e1d31300;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 var(--ccc-radius-lg) var(--ccc-radius-lg);
  border-top: 1px solid #c7c7c7;
}

.ccc-popup-footer .ccc-selected-package {
  flex: 1;
  text-align: right;
  margin-right: 16px;
}

.ccc-popup-footer .ccc-selection-summary {
  font-size: 14px;
  color: #444850;
  margin-bottom: 4px;
}

.ccc-current-credits {
  text-align: center;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border-radius: var(--ccc-radius-lg);
  padding: 24px;
  margin-bottom: 28px;
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}

.ccc-current-credits .ccc-credit-number {
  font-size: 42px;
  font-weight: 800;
  color: #1d4ed8;
  display: block;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(29, 78, 216, 0.1);
}

.ccc-current-credits .ccc-credit-label {
  color: var(--ccc-gray-600);
  font-size: 14px;
}

.ccc-quick-packages h4 {
  margin: 0 0 16px 0;
  color: var(--ccc-gray-800);
  text-align: center;
}

.ccc-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  max-width: 100%;
}

.ccc-package-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--ccc-font-family);
}

.ccc-package-card:hover {
  border-color: #3b82f6;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.ccc-package-card.popular {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
  position: relative;
}

.ccc-package-card.popular:hover {
  border-color: #d97706;
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.4);
}

.ccc-popular-badge {
  position: absolute;
  top: -8px;
  right: 16px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  z-index: 10;
}

.ccc-package-card.selected {
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.ccc-package-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.ccc-package-credits {
  font-size: 24px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 2px;
  line-height: 1;
}

.ccc-package-label {
  font-size: 10px;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.ccc-package-price {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.ccc-package-btn {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.ccc-package-card.selected .ccc-package-btn {
  background: var(--ccc-success);
}

.ccc-selected-package {
  background: var(--ccc-success-light);
  border: 1px solid var(--ccc-success);
  border-radius: var(--ccc-radius);
  padding: 16px;
  text-align: center;
  margin-top: 16px;
}

.ccc-selection-summary {
  font-size: 16px;
  font-weight: 600;
  color: var(--ccc-gray-800);
  margin-bottom: 12px;
}

.ccc-quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}

.ccc-quick-actions .ccc-btn {
  flex: 1;
  max-width: 150px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Floating button styles removed */

  .ccc-popup-content {
    width: 95%;
    margin: 10px;
  }

  .ccc-popup-footer {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .ccc-popup-footer .ccc-selected-package {
    text-align: center;
    margin-right: 0;
  }

  .ccc-popup-footer .ccc-btn {
    width: 100%;
  }

  .ccc-packages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ccc-package-card {
    padding: 12px 8px;
    min-height: 100px;
  }

  .ccc-package-credits {
    font-size: 20px;
  }

  .ccc-package-price {
    font-size: 12px;
  }

  .ccc-package-label {
    font-size: 9px;
  }

  .ccc-quick-packages {
    gap: 8px;
    padding: 0 16px;
  }

  .ccc-package-option {
    padding: 12px 8px;
    min-height: 110px;
  }

  .ccc-package-option .credits {
    font-size: 24px;
  }

  .ccc-package-option .price {
    font-size: 12px;
  }

  .ccc-package-option .ccc-package-btn {
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .ccc-packages-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .ccc-package-card {
    padding: 16px;
    min-height: auto;
  }

  .ccc-package-credits {
    font-size: 28px;
  }

  .ccc-package-price {
    font-size: 16px;
  }

  .ccc-package-label {
    font-size: 10px;
  }

  .ccc-package-options {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ccc-package-option {
    padding: 16px;
  }

  .ccc-package-option .credits {
    font-size: 20px;
  }

  .ccc-package-option .price {
    font-size: 14px;
  }

  .ccc-quick-actions {
    flex-direction: column;
  }

  .ccc-quick-actions .ccc-btn {
    max-width: none;
  }

  .ccc-quick-packages {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 12px;
    max-width: 400px;
  }

  .ccc-package-option {
    padding: 16px 12px;
    min-height: 120px;
  }

  .ccc-package-option .credits {
    font-size: 28px;
  }

  .ccc-package-option .price {
    font-size: 14px;
  }

  .ccc-package-option .ccc-package-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Large screens - Enhanced package display */
@media (min-width: 1200px) {
  .ccc-quick-packages {
    max-width: 600px;
    gap: 16px;
  }

  .ccc-package-option {
    padding: 20px 16px;
    min-height: 140px;
  }

  .ccc-package-option .credits {
    font-size: 40px;
    margin-bottom: 8px;
  }

  .ccc-package-option .price {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .ccc-package-option .ccc-package-btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* ===== ENHANCED 1-POINT SYSTEM STYLES ===== */

/* Loading state for protected fields - NO BACKGROUND */
.ccc-protected.ccc-loading {
  background: none !important;
  color: #374151;
  pointer-events: none;
  animation: pulse 1.5s infinite;
  border: 2px dashed #d1d5db;
}

.ccc-loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Credit update animation */
.ccc-credit-update {
  animation: creditDeduct 0.6s ease;
}

@keyframes creditDeduct {
  0% { transform: scale(1); color: inherit; }
  50% { transform: scale(1.2); color: #dc2626; }
  100% { transform: scale(1); color: inherit; }
}

/* Credit notifications */
.ccc-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: var(--ccc-radius);
  color: white;
  font-weight: 600;
  z-index: 10001;
  transform: translateX(400px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 300px;
  box-shadow: var(--ccc-shadow-lg);
}

.ccc-notification.show {
  transform: translateX(0);
  opacity: 1;
}

.ccc-notification-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-left: 4px solid #047857;
}

.ccc-notification-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-left: 4px solid #b91c1c;
}

.ccc-notification-info {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  border-left: 4px solid #1d4ed8;
}

/* Enhanced confirmation dialog styling */
.ccc-protected::before {
  content: "\f023 1 نقطة"; /* Font Awesome lock icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  z-index: 1;
}

.ccc-protected {
  position: relative;
}

/* Success state animation */
.ccc-reveal-success {
  animation: revealSuccess 0.8s ease;
}

@keyframes revealSuccess {
  0% {
    background: #10b981;
    transform: scale(1);
  }
  50% {
    background: #059669;
    transform: scale(1.05);
  }
  100% {
    background: var(--ccc-success-light);
    transform: scale(1);
  }
}

/* Mobile notifications */
@media (max-width: 768px) {
  .ccc-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    transform: translateY(-100px);
  }

  .ccc-notification.show {
    transform: translateY(0);
  }
}

/* Credit cost indicator */
.ccc-cost-indicator {
  position: absolute;
  top: -5px;
  right: -5px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
  animation: costPulse 2s infinite;
}

@keyframes costPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Enhanced protected field hover */
.ccc-protected:hover::before {
  content: "\f3ff اضغط للكشف"; /* Font Awesome gem icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background: var(--ccc-primary);
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 12px;
  animation: none;
}

/* ===== POST META ADMIN TABLE STYLES ===== */
.widefat.striped {
  border-radius: var(--ccc-radius);
  overflow: hidden;
  box-shadow: var(--ccc-shadow);
}

.widefat.striped th {
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  font-weight: 600;
  padding: 12px 16px;
  text-align: center;
}

.widefat.striped td {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--ccc-gray-200);
}

.widefat.striped tr:hover {
  background-color: var(--ccc-gray-50);
}

.widefat.striped code {
  background: var(--ccc-gray-100);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--ccc-primary);
  font-weight: 600;
}

.widefat.striped pre {
  background: var(--ccc-gray-50);
  border: 1px solid var(--ccc-gray-200);
  border-radius: 4px;
  padding: 8px;
  margin: 0;
  font-size: 11px;
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.widefat.striped input[type="checkbox"] {
  transform: scale(1.3);
  margin: 0;
}

.widefat.striped input[type="checkbox"]:checked {
  accent-color: var(--ccc-success);
}

/* Meta field value styling */
.ccc-meta-value {
  max-width: 300px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.ccc-meta-key {
  min-width: 150px;
  font-weight: 500;
}

.ccc-meta-protection {
  text-align: center;
  width: 80px;
}

/* ===== DAILY QUOTA SYSTEM STYLES ===== */
.ccc-credits-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

/* Daily Quota Display - Smaller */
.ccc-quota-display {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 12px 16px;
  border-radius: var(--ccc-radius);
  text-align: center;
  box-shadow: var(--ccc-shadow);
  margin: 0;
  position: relative;
  overflow: hidden;
}

.ccc-quota-display::before {
  content: "\f06b"; /* Font Awesome gift icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  opacity: 0.7;
}

.ccc-quota-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ccc-quota-icon {
  font-size: 18px;
}

.ccc-quota-title {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

.ccc-quota-info {
  margin-bottom: 15px;
}

.ccc-quota-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}

.ccc-quota-label {
  font-size: 10px;
  opacity: 0.8;
}

.ccc-quota-progress {
  background: rgba(255, 255, 255, 0.2);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.ccc-progress-bar {
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Quota Warning Messages */
.ccc-quota-warning {
  margin: 15px 0;
  padding: 12px 16px;
  border-radius: var(--ccc-radius);
  font-size: 13px;
  line-height: 1.4;
  grid-column: 1 / -1; /* Span full width across all grid columns */
  width: 100%;
}

.ccc-quota-warning.ccc-warning-critical {
  background: linear-gradient(135deg, var(--ccc-danger-light) 0%, #fef2f2 100%);
  border: 1px solid var(--ccc-danger);
  color: var(--ccc-danger);
}

.ccc-quota-warning.ccc-warning-low {
  background: linear-gradient(135deg, var(--ccc-warning-light) 0%, #fffbeb 100%);
  border: 1px solid var(--ccc-warning);
  color: var(--ccc-warning);
}

.ccc-quota-info {
  margin: 15px 0;
  padding: 12px 16px;
  border-radius: var(--ccc-radius);
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  border: 1px solid #3b82f6;
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.4;
  grid-column: 1 / -1; /* Span full width across all grid columns */
  width: 100%;
}

/* Mobile responsive for quota system */
@media (max-width: 768px) {
  .ccc-credits-container {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px 0;
  }

  .ccc-quota-display,
  .ccc-credit-display {
    padding: 16px 20px;
    border-radius: 12px;
  }

  .ccc-quota-number,
  .ccc-credit-number {
    font-size: 28px;
    font-weight: 800;
  }

  .ccc-quota-label,
  .ccc-credit-label {
    font-size: 14px;
  }

  .ccc-quota-header,
  .ccc-credit-header {
    margin-bottom: 12px;
  }

  .ccc-quota-usage,
  .ccc-credit-usage {
    font-size: 12px;
    margin-top: 8px;
  }
}

/* ===== FAKE WHATSAPP BUTTON STYLES ===== */

/* Fake WhatsApp button container */
.ccc-fake-whatsapp {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Gray out the original WhatsApp button */
.ccc-fake-whatsapp .ccc-protected-whatsapp {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Hover effect for fake WhatsApp button */
.ccc-fake-whatsapp:hover .ccc-protected-whatsapp {
  filter: grayscale(80%);
  opacity: 0.8;
  transform: scale(1.02);
}

/* Protection overlay */
.ccc-protection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(128, 128, 128, 0.2);
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccc-protection-overlay:hover {
  background: rgba(128, 128, 128, 0.4);
}

/* WhatsApp icon overlay */
.ccc-protection-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 222-99.6 222-222 0-59.3-23.2-115-65.1-157zM223.9 413.3c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 335.4l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56 81.2 56 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>') no-repeat center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ccc-fake-whatsapp:hover .ccc-protection-overlay::after {
  opacity: 0.8;
}

/* Generic gray WhatsApp button fallback */
.ccc-fake-whatsapp .ccc-protected-whatsapp span {
  background: #888888 !important;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.ccc-fake-whatsapp:hover .ccc-protected-whatsapp span {
  background: #666666 !important;
  opacity: 0.9;
}

/* Loading state for fake WhatsApp buttons */
.ccc-fake-whatsapp.loading .ccc-protected-whatsapp {
  filter: none;
  opacity: 1;
}

.ccc-fake-whatsapp.loading .ccc-protection-overlay {
  background: rgba(251, 191, 36, 0.8);
}

.ccc-fake-whatsapp.loading .ccc-protection-overlay::before {
  content: "\f110"; /* Font Awesome spinner icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  opacity: 1;
  animation: spin 1s linear infinite;
}

/* Success state animation */
.ccc-fake-whatsapp.success .ccc-protected-whatsapp {
  filter: none;
  opacity: 1;
  animation: revealSuccess 0.8s ease;
}

.ccc-fake-whatsapp.success .ccc-protection-overlay {
  background: rgba(16, 185, 129, 0.8);
}

.ccc-fake-whatsapp.success .ccc-protection-overlay::before {
  content: "\f00c"; /* Font Awesome check icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  opacity: 1;
}

/* Mobile responsive for fake WhatsApp buttons */
@media (max-width: 768px) {
  .ccc-protection-overlay::before {
    font-size: 14px;
  }

  .ccc-fake-whatsapp:hover .ccc-protection-overlay::before {
    opacity: 0.8;
  }
}

/* Accessibility improvements */
.ccc-fake-whatsapp:focus {
  outline: 2px solid var(--ccc-primary);
  outline-offset: 2px;
  border-radius: 5px;
}

.ccc-fake-whatsapp[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.ccc-fake-whatsapp:hover[aria-label]::after {
  opacity: 1;
}

/* ===== UNIFIED CREDIT PACKAGE STYLES ===== */
.ccc-credit-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
  padding: 0;
}

.ccc-credit-package {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ccc-credit-package:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--ccc-primary);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ccc-credit-package.popular {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}

.ccc-credit-package.popular:hover {
  transform: translateY(-8px) scale(1.07);
  border-color: #d97706;
  box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.35);
}

.ccc-credit-package .popular-badge {
  position: absolute;
  top: -10px;
  right: 20px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  z-index: 10;
}

.ccc-package-credits {
  font-size: 36px;
  font-weight: 800;
  color: var(--ccc-primary);
  margin-bottom: 8px;
  line-height: 1;
}

.ccc-credit-package.popular .ccc-package-credits {
  color: #d97706;
}

.ccc-package-price {
  font-size: 20px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 20px;
}

.ccc-credit-package.popular .ccc-package-price {
  color: #92400e;
}

.ccc-quick-buy-btn {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.ccc-quick-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.ccc-credit-package.popular .ccc-quick-buy-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.ccc-credit-package.popular .ccc-quick-buy-btn:hover {
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.ccc-quick-packages {
  display: grid;
  gap: 12px;
  margin: 20px 0;
  width: 100%;
  padding: 0 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ccc-package-option {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  padding: 16px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ccc-package-option:hover {
  border-color: var(--ccc-primary);
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

.ccc-package-option.selected {
  border-color: var(--ccc-primary);
  background: linear-gradient(135deg, var(--ccc-primary) 0%, var(--ccc-primary-dark) 100%);
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.25);
}

.ccc-package-option.popular {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.ccc-package-option.popular:hover,
.ccc-package-option.popular.selected {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.35);
}

.ccc-package-option .popular-badge {
  position: absolute;
  top: -6px;
  right: 8px;
  background: #dc2626;
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.ccc-package-option .credits {
  display: block;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1;
  color: var(--ccc-primary);
  text-shadow: 0 1px 2px rgba(59, 130, 246, 0.1);
}

.ccc-package-option .price {
  display: block;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.9;
  color: #64748b;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.ccc-package-option .ccc-package-btn {
  background: var(--ccc-primary);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: auto;
  width: 100%;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  letter-spacing: 0.3px;
}

.ccc-package-option:hover .ccc-package-btn,
.ccc-package-option.selected .ccc-package-btn {
  background: white;
  color: var(--ccc-primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.ccc-package-option.popular .ccc-package-btn {
  background: #f59e0b;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.ccc-package-option.popular:hover .ccc-package-btn,
.ccc-package-option.popular.selected .ccc-package-btn {
  background: white;
  color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* ===== IFRAME PAYMENT STYLES ===== */
#ccc-payment-iframe {
  display: none;
  width: 100% !important;
  min-height: 300px !important;
  padding: 16px !important;
  background: white !important;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  position: relative !important;
  overflow: visible !important;
  margin-top: 20px;
}

#ccc-payment-iframe.show {
  display: block !important;
}

/* Ensure 3D Secure iframes display properly - but not for Apple Pay */
#ccc-payment-iframe iframe[src*="3ds"],
#ccc-payment-iframe iframe[src*="secure"],
#ccc-payment-iframe iframe[src*="authentication"] {
  width: 100% !important;
  min-height: 400px !important;
  height: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: white !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* Dynamic height adjustment for payment iframes */
#ccc-payment-iframe iframe[src*="3ds"],
#ccc-payment-iframe iframe[src*="secure"],
#ccc-payment-iframe iframe[src*="authentication"] {
  min-height: 600px !important;
  height: 600px !important;
}

/* REMOVED: Conflicting card iframe rule - using specific rules below */

/* 3D Secure popup/modal support */
#ccc-payment-iframe .threeds-modal,
#ccc-payment-iframe .mf-3ds-modal,
#ccc-payment-iframe [class*="3ds"],
#ccc-payment-iframe [class*="threeds"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.8) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3D Secure iframe inside modal */
#ccc-payment-iframe .threeds-modal iframe,
#ccc-payment-iframe .mf-3ds-modal iframe {
  width: 90% !important;
  max-width: 500px !important;
  height: 80% !important;
  max-height: 600px !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/* ===== PAYMENT COMPLETION STEP REDESIGN ===== */

.ccc-payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  position: relative;
  overflow: hidden;
}

.ccc-payment-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.ccc-payment-title {
  font-size: 22px;
  font-weight: 700;
  color:  #7d7d7d;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ccc-payment-title::before {
  content: '💳';
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

#ccc-back-to-packages {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 25px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
  text-decoration: none;
}

#ccc-back-to-packages:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

#ccc-back-to-packages i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

#ccc-back-to-packages:hover i {
  transform: translateX(3px);
}

#ccc-checkout-iframe {
  background: white;
  border-radius: 0 0 12px 12px;
}

/* Mobile responsive for iframe */
@media (max-width: 768px) {
  .ccc-payment-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .ccc-payment-title {
    font-size: 16px;
  }

  #ccc-checkout-iframe {
    height: 400px !important;
  }
}

/* ===== MYFATOORAH PAYMENT METHOD TABS ===== */

/* Payment Method Tabs */
.mf-payment-methods {
    width: 100%;
}

.mf-payment-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 20px;
    gap: 4px;
}

.mf-tab-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mf-tab-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.mf-tab-btn.active {
    background: #3b82f6;
    color: white;
    border-bottom: 2px solid #3b82f6;
}

.mf-payment-content {
    min-height: 300px;
}

.mf-payment-method {
    display: none;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
}

.mf-payment-method.active {
    display: block;
}

/* STC Pay Styles */
.stc-pay-otp-container {
    text-align: center;
    padding: 20px;
}

.stc-pay-header h4 {
    margin: 10px 0;
    color: #1f2937;
    font-size: 18px;
}

.stc-pay-header p {
    color: #6b7280;
    margin: 5px 0 20px 0;
}

.stc-pay-otp-input {
    margin: 20px 0;
}

.stc-pay-timer {
    font-size: 14px;
    font-weight: 500;
}

/* Google Pay Styles */
#mf-google-pay {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Apple Pay Styles - compact */
#mf-apple-pay {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Payment Styles - compact */
#mf-card-element {
    min-height: 180px;
}

/* Compact spacing for payment iframes */
#ccc-payment-iframe .mf-card-element,
#ccc-payment-iframe #mf-card-element {
    min-height: 180px !important;
    height: auto !important;
}

/* Apple Pay iframe - compact height */
#ccc-payment-iframe iframe[src*="apple"],
#ccc-payment-iframe iframe[id*="apple"],
#ccc-payment-iframe #iframeApplePay {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: white !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
}

/* Card iframe - compact height */
#ccc-payment-iframe iframe[src*="card"],
#ccc-payment-iframe iframe[id*="card"],
#ccc-payment-iframe #iframeCardView {
    width: 100% !important;
    min-height: 180px !important;
    height: 180px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: white !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 4px !important;
    margin-top: 2px !important;
}

/* Compact MyFatoorah form layout */
#ccc-payment-iframe .mf-form-container,
#ccc-payment-iframe [class*="mf-form"] {
    padding: 10px !important;
    margin: 0 !important;
}

/* Reduce button margins in MyFatoorah */
#ccc-payment-iframe button,
#ccc-payment-iframe .mf-button,
#ccc-payment-iframe [class*="button"] {
    margin: 2px auto !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

/* Force compact layout for MyFatoorah embedded forms */
#ccc-payment-iframe {
    padding: 10px !important;
}

#ccc-payment-iframe > div,
#ccc-payment-iframe iframe > body,
#ccc-payment-iframe iframe > html > body {
    padding: 0 !important;
    margin: 0 !important;
}

/* Reduce spacing between card fields and button */
#ccc-payment-iframe .card-form,
#ccc-payment-iframe .payment-form,
#ccc-payment-iframe [class*="form"] {
    gap: 5px !important;
    padding: 5px !important;
    margin-bottom: 5px !important;
}

/* ===== FIELD VALIDATION STYLES ===== */

/* Input validation states */
.ccc-input-valid {
    border: 2px solid #10b981 !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.ccc-input-invalid {
    border: 2px solid #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    animation: shake 0.5s ease-in-out;
}

.ccc-input-warning {
    border: 2px solid #f59e0b !important;
    background-color: #fffbeb !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

/* Validation icons */
.ccc-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    z-index: 10;
}

.ccc-validation-icon.valid {
    color: #10b981;
}

.ccc-validation-icon.invalid {
    color: #ef4444;
}

.ccc-validation-icon.warning {
    color: #f59e0b;
}

/* Validation messages */
.ccc-validation-message {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    animation: slideDown 0.3s ease-out;
}

.ccc-validation-message.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.ccc-validation-message.success {
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #bbf7d0;
}

.ccc-validation-message.warning {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fed7aa;
}

/* Form field containers */
.ccc-field-container {
    position: relative;
    margin-bottom: 16px;
}

.ccc-field-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.ccc-field-label.required::after {
    content: " *";
    color: #ef4444;
    font-weight: bold;
}

/* Enhanced input styling */
.ccc-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.ccc-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ccc-form-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* Validation animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pre-payment validation summary */
.ccc-validation-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    display: none;
}

.ccc-validation-summary.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.ccc-validation-summary h4 {
    color: #dc2626;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.ccc-validation-summary ul {
    margin: 0;
    padding: 0 0 0 20px;
    color: #991b1b;
}

.ccc-validation-summary li {
    margin-bottom: 4px;
    font-size: 14px;
}

/* Payment button states */
.ccc-payment-button {
    transition: all 0.3s ease;
}

.ccc-payment-button:disabled {
    background: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.ccc-payment-button.validating {
    background: #f59e0b !important;
    cursor: wait !important;
}

.ccc-payment-button.validated {
    background: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Fix Apple Pay SDK conflicts */
apple-spinner {
    display: none !important;
}

/* Prevent Apple Pay SDK duplicate registration errors */
.apple-pay-container {
    isolation: isolate;
}

/* Hide duplicate Apple Pay elements */
#ccc-payment-iframe apple-spinner:not(:first-of-type) {
    display: none !important;
}

/* 3D Verification iframe styling */
#ccc-3d-verification-iframe {
    border: none !important;
    width: 100% !important;
    min-height: 450px !important;
    background: white !important;
    border-radius: 0 0 8px 8px !important;
}

/* Ensure 3D verification stays in iframe */
#ccc-payment-iframe iframe[src*="MpgsAuthentication"] {
    width: 100% !important;
    height: 500px !important;
    border: none !important;
    border-radius: 8px !important;
}

/* 3D verification container */
.ccc-3d-verification-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 3D verification header */
.ccc-3d-verification-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 15px 20px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3D verification info */
.ccc-3d-verification-info {
    padding: 15px;
    background: #f0f9ff;
    border-top: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 13px;
    text-align: center;
}

.ccc-3d-verification-info i {
    margin-left: 5px;
}

/* ===== USER ACTIVITY MODAL STYLES ===== */

.ccc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: fadeIn 0.3s ease-out;
}

.ccc-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
}

.ccc-modal-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.ccc-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ccc-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.ccc-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ccc-modal-body {
    padding: 30px;
}

/* Loading spinner for modal */
.ccc-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

/* User info section */
.ccc-user-info-section {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

/* Stats cards */
.ccc-stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.ccc-stat-card {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ccc-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tabs styling */
.ccc-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.ccc-tab-button {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ccc-tab-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ccc-tab-button.active {
    background: #3b82f6 !important;
    color: white !important;
}

/* Table styling in modal */
.ccc-modal-body .ccc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
}

.ccc-modal-body .ccc-table th {
    background: #f3f4f6;
    padding: 12px;
    text-align: right;
    border: 1px solid #d1d5db;
    font-weight: 600;
    color: #374151;
}

.ccc-modal-body .ccc-table td {
    padding: 12px;
    border: 1px solid #d1d5db;
    vertical-align: top;
}

.ccc-modal-body .ccc-table tr:nth-child(even) {
    background: #f9fafb;
}

.ccc-modal-body .ccc-table tr:hover {
    background: #f3f4f6;
}

/* Responsive design for modal */
@media (max-width: 768px) {
    .ccc-modal-content {
        max-width: 95vw;
        max-height: 95vh;
    }

    .ccc-modal-header {
        padding: 15px 20px;
    }

    .ccc-modal-body {
        padding: 20px;
    }

    .ccc-stats-section {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .ccc-tab-button {
        padding: 8px 16px;
        margin-left: 5px;
        font-size: 14px;
    }
}

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== LOGIN FORM CUSTOMIZATION ===== */

/* Change button text from "معالجة" to "تحقق" - Non-interfering approach */
.dig_login_va_otp.loginviasms {
    font-size: 0 !important;
    line-height: 0 !important;
}

.dig_login_va_otp.loginviasms::before {
    content: "تحقق" !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
    line-height: normal !important;
}

/* ===== MYFATOORAH PAYMENT METHODS STYLING ===== */

/* Payment method tabs */
.mf-payment-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.mf-tab-btn {
    background: #f8fafc;
    border: none;
    padding: 15px 25px;
    margin: 0;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    border-bottom: 3px solid transparent;
}

.mf-tab-btn:hover {
    background: #e2e8f0;
    color: #374151;
}

.mf-tab-btn.active {
    background: white;
    color: #3b82f6;
    border-bottom: 3px solid #3b82f6;
    font-weight: 600;
}

/* Payment method containers */
.mf-payment-method {
    display: none;
    padding: 0;
    background: white;
    border-radius: 0 0 8px 8px;
}

.mf-payment-method.active {
    display: block;
}

/* Apple Pay specific styling */
.mf-tab-btn[data-method="applepay"] {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
}

.mf-tab-btn[data-method="applepay"]:hover {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

.mf-tab-btn[data-method="applepay"].active {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: white;
    border-bottom: 3px solid #1f2937;
}

/* Apple Pay button styling */
#mf-apple-pay .apple-pay-button {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    margin: 10px 0 5px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

#mf-apple-pay .apple-pay-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card payment container */
#mf-card-element {
    width: 100%;
    min-height: 400px;
    padding: 20px;
    margin: 0;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    position: relative;
}

/* Responsive Design for Payment Methods */
@media (max-width: 768px) {
    .mf-payment-tabs {
        flex-direction: column;
        gap: 2px;
        border-radius: 8px;
    }

    .mf-tab-btn {
        border-radius: 0;
        margin-bottom: 2px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }

    .mf-tab-btn.active {
        border-bottom: none;
        border-left: 3px solid #3b82f6;
    }

    .mf-tab-btn[data-method="applepay"].active {
        border-left: 3px solid #1f2937;
    }

    .mf-payment-method {
        border-radius: 8px;
        margin-top: 10px;
    }
}

/* ===== MODERN LOADING INDICATORS ===== */
 
/* Pulse Loading Animation */
.ccc-loading-pulse {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    position: relative;
    animation: pulse-loading 2s infinite;
}

.ccc-loading-pulse::before,
.ccc-loading-pulse::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid #3b82f6;
    opacity: 0;
    animation: pulse-ring 2s infinite;
}

.ccc-loading-pulse::before {
    width: 80px;
    height: 80px;
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.ccc-loading-pulse::after {
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
    animation-delay: 0.5s;
}

@keyframes pulse-loading {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* Spinner Loading Animation */
.ccc-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-loading 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dots Loading Animation */
.ccc-loading-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.ccc-loading-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    animation: dots-loading 1.4s infinite ease-in-out;
}

.ccc-loading-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.ccc-loading-dots .dot:nth-child(2) { animation-delay: -0.16s; }
.ccc-loading-dots .dot:nth-child(3) { animation-delay: 0s; }

@keyframes dots-loading {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Payment Status Cards */
.ccc-payment-status-card {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.ccc-payment-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
    background-size: 200% 100%;
    animation: gradient-slide 2s infinite;
}

@keyframes gradient-slide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ccc-payment-status-icon {
    font-size: 64px;
    margin-bottom: 20px;
    display: block;
}

.ccc-payment-status-icon.loading {
    color: #3b82f6;
    animation: bounce-icon 2s infinite;
}

.ccc-payment-status-icon.success {
    color: #10b981;
    animation: success-pop 0.6s ease-out;
}

.ccc-payment-status-icon.error {
    color: #ef4444;
    animation: error-shake 0.6s ease-out;
}

@keyframes bounce-icon {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes success-pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes error-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.ccc-payment-status-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1f2937;
}

.ccc-payment-status-message {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Progress Bar */
.ccc-payment-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin: 20px 0;
}

.ccc-payment-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

.ccc-payment-progress-bar.animated {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
    background-size: 200% 100%;
    animation: progress-slide 2s infinite;
}

@keyframes progress-slide {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* REMOVED: Massive duplicate button styling section - over 600 lines removed */

/* REMOVED: All duplicate button states and animations */

/* REMOVED: All duplicate animations and form validation styles */

/* ===== SAUDI RIYAL SYMBOL STYLING REMOVED ===== */

/* Saudi Riyal Symbol CSS removed */

/* Saudi Riyal sizes removed */

/* Price display with Saudi Riyal symbol */
.price-display {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #1f2937;
}

.price-display .amount {
    font-size: inherit;
    font-weight: inherit;
}

.price-display .saudi-riyal-symbol {
    filter: brightness(0) saturate(100%) invert(13%) sepia(8%) saturate(1034%) hue-rotate(202deg) brightness(95%) contrast(89%);
}

/* Price in different contexts */
.credit-price {
    font-size: 18px;
    font-weight: 700;
    color: #059669;
}

.credit-price .saudi-riyal-symbol {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

.total-price {
    font-size: 24px;
    font-weight: 800;
    color: #dc2626;
}

.total-price .saudi-riyal-symbol {
    width: 28px;
    height: 28px;
    margin-left: 12px;
    filter: brightness(0) saturate(100%) invert(17%) sepia(82%) saturate(2258%) hue-rotate(348deg) brightness(99%) contrast(97%);
}

/* Payment summary styling */
.payment-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.payment-summary .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 8px 0;
}

.payment-summary .price-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.payment-summary .price-row.total {
    border-top: 2px solid #d1d5db;
    margin-top: 15px;
    padding-top: 15px;
    font-weight: 700;
    font-size: 18px;
}

.payment-summary .price-label {
    color: #6b7280;
    font-size: 14px;
}

.payment-summary .price-value {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #1f2937;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .saudi-riyal-symbol {
        width: 14px;
        height: 14px;
        margin-left: 4px;
    }

    .saudi-riyal-symbol.large {
        width: 18px;
        height: 18px;
        margin-left: 6px;
    }

    .total-price .saudi-riyal-symbol {
        width: 24px;
        height: 24px;
        margin-left: 8px;
    }
}

/* REMOVED: All duplicate button effects and responsive styles */

/* ===== SAUDI RIYAL (SAR) SYMBOL STYLING ===== */
/* Official Saudi Riyal symbol from Saudi Arabian Monetary Authority (SAMA) */
/* Source: https://www.sama.gov.sa/ar-sa/Currency/Documents/Saudi_Riyal_Symbol-2.svg */
/* Local asset: assets/saudi-riyal-symbol.svg */

/* Saudi Riyal Symbol - Local Asset - Smaller Sizes for better readability */
.saudi-riyal-symbol {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    margin-right: 1px;
    vertical-align: middle;
    background-image: url('../assets/saudi-riyal-symbol.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

/* Different sizes - All smaller */
.saudi-riyal-symbol.tiny {
    width: 10px;
    height: 10px;
    margin-left: 2px;
}

.saudi-riyal-symbol.small {
    width: 12px;
    height: 12px;
    margin-left: 3px;
}

.saudi-riyal-symbol.medium {
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

.saudi-riyal-symbol.large {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}

.saudi-riyal-symbol.xlarge {
    width: 18px;
    height: 18px;
    margin-left: 6px;
}

/* Price display with Saudi Riyal symbol - Enhanced alignment */
.price-display {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #1f2937;
    direction: ltr; /* للأرقام */
    white-space: nowrap;
    line-height: 1.2;
}

.price-display .amount {
    font-size: inherit;
    font-weight: inherit;
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

.price-display .saudi-riyal-symbol {
    margin-left: 4px;
    margin-right: 0;
    opacity: 0.9;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}

/* Price in different contexts */
.credit-price {
    font-size: 18px;
    font-weight: 700;
    color: #059669;
}

.credit-price .saudi-riyal-symbol {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

.total-price {
    font-size: 24px;
    font-weight: 800;
    color: #dc2626;
}

.total-price .saudi-riyal-symbol {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    filter: brightness(0) saturate(100%) invert(17%) sepia(82%) saturate(2258%) hue-rotate(348deg) brightness(99%) contrast(97%);
}

/* Payment summary styling */
.payment-summary {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
}

.payment-summary .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 8px 0;
}

.payment-summary .price-row:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

.payment-summary .price-row.total {
    border-top: 2px solid #d1d5db;
    margin-top: 15px;
    padding-top: 15px;
    font-weight: 700;
    font-size: 18px;
}

.payment-summary .price-label {
    color: #6b7280;
    font-size: 14px;
}

.payment-summary .price-value {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #1f2937;
    direction: ltr;
}

/* Credit packages styling */
.credit-package {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.credit-package:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.credit-package.selected {
    border-color: #10b981;
    background: #f0fdf4;
}

.credit-package .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.credit-package .package-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.credit-package .package-price {
    font-size: 20px;
    font-weight: 800;
    color: #059669;
    display: flex;
    align-items: center;
    direction: ltr;
}

.credit-package .package-description {
    color: #6b7280;
    font-size: 14px;
    margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .saudi-riyal-symbol {
        width: 10px;
        height: 10px;
        margin-left: 2px;
    }

    .saudi-riyal-symbol.large {
        width: 14px;
        height: 14px;
        margin-left: 4px;
    }

    .total-price .saudi-riyal-symbol {
        width: 16px;
        height: 16px;
        margin-left: 5px;
    }

    .payment-summary {
        padding: 15px;
        margin: 15px 0;
    }

    .credit-package {
        padding: 15px;
        margin: 10px 0;
    }
}

/* ===== POPUP BODY ENGLISH NUMERALS ===== */
.ccc-popup-body {
    font-variant-numeric: lining-nums;
    -webkit-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
}

.ccc-popup-body .price-display,
.ccc-popup-body .ccc-package-price,
.ccc-popup-body .amount,
.ccc-popup-body [data-price] {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    font-variant-numeric: lining-nums !important;
    -webkit-font-feature-settings: "lnum" !important;
    font-feature-settings: "lnum" !important;
    direction: ltr !important;
}

/* Package cards in popup - English numerals */
.ccc-popup-body .ccc-package-card .ccc-package-price {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    font-variant-numeric: lining-nums !important;
    direction: ltr !important;
}

.ccc-popup-body .ccc-package-card .ccc-package-price .amount {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
}

/* Selection summary in popup - English numerals */
.ccc-popup-body .ccc-selection-summary .price-display {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    direction: ltr !important;
}

/* Force English numerals for all numbers in popup */
.ccc-popup-body .ccc-package-card,
.ccc-popup-body .ccc-selection-summary,
.ccc-popup-body .price-display {
    font-feature-settings: "lnum" 1;
    -webkit-font-feature-settings: "lnum" 1;
    font-variant-numeric: lining-nums;
}

/* ===== FIX CLASS CONFLICTS ===== */
/* Prevent nested price-display elements */
.price-display .price-display {
    display: contents !important;
}

/* Fix duplicate classes issue */
.ccc-package-price.price-display.price-display {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure proper styling even with class conflicts */
.ccc-package-price[class*="price-display"] {
    display: inline-flex !important;
    align-items: center !important;
    direction: ltr !important;
    white-space: nowrap !important;
}

/* Fix for elements that have both classes */
.ccc-package-price.price-display {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    font-variant-numeric: lining-nums !important;
}

/* Prevent symbol duplication */
.saudi-riyal-symbol + .saudi-riyal-symbol {
    display: none !important;
}

/* ===== END CLASS CONFLICTS FIX ===== */