/* ============================================
   Responsive CSS - OttGhor
   Mobile-first responsive fixes for all templates
   ============================================ */

/* --- Grid System --- */
.serv-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.search-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.detail-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.order-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

@media (max-width: 1024px) { .serv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .serv-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 400px) { .serv-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .search-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .detail-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) { .order-grid { grid-template-columns: 1fr; } }

/* --- Body --- */
@media (max-width: 640px) {
  .body-bg { padding-top: 12px !important; padding-bottom: 12px !important; }
}

/* --- Typography --- */
@media (max-width: 640px) {
  h2.cat-title { font-size: 22px !important; }
  .profile-name-lg { font-size: 20px !important; }
  .wallet-balance { font-size: 24px !important; }
  .header-title { font-size: 20px !important; }
}

/* --- Topbar --- */
@media (max-width: 640px) {
  .topbar-logo img { height: 34px !important; }
  .topbar-inner { height: 58px !important; }
  .topbar { padding: 0 12px !important; }
  .topbar-nav .btn-topbar { padding: 8px 14px !important; font-size: 12px !important; }
}
@media (max-width: 480px) {
  .topbar-user-avatar { display: none !important; }
  .topbar-balance-pill {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 360px) {
  .topbar-balance-pill {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

/* --- Carousel --- */
@media (max-width: 640px) {
  .carousel-slide img, 
  .carousel-slide .h-64 { height: 180px !important; }
  .carousel-dots { bottom: 8px !important; gap: 6px !important; }
  .carousel-dot { width: 6px !important; height: 6px !important; }
}

/* --- Category Section --- */
@media (max-width: 640px) {
  section[style*="padding:40px 0"] { padding: 24px 0 !important; }
  [style*="padding-bottom:24px"][style*="border-bottom:2px"] { 
    padding-bottom: 16px !important; margin-bottom: 20px !important; 
  }
}

/* --- Service Card --- */
@media (max-width: 640px) {
  [style*="border-radius:14px"][style*="padding:20px 16px"] {
    padding: 14px 12px !important;
  }
  [style*="border-radius:14px"][style*="padding:20px 16px"] h3 {
    font-size: 13px !important;
  }
}

/* --- Profile --- */
@media (max-width: 640px) {
  .profile-header-card { padding: 24px 20px !important; }
  .profile-header-card .profile-avatar-lg { 
    width: 56px !important; height: 56px !important; font-size: 22px !important; 
  }
  .profile-stats-row { flex-wrap: wrap; gap: 16px !important; justify-content: center; }
  .profile-stat-value { font-size: 22px !important; }
  .wallet-card > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .wallet-actions { flex-wrap: wrap; gap: 8px !important; width: 100% !important; }
  .wallet-actions .btn { font-size: 12px !important; padding: 8px 12px !important; flex: 1 !important; justify-content: center !important; }
}

/* --- Floating Help Widget --- */
@media (max-width: 768px) {
  .buttonizer {
    bottom: 74px !important;
    right: 12px !important;
    z-index: 40 !important;
  }
}
@media (max-width: 480px) {
  .buttonizer .fb {
    display: none !important;
  }
  .buttonizer button {
    padding: 10px !important;
  }
}

@media (max-width: 768px) {
  .user-layout { display: block !important; width: 100vw !important; max-width: 100% !important; overflow-x: hidden !important; }
  .user-main { padding: 14px 12px 90px !important; width: 100% !important; max-width: 100vw !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; }
  .profile-header-card { border-radius: 14px !important; width: 100% !important; box-sizing: border-box !important; }
  .table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* --- Tables --- */
@media (max-width: 640px) {
  .table-wrap table { font-size: 11px !important; }
  .table-wrap th, .table-wrap td { padding: 6px 8px !important; }
  .table-wrap td[style*="font-family:monospace"] { font-size: 10px !important; }
}

/* --- Product Detail --- */
@media (max-width: 640px) {
  .order-step-left,
  .order-step-right,
  #order-form > div:first-child,
  #order-form > div:last-child { min-width: 100% !important; flex: 1 1 100% !important; }
  .detail-grid {
    grid-template-columns: repeat(2,1fr) !important; gap: 8px !important;
  }
  #order-form .package-btn { padding: 12px 8px !important; }
}

/* --- Payment method in product detail --- */
@media (max-width: 640px) {
  .payment-methods-grid,
  #order-form [style*="display:grid"][style*="repeat(2,1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .payment-methods-grid label,
  #order-form label[id^="pay-"] { 
    padding: 10px 8px !important; 
  }
  .payment-methods-grid img,
  #order-form label[id^="pay-"] img { 
    height: 38px !important; 
    margin-bottom: 4px !important; 
  }
  .payment-methods-grid div,
  #order-form label[id^="pay-"] div {
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  .payment-methods-grid,
  #order-form [style*="display:grid"][style*="repeat(2,1fr)"] {
    gap: 8px !important;
    padding: 10px 10px !important;
  }
  .payment-methods-grid label,
  #order-form label[id^="pay-"] {
    padding: 8px 6px !important;
  }
  .payment-methods-grid img,
  #order-form label[id^="pay-"] img {
    height: 32px !important;
  }
  .payment-methods-grid div,
  #order-form label[id^="pay-"] div {
    font-size: 10px !important;
  }
}

/* --- Modals (Profile) --- */
@media (max-width: 640px) {
  #edit-profile-modal > .card,
  #deposit-modal > .card {
    width: 92% !important; margin: 10px !important; max-width: none !important;
  }
  #edit-profile-modal .card-body,
  #deposit-modal .card-body { padding: 14px !important; }
  #edit-profile-modal .card-title,
  #deposit-modal .card-title { font-size: 14px !important; }
}

/* --- Support Modal (Index) --- */
@media (max-width: 640px) {
  #supportModal > div { width: 92% !important; border-radius: 16px !important; }
  .support-modal-body,
  #supportModal [style*="min-height:160px"] { 
    flex-direction: column !important; min-height: auto !important; 
  }
  .support-modal-left,
  #supportModal [style*="width:40%"] { 
    width: 100% !important; padding: 24px 16px 10px !important; 
  }
  .support-modal-divider,
  #supportModal [style*="width:1px"][style*="height:100px"] { display: none !important; }
  .support-modal-right,
  #supportModal [style*="flex:1"][style*="padding:40px 28px"] { 
    padding: 14px 20px 24px !important; text-align: center !important; 
  }
  #supportModal button[style*="top:12px"] { top: 8px !important; right: 8px !important; }
}

/* --- Add Funds --- */
@media (max-width: 640px) {
  .add-funds-page { padding: 12px !important; }
  .add-funds-card { border-radius: 14px !important; }
  .add-funds-header { padding: 20px 16px !important; }
  .add-funds-body { padding: 20px 16px !important; }
  .header-icon { width: 48px !important; height: 48px !important; font-size: 24px !important; }
  .balance-pill { font-size: 12px !important; padding: 6px 14px !important; }
  .balance-amount { font-size: 16px !important; }
  .payment-card { padding: 10px !important; }
  .payment-icon { width: 36px !important; height: 36px !important; }
  .payment-icon svg { width: 28px !important; height: 28px !important; }
  .amount-btn { padding: 10px 12px !important; font-size: 13px !important; }
  .amount-input { padding: 12px 12px 12px 34px !important; font-size: 16px !important; }
  .modal-content { padding: 20px !important; width: 92% !important; }
  .modal-title { font-size: 17px !important; }
  .payment-number span { font-size: 18px !important; }
  .cta-btn { padding: 14px !important; font-size: 15px !important; }
}

@media (max-width: 400px) {
  .payment-grid { grid-template-columns: 1fr !important; }
}

/* --- Login / Register Forms --- */
@media (max-width: 640px) {
  .auth-page-wrapper { padding: 16px 12px 40px !important; min-height: auto !important; }
  .auth-card { max-width: 100% !important; padding: 24px 18px !important; border-radius: 14px !important; }
  .login-form { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .login-form h1.text-2xl { font-size: 20px !important; }
  .secondary-section > div { padding: 0 !important; }
  .social-login button, .social-login-wrap a { width: 100% !important; justify-content: center !important; }
}

/* --- Contact Page --- */
@media (max-width: 640px) {
  .box-form .p-6 { padding: 20px 16px !important; }
  .box-form h1 { font-size: 28px !important; }
  .site-single-support { padding: 10px !important; }
  .site-single-support h6 { font-size: 12px !important; }
}

/* --- Search Page --- */
@media (max-width: 640px) {
  [style*="max-width:1280px"][style*="padding:32px 16px"] { padding: 20px 12px !important; }
  [style*="max-width:1280px"][style*="padding:32px 16px"] h1 { font-size: 20px !important; }
  .search-grid a { padding: 10px !important; gap: 10px !important; }
  .search-grid a img { width: 40px !important; height: 40px !important; }
  .search-grid a [style*="font-weight:600"][style*="font-size:14px"] { font-size: 13px !important; }
}

/* --- Order Detail --- */
.order-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 540px) {
  .order-info-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
@media (max-width: 640px) {
  .section { padding: 16px 12px !important; }
  .card-body { padding: 14px !important; }
  .card-body [style*="font-size:18px"][style*="color:#5921ae"] { font-size: 16px !important; }
}

/* --- Footer --- */
@media (max-width: 640px) {
  .footer { padding: 32px 0 16px !important; }
  .footer-grid { gap: 20px !important; }
  .footer-grid > div:first-child img { height: 44px !important; }
  .footer-title { font-size: 14px !important; margin-bottom: 12px !important; }
  .footer-link { font-size: 13px !important; }
  .footer-bottom { margin-top: 24px !important; padding-top: 16px !important; }
}

/* --- Admin --- */
@media (max-width: 640px) {
  .admin-content { padding: 12px !important; }
  .admin-header { padding: 0 12px !important; height: 56px !important; }
  .header-breadcrumb { font-size: 12px !important; }
  .stats-grid { gap: 10px !important; }
  .stat-card { padding: 14px !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 20px !important; margin-bottom: 8px !important; }
  .stat-value { font-size: 20px !important; }
  .page-title { font-size: 17px !important; margin-bottom: 16px !important; }
  .card-header { padding: 10px 14px !important; }
  .card-body { padding: 14px !important; }
  .card-title { font-size: 13px !important; }
  .toolbar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 12px 14px !important; }
  .toolbar-left, .toolbar-right { width: 100% !important; }
  .toolbar .search-field { width: 100% !important; }
  .toolbar .search-field input { width: 100% !important; }
  .toolbar form[style*="display:flex"] { flex-direction: column !important; width: 100% !important; }
  .toolbar input[style*="width:240px"] { width: 100% !important; }
  .section-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .section-header .btn-group { width: 100% !important; }
  .section-header .btn-group .btn { flex: 1 !important; justify-content: center !important; }
  th, td { padding: 8px 10px !important; font-size: 12px !important; }
  .content-grid { grid-template-columns: 1fr !important; }
  .company-header { flex-direction: column !important; text-align: center !important; }
  .filter-chips { flex-wrap: wrap; }
  .nav-section-title { padding: 16px 16px 6px !important; font-size: 10px !important; }
  .admin-sidebar { width: 240px !important; }
  .sidebar-header { padding: 12px 16px !important; }
  .sidebar-search { padding: 12px 16px !important; }
  .sidebar-nav { padding: 8px !important; }
  .nav-item { padding: 8px 10px !important; font-size: 13px !important; }
  .search-shortcut { display: none !important; }
  /* Admin services 2-col grid to 1-col */
  [style*="grid-template-columns:repeat(2,1fr)"][style*="margin-top:16px"] {
    grid-template-columns: 1fr !important;
  }
  /* Admin subscription_orders toolbar */
  .toolbar-left h2 { font-size: 14px !important; }
  /* Admin modals - reduce padding */
  [style*="background:var(--card)"][style*="border-radius:16px"][style*="padding:28px"] {
    padding: 20px !important;
  }

  /* Admin User Edit Page Responsive */
  .user-adjust-balance-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .user-adjust-balance-form .btn {
    width: 100% !important;
  }
  .user-margin-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .user-margin-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .user-margin-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .user-header-actions {
    width: 100% !important;
  }
  .user-header-actions .btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .user-card-footer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .user-card-footer-actions form {
    flex: 1 1 calc(50% - 4px) !important;
  }
  .user-card-footer-actions form .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .user-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .user-card-footer-actions form {
    flex: 1 1 100% !important;
  }
  .user-header-actions .btn {
    width: 100% !important;
  }
}