/* ==========================================================================
   Accessibility remediation - WCAG 2.1 level AA
   --------------------------------------------------------------------------
   Loaded from frontend.layouts.default and frontend.layouts.default-v2 so the
   rules apply to every public form page (CIF, Existing Customer CIF and the
   Generate Short URL / Distributor form).

   Only presentational properties are declared here - no layout structure is
   changed, so existing behaviour and JS selectors are unaffected.
   ========================================================================== */

:root {
	/* SC 1.4.3 - #ED1C24 gave only 3.9:1 on the #F2F2F2 page background.
	   #B3121A gives 6.2:1 on #F2F2F2 and 7.0:1 on #FFFFFF. */
	--second-color: #b3121a;
	/* Deliberately NOT defining --brand-color here. style.css consumes it in
	   .btn-primary and .form-footer, but only layouts/default.blade.php declares
	   it. On the v2 layout it is undefined, so those declarations are invalid at
	   computed-value time and fall back - which is the appearance the v2 pages
	   have always had. Declaring it here would silently restyle them. */
	--a11y-error-color: #b3121a;
	--a11y-accent: #2e3192;
	--a11y-muted-color: #565e64;
	--a11y-focus-color: #0b5ed7;
	--a11y-border-color: #767676;
}

/* --------------------------------------------------------------------------
   Off-screen text (used for the page level <h1> required by SC 1.3.1)
   -------------------------------------------------------------------------- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SC 1.4.11 - Non-text contrast: focus indicator
   Bootstrap's default #86B7FE / #C2DBFE glow only reaches ~1.5:1 against the
   page. A solid 3px #0B5ED7 outline gives 5.2:1 on #F2F2F2, 5.1:1 on #EFEFEF
   and 5.8:1 on #FFFFFF.
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.swal-button:focus,
.ui-datepicker a:focus,
.ui-datepicker select:focus {
	outline: 3px solid var(--a11y-focus-color) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Keep the outline visible on controls that sit inside clipped containers. */
.holder-rows .content-wrap,
.section-wrap {
	outline-offset: 0;
}

/* --------------------------------------------------------------------------
   SC 1.4.11 - Non-text contrast: borders of form controls
   Bootstrap's #CED4DA border is only 1.33:1 against the #F2F2F2 page.
   #767676 gives 4.1:1. Only applied where a border is actually drawn, so the
   borderless rounded controls of the v2 form are left untouched.
   -------------------------------------------------------------------------- */
.site-wrapper:not(.user-holder-nominee-form) .form-control,
.site-wrapper:not(.user-holder-nominee-form) .form-select {
	border-color: var(--a11y-border-color);
}

/* --------------------------------------------------------------------------
   SC 1.4.3 - Contrast of standard text
   -------------------------------------------------------------------------- */
label.error,
span.error,
.mandatory,
.text-end.mandatory {
	color: var(--a11y-error-color) !important;
}

/* Helper / fee description text: #6C757D was 4.19:1 on #F2F2F2. */
.form-container small.text-muted,
.form-container .text-muted,
small#passwordHelpInline,
small#investmentTypeHelpInline {
	color: var(--a11y-muted-color) !important;
}

/* Placeholder text: #6C757D on the #EFEFEF field background was 4.08:1. */
.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
	color: #595959;
	opacity: 1;
}

.form-control::-moz-placeholder,
.form-select::-moz-placeholder {
	color: #595959;
	opacity: 1;
}

.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder {
	color: #595959;
	opacity: 1;
}

.form-control::placeholder,
.form-select::placeholder {
	color: #595959;
	opacity: 1;
}

/* SweetAlert confirm button: #FFFFFF on #7CD1F9 was only 1.7:1.
   The Marcellus navy gives 10.7:1 with white. */
.swal-button,
.swal-button--confirm {
	background-color: var(--a11y-accent) !important;
	color: #ffffff !important;
}

.swal-button:not([disabled]):hover,
.swal-button--confirm:not([disabled]):hover {
	background-color: #23256f !important;
}

.swal-button--cancel {
	background-color: #e0e0e0 !important;
	color: #232931 !important;
}

/* --------------------------------------------------------------------------
   SC 2.4.3 / 4.1.2 - the SweetAlert overlay stays in the DOM after it is
   dismissed. Without an explicit display:none its buttons keep receiving
   keyboard focus and are still announced by screen readers.

   SweetAlert injects its own stylesheet into <head> at runtime, i.e. after
   this file, so !important is required to win the cascade. "block" is the
   value SweetAlert itself uses for a visible overlay, so the existing
   centering is preserved.
   -------------------------------------------------------------------------- */
.swal-overlay:not(.swal-overlay--show-modal) {
	display: none !important;
}

/* --------------------------------------------------------------------------
   SC 2.1.1 / 4.1.2 - Accordion headers.
   The collapsible section headings now wrap their text in a real <button>.
   These rules make that button look exactly like the previous <p>/heading.
   -------------------------------------------------------------------------- */
.section-toggle {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	text-transform: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	height: auto;
	min-width: 0;
	cursor: pointer;
}

.section-toggle:hover {
	background: none;
	color: inherit;
}

/* --------------------------------------------------------------------------
   SC 1.3.1 - the section titles that used to be <p class="section-head"> are
   now real headings. Keep the previous typography so nothing moves visually.
   Pages that already size .section-head themselves (the v2 form sets 24px)
   have higher specificity and are unaffected by these rules.
   -------------------------------------------------------------------------- */
h1.section-head,
h2.section-head,
h3.section-head,
h4.section-head,
h2.section-title,
h3.section-title {
	font-size: inherit;
	line-height: inherit;
}

.form-container h2.section-head,
.form-container h3.section-head,
.form-container h4.section-head {
	margin-top: 5px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   SC 1.3.1 - visual field labels changed from <p> to <label for="...">.
   <label> is inline by default, so restore the block flow of the old <p>.
   -------------------------------------------------------------------------- */
label.field-label,
label.label-item {
	display: block;
	margin-top: 5px;
	margin-bottom: 0;
}

/* SC 1.4.3 - Bootstrap's #DC3545 outline button text is 3.9:1 on #F2F2F2. */
.btn-outline-danger {
	color: #a71d2a;
	border-color: #a71d2a;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
	color: #ffffff;
	background-color: #a71d2a;
	border-color: #a71d2a;
}

/* --------------------------------------------------------------------------
   SC 1.4.11 - jQuery UI date picker day cells.
   #EDEDED on #F6F6F6 was 1.08:1, so hovered / focused days were invisible.
   -------------------------------------------------------------------------- */
.ui-datepicker .ui-state-default {
	border: 1px solid #767676;
	background: #ffffff;
	color: #232931;
}

.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-state-focus,
.ui-datepicker .ui-datepicker-days-cell-over .ui-state-default {
	border: 1px solid #14213d;
	background: #d7e3f5;
	color: #14213d;
}

.ui-datepicker .ui-state-active {
	border: 1px solid var(--a11y-accent);
	background: var(--a11y-accent);
	color: #ffffff;
}

.ui-datepicker .ui-state-disabled,
.ui-datepicker a[aria-disabled="true"] {
	opacity: 1;
	color: #6a6a6a;
}

/* Day headers use <abbr> for SC 1.3.1 - keep the plain visual appearance. */
.ui-datepicker th abbr[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: default;
}

/* The prev / next month controls are links now - keep them looking the same. */
.ui-datepicker a.ui-datepicker-prev,
.ui-datepicker a.ui-datepicker-next {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   SC 3.3.2 - the asterisk that marks a mandatory field, and the instruction
   that explains it. style.css hides p.text-end.mandatory on the v2 form, so
   the legend line is re-shown with a more specific selector.
   -------------------------------------------------------------------------- */
.required-marker {
	color: var(--a11y-error-color);
	font-weight: 700;
	margin-left: 2px;
}

.user-nominee-wrapper .user-holder-nominee-form p.text-end.mandatory.form-mandatory-legend,
p.text-end.mandatory.form-mandatory-legend {
	display: block;
}