/*
 * SmartMoney design system (front end)
 * ------------------------------------
 * Loaded last in front_layout <head>, after every legacy stylesheet.
 * Rules are deliberately low-specificity: page-specific CSS and colours
 * configured in the admin panel (inline styles) still win. !important is only
 * used where an inline style is the defect being fixed.
 *
 * Breakpoints (use these, not one-off values):
 *   sm 576px   md 768px   lg 992px   xl 1200px
 */

:root {
	/* Colour */
	--ds-brand: #03426b;
	--ds-brand-hover: #02324f;
	--ds-brand-soft: #e8f0f6;
	--ds-on-brand: #ffffff;
	--ds-accent: #f8aa1b;
	--ds-text: #1f2933;
	--ds-text-muted: #5b6670;
	--ds-border: #d5dbe1;
	--ds-border-soft: #e6eaee;
	--ds-surface: #ffffff;
	--ds-surface-alt: #f5f7f9;
	--ds-success: #1e7e34;
	--ds-success-soft: #e8f5ec;
	--ds-warning: #8a5300;
	--ds-warning-soft: #fff4e0;
	--ds-danger: #b42318;
	--ds-danger-soft: #fdecea;
	--ds-info: #0b5f8f;
	--ds-info-soft: #e7f2f9;
	--ds-disabled-bg: #e4e7eb;
	--ds-disabled-text: #5b6670;

	/* Type */
	--ds-font: "HelveticaNeueRoman", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ds-fs-xs: 12px;
	--ds-fs-sm: 14px;
	--ds-fs-base: 16px;
	--ds-fs-lg: 20px;
	--ds-fs-xl: 24px;
	--ds-fs-2xl: 32px;
	--ds-fs-3xl: 44px;
	--ds-lh-tight: 1.25;
	--ds-lh-base: 1.5;

	/* Spacing (4px grid) */
	--ds-space-1: 4px;
	--ds-space-2: 8px;
	--ds-space-3: 12px;
	--ds-space-4: 16px;
	--ds-space-5: 24px;
	--ds-space-6: 32px;
	--ds-space-7: 48px;
	--ds-space-8: 64px;

	/* Shape */
	--ds-radius-sm: 4px;
	--ds-radius: 6px;
	--ds-radius-lg: 10px;
	--ds-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--ds-shadow: 0 4px 12px rgba(16, 24, 40, .08);
	--ds-shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);
	--ds-focus-ring: 0 0 0 3px rgba(3, 66, 107, .28);
	--ds-control-h: 44px;
}

/* Per-portal brand. Green Light's #00CC00 gives 2:1 contrast with white text;
   #007a00 keeps the hue and passes WCAG AA (5.2:1). */
body[data-portal="46"] {
	--ds-brand: #007a00;
	--ds-brand-hover: #006400;
	--ds-brand-soft: #e7f4e7;
	--ds-focus-ring: 0 0 0 3px rgba(0, 122, 0, .28);
	--gl-color: #007a00;
}

/* ---------------------------------------------------------------- Base */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
input, select, textarea, button {
	font-family: inherit; /* selects were falling back to Times New Roman */
}
h1, h2, h3 {
	line-height: var(--ds-lh-tight);
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ds-brand);
	outline-offset: 2px;
}

/* Type scale utilities */
.ds-h1 { font-size: var(--ds-fs-3xl); line-height: var(--ds-lh-tight); font-weight: 700; }
.ds-h2 { font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-tight); font-weight: 700; }
.ds-h3 { font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); font-weight: 600; }
.ds-h4 { font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); font-weight: 600; }
.ds-body { font-size: var(--ds-fs-base); line-height: var(--ds-lh-base); }
.ds-small { font-size: var(--ds-fs-sm); line-height: var(--ds-lh-base); }
.ds-muted { color: var(--ds-text-muted); }

/* ---------------------------------------------------------------- Buttons */
.btn {
	border-radius: var(--ds-radius);
	font-weight: 600;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible {
	outline: none;
	box-shadow: var(--ds-focus-ring);
}
.btn-lg,
.btn-large {
	min-height: var(--ds-control-h);
}
.btn-primary {
	background-color: var(--ds-brand);
	border-color: var(--ds-brand);
	color: var(--ds-on-brand);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--ds-brand-hover);
	border-color: var(--ds-brand-hover);
	color: var(--ds-on-brand);
}
.btn-default {
	background-color: var(--ds-surface);
	border-color: var(--ds-border);
	color: var(--ds-text);
}
.btn-default:hover,
.btn-default:focus {
	background-color: var(--ds-surface-alt);
	border-color: #b9c2cb;
	color: var(--ds-text);
}
.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn {
	opacity: 1;
	background-color: var(--ds-disabled-bg);
	border-color: var(--ds-disabled-bg);
	color: var(--ds-disabled-text);
	cursor: not-allowed;
	box-shadow: none;
}
/* Invest / Test-the-Waters buttons get admin-configured inline colours; when the
   offering isn't open, show a neutral disabled state instead of a faded brand colour. */
.myinvestbtn[disabled],
.TestTheWaters[disabled] {
	background-color: var(--ds-disabled-bg) !important;
	border-color: var(--ds-border) !important;
	color: var(--ds-disabled-text) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}
/* Explain why the invest button is disabled (offering not open). The condition stays in
   property.blade.php; this only reacts to the disabled attribute it renders. */
.inv-last:has(> .myinvestbtn[disabled])::after {
	content: "This offering isn't accepting investments right now.";
	display: block;
	clear: both;
	margin-top: var(--ds-space-2);
	font-size: var(--ds-fs-sm);
	line-height: 1.4;
	font-weight: 400;
	color: var(--ds-text-muted);
	text-align: left;
}

/* ---------------------------------------------------------------- Forms */
.form-control {
	border-radius: var(--ds-radius);
	border-color: var(--ds-border);
	color: var(--ds-text);
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--ds-brand);
	box-shadow: var(--ds-focus-ring);
}
.form-control::placeholder {
	color: #6b7680; /* 4.6:1 on white */
}
.input-lg {
	min-height: var(--ds-control-h);
	font-size: var(--ds-fs-base); /* 16px also stops iOS zooming on focus */
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--ds-brand);
}
.has-error .form-control,
.form-control.invalid {
	border-color: var(--ds-danger);
}
.help-block,
.ds-field-error {
	font-size: var(--ds-fs-sm);
	color: var(--ds-danger);
}

/* ---------------------------------------------------------------- Cards / panels */
.panel {
	border-radius: var(--ds-radius-lg);
	border-color: var(--ds-border-soft);
	box-shadow: var(--ds-shadow-sm);
}
.panel > .panel-heading {
	border-top-left-radius: calc(var(--ds-radius-lg) - 1px);
	border-top-right-radius: calc(var(--ds-radius-lg) - 1px);
}
.ds-card {
	background: var(--ds-surface);
	border: 1px solid var(--ds-border-soft);
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-sm);
	padding: var(--ds-space-5);
}

/* ---------------------------------------------------------------- Tables */
.table > thead > tr > th {
	font-weight: 600;
	color: var(--ds-text);
	vertical-align: middle;
}
.table > tbody > tr > td {
	vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #f8fafb;
}

/* ---------------------------------------------------------------- Alerts & notifications */
.alert {
	border-radius: var(--ds-radius);
	border-left-width: 4px;
}
.alert-danger  { background-color: var(--ds-danger-soft);  border-color: #f2c4bf; border-left-color: var(--ds-danger);  color: #7a1810; }
.alert-success { background-color: var(--ds-success-soft); border-color: #bfe3c9; border-left-color: var(--ds-success); color: #14532d; }
.alert-warning { background-color: var(--ds-warning-soft); border-color: #f5d9a8; border-left-color: #d98a00;          color: #5c3800; }
.alert-info    { background-color: var(--ds-info-soft);    border-color: #bcdcef; border-left-color: var(--ds-info);    color: #0b3f5e; }
/* Sign-up inline error boxes render with no message until validation fills them in. */
.alert.error:has(span[id$="_error_register"]:empty) {
	display: none;
}
#toast-container > .toast {
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow-lg);
	font-size: var(--ds-fs-sm);
	line-height: 1.4;
}

/* ---------------------------------------------------------------- Modals */
.modal-content {
	border: 0;
	border-radius: var(--ds-radius-lg);
	box-shadow: var(--ds-shadow-lg);
}
.modal-header {
	border-bottom-color: var(--ds-border-soft);
}
.modal-footer {
	border-top-color: var(--ds-border-soft);
}
.modal-backdrop.in {
	opacity: .55;
}
.modal .btn + .btn {
	margin-left: var(--ds-space-2);
}

/* ---------------------------------------------------------------- Cookie consent bar */
.boPopover {
	right: 0;
	padding: var(--ds-space-3) var(--ds-space-4) !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
}
.boPopover > .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-3);
	margin: 0;
}
.boPopover > .row > [class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}
.boPopover > .row > .col-lg-10 {
	flex: 1 1 320px;
}
.boPopoverText {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1.45;
}
.boPopover .buttonRed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 28px;
	border-radius: var(--ds-radius);
	background-color: var(--ds-brand);
}
@media (max-width: 767px) {
	.boPopover > .row > .col-lg-2 { flex: 1 1 100%; }
	.boPopover .buttonRed { width: 100%; }
	.boPopoverText { font-size: 12px; }
}

/* ---------------------------------------------------------------- Header announcement banner */
.head_banner_close_btn {
	line-height: 1;
	z-index: 2; /* keep the close control above the banner text so taps reach it */
}
.head_banner_close_btn .ds-close-icon {
	display: inline-block;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}
@media (max-width: 600px) {
	/* The banner is 80px tall on phones but the header was only pushed down 40px,
	   so the logo and menu button sat underneath it. (body prefix: home_style_1.css
	   loads after this file with an equally specific 40px rule.) */
	body #header.bannerwithheader {
		top: 80px !important;
	}
	body #header.bannerwithheader.t-0 { /* banner closed */
		top: 0 !important;
	}
}

/* ---------------------------------------------------------------- Homepage */
/* Hide the "Featured Projects" band when the portal has no featured offerings. */
.cardsSection:has(> .inrCrd:not(:has(*))) {
	display: none;
}

/* ---------------------------------------------------------------- Responsive fixes */
/* Scroll-reveal (AOS) elements start translated 100px off-screen; clip them so phones
   don't get a horizontal scroll or zoom out. clip (not hidden) keeps position:sticky working. */
#outer_content {
	overflow-x: clip;
}
/* Issuer/CMS content can contain images with fixed inline widths. */
.editor_content img,
.step_content img,
.panel img {
	max-width: 100% !important;
	height: auto !important;
}
.editor_content iframe,
.step_content iframe {
	max-width: 100%;
}
@media (max-width: 767px) {
	#signupmaincontent {
		float: none;
		width: 100%;
		padding-left: var(--ds-space-4);
		padding-right: var(--ds-space-4);
	}
	/* Country calling-code select was truncated to "US" */
	#signupmaincontent .form_fields > .col-xs-4.frst_row { width: 40%; }
	#signupmaincontent .form_fields > .col-xs-8.frst_row { width: 60%; }
}

/* Confirmation dialogs (e.g. residency confirmation) */
.confirmPopup .btn {
	min-width: 120px;
}