/* =====================================================
   CP-MOBILE.CSS — Comprehensive Mobile Optimisation
   Client Portal Theme v3.3.0+
   
   Strategy: additive-only. Never overrides design tokens,
   theme colours, or existing desktop styles. All rules are
   scoped to breakpoints so desktop is untouched.
   
   Breakpoints used (matching existing theme convention):
     768px  — tablet/mobile boundary (sidebar collapses here)
     640px  — small tablet / large phone
     480px  — standard phone (iPhone SE / Android mid)
     360px  — small phone (Samsung Galaxy S series)
   ===================================================== */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. VIEWPORT & BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Ensure viewport meta is honoured via CSS */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Smooth scroll on touch devices */
@media (max-width: 768px) {
	html {
		scroll-behavior: smooth;
	}

	/* Prevent horizontal overflow at all costs */
	body {
		overflow-x: hidden;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. LAYOUT — PORTAL WRAPPER & MAIN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Prevent content from being wider than the viewport */
	.cp-portal-wrapper {
		min-width: 0;
		overflow-x: hidden;
	}

	.cp-portal-main {
		min-width: 0;
		width: 100%;
	}

	/* Content area: tighter horizontal padding on small screens */
	.cp-portal-content {
		padding: 1rem 0.875rem;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.cp-portal-content {
		padding: 0.875rem 0.75rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. TOPBAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	.cp-portal-topbar {
		padding: 0 0.625rem 0 0.5rem;
		gap: 0.375rem;
	}

	/* Ensure hamburger is always a solid 44px touch target */
	.cp-topbar-hamburger {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	/* Breadcrumb: truncate gracefully */
	.cp-topbar-breadcrumb {
		min-width: 0;
		flex: 1;
		overflow: hidden;
	}

	.cp-topbar-breadcrumb span,
	.cp-topbar-breadcrumb a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 160px;
		display: inline-block;
	}

	/* Notification / user buttons — maintain touch targets */
	.cp-topbar-notif-btn,
	.cp-topbar-user-btn {
		min-width: 40px;
		min-height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Topbar actions group: no extra gap, keep tight */
	.cp-topbar-actions {
		gap: 0.125rem;
		flex-shrink: 0;
	}
}

@media (max-width: 360px) {
	.cp-portal-topbar {
		padding: 0 0.375rem 0 0.25rem;
	}

	.cp-topbar-breadcrumb span,
	.cp-topbar-breadcrumb a {
		max-width: 100px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. SIDEBAR — TOUCH UX POLISH
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Increase nav link tap targets */
	.cp-sidebar-nav-link {
		min-height: 44px;
		padding: 0.625rem 0.875rem;
	}

	/* Sidebar footer items */
	.cp-sidebar-footer-link {
		min-height: 44px;
	}

	/* Smooth slide-in animation */
	.cp-portal-sidebar {
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Prevent sidebar body scroll-through */
	body.cp-sidebar-open {
		overflow: hidden;
	}

	/* Overlay fade */
	.cp-sidebar-overlay {
		transition: opacity 0.25s ease;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. PAGE HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	.cp-page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		margin-bottom: 1rem;
	}

	.cp-page-title {
		font-size: 1.25rem;
	}

	.cp-page-actions {
		width: 100%;
		flex-wrap: wrap;
	}

	/* Make primary action buttons full-width on very small screens */
	.cp-page-actions > .cp-btn:only-child {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.cp-page-title {
		font-size: 1.125rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. GRID LAYOUTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* cp-grid-2 was never collapsing — fix it */
	.cp-grid-2 {
		grid-template-columns: 1fr;
	}

	/* Auto grid: allow narrower min on mobile */
	.cp-grid-auto {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

@media (max-width: 480px) {
	.cp-grid-auto {
		grid-template-columns: 1fr;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. FILTERS BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	.cp-filters-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}

	.cp-filters-bar .cp-search-wrap {
		max-width: 100%;
		min-width: 0;
	}

	/* Horizontally scroll filter pills instead of wrapping */
	.cp-filters-bar .cp-filter-pills,
	.cp-filters-bar .cp-tab-group {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-wrap: nowrap;
		padding-bottom: 2px;
	}

	.cp-filters-bar .cp-filter-pills::-webkit-scrollbar,
	.cp-filters-bar .cp-tab-group::-webkit-scrollbar {
		display: none;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. CARDS — general
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	/* Slightly reduce card padding on tiny screens */
	.cp-card {
		padding: 1rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. BUTTONS — TOUCH TARGETS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* All buttons: minimum 44px touch target per WCAG */
	.cp-btn {
		min-height: 40px;
	}

	.cp-btn-sm {
		min-height: 36px;
	}

	/* Icon-only buttons need equal width */
	.cp-btn-icon {
		min-width: 40px;
		min-height: 40px;
	}

	/* Ensure select / input controls are also large enough */
	.cp-select,
	.cp-input,
	select.cp-select,
	input.cp-input {
		min-height: 42px;
		font-size: 1rem; /* prevent iOS zoom on focus */
	}

	/* Prevent iOS from zooming into any text input */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	textarea,
	select {
		font-size: max(1rem, 16px);
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. DASHBOARD
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Recent projects section heading */
	.cp-section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/* Activity feed */
	.cp-activity-item {
		padding: 0.625rem 0.75rem;
	}
}

@media (max-width: 480px) {
	/* 4-stat card row: keep as 2×2 instead of trying to stay in one row */
	.cp-stat-cards.cp-grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Dashboard aside widgets stacked */
	.cp-dash-widget {
		padding: 1rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. PROJECTS LIST (table view)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Wrap table in horizontal scroll */
	.cp-proj-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cp-proj-table {
		min-width: 520px;
	}

	/* Hide less-critical columns */
	.cp-proj-th-manager,
	.cp-proj-td-manager,
	.cp-proj-th-deadline,
	.cp-proj-td-deadline {
		display: none;
	}
}

@media (max-width: 480px) {
	.cp-proj-table {
		min-width: 400px;
	}

	/* Only show name, status, actions on tiny screens */
	.cp-proj-th-budget,
	.cp-proj-td-budget {
		display: none;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. PROJECT CARDS (archive grid)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	.cp-project-card-body {
		padding: 1rem 1rem 0.75rem;
	}

	.cp-project-card-footer {
		padding: 0.625rem 1rem;
	}

	.cp-project-card-title {
		font-size: 0.9375rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. SINGLE PROJECT — HERO & TABS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Tab bar: horizontal scroll so tabs never wrap */
	.cp-tabs-bar,
	.cp-project-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-wrap: nowrap;
		padding-bottom: 0;
	}

	.cp-tabs-bar::-webkit-scrollbar,
	.cp-project-tabs::-webkit-scrollbar {
		display: none;
	}

	.cp-tab-btn {
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Overview grid: force single column */
	.cp-overview-grid {
		grid-template-columns: 1fr;
	}

	/* Hero stats: wrap to 2 columns */
	.cp-project-hero-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.cp-project-hero-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	.cp-project-hero-stat-value {
		font-size: 1.25rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. TASKS — KANBAN
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Kanban: horizontally scrollable on mobile */
	.cp-kanban,
	.cp-kanban-board,
	.cp-tasks-kanban {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.75rem;
	}

	.cp-task-column,
	.cp-kanban-col {
		min-width: 260px;
	}
}

@media (max-width: 480px) {
	/* At phone size, single column is better than horizontal scroll */
	.cp-kanban,
	.cp-kanban-board,
	.cp-tasks-kanban {
		overflow-x: unset;
		flex-direction: column;
	}

	.cp-task-column,
	.cp-kanban-col {
		min-width: 0;
		width: 100%;
	}

	/* Task card touch improvements */
	.cp-task-card {
		padding: 0.75rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. MESSAGES / CHAT LAYOUT
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Switch from 2-column to single-column with panel overlay pattern */
	.cp-messages-layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		height: auto;
		min-height: calc(100dvh - var(--cp-topbar-height) - 2rem);
		min-height: calc(100vh - var(--cp-topbar-height) - 2rem);
	}

	/* Thread list: compact height, scrollable */
	.cp-messages-threads {
		border-right: none;
		border-bottom: 1px solid var(--cp-border);
		max-height: 220px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* When a thread is open, hide the list to give full width to panel */
	.cp-messages-layout.cp-thread-open .cp-messages-threads {
		display: none;
	}

	/* Back button: show only when thread is open */
	.cp-messages-back-btn {
		display: flex;
	}

	/* Message panel fills remaining space */
	.cp-messages-panel {
		min-height: 400px;
	}

	/* Compose area */
	.cp-messages-compose {
		padding: 0.625rem;
	}

	/* Thread items: tighter */
	.cp-thread-item {
		padding: 0.625rem 0.75rem;
		min-height: 60px;
	}

	/* Input area: textarea bigger for touch */
	.cp-compose-input,
	.cp-messages-compose textarea {
		min-height: 44px;
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.cp-messages-layout {
		border-radius: 0;
		border-left: none;
		border-right: none;
		margin: 0 -0.75rem;
		width: calc(100% + 1.5rem);
	}

	.cp-messages-threads {
		max-height: 180px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. FILES PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Files layout: folder sidebar collapses above content */
	.cp-files-page-layout {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.cp-files-folders {
		position: static;
		max-height: 200px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* File grid: 2 columns on tablet */
	.cp-files-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}

@media (max-width: 480px) {
	/* Still 2 columns — file cards are small enough */
	.cp-files-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}

	/* File card touch improvements */
	.cp-file-card {
		border-radius: 10px;
	}

	.cp-file-caption {
		padding: 0.375rem 0.5rem 0.5rem;
	}

	.cp-file-name {
		font-size: 0.75rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. USERS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Users filter bar */
	.cp-users-filter-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	/* Users tabs: scroll horizontally */
	.cp-users-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		flex-wrap: nowrap;
	}

	.cp-users-tabs::-webkit-scrollbar {
		display: none;
	}

	/* Users grid: 1 column on mobile */
	.cp-users-grid {
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}

	/* User card: tighter padding */
	.cp-user-card {
		padding: 1rem;
	}

	.cp-user-card-actions {
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	/* Make action buttons stretch on small screens */
	.cp-user-card-actions .cp-btn {
		flex: 1;
		justify-content: center;
		min-width: 80px;
	}
}

@media (max-width: 480px) {
	.cp-users-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}

	.cp-users-toolbar .cp-search-wrap {
		max-width: 100%;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. SETTINGS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Settings nav: horizontal pill row at top */
	.cp-settings-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0.25rem;
		padding: 0 0 0.5rem;
		position: static;
		border-right: none;
		border-bottom: 1px solid var(--cp-border);
		margin-bottom: 1.25rem;
		max-height: none;
	}

	.cp-settings-nav::-webkit-scrollbar {
		display: none;
	}

	.cp-settings-nav-item {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.cp-settings-nav-link {
		white-space: nowrap;
		padding: 0.5rem 0.875rem;
		border-radius: var(--cp-radius-full);
	}

	/* Reduce section card padding */
	.cp-settings-section {
		padding: 1.125rem 1rem;
	}

	/* Inline table in settings: horizontal scroll */
	.cp-settings-section table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
}

@media (max-width: 480px) {
	/* Avatar row: stack on very small screens */
	.cp-settings-avatar-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Color grid: 2 per row */
	.cp-settings-color-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Background grid: single column */
	.cp-settings-bg-grid {
		grid-template-columns: 1fr !important;
	}

	/* Pages grid: single column */
	.cp-settings-pages-grid {
		grid-template-columns: 1fr !important;
	}

	/* Form save button: full width */
	.cp-settings-form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cp-settings-form-actions .cp-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. QUOTES PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Quotes table: horizontal scroll wrapper */
	.cp-quotes-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-overflow-scrolling: touch;
		margin: 0 -0.875rem;
		padding: 0 0.875rem;
	}

	.cp-quotes-table {
		min-width: 600px;
	}

	/* Hide less-essential columns */
	.cp-quotes-table th:nth-child(4),
	.cp-quotes-table td:nth-child(4) {
		display: none; /* Valid For */
	}

	/* Quote form: line items table scroll */
	.cp-qf-items-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.cp-qf-items-table {
		min-width: 480px;
	}

	/* Totals: right-align on mobile */
	.cp-qf-totals {
		margin-left: auto;
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	/* Quote header: stack */
	.cp-quotes-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}

	.cp-quotes-toolbar .cp-btn {
		width: 100%;
		justify-content: center;
	}

	/* Quote request items table */
	.cp-qr-items-table {
		min-width: 420px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. SHOP PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	/* Shop hero: compact */
	.cp-shop-hero {
		padding: 1.25rem 0.875rem 1rem;
		text-align: center;
	}

	/* Category pills: scroll, don't wrap */
	.cp-shop-toolbar .cp-shop-cats {
		padding-bottom: 2px;
	}

	/* Grid: 2 columns maintained from existing CSS — just tighten padding */
	.cp-sc-body {
		padding: 0.5rem 0.625rem 0.25rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. DOCUMENTS PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	.cp-docs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.cp-doc-card {
		padding: 0.875rem;
	}
}

@media (max-width: 480px) {
	.cp-docs-grid {
		grid-template-columns: 1fr;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. ACTIVITY PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	.cp-activity-feed {
		padding: 0.75rem;
	}

	.cp-activity-item {
		gap: 0.625rem;
		padding: 0.625rem 0;
	}

	.cp-activity-avatar {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. MODALS & DIALOGS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	/* Modals: full-width bottom sheet on mobile */
	.cp-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}

	.cp-modal {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0 !important;
		max-height: 90dvh;
		max-height: 90vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Modal header: compact */
	.cp-modal-header {
		padding: 1rem 1rem 0.75rem;
	}

	/* Modal body: compact */
	.cp-modal-body {
		padding: 0.875rem 1rem;
	}

	/* Modal footer: full-width stacked buttons */
	.cp-modal-footer {
		padding: 0.75rem 1rem 1rem;
		flex-direction: column-reverse;
		gap: 0.5rem;
	}

	.cp-modal-footer .cp-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. DROPDOWNS & POPOVERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	/* Ensure dropdowns don't overflow viewport edge */
	.cp-dropdown-menu,
	.cp-popover {
		max-width: calc(100vw - 1.5rem);
	}

	/* User menu dropdown: anchor to right on mobile */
	.cp-topbar-user-dropdown {
		right: 0;
		left: auto;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. TOASTS / NOTIFICATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	/* Toasts: full-width at bottom on mobile */
	.cp-toast-container,
	.cp-notices {
		bottom: 1rem;
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
	}

	.cp-toast,
	.cp-notice {
		width: 100%;
		max-width: 100%;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25. FLOATING CHAT WIDGET
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	/* Move float chat up when keyboard is open */
	.cp-float-chat {
		bottom: 0.875rem;
		right: 0.875rem;
	}

	/* Larger tap target for chat button */
	.cp-float-chat-btn {
		width: 52px;
		height: 52px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   26. PAGINATION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	.cp-pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem;
	}

	/* Hide ellipsis pages on tiny screens to keep pagination compact */
	.cp-page-ellipsis {
		display: none;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   27. EMPTY STATES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	.cp-empty-state {
		padding: 2rem 1rem;
	}

	.cp-empty-state-icon {
		width: 56px;
		height: 56px;
	}

	.cp-empty-state-title {
		font-size: 1rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   28. LOGIN PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	/* Login card fills most of the screen */
	.cp-login-card {
		padding: 1.75rem 1.25rem;
		border-radius: 16px;
	}

	.cp-login-logo {
		margin-bottom: 1rem;
	}

	/* Login button: full height, clear tap target */
	.cp-login-submit {
		width: 100%;
		min-height: 48px;
		font-size: 1rem;
	}
}

@media (max-width: 360px) {
	.cp-login-card {
		padding: 1.25rem 1rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   29. PENDING APPROVAL PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
	.cp-pending-card {
		padding: 2rem 1.25rem;
		text-align: center;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   30. WOOCOMMERCE CART (portal shop)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 640px) {
	/* Cart proceed button: full width on mobile */
	.wc-proceed-to-checkout .checkout-button,
	.cp-portal .wc-proceed-to-checkout a {
		width: 100%;
		text-align: center;
		padding: 0.875rem 1rem;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   31. SCROLLBAR POLISH (touch devices)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
	/* Thin scrollbars everywhere on mobile */
	* {
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
	}

	*::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}

	*::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.15);
		border-radius: 2px;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   32. UTILITY — MOBILE HELPERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Back button for message panel (hidden on desktop) */
.cp-messages-back-btn {
	display: none;
}

/* Swipeable horizontal containers: momentum scroll */
.cp-swipe-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cp-swipe-x::-webkit-scrollbar {
	display: none;
}

/* Hide on mobile */
@media (max-width: 768px) {
	.cp-hide-mobile {
		display: none !important;
	}
}

/* Show only on mobile */
.cp-show-mobile {
	display: none !important;
}

@media (max-width: 768px) {
	.cp-show-mobile {
		display: block !important;
	}

	.cp-show-mobile-flex {
		display: flex !important;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   33. SAFE AREA INSETS (iPhone notch / home bar)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
	@media (max-width: 768px) {
		/* Topbar: account for notch */
		.cp-portal-topbar {
			padding-left: max(0.5rem, env(safe-area-inset-left));
			padding-right: max(0.625rem, env(safe-area-inset-right));
		}

		/* Floating chat: above home bar */
		.cp-float-chat {
			bottom: max(0.875rem, calc(env(safe-area-inset-bottom) + 0.5rem));
			right: max(0.875rem, env(safe-area-inset-right));
		}

		/* Sidebar: respect safe areas */
		.cp-portal-sidebar {
			padding-left: env(safe-area-inset-left);
		}

		/* Modal bottom sheet: respect home bar */
		.cp-modal {
			padding-bottom: max(1rem, env(safe-area-inset-bottom));
		}

		/* Portal footer */
		.cp-portal-footer {
			padding-bottom: max(1rem, env(safe-area-inset-bottom));
		}
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   34. REDUCED MOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
	.cp-portal-sidebar,
	.cp-sidebar-overlay,
	.cp-portal-main,
	.cp-modal,
	.cp-toast,
	.cp-float-chat-btn,
	.cp-float-chat-panel {
		transition: none !important;
		animation: none !important;
	}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   35. SHOP HERO — animations handled in cp-shop.css
       via @media (min-width: 769px) — no overrides needed
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */