/* ═══════════════════════════════════════════════════════════ OKCredit — Comprehensive Responsive Styles Covers: phones (320px+), tablets (768px+), desktops (1024px+) ═══════════════════════════════════════════════════════════ */
/* ── Fix hardcoded widths ── */
 .account-card {
	 width: 100% !important;
	 box-sizing: border-box;
}
 .customer-container {
	 width: 100% !important;
}
 .manage-page {
	 max-width: 100% !important;
}
/* ── Smooth transitions globally ── */
 .sidebar, .main-content, .ledger-left, .ledger-right {
	 transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
}
/* ══════════════════════════════════════════════════════════════ MOBILE BOTTOM NAV (visible only on mobile) ══════════════════════════════════════════════════════════════ */
 .mobile-bottom-nav {
	 display: none;
	 position: fixed;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 background: var(--sidebar-bg);
	 border-top: 1px solid rgba(255,255,255,0.08);
	 padding: 8px 0 max(8px, env(safe-area-inset-bottom));
	 z-index: 150;
	 backdrop-filter: blur(20px);
	 -webkit-backdrop-filter: blur(20px);
	 box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}
 .mobile-bottom-nav-inner {
	 display: flex;
	 align-items: center;
	 justify-content: space-around;
}
 .mobile-nav-item {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 gap: 3px;
	 padding: 4px 8px;
	 color: var(--sidebar-text);
	 text-decoration: none;
	 font-size: 10px;
	 font-weight: 600;
	 letter-spacing: 0.3px;
	 border-radius: 10px;
	 transition: all 0.18s;
	 min-width: 54px;
}
 .mobile-nav-item svg {
	 width: 20px;
	 height: 20px;
}
 .mobile-nav-item.active {
	 color: #34d399;
}
 .mobile-nav-item.active svg {
	 filter: drop-shadow(0 0 4px rgba(52,211,153,0.5));
}
 .mobile-nav-more {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 gap: 3px;
	 padding: 4px 8px;
	 color: var(--sidebar-text);
	 font-size: 10px;
	 font-weight: 600;
	 cursor: pointer;
	 min-width: 54px;
}
 .mobile-nav-more svg {
	 width: 20px;
	 height: 20px;
}
/* ══════════════════════════════════════════════════════════════ TABLE RESPONSIVENESS ══════════════════════════════════════════════════════════════ */
 .table-scroll-wrapper {
	 overflow-x: auto;
	 -webkit-overflow-scrolling: touch;
	 border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
 .report-table-card table, .ov-table, .txn-table {
	 min-width: 560px;
}
/* ══════════════════════════════════════════════════════════════ TABLET — 900px to 1024px ══════════════════════════════════════════════════════════════ */
 @media (max-width: 1024px) {
	 .sidebar {
		 width: 200px;
	}
	 .main-content {
		 margin-left: 200px;
	}
	 .app-header {
		 padding: 0 24px;
	}
	 .ledger-left {
		 width: 280px;
		 min-width: 240px;
	}
	 .stats-grid {
		 grid-template-columns: repeat(2, 1fr);
	}
	 .ov-stats {
		 grid-template-columns: repeat(2, 1fr);
	}
	 .profile-hero {
		 padding: 22px;
	}
	 .settings-page, .profile-page, .help-page, .reports-page {
		 padding: 24px;
	}
	 .form-row {
		 grid-template-columns: 1fr 1fr;
	}
	 .pricing-grid {
		 grid-template-columns: repeat(2, 1fr);
	}
}
/* ══════════════════════════════════════════════════════════════ MOBILE — up to 768px ══════════════════════════════════════════════════════════════ */
 @media (max-width: 768px) {
	/* Show mobile bottom nav */
	 .mobile-bottom-nav {
		 display: block;
	}
	/* Body padding to avoid bottom nav overlap */
	 body {
		 padding-bottom: 70px;
	}
	/* Sidebar slides in from left */
	 .sidebar {
		 width: 270px !important;
		 transform: translateX(-100%);
		 transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
		 z-index: 200;
	}
	 .sidebar.mobile-open {
		 transform: translateX(0);
	}
	 .main-content {
		 margin-left: 0 !important;
	}
	/* Header */
	 .app-header {
		 padding: 0 14px;
		 height: 56px;
		 position: sticky;
		 top: 0;
		 z-index: 90;
	}
	 .hamburger-btn {
		 display: flex;
	}
	 .header-title {
		 font-size: 15px;
	}
	 .header-badge {
		 display: none;
	}
	/* Ledger layout — stacked */
	 .ledger-layout {
		 flex-direction: column !important;
		 height: auto !important;
		 overflow: visible !important;
	}
	 .ledger-left {
		 width: 100% !important;
		 min-width: unset !important;
		 max-height: 45vh;
		 border-right: none !important;
		 border-bottom: 1px solid var(--border);
	}
	 .ledger-right {
		 flex: unset !important;
		 min-height: 55vh;
		 overflow-y: auto;
	}
	/* Customer detail adjustments */
	 .customer-detail.show {
		 height: auto !important;
		 min-height: 55vh;
	}
	 .detail-header {
		 padding: 12px 14px;
		 flex-wrap: wrap;
		 gap: 10px;
	}
	 .detail-header-actions {
		 flex-wrap: wrap;
		 gap: 6px;
	}
	 .action-btn {
		 padding: 7px 11px;
		 font-size: 11.5px;
	}
	 .detail-bottom {
		 padding: 12px 14px;
		 flex-wrap: wrap;
		 gap: 10px;
	}
	 .btn-credit, .btn-payment {
		 padding: 10px 16px;
		 font-size: 12.5px;
		 flex: 1;
		 justify-content: center;
	}
	 .balance-summary .amount {
		 font-size: 20px;
	}
	 .txn-list {
		 padding: 12px 14px;
		 gap: 6px;
	}
	/* Pages padding */
	 .reports-page, .settings-page, .profile-page, .manage-page, .help-page {
		 padding: 14px;
	}
	/* Stats */
	 .stats-grid {
		 grid-template-columns: 1fr 1fr !important;
		 gap: 10px;
		 margin-bottom: 16px;
	}
	 .ov-stats {
		 grid-template-columns: 1fr 1fr !important;
		 gap: 10px;
	}
	 .stat-card {
		 padding: 16px;
	}
	 .stat-value {
		 font-size: 22px;
	}
	/* Help cards */
	 .help-cards {
		 grid-template-columns: 1fr !important;
		 gap: 10px;
	}
	/* Profile hero */
	 .profile-hero {
		 flex-direction: column;
		 text-align: center;
		 padding: 22px 18px;
		 gap: 14px;
	}
	 .profile-avatar-lg {
		 width: 60px;
		 height: 60px;
		 font-size: 22px;
	}
	 .profile-business-name {
		 font-size: 18px;
	}
	/* Form rows */
	 .form-row {
		 grid-template-columns: 1fr !important;
		 gap: 12px;
	}
	/* Profile form */
	 .profile-form {
		 padding: 18px;
	}
	/* Manage page */
	 .account-card {
		 width: 100% !important;
		 padding: 16px;
		 gap: 12px;
	}
	/* Reports table */
	 .report-table-card {
		 overflow: hidden;
	}
	 .report-table-card table {
		 min-width: 480px;
	}
	 .report-table-card .table-scroll-wrapper, .report-table-card {
		 overflow-x: auto;
		 -webkit-overflow-scrolling: touch;
	}
	/* Override report table card overflow for scrolling */
	 .report-table-card {
		 overflow-x: auto !important;
	}
	 th {
		 padding: 9px 12px;
		 font-size: 10px;
	}
	 td {
		 padding: 11px 12px;
		 font-size: 12.5px;
	}
	/* Settings */
	 .settings-item {
		 padding: 13px 14px;
	}
	 .settings-item-icon {
		 width: 34px;
		 height: 34px;
	}
	/* Help hero */
	 .help-hero {
		 padding: 24px 18px;
	}
	 .help-hero h2 {
		 font-size: 20px;
	}
	/* Subscription cards */
	 .pricing-grid {
		 grid-template-columns: 1fr !important;
		 gap: 14px;
	}
	 .plan-card {
		 padding: 22px;
	}
	/* Login */
	 .login-card {
		 padding: 32px 22px;
	}
	 .login-title {
		 font-size: 24px;
	}
	 .amount-input-field {
		 font-size: 36px;
		 width: 160px;
	}
	/* Overlay */
	 .modal {
		 width: 95vw;
		 max-width: 400px;
	}
	 .modal-body {
		 padding: 18px;
	}
	 .modal-header {
		 padding: 16px 18px 14px;
	}
	/* Drawer */
	 .drawer {
		 width: 100% !important;
		 right: -100% !important;
	}
	 .drawer.open {
		 right: 0 !important;
	}
	/* Portal */
	 .portal-container {
		 flex-direction: column !important;
	}
	 .portal-wrapper {
		 padding: 16px;
	}
	/* Add customer */
	 .customer-container {
		 flex-direction: column !important;
	}
	 .info-panel {
		 padding: 28px 22px;
		 text-align: center;
	}
	 .form-panel {
		 padding: 24px 18px;
	}
	 .page-wrapper {
		 padding: 16px;
	}
	/* Add credit/payment cards */
	 .addcredit-card, .addpayment-card {
		 border-radius: 16px;
		 margin: 0;
	}
	 .addcredit-wrap, .addpayment-wrap {
		 padding: 14px;
		 align-items: flex-start;
	}
	/* Txn detail */
	 .enxdetail-wrap {
		 padding: 14px;
	}
	 .enxdetail-card {
		 border-radius: 14px;
	}
	 .enxdetail-top {
		 padding: 16px;
	}
	 .enxdetail-body {
		 padding: 16px;
	}
	 .enxdetail-action-row {
		 flex-wrap: wrap;
	}
	 .enxdetail-action-row button {
		 flex: 1;
	}
	/* Customer profile */
	 .customerprofile-wrap {
		 padding: 14px;
	}
	 .customerprofile-top {
		 padding: 16px;
	}
	 .customerprofile-body {
		 padding: 16px;
	}
	 .customerprofile-action-row {
		 flex-wrap: wrap;
	}
	 .customerprofile-quick-actions {
		 flex-wrap: wrap;
	}
	/* Toast */
	 .toast {
		 bottom: 80px;
		 right: 14px;
		 left: 14px;
		 border-radius: 14px;
		 font-size: 13px;
	}
	/* Overview panel */
	 .overview-panel {
		 padding: 14px;
		 gap: 12px;
	}
	 .ledger-detail {
		 padding: 14px;
		 gap: 10px;
	}
	 .ld-header {
		 padding: 14px;
		 flex-wrap: wrap;
	}
	 .ld-actions {
		 justify-content: flex-start;
		 flex-wrap: wrap;
	}
	/* Settings profile container */
	 .profile-container {
		 margin: 20px 0 0 0 !important;
		 padding: 0 14px !important;
	}
	 .profile-card {
		 padding: 20px;
	}
	 .profile-top {
		 flex-wrap: wrap;
		 gap: 12px;
	}
	 .profile-actions {
		 flex-wrap: wrap;
	}
	 .quick-actions {
		 flex-wrap: wrap;
	}
	/* Header right */
	 .header-right {
		 gap: 8px;
	}
	 .header-avatar {
		 width: 34px;
		 height: 34px;
		 font-size: 12px;
	}
	/* Subscription in settings */
	 .sub-card {
		 padding: 28px 20px;
	}
	 .sub-title {
		 font-size: 22px;
	}
	 .sub-price {
		 font-size: 34px;
	}
	/* Customer item */
	 .customer-item {
		 padding: 11px 14px;
	}
	 .customer-avatar {
		 width: 38px;
		 height: 38px;
		 font-size: 13px;
		 border-radius: 10px;
	}
	/* Search area */
	 .search-area {
		 padding: 10px 12px;
	}
	/* Add button */
	 .add-customer-btn {
		 margin: 10px 12px;
		 padding: 11px;
	}
	/* Sidebar overlay */
	 .sidebar-overlay {
		 z-index: 190;
	}
}
/* ══════════════════════════════════════════════════════════════ SMALL MOBILE — up to 480px ══════════════════════════════════════════════════════════════ */
 @media (max-width: 480px) {
	 .stats-grid {
		 grid-template-columns: 1fr !important;
	}
	 .ov-stats {
		 grid-template-columns: 1fr !important;
	}
	 .ledger-tabs .ledger-tab {
		 font-size: 10.5px;
		 padding: 12px 8px;
	}
	 .detail-customer-name {
		 font-size: 14px;
	}
	 .detail-customer-avatar {
		 width: 40px;
		 height: 40px;
		 font-size: 14px;
	}
	 .txn-amount {
		 font-size: 13px;
	}
	 .txn-type {
		 font-size: 12.5px;
	}
	 .balance-summary .amount {
		 font-size: 18px;
	}
	/* Login card */
	 .login-card {
		 padding: 28px 16px;
		 border-radius: 20px;
	}
	 .login-title {
		 font-size: 22px;
	}
	 .otp-inputs input {
		 height: 48px;
		 font-size: 20px;
	}
	/* Amount input */
	 .amount-input-field {
		 font-size: 30px;
		 width: 130px;
	}
	 .amount-display .currency {
		 font-size: 22px;
	}
	 .help-hero h2 {
		 font-size: 18px;
	}
	 .help-hero {
		 padding: 20px 14px;
	}
	/* Bottom nav labels */
	 .mobile-nav-item {
		 font-size: 9px;
		 min-width: 46px;
	}
	 .modal {
		 width: 100vw;
		 max-width: 100%;
		 border-radius: 20px 20px 0 0;
	}
	 .overlay {
		 align-items: flex-end !important;
	}
	/* Customer-profile hero */
	 .customerprofile-avatar {
		 width: 60px;
		 height: 60px;
		 font-size: 22px;
	}
	 .customerprofile-name {
		 font-size: 16px;
	}
	/* Report table header */
	 .report-table-header {
		 flex-direction: column;
		 gap: 10px;
		 align-items: flex-start;
	}
	 .export-btn {
		 width: 100%;
		 justify-content: center;
	}
}
/* ══════════════════════════════════════════════════════════════ TABLET LANDSCAPE / iPad — 769px to 1024px ══════════════════════════════════════════════════════════════ */
 @media (min-width: 769px) and (max-width: 1024px) {
	 .sidebar {
		 width: 220px;
	}
	 .main-content {
		 margin-left: 220px;
	}
	 .app-header {
		 padding: 0 20px;
	}
	 .ledger-left {
		 width: 260px;
		 min-width: 220px;
	}
	 .help-cards {
		 grid-template-columns: 1fr 1fr;
		 gap: 12px;
	}
	 .stats-grid {
		 grid-template-columns: repeat(2, 1fr) !important;
		 gap: 12px;
	}
	 .pricing-grid {
		 grid-template-columns: 1fr 1fr;
	}
	 .form-row {
		 grid-template-columns: 1fr 1fr;
	}
	 .ov-stats {
		 grid-template-columns: repeat(3, 1fr);
	}
	 .settings-page, .profile-page, .help-page, .reports-page {
		 padding: 20px;
	}
	 .customer-container {
		 flex-direction: row;
	}
	 .portal-container {
		 flex-direction: row;
	}
	/* Mobile bottom nav hidden on tablet+ */
	 .mobile-bottom-nav {
		 display: none;
	}
	 body {
		 padding-bottom: 0;
	}
	 .toast {
		 bottom: 28px;
	}
}
/* ══════════════════════════════════════════════════════════════ LARGE DESKTOP — 1280px+ ══════════════════════════════════════════════════════════════ */
 @media (min-width: 1280px) {
	 .sidebar {
		 width: 248px;
	}
	 .main-content {
		 margin-left: 248px;
	}
	 .stats-grid {
		 grid-template-columns: repeat(3, 1fr);
	}
	 .ov-stats {
		 grid-template-columns: repeat(3, 1fr);
	}
	 .app-header {
		 padding: 0 40px;
	}
	 .settings-page, .profile-page, .help-page, .reports-page {
		 padding: 36px;
	}
}
/* ══════════════════════════════════════════════════════════════ SAFE AREA / NOTCH (iPhone X+) ══════════════════════════════════════════════════════════════ */
 @supports (padding-bottom: env(safe-area-inset-bottom)) {
	 .mobile-bottom-nav {
		 padding-bottom: max(8px, env(safe-area-inset-bottom));
	}
	 .sidebar {
		 padding-left: env(safe-area-inset-left);
	}
}
/* ══════════════════════════════════════════════════════════════ PRINT / HIGH-DPI TWEAKS ══════════════════════════════════════════════════════════════ */
 @media (hover: none) and (pointer: coarse) {
	/* Larger touch targets on touch devices */
	 .nav-item, a.nav-item {
		 padding: 11px 12px;
		 min-height: 44px;
	}
	 .action-btn {
		 min-height: 40px;
	}
	 .btn-credit, .btn-payment {
		 min-height: 44px;
	}
	 .customer-item {
		 min-height: 64px;
	}
	 .filter-option {
		 min-height: 44px;
	}
	 .settings-item {
		 min-height: 52px;
	}
	 .lang-btn {
		 min-height: 36px;
		 padding: 7px 16px;
	}
	 .otp-inputs input {
		 height: 56px;
	}
	 .mobile-nav-item {
		 min-height: 48px;
	}
}
/* ══════════════════════════════════════════════════════════════ ENHANCED ANIMATIONS (reduced-motion safe) ══════════════════════════════════════════════════════════════ */
 @media (prefers-reduced-motion: no-preference) {
	 .customer-item {
		 transition: background 0.15s, transform 0.15s;
	}
	 .txn-card:hover {
		 transform: translateY(-2px);
	}
	 .stat-card:hover {
		 transform: translateY(-3px);
	}
	 .help-card:hover {
		 transform: translateY(-3px);
	}
	 .plan-card:hover {
		 transform: translateY(-4px);
		 box-shadow: 0 12px 40px rgba(0,0,0,0.1);
	}
}
 @media (prefers-reduced-motion: reduce) {
	 *, *::before, *::after {
		 animation-duration: 0.01ms !important;
		 transition-duration: 0.01ms !important;
	}
}
/* ══════════════════════════════════════════════════════════════ ADDITIONAL VISUAL ENHANCEMENTS ══════════════════════════════════════════════════════════════ */
/* Better focus styles for accessibility */
 :focus-visible {
	 outline: 2px solid var(--green);
	 outline-offset: 2px;
	 border-radius: 4px;
}
/* Improved card hover effects */
 .stat-card {
	 transition: transform 0.2s ease, box-shadow 0.2s ease;
	 will-change: transform;
}
 .help-card {
	 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	 will-change: transform;
}
 .plan-card {
	 transition: transform 0.2s ease, box-shadow 0.2s ease;
	 will-change: transform;
}
/* Improved scrollbar on mobile */
 @media (max-width: 768px) {
	 ::-webkit-scrollbar {
		 width: 3px;
		 height: 3px;
	}
}
/* Make tables scroll smoothly on touch */
 .report-table-card {
	 overflow-x: auto;
	 -webkit-overflow-scrolling: touch;
}
/* Inline style override for portal balance amount on small screens */
 @media (max-width: 480px) {
	 .portal-balance-amount {
		 font-size: 34px;
	}
}
/* Fix sidebar-logo padding on small sidebar */
 @media (max-width: 1024px) {
	 .sidebar-logo {
		 padding: 20px 20px 14px;
	}
	 .sidebar-nav {
		 padding: 8px 16px;
	}
}
/* Better manage page on desktop */
 @media (min-width: 769px) {
	 .manage-page {
		 max-width: 760px;
	}
}
/* ══════════════════════════════════════════════════════════════ ENHANCED DESIGN: Cards, Colors, Micro-interactions ══════════════════════════════════════════════════════════════ */
/* Better login page on very small screens */
 @media (max-width: 360px) {
	 .login-card {
		 padding: 24px 14px;
		 border-radius: 18px;
	}
	 .otp-inputs {
		 gap: 7px;
	}
	 .otp-inputs input {
		 height: 44px;
		 font-size: 18px;
		 border-radius: 8px;
	}
	 .phone-input-group input {
		 font-size: 14px;
	}
}
/* Improved transaction card hover on desktop */
 @media (min-width: 769px) {
	 .txn-card {
		 transition: all 0.18s ease;
	}
	 .txn-card:hover {
		 box-shadow: 0 8px 24px rgba(15,23,42,0.1);
	}
	 .customer-item:hover {
		 padding-left: 19px;
	}
}
/* Sticky add button on mobile for ledger pages */
 @media (max-width: 768px) {
	 .ledger-left .add-customer-btn {
		 position: sticky;
		 bottom: 0;
		 border-radius: 0;
		 margin: 0;
		 border-top: 1px solid rgba(255,255,255,0.1);
		 z-index: 10;
	}
}
/* Subscription page enhancements */
 .pro-plan .plan-price {
	 color: #34d399;
}
/* Better help page search on mobile */
 @media (max-width: 768px) {
	 .help-search {
		 padding: 10px 14px;
	}
	 .help-search input {
		 font-size: 13px;
	}
}
/* Reports page stat cards on very small screens */
 @media (max-width: 360px) {
	 .stats-grid {
		 grid-template-columns: 1fr !important;
	}
	 .stat-value {
		 font-size: 20px;
	}
}
/* Portal balance card font */
 @media (max-width: 360px) {
	 .portal-balance-amount {
		 font-size: 28px !important;
	}
	 .portal-balance-card {
		 padding: 20px;
		 margin: 12px;
	}
}
/* Better customer list on tablet */
 @media (min-width: 769px) and (max-width: 1024px) {
	 .customer-item {
		 padding: 12px 14px;
	}
	 .customer-avatar {
		 width: 40px;
		 height: 40px;
	}
}
/* Fix ledger height on iPad landscape */
 @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
	 .ledger-layout {
		 height: calc(100vh - 56px);
	}
}
/* Improved mobile sidebar logo */
 @media (max-width: 768px) {
	 .sidebar-logo {
		 padding: 20px 24px 14px;
	}
	 .sidebar-logo-text {
		 font-size: 17px;
	}
	 .sidebar-nav {
		 padding: 8px 18px;
	}
	 .nav-item, a.nav-item {
		 font-size: 13.5px;
		 padding: 10px 14px;
	}
}
/* Dashboard overview panel on mobile */
 @media (max-width: 768px) {
	 .ov-card-head {
		 padding: 11px 14px;
	}
	 .ov-card-head h3 {
		 font-size: 13px;
	}
	 .ov-table th, .ov-table td {
		 padding: 8px 10px;
	}
	 .ov-table {
		 min-width: 420px;
	}
	 .ov-card {
		 overflow-x: auto;
	}
	 .txn-card {
		 overflow-x: auto;
	}
	 .txn-table {
		 min-width: 400px;
	}
}
/* Better profile page on mobile */
 @media (max-width: 768px) {
	 .profile-hero {
		 border-radius: 14px;
	}
	 .profile-form {
		 border-radius: 14px;
	}
	 .profile-business-name {
		 font-size: 17px;
	}
	 .profile-plan span {
		 font-size: 10px;
	}
}
/* Settings page mobile */
 @media (max-width: 768px) {
	 .settings-title {
		 font-size: 20px;
		 margin-bottom: 18px;
	}
	 .settings-section {
		 margin-bottom: 20px;
	}
	 .settings-card {
		 border-radius: 12px;
	}
	 .btn-signout {
		 font-size: 13.5px;
		 padding: 13px;
	}
}
/* Manage page mobile */
 @media (max-width: 768px) {
	 .manage-title {
		 font-size: 20px;
		 margin-bottom: 18px;
	}
	 .account-card {
		 border-radius: 14px !important;
	}
	 .create-business-btn {
		 border-radius: 14px;
		 font-size: 13.5px;
	}
}
/* Improved landing/login page responsive */
 @media (max-width: 480px) {
	 #screen-login {
		 padding: 20px;
	}
	 .login-card {
		 margin: 0;
	}
	 .lang-selector {
		 flex-wrap: wrap;
	}
	 .lang-btn {
		 font-size: 11px;
		 padding: 4px 10px;
	}
	 .promo-badge {
		 font-size: 12px;
		 padding: 9px 12px;
	}
	 .login-subtitle {
		 font-size: 13px;
	}
}
/* Subscription page */
 @media (max-width: 768px) {
	 .pricing-wrapper {
		 padding: 0;
	}
	 .pricing-container {
		 padding: 0;
	}
	 .pricing-header {
		 margin-bottom: 24px;
	}
	 .pricing-title {
		 font-size: 22px;
	}
	 .plan-card {
		 border-radius: 14px;
	}
	 .pricing-footer {
		 margin-top: 18px;
	}
}
 
/* ══════════════════════════════════════════════════════════════
   PORTAL PAGE — Full Mobile Responsiveness Fix
══════════════════════════════════════════════════════════════ */

/* Portal page layout */
.portal-wrapper {
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .portal-wrapper {
    padding: 12px;
    padding-bottom: 80px;
  }

  .portal-container {
    flex-direction: column !important;
    gap: 16px;
  }

  .portal-left, .portal-right {
    width: 100%;
  }

  .balance-card {
    padding: 18px;
    border-radius: 14px;
  }

  .balance-amount {
    font-size: 28px !important;
    margin: 8px 0;
  }

  .customer-info-card {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }

  .transaction-card {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .txn-amount {
    font-size: 14px;
  }

  .pay-btn {
    padding: 13px;
    font-size: 14px;
    border-radius: 10px;
  }

  .info-bar {
    padding: 12px;
    font-size: 13px;
    border-radius: 10px;
    margin-bottom: 14px;
  }

  .section-title {
    font-size: 13px;
    margin-bottom: 14px;
  }

  /* Customer info card on small screens */
  .customer-details {
    flex: 1;
    min-width: 0;
  }

  .customer-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .portal-wrapper {
    padding: 10px;
    padding-bottom: 80px;
  }

  .balance-card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .balance-amount {
    font-size: 24px !important;
  }

  .customer-info-card {
    padding: 12px;
  }

  .transaction-card {
    padding: 10px 12px;
  }

  .txn-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .txn-details {
    margin-left: 6px;
  }

  .txn-title {
    font-size: 13px;
  }

  .txn-sub {
    font-size: 11px;
  }

  .txn-amount {
    font-size: 13px;
  }

  .pay-btn {
    padding: 12px;
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER BUTTON — Ensure visible everywhere on mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hamburger-btn {
    display: flex !important;
    flex-shrink: 0;
  }

  /* Sidebar nav overlay z-index fix */
  .sidebar-overlay {
    z-index: 199 !important;
  }

  .sidebar {
    z-index: 200 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MANAGE PAGE — Full width account cards fix
══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .account-card {
    width: 100% !important;
    box-sizing: border-box;
    flex-wrap: wrap;
    gap: 14px;
  }

  .manage-page {
    max-width: 100% !important;
    padding: 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION PAGE — Grid fix for iPad/tablet
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════
   GENERAL — Main content push fix for all pages
══════════════════════════════════════════════════════════════ */
#screen-app {
  position: relative;
}

@media (max-width: 768px) {
  #screen-app {
    flex-direction: column;
  }

  .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 1;
    min-width: 0;
  }

  /* Fix any overflow issues */
  .portal-wrapper,
  .overview-panel,
  .ledger-detail,
  .settings-page,
  .profile-page,
  .manage-page,
  .help-page,
  .reports-page,
  .pricing-wrapper {
    overflow-x: hidden;
  }

  /* Ensure customer container doesn't overflow */
  .customer-container {
    width: 100% !important;
    flex-direction: column !important;
  }

  /* Fix form row on all pages */
  .form-row {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   EXTRA SMALL — 360px and below  
══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .header-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .hamburger-btn {
    width: 34px;
    height: 34px;
  }

  .portal-wrapper {
    padding: 8px;
  }

  .balance-card {
    padding: 14px;
  }

  .balance-amount {
    font-size: 22px !important;
  }

  .transaction-card {
    padding: 8px 10px;
  }

  .pay-btn {
    font-size: 12px;
    padding: 11px;
  }
}