/* ==========================================================================
   MEMBERSHIP ADVANTAGE: DASHBOARD & AFFILIATE STYLES
   ========================================================================== */

/* --- 1. VARIABLES --- */
:root {
	/* General Theme */
	--ma-dark-blue: #073c5c;
	--ma-light-blue: #00baed;
	--ma-pale-blue: #f0f9fd; 
	--ma-grey-text: #666666;
	--ma-border-color: #e0e0e0;
	--ma-bg-light: #f8f9fa;
	--ma-green-live: #2e7d32;
	--ma-red-delete: #d32f2f;

	/* Sidebar Specific */
	--ma-sidebar-dark-blue: #073c5c;
	--ma-sidebar-light-blue: #00baed;
	--ma-sidebar-bg-active: #f0f9fd;
	--ma-sidebar-text-grey: #555555;
	--ma-sidebar-icon-grey: #666666;
	--ma-sidebar-light-grey: #aaaaaa;
	--ma-sidebar-red: #c9302c;
	--ma-sidebar-border: #e0e0e0;

	/* Wizard Specific */
	--wizard-border: #e0e0e0;
	--wizard-text-grey: #666666;
}


/* --- 2. GLOBAL LAYOUT OVERRIDES --- */
.grid-w-aside {
	display: grid !important;
	grid-template-columns: 220px 1fr !important;
	gap: 0 !important; 
}

.txt-content {
	padding: 0 !important; 
	max-width: 100% !important;
}

article {
	padding-bottom: 100px;
}

.ma-dash-container {
	font-family: Arial, sans-serif;
	color: #333;
	background-color: #ffffff;
	height: 100%;
	border-right: 1px solid var(--ma-border-color); 
}

.ma-dash-inner {
	padding: 0 32px 32px 32px; 
}


/* --- 3. SIDEBAR STYLES (Smart Logo Switching) --- */
.ma-sidebar-container {
	display: flex;
	flex-direction: column;
	width: 220px; 
	height: 100%; 
	background-color: #ffffff;
	border-right: 1px solid var(--ma-sidebar-border);
	border-left: 1px solid var(--ma-sidebar-border);
	font-family: Arial, sans-serif; 
}

/* Base Header */
.ma-sidebar-container .ma-sidebar-header {
	background-color: var(--ma-sidebar-bg-active);
	border-bottom: 1px solid var(--ma-sidebar-border);
	display: flex;
}

/* ---- SQUARE LAYOUT (The Original Circle) ---- */
.ma-sidebar-header.ma-layout-square {
	padding: 16px 20px;
	flex-direction: row;
	align-items: center;
}

.ma-layout-square .ma-business-logo {
	background-color: var(--ma-sidebar-dark-blue);
	width: 36px;
	height: 36px;
	border-radius: 50%; 
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 12px;
	overflow: hidden; 
	flex-shrink: 0; 
}

.ma-layout-square .ma-business-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover; 
}

.ma-layout-square .ma-business-name {
	font-size: 13px; 
	line-height: 1.2;
}

.ma-layout-square .ma-initials {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

/* ---- HORIZONTAL LAYOUT (Stacked) ---- */
.ma-sidebar-header.ma-layout-horizontal {
	padding: 24px 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.ma-layout-horizontal .ma-business-logo {
	width: 100%;
	max-width: 160px; 
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.ma-layout-horizontal .ma-business-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain; 
	object-position: left center;
}

.ma-layout-horizontal .ma-business-name {
	font-size: 15px; 
	line-height: 1.3;
}

.ma-layout-horizontal .ma-initials {
	width: 48px;
	height: 48px;
	font-size: 16px;
}

/* Shared Elements */
.ma-sidebar-container .ma-initials {
	background-color: var(--ma-sidebar-dark-blue);
	color: #ffffff;
	font-weight: bold;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ma-sidebar-container .ma-business-name {
	color: var(--ma-sidebar-dark-blue);
	font-weight: 700;
	word-wrap: break-word;
}

.ma-sidebar-container .ma-sidebar-category {
	color: var(--ma-sidebar-light-grey);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 24px 20px 8px 20px;
	text-transform: uppercase;
}

.ma-sidebar-container .ma-sidebar-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ma-sidebar-container .ma-sidebar-list li {
	margin: 0;
	padding: 0;
	border-left: 4px solid transparent; 
	border-bottom: none !important; 
	border-top: none !important;
}

.ma-sidebar-container .ma-sidebar-list li a {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: var(--ma-sidebar-text-grey);
	text-decoration: none;
	font-size: 14px; 
	transition: background-color 0.2s, color 0.2s;
}

.ma-sidebar-container .ma-sidebar-list li a i {
	width: 24px;
	font-size: 16px;
	color: var(--ma-sidebar-icon-grey);
	margin-right: 8px;
	text-align: center;
	display: inline-block;
}

.ma-sidebar-container .ma-sidebar-list li.ma-is-active {
	background-color: var(--ma-sidebar-bg-active);
	border-left: 4px solid var(--ma-sidebar-light-blue); 
}

.ma-sidebar-container .ma-sidebar-list li.ma-is-active a {
	color: var(--ma-sidebar-dark-blue);
	font-weight: 700;
}

.ma-sidebar-container .ma-sidebar-list li.ma-is-active a i {
	color: var(--ma-sidebar-light-blue);
}

.ma-sidebar-container .ma-sidebar-divider {
	border: 0;
	border-top: 1px solid var(--ma-sidebar-border);
	margin: 12px 0 0 0;
}

.ma-sidebar-container .ma-logout-section {
	margin-top: 12px; 
	padding-bottom: 24px;
}

.ma-sidebar-container .ma-logout-link,
.ma-sidebar-container .ma-logout-link i {
	color: var(--ma-sidebar-red) !important;
}


/* --- 4. TOP BANNER --- */
.ma-dash-banner {
	background: linear-gradient(90deg, #ffffff 0%, #e1f1f9 100%, #ffffff 100%);
	color: var(--ma-dark-blue);
	padding: 24px 40px; 
	margin: 0 0 32px 0; 
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--ma-border-color);
}

.ma-dash-banner-text,
.ma-dash-banner-text h1,
.ma-dash-banner-text p {
	text-align: left !important;
	padding: 0 !important;
}

.ma-dash-banner-text h1 {
	color: var(--ma-dark-blue);
	margin: 0 0 4px 0 !important;
	font-size: 24px;
	font-weight: 700;
}

.ma-dash-banner-text p {
	margin: 0 !important;
	color: var(--ma-grey-text);
	font-size: 14px;
}

.ma-btn-add {
	background-color: var(--ma-dark-blue);
	color: #ffffff;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ma-btn-add:hover {
	background-color: #052c43;
	color: #ffffff;
	text-decoration: none;
}


/* --- 5. SUMMARY CARDS --- */
.ma-summary-row {
	display: flex;
	gap: 24px;
	margin-bottom: 32px;
}

.ma-summary-card {
	background: #ffffff;
	border: 1px solid var(--ma-border-color);
	border-radius: 8px;
	padding: 12px 20px; 
	min-width: 200px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.ma-summary-card-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--ma-grey-text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.ma-summary-card-value {
	font-size: 28px; 
	font-weight: 700;
	color: var(--ma-dark-blue);
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.ma-summary-card-sub {
	font-size: 14px;
	color: var(--ma-grey-text);
	font-weight: 400;
}


/* --- 6. FILTERS & LIVE SEARCH --- */
.ma-filter-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ma-border-color);
	padding-bottom: 16px;
}

.ma-filter-pills {
	display: flex;
	gap: 8px;
}

.ma-filter-pill {
	background: #ffffff;
	border: 1px solid var(--ma-border-color);
	color: var(--ma-grey-text);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.ma-filter-pill.is-active {
	background: var(--ma-dark-blue);
	border-color: var(--ma-dark-blue);
	color: #ffffff;
}

.ma-total-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--ma-dark-blue);
	background-color: var(--ma-bg-light);
	border: 1px solid var(--ma-border-color);
	padding: 6px 16px;
	border-radius: 6px;
}

.ma-search-container {
	position: relative;
	margin-bottom: 24px;
	max-width: 400px; 
}

.ma-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ma-grey-text);
	font-size: 14px;
}

.ma-search-input {
	width: 100%;
	padding: 12px 16px 12px 38px;
	border: 1px solid var(--ma-border-color);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	background-color: #ffffff;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.ma-search-input:focus {
	outline: none;
	border-color: var(--ma-dark-blue);
	box-shadow: 0 0 0 3px rgba(7, 60, 92, 0.1);
}

.ma-search-input::placeholder {
	color: #aaaaaa;
}

#ma-filter-empty-state,
#ma-search-empty-state {
	display: none;
	text-align: center;
	padding: 60px 20px;
	background: #fff;
	border: 1px dashed var(--ma-border-color);
	border-radius: 8px;
	margin-top: 20px;
}


/* --- 7. DATA TABLES --- */
.ma-table-responsive {
	width: 100%;
}

.ma-table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
	table-layout: fixed; 
}

.ma-table thead, .ma-table th {
	background-color: var(--ma-dark-blue) !important;
}

.ma-table th {
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	padding: 12px 16px;
}

.ma-table th:first-child { border-radius: 6px 0 0 0; }
.ma-table th:last-child { border-radius: 0 6px 0 0; }

.ma-table tbody tr {
	border-bottom: 1px solid var(--ma-border-color);
	transition: background-color 0.1s;
}

.ma-table tbody tr:hover {
	background-color: var(--ma-bg-light);
}

.ma-table td {
	padding: 16px;
	vertical-align: top;
	font-size: 14px;
	color: #333;
	word-wrap: break-word;
}

/* Fixed Column Widths */
.ma-col-offer { width: 35%; }
.ma-col-category { width: 18%; } 
.ma-col-redemption { width: 12%; }
.ma-col-permember { width: 10%; }
.ma-col-status { width: 10%; }
.ma-col-actions { width: 15%; text-align: center !important; }
.ma-col-bizname { width: 40%; }
.ma-col-contact { width: 45%; } 

/* Table Inner Elements */
.ma-offer-title, .ma-biz-title {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px;
}

.ma-biz-title {
	font-size: 16px;
	color: var(--ma-dark-blue);
}

.ma-offer-desc {
	font-size: 13px;
	color: var(--ma-grey-text);
	line-height: 1.4;
}

.ma-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 13px;
	color: var(--ma-grey-text);
	line-height: 1.6;
}

.ma-contact-list li i {
	width: 16px;
	text-align: center;
	color: var(--ma-light-blue);
	margin-right: 6px;
}

.ma-category-pill {
	display: inline-block;
	background-color: #ffffff; 
	border: 1px solid var(--ma-border-color);
	padding: 4px 10px;
	border-radius: 20px; 
	font-size: 12px;
	font-weight: 600;
	color: var(--ma-dark-blue);
	margin: 0 4px 4px 0;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
}

.ma-admin-bubble {
	margin-top: 12px;
	background-color: #f0f4f8; 
	border: 1px dashed #b1d3e6;
	border-radius: 6px;
	padding: 8px 12px;
	display: inline-block;
}

.ma-admin-bubble-badge {
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ma-dark-blue);
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ma-admin-bubble-name {
	font-weight: 700;
	font-size: 13px;
	color: #333;
}

.ma-admin-bubble-email {
	font-size: 12px;
	color: var(--ma-grey-text);
}


/* --- 8. TOGGLES & ACTION BUTTONS --- */
.ma-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ma-btn-action {
	background: #ffffff;
	border: 1px solid var(--ma-border-color);
	color: #333;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	display: block;
	white-space: nowrap; 
	transition: all 0.2s;
}

.ma-btn-action:hover {
	border-color: #999;
	background: #f0f0f0;
	color: #000;
}

.ma-btn-delete {
	color: var(--ma-red-delete);
}

.ma-btn-delete:hover {
	border-color: var(--ma-red-delete);
	background: #ffebee;
	color: var(--ma-red-delete);
}

.ma-toggle-wrapper {
	display: flex;
	flex-direction: column; 
	align-items: flex-start;
	gap: 6px;
}

.ma-toggle-label-text {
	font-weight: 600;
	font-size: 13px;
}

.ma-toggle-label-text.live { color: var(--ma-green-live); }
.ma-toggle-label-text.paused { color: var(--ma-grey-text); }

.ma-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}

.ma-switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.ma-slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 24px;
}

.ma-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .ma-slider { background-color: var(--ma-green-live); }
input:checked + .ma-slider:before { transform: translateX(20px); }


/* --- 9. SETTINGS FORM & ALERTS --- */
.ma-settings-form {
	max-width: 800px; 
}

.ma-settings-form label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--ma-grey-text);
	margin-bottom: 8px;
	margin-top: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ma-settings-form input[type="text"],
.ma-settings-form input[type="email"],
.ma-settings-form input[type="tel"],
.ma-settings-form input[type="password"],
.ma-settings-form select,
.ma-settings-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--ma-border-color);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	color: #333;
	background-color: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ma-settings-form input:not(:last-child) {
	margin-bottom: 12px; 
}

.ma-settings-form input:focus,
.ma-settings-form select:focus,
.ma-settings-form textarea:focus {
	outline: none;
	border-color: var(--ma-dark-blue);
	box-shadow: 0 0 0 3px rgba(7, 60, 92, 0.1);
}

.ma-settings-form textarea {
	min-height: 120px;
	resize: vertical;
}

.ma-settings-form button[type="submit"] {
	background-color: var(--ma-dark-blue);
	color: #ffffff;
	border: none;
	padding: 14px 28px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ma-settings-form button[type="submit"]:hover {
	background-color: #052c43;
}

.form-errors { 
	background-color: #ffebee;
	border-left: 4px solid var(--ma-red-delete);
	color: var(--ma-red-delete); 
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 500;
}
.form-errors p { margin: 0; }

.success-message { 
	background-color: #e8f5e9;
	border-left: 4px solid var(--ma-green-live);
	color: #2e7d32; 
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 500;
}


/* --- 10. ADD OFFER WIZARD --- */

/* Progress Bar */
.wizard-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px; /* Highly Condensed */
	max-width: 800px;
}
.wizard-step-ind {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
	color: #aaa;
	transition: color 0.2s;
}
.wizard-step-ind.active { color: var(--ma-dark-blue); }

/* Make completed steps clickable */
.wizard-step-ind.completed { 
	color: var(--ma-dark-blue); 
	cursor: pointer; 
}
.wizard-step-ind.completed:hover { color: var(--ma-light-blue); }
.wizard-step-ind.completed:hover .wizard-circle { 
	background-color: var(--ma-light-blue); 
	border-color: var(--ma-light-blue);
}

.wizard-circle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid #aaa;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: #fff;
	transition: all 0.2s;
}
.wizard-step-ind.active .wizard-circle {
	border-color: var(--ma-dark-blue);
	color: var(--ma-dark-blue);
}
.wizard-step-ind.completed .wizard-circle {
	background: var(--ma-dark-blue);
	border-color: var(--ma-dark-blue);
	color: #fff;
}
.wizard-line {
	flex-grow: 1;
	height: 2px;
	background: #eee;
	margin: 0 16px;
}

/* Wizard Panels */
.wizard-panel {
	display: none;
	max-width: 800px;
}
.wizard-panel.active {
	display: block;
}

/* Main Cards / Containers - Condensed */
.wizard-card {
	background: #fff;
	border: 1px solid var(--wizard-border);
	border-radius: 12px;
	padding: 14px 18px; /* Extra Condensed padding */
	margin-bottom: 12px; /* Extra Condensed margin */
}
.wizard-card-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #333;
	margin-bottom: 8px; /* Extra Condensed */
	border-bottom: 1px solid var(--wizard-border);
	padding-bottom: 6px; /* Extra Condensed */
}

/* Step 1: Category Grid (Compact Horizontal) */
.category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
@media(max-width: 800px){ .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 480px){ .category-grid { grid-template-columns: 1fr; } }

.category-btn {
	background: #fff;
	border: 1px solid var(--wizard-border);
	border-radius: 6px;
	padding: 10px 14px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 13px;
	color: #333;
}
.category-btn:hover {
	border-color: #999;
	background: var(--ma-bg-light);
}
.category-btn.selected {
	border: 2px solid var(--ma-dark-blue);
	background-color: var(--ma-pale-blue);
}
.category-icon { 
	font-size: 18px; 
	width: 24px; 
	text-align: center; 
}

/* Step 1: Footer */
.step-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px; /* Condensed */
}
.btn-next {
	background: #cccccc; 
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	cursor: not-allowed;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.btn-next.enabled {
	background: var(--ma-dark-blue);
	cursor: pointer;
}
.btn-next.enabled:hover { background: #052c43; }

.footer-text {
	color: #888;
	font-size: 13px;
}

/* Step 2: Top Controls */
.selected-category-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ma-pale-blue);
	border: 1px solid #b1d3e6;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ma-dark-blue);
	margin-bottom: 12px; /* Condensed */
}
.badge-close { cursor: pointer; color: var(--ma-dark-blue); }

/* Fixed Hover States & Text Contrast */
.mode-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 12px; /* Condensed */
}
.mode-btn {
	flex: 1;
	padding: 10px;
	background-color: #ffffff;
	border: 1px solid var(--wizard-border);
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	color: var(--wizard-text-grey);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.mode-btn:hover {
	background-color: #f8f9fa;
	color: var(--ma-dark-blue);
	border-color: #bbb;
}
.mode-btn.active {
	border: 2px solid var(--ma-dark-blue);
	background: var(--ma-dark-blue);
	color: #ffffff;
}

/* Form Grids - Condensed */
.form-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px; /* 12px vertical row gap, 16px horizontal col gap */
	margin-bottom: 0; /* Let grid gap handle vertical spacing */
}
@media(max-width: 600px){ .form-grid-2 { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 12px; }
.form-grid-2 .form-group { margin-bottom: 0; } /* Removes double-spacing inside the grid */

.form-group label {
	display: block;
	font-size: 11px; 
	font-weight: 800;
	color: var(--wizard-text-grey);
	margin-bottom: 4px; /* Highly Condensed */
}

/* Inputs & Dropdowns - Exact same height & spacing */
.form-control {
	width: 100%;
	height: 34px; /* Shaved down from 38px to condense */
	padding: 6px 10px; /* Reduced padding */
	border: 1px solid var(--wizard-border);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	background-color: #fff;
}
.form-control:focus { outline: none; border-color: var(--ma-dark-blue); box-shadow: 0 0 0 3px rgba(7, 60, 92, 0.1); }

/* Force select menus to match textboxes and remove generic Mac styling */
select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	padding-right: 28px;
}

textarea.form-control { 
	height: auto; 
	min-height: 60px; /* Condensed textarea */
	resize: vertical; 
}

/* Active Range Slider styling */
.range-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 34px; /* Align vertically with shortened textboxes */
}
.range-slider {
	flex-grow: 1;
	-webkit-appearance: none;
	height: 8px;
	background: #cde7f5;
	border-radius: 4px;
	outline: none;
}
.range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ma-dark-blue);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.4);
	cursor: pointer;
	transition: transform 0.1s;
}
.range-slider::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}
.range-output { font-weight: 800; font-size: 16px; color: var(--ma-dark-blue); min-width: 40px;}

/* Location Selection Radio Cards */
.location-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 8px; /* Condensed */
}
@media(max-width: 600px){ .location-grid { grid-template-columns: 1fr; } }

.location-card {
	border: 1px solid var(--wizard-border);
	border-radius: 8px;
	padding: 10px 12px; /* Condensed */
	cursor: pointer;
	position: relative;
	transition: all 0.2s;
}
.location-card.selected {
	border: 2px solid var(--ma-dark-blue);
	background: var(--ma-pale-blue);
}

.loc-radio {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
}
.location-card.selected .loc-radio { border-color: var(--ma-dark-blue); }
.location-card.selected .loc-radio::after {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--ma-dark-blue);
	border-radius: 50%;
}

.loc-icon { font-size: 18px; margin-bottom: 4px; color: var(--ma-dark-blue); }
.loc-title { font-weight: 800; font-size: 13px; color: #333; margin-bottom: 2px; }
.loc-desc { font-size: 11px; color: var(--wizard-text-grey); margin-bottom: 6px; line-height: 1.3; }
.loc-badge {
	display: inline-block;
	border: 1px solid var(--ma-dark-blue);
	color: var(--ma-dark-blue);
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 12px;
	text-transform: uppercase;
}
.loc-badge-grey { border-color: #ccc; color: #777; background: #eee; }

.location-info-box {
	background: var(--ma-pale-blue);
	border: 1px solid #b1d3e6;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--ma-dark-blue);
}

/* Step 2 Actions */
.step-actions {
	display: flex;
	gap: 12px;
	margin-top: 12px; /* Condensed */
}
.btn-back {
	background: #fff;
	border: 1px solid var(--wizard-border);
	padding: 8px 18px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}

.btn-back:hover {
	background-color: var(--ma-bg-light);
	color: var(--ma-dark-blue);
	border-color: #bbb;
}
.btn-build {
	background: var(--ma-dark-blue);
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.btn-build:hover { background: #052c43; }
.helper-text { font-size: 10px; color: #999; margin-top: 4px; }


/* --- 11. MOBILE RESPONSIVENESS (All Components) --- */
@media (max-width: 800px) {
	
	/* Layout & Banner */
	.grid-w-aside { grid-template-columns: 70px 1fr !important; }
	.ma-dash-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 20px; margin: 0 0 16px 0; border-bottom: none; }
	.ma-dash-inner { padding: 0 20px 20px 20px; }
	
	/* Sidebar Collapse (Handles both square & horizontal logo types) */
	.ma-sidebar-container { width: 70px; }
	.ma-sidebar-container .ma-sidebar-header { padding: 16px 0; flex-direction: row; justify-content: center; align-items: center; }
	.ma-layout-square .ma-business-logo { margin-right: 0; }
	.ma-layout-horizontal .ma-business-logo { max-width: 36px; height: 36px; justify-content: center; }
	.ma-layout-horizontal .ma-business-logo img { object-position: center; }
	.ma-sidebar-container .ma-initials { width: 36px !important; height: 36px !important; font-size: 14px !important; }
	.ma-sidebar-container .ma-business-name,
	.ma-sidebar-container .ma-sidebar-category,
	.ma-sidebar-container .ma-nav-text { display: none !important; }
	.ma-sidebar-container .ma-sidebar-list li a { padding: 16px 0; justify-content: center; }
	.ma-sidebar-container .ma-sidebar-list li a i { margin-right: 0; font-size: 20px; }
	
	/* Utilities */
	.ma-summary-row, .ma-filter-row { flex-direction: column; gap: 12px; align-items: flex-start; }
	.ma-search-container { max-width: 100%; }
	
	/* Tables to Vertical Cards */
	.ma-table, .ma-table tbody, .ma-table tr, .ma-table td { display: block; width: 100%; }
	.ma-table thead { display: none; }
	.ma-table tr { margin-bottom: 24px; border: 1px solid var(--ma-border-color); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
	.ma-table td { padding: 16px 20px; border-bottom: 1px solid var(--ma-border-color); display: flex; flex-direction: column; text-align: left; }
	.ma-table td:last-child { border-bottom: none; }
	
	/* Solid Blue Mobile Labels for Cards */
	.ma-table td::before {
		content: attr(data-label);
		font-size: 12px; 
		text-transform: uppercase;
		color: var(--ma-dark-blue); 
		background-color: var(--ma-pale-blue); 
		font-weight: 800; 
		letter-spacing: 0.5px;
		margin: -16px -20px 12px -20px; 
		padding: 8px 20px; 
		border-bottom: 1px solid var(--ma-border-color); 
	}
	
	.ma-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.ma-btn-action { flex: 1; }
}