/**
 * ═══════════════════════════════════════════════════════════════════════════
 * REFACTORED INLINE STYLES
 * Các CSS classes được tạo ra để thay thế inline styles trong index.html
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────────────────────────────────────
   NAVIGATION
   ─────────────────────────────────────────────────────────────────────────── */

/* PWA Install Button - Line 101 */
.btn-pwa-install {
  display: none;
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   CASE STUDY SECTION
   ─────────────────────────────────────────────────────────────────────────── */

/* Case Study Grid - Line 253 */
.case-study-grid {
  align-items: center;
}

/* Case Study Card - Line 262 */
.case-study-card {
  padding: 40px;
}

/* Case Study Stats Flex - Line 265 */
.case-study-stats {
  gap: 32px;
  flex-wrap: wrap;
}

/* Case Study Solutions List - Line 280 */
.case-study-solutions {
  margin-top: 32px;
}

/* Case Study Solutions List - Line 282 */
.case-study-solution-list {
  list-style: none;
  padding: 0;
}

/* Testimonial Mini - Line 300-307 */
.testimonial-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.testimonial-mini-name {
  font-size: 12px;
  font-weight: bold;
}

.testimonial-mini-role {
  font-size: 10px;
  color: var(--md-sys-color-on-surface-variant);
}

/* ───────────────────────────────────────────────────────────────────────────
   PRICING SECTION
   ─────────────────────────────────────────────────────────────────────────── */

/* Pricing Button Full Width - Line 341 */
.pricing-btn-full {
  width: 100%;
}

/* Pricing Button Featured - Line 363 */
.pricing-btn-featured {
  width: 100%;
  background: white;
  color: var(--md-sys-color-primary);
}

/* Pricing Button Outlined - Line 383 */
.pricing-btn-outlined {
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────────────────
   TESTIMONIALS SECTION
   ─────────────────────────────────────────────────────────────────────────── */

/* Testimonial Avatar - Line 407, 424, 441 */
.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 50%;
}

.testimonial-avatar-secondary {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-secondary);
}

.testimonial-avatar-tertiary {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-tertiary);
}

.testimonial-avatar-primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-primary);
}

/* ───────────────────────────────────────────────────────────────────────────
   CONTACT/CTA SECTION
   ─────────────────────────────────────────────────────────────────────────── */

/* Contact Form Card - Line 463 */
.contact-form-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background: white;
  color: var(--md-sys-color-on-surface);
}

/* Contact Submit Button - Line 493 */
.contact-submit-btn {
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────────────────
   FOOTER SECTION
   ─────────────────────────────────────────────────────────────────────────── */

/* Footer Links Flex - Line 551 */
.footer-links-flex {
  gap: 24px;
}

/* ───────────────────────────────────────────────────────────────────────────
   PAYMENT MODAL
   ─────────────────────────────────────────────────────────────────────────── */

/* Payment Modal Container - Line 560 */
payment-modal {
  display: none;
}

/* Payment Loading Overlay - Line 645-657 */
.payment-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.payment-loading-card {
  background: white;
  padding: 32px;
  border-radius: 16px;
  text-align: center;
}

.payment-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #006A60;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.payment-loading-text {
  font-family: 'Google Sans', sans-serif;
  color: #191C1B;
}

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