/**
 * GyanRank — Modern Brand & Layout Refinement (v5.0)
 * 1. Dual-color headings across all pages & panels ("savi jagh hading two color me")
 * 2. Subtle light borders & removal of extra heavy box-shadows ("extra box saddo nahi halaka border use")
 * 3. 100% Mobile-friendly responsive tables, cards, & panel layouts ("all page , all panal all page , and tables savi mobile frandlay ho")
 * 4. Presentation of core exam modes (MCQ, PDF + OMR, CBT, AI Features)
 */

/* ==========================================================================
   1. GLOBAL SHADOW REMOVAL & SUBTLE BORDER SYSTEM
   ========================================================================== */
:root {
  --gr-border: #e2e8f0;
  --gr-border-subtle: #edf2f7;
  --gr-border-focus: #818cf8;
  --gr-primary: #4f46e5;
  --gr-primary-dark: #3730a3;
  --gr-secondary: #06b6d4;
  --gr-shadow-none: none !important;
  --gr-shadow-clean: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Remove all heavy blurry shadows across all elements */
.card,
.panel-card,
.content-panel,
.stat-card,
.welcome-card,
.counter-card,
.gr-clean-why-card,
.gr-ai-card,
.gr-ui-card,
.gr-step,
.pricing-card,
.gr-price-card,
.gr-plan-card,
.modal-content,
.list-group-item,
.content-area .card,
.gr-pricing-table-wrap,
.table-responsive {
  box-shadow: none !important;
  border: 1px solid var(--gr-border, #e2e8f0) !important;
  background-color: #ffffff;
}

/* Very subtle hover border feedback without blurry shadows */
.card:hover,
.panel-card:hover,
.stat-card:hover,
.gr-clean-why-card:hover,
.gr-ai-card:hover,
.gr-ui-card:hover,
.pricing-card:hover,
.gr-price-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border-color: #cbd5e1 !important;
}

/* Ensure no shadows on any images, icons, or logos */
img, svg, picture, .gr-logo, .hero-img, .brand-link img, .avatar-img, .stat-icon, .icon-box {
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ==========================================================================
   2. DUAL-COLOR HEADINGS EVERYWHERE ("savi jagh hading two color me")
   ========================================================================== */
/* Master Dual Color Heading Class */
.heading-two-tone,
.gr-two-tone,
.gr-section-title,
.gr-page-title,
.welcome-title,
.section-heading-duo,
.two-tone-title,
.panel-title,
.topbar-title {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Accent phrase / second color */
.heading-two-tone span,
.gr-two-tone span,
.gr-section-title span,
.gr-page-title span,
.welcome-title span,
.section-heading-duo span,
.two-tone-title span,
.two-tone-accent,
.text-duo-accent,
.content-area h1 span,
.content-area h2 span,
.content-area h3 span {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #4f46e5 !important;
  display: inline-block;
  font-weight: 800;
}

/* For Dark Backgrounds (Hero & Banners) */
.gr-hero .gr-hero-title,
.gr-page-hero .gr-page-title,
.gr-hero-title {
  color: #ffffff !important;
  font-weight: 800;
}

.gr-hero .gr-hero-title span,
.gr-page-hero .gr-page-title span,
.gr-hero-title span,
.dark-hero-span {
  background: linear-gradient(135deg, #fbbf24 0%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #fbbf24 !important;
  display: inline-block;
  font-weight: 800;
}

/* Topbar & Panel Header Titles in 2 colors */
.topbar-title-text {
  color: #ffffff;
}
.topbar-title-text span {
  color: #38bdf8;
  font-weight: 700;
}

/* ==========================================================================
   3. UNIVERSAL MOBILE-FRIENDLY DATA TABLES
   ========================================================================== */
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
}

/* Subtle scrollbars for tables */
.table-responsive::-webkit-scrollbar,
.table::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.table-responsive::-webkit-scrollbar-track,
.table::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb,
.table::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.table::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  vertical-align: middle !important;
}

.table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

.table tbody td {
  padding: 12px 16px !important;
  color: #1e293b !important;
  font-size: 0.88rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table tbody tr:hover td {
  background-color: #f8fafc !important;
}

/* ==========================================================================
   4. COMPREHENSIVE MOBILE PANEL & PAGE OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 991.98px) {
  .page-content,
  .content-area {
    padding: 14px 12px !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .content-area > .container-fluid,
  .content-area > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Table on mobile: compact & clear */
  .table {
    font-size: 0.82rem !important;
  }
  .table thead th,
  .table tbody td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* Welcome Banner on Panels */
  .welcome-card {
    padding: 16px 14px !important;
    border-radius: 12px !important;
    gap: 12px !important;
  }
  .welcome-title {
    font-size: 1.25rem !important;
  }
  .welcome-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .welcome-actions .btn {
    width: 100% !important;
    min-height: 42px !important;
  }

  /* Stat Cards */
  .stat-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .stat-value {
    font-size: 1.35rem !important;
  }

  /* Modals */
  .modal-dialog {
    margin: 12px !important;
  }
  .modal-content {
    border-radius: 14px !important;
  }

  /* Action button groups */
  .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 14px;
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .gr-hero {
    padding: 40px 0 35px !important;
  }
  .gr-hero-title {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
  }
  .gr-hero-subtitle {
    font-size: 0.92rem !important;
  }

  .gr-section-title {
    font-size: 1.55rem !important;
  }

  /* Buttons full width on small phones */
  .btn-mobile-full,
  .gr-hero .gr-btn-white,
  .gr-hero .gr-btn-primary,
  .gr-hero .gr-btn-outline {
    width: 100% !important;
  }
}

/* ==========================================================================
   5. EXAM MODES SHOWCASE CARDS (MCQ, PDF + OMR, CBT, AI)
   ========================================================================== */
.gr-exam-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.gr-exam-mode-card {
  background: #ffffff;
  border: 1px solid var(--gr-border, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.gr-exam-mode-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
}

.gr-mode-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.gr-mode-icon-mcq {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
  border: 1px solid rgba(79, 70, 229, 0.2);
}

.gr-mode-icon-pdf {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.gr-mode-icon-cbt {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.gr-mode-icon-ai {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.gr-mode-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 10px;
}

.gr-mode-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.gr-mode-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.gr-mode-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
}

.gr-mode-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.gr-mode-features li i {
  font-size: 0.9rem;
}