/*/
	@title: CABA Dawn UI Library
	@author: Stephen Ginn
	@date: 2026-06-10

	Reusable "Dawn" design-system styles for newer CABA pages (golf outing, join,
	membership). Every component rule is scoped: page components under .dawn, which
	each page's init script appends to main.content, and modal chrome under
	.modal-dawn, appended to the modal root element. Class names follow Bootstrap 5
	conventions layered over the site's Bootstrap 3 base; shared BS3 names (.badge,
	.form-group, .alert) are fully restyled inside the scope.
/*/

/*/ ========================================================================
	Design Tokens
======================================================================== /*/

.dawn, .modal-dawn {
	--blue-900: #032d4d;
	--blue-800: #064D81;
	--blue-700: #0b5c96;
	--blue-600: #1a70b0;
	--blue-100: #dbedf9;
	--blue-50:  #edf5fc;
	--accent:   #b88d59;
	--bg:       #fbf9f7;
	--gray-900: #0f172a;
	--gray-700: #334155;
	--gray-500: #64748b;
	--gray-300: #cbd5e1;
	--gray-200: #e2e8f0;
	--gray-100: #f1f5f9;
	--gray-50:  #f8fafc;
	--white:    #ffffff;
	--radius:   12px;
	--shadow:   0 1px 3px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
	--shadow-lg: 0 4px 6px rgb(0 0 0 / .07), 0 12px 28px rgb(0 0 0 / .09);
}

/*/ ========================================================================
	Bootstrap Overrides
======================================================================== /*/

/* Page-level layout fix; targets ancestors of .dawn, so it cannot be scoped */
.container > section.row, footer.bottom .row {
	margin-left: -15px;
	margin-right: -15px;
}

/*/ ========================================================================
	Font Awesome 5 Pro
======================================================================== /*/

/* Icons not available in the site's FA4 build */
@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-light-300.woff2') format('woff2'),
	     url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-light-300.woff') format('woff');
}

@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-regular-400.woff2') format('woff2'),
	     url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-regular-400.woff') format('woff');
}

@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-solid-900.woff2') format('woff2'),
	     url('https://cdn.cremadesignstudio.com/font-awesome/5.15.4/fa-solid-900.woff') format('woff');
}

.dawn .fas, .dawn .far, .dawn .fal {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-family: 'Font Awesome 5 Pro';
}

.dawn .fas { font-weight: 900; }
.dawn .far { font-weight: 400; }
.dawn .fal { font-weight: 300; }

.dawn .fa-golf-ball::before      { content: "\f450"; }
.dawn .fa-trophy::before         { content: "\f091"; }
.dawn .fa-pencil::before         { content: "\f040"; }
.dawn .fa-file-alt::before       { content: "\f15c"; }
.dawn .fa-user-tie::before       { content: "\f508"; }
.dawn .fa-graduation-cap::before { content: "\f19d"; }
.dawn .fa-user-plus::before      { content: "\f234"; }
.dawn .fa-gavel::before          { content: "\f0e3"; }
.dawn .fa-credit-card::before    { content: "\f09d"; }

/*/ ========================================================================
	Page Titles
======================================================================== /*/

/* px instead of rem: BS3 sets html {font-size: 10px} */
.dawn .display-4 { font-size: 55px; }

/*/ ========================================================================
	Event Info
======================================================================== /*/

.dawn .event-hero-date {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin: 0;
}

.dawn .event-description {
	font-size: 17px;
	line-height: 1.7;
	color: #444;
	margin: 2rem 0;
}

.dawn .event-details {
	display: flex;
	background: var(--bg);
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 20px;
}

.dawn .event-detail {
	flex: 1;
	padding: 22px 28px;
	border-right: 1px solid #ddd;
}

.dawn .event-detail:last-child { border-right: none; }

.dawn .event-detail-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--accent);
	margin-bottom: 8px;
}

.dawn .event-detail-value        { font-size: 15px; line-height: 1.6; color: #333; }
.dawn .event-detail-value strong { color: var(--blue-800); }

/*/ ========================================================================
	Nav Pills
======================================================================== /*/

/* BS5-style nav-pills/nav-link; neither name exists in the site's BS3 build */
.dawn .nav-pills {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 24px;
}

.dawn .nav-pills-cols-4 { grid-template-columns: repeat(4, 1fr); }

.dawn .nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 16px;
	border-radius: var(--radius);
	border: 2px solid var(--gray-200);
	background: var(--white);
	cursor: pointer;
	box-shadow: var(--shadow);
	text-decoration: none;
	color: var(--gray-700);
}

.dawn .nav-link:hover {
	border-color: var(--blue-600);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	text-decoration: none;
	color: var(--gray-700);
}

.dawn .nav-link.active {
	border-color: var(--blue-700);
	background: var(--blue-50);
	color: var(--blue-800);
}

.dawn .nav-link > i    { font-size: 44px; }
.dawn .nav-link strong { font-size: 16px; }
.dawn .nav-link small  { font-size: 13px; color: var(--gray-500); }

.dawn .nav-link-price {
	font-weight: 800;
	font-size: 18px;
	color: var(--blue-800);
	white-space: nowrap;
	margin-top: 2px;
}

/*/ ========================================================================
	Badges
======================================================================== /*/

/* Full restyle of BS3 .badge (gray bullet) into the Dawn accent pill */
.dawn .badge {
	display: inline-block;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	vertical-align: baseline;
	white-space: nowrap;
	color: var(--accent);
	background: #fdf5eb;
	border: 1px solid #e8c99a;
	padding: 5px 14px;
	letter-spacing: .02em;
}

.dawn .badge strong { color: var(--accent); }
.dawn .badge-sm     { font-size: 12px; padding: 3px 10px; }
.dawn .rounded-pill { border-radius: 999px; }

/*/ ========================================================================
	Tab Panes
======================================================================== /*/

.dawn .tab-pane        { display: none; }
.dawn .tab-pane.active { display: block; }

.dawn .section-title {
	font-size: 22px;
	margin-bottom: 20px;
	color: var(--blue-800);
}

/*/ ========================================================================
	Option Cards
======================================================================== /*/

.dawn .option-card {
	background: var(--white);
	border: 2px solid var(--gray-200);
	border-radius: var(--radius);
	padding: 20px;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
}

.dawn .option-card:hover    { border-color: var(--blue-600); box-shadow: var(--shadow); }
.dawn .option-card.selected { border-color: var(--blue-700); background: var(--blue-50); }

.dawn .option-card .radio {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--gray-300);
	flex-shrink: 0;
	margin-right: 16px;
	margin-top: 2px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dawn .option-card.selected .radio { border-color: var(--blue-700); background: var(--blue-700); }

.dawn .option-card.selected .radio::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--white);
}

.dawn .option-card-body   { flex: 1; }
.dawn .option-card strong { font-size: 17px; }
.dawn .option-card small  { display: block; font-size: 14px; color: var(--gray-500); margin-top: 2px; }

.dawn .option-card-price {
	font-weight: 800;
	font-size: 18px;
	color: var(--blue-800);
	white-space: nowrap;
	margin-left: 16px;
}

/* Inline variant: registration cards */
.dawn .option-card-inline                    { justify-content: space-between; align-items: center; }
.dawn .option-card-inline .option-card-price { font-size: 19px; }

/* 2-col grid */
.dawn .options-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

/*/ ========================================================================
	Option Groups
======================================================================== /*/

.dawn .option-group {
	margin-bottom: 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.dawn .option-group.option-group-cols-3 { grid-template-columns: repeat(3, 1fr); }

.dawn .option-group-header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gray-200);
}

.dawn .option-group-note {
	grid-column: 1 / -1;
	border-left: 3px solid var(--accent);
	padding: 6px 0 6px 16px;
	font-size: 14px;
	font-style: italic;
	color: var(--gray-500);
	margin-bottom: 4px;
}

.dawn .option-group-note em { color: var(--gray-700); }

.dawn .section-label {
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	margin-bottom: 8px;
}

.dawn .option-card-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.dawn .option-card ul {
	margin-top: 6px;
	font-size: 14px;
	color: var(--gray-500);
	list-style: none;
	padding-left: 0;
}

/*/ ========================================================================
	Forms
======================================================================== /*/

.dawn .form-section {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--gray-200);
}

.dawn .form-section-flush { margin-top: 0; padding-top: 0; border-top: none; }

.dawn .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.dawn .form-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Stacked grids inside one section keep the same rhythm as the grid gap */
.dawn .form-grid + .form-grid { margin-top: 16px; }

/* margin-bottom: 0 neutralizes BS3's .form-group spacing; the grid gap handles it */
.dawn .form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 0;
}

.dawn .form-group.col-full { grid-column: 1 / -1; }

.dawn .form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Scoped to .dawn so form inputs in the header/navbar SSI includes keep BS3 styling */
.dawn .form-control {
	padding: 12px 16px;
	border: 2px solid var(--gray-200);
	border-radius: 8px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--gray-900);
	background: var(--white);
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	height: auto;
}

.dawn .form-control:focus   { border-color: var(--blue-600); box-shadow: none; }
.dawn textarea.form-control { resize: vertical; min-height: 80px; }

/* Selects, per BS5 .form-select: appearance none, caret SVG at right
   [inline padding] center sized 16x12, right padding = left + 24px caret
   zone. The hover/focus selectors re-assert the caret over the legacy
   select.custom-control background that custom_controls() pulls in. */
.dawn select.form-control,
.dawn select.form-control:hover,
.dawn select.form-control:focus {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background: var(--white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 16px center / 16px 12px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.dawn select.form-control:disabled { background-color: var(--gray-100); }

/* BS5 Firefox focus guard: hide the inner dotted ring without losing text */
.dawn select.form-control:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 var(--gray-900);
}

.dawn .checkbox-columns { columns: 2; }

/*/ ========================================================================
	Entry Lists
======================================================================== /*/

.dawn .entry-list { margin-top: 32px; }

.dawn .entry-list > strong {
	display: block;
	font-size: 15px;
	color: var(--gray-700);
	margin-bottom: 12px;
}

.dawn .entry-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: center;
	margin-bottom: 8px;
}

.dawn .entry-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--blue-100);
	color: var(--blue-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

/*/ ========================================================================
	CTA Buttons
======================================================================== /*/

.dawn .form-actions { margin-top: 40px; text-align: center; }

.dawn .btn-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 40px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
	color: var(--white);
	font-size: 18px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(6 77 129 / .3);
	text-decoration: none;
}

.dawn .btn-cta:hover,
.dawn .btn-cta:focus {
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgb(6 77 129 / .35);
	text-decoration: none;
}

.dawn .btn-outline-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 8px;
	border: 2px solid var(--gray-200);
	background: var(--white);
	color: var(--gray-700);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
}

.dawn .btn-outline-cta:hover,
.dawn .btn-outline-cta:focus {
	border-color: var(--blue-600);
	color: var(--blue-800);
	box-shadow: var(--shadow);
	text-decoration: none;
}

.dawn .btn-group-links {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Accepted-card logos under the PayPal pay buttons (from the NCP embed) */
.dawn .pp-branding { margin-top: 16px; }

.dawn .pp-branding-cards { height: 24px; }

/*/ ========================================================================
	Mail-in Section
======================================================================== /*/

.dawn .mail-in {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--gray-200);
	text-align: center;
}

/* Flush variant: no divider, tucks into the flow (join page panes) */
.dawn .mail-in-plain {
	margin-top: 20px;
	padding-top: 0;
	border-top: none;
}

.dawn .mail-in > strong {
	display: block;
	font-size: 16px;
	color: var(--gray-700);
	margin-bottom: 6px;
}

.dawn .mail-in p       { font-size: 14px; color: var(--gray-500); margin-bottom: 16px; }
.dawn .mail-in address { font-style: normal; font-size: 14px; color: var(--gray-500); margin-bottom: 20px; }

/*/ ========================================================================
	Toggle Switch + Conditional Fields
======================================================================== /*/

.dawn .conditional-fields {
	display: none;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px dashed var(--gray-300);
}

.dawn .conditional-fields.active { display: block; }

.dawn .conditional-toggle { margin-top: 20px; }

.dawn .toggle-switch {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-family: inherit;
	user-select: none;
}

.dawn .toggle-switch input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.dawn .toggle-track {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--gray-300);
	border-radius: 999px;
	flex-shrink: 0;
	transition: background .2s ease;
}

.dawn .toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	transition: transform .2s ease;
}

.dawn .toggle-switch input:checked + .toggle-track               { background: var(--blue-700); }
.dawn .toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }

.dawn .toggle-label { font-size: 14px; font-weight: 600; color: var(--gray-700); }

/*/ ========================================================================
	Form Checks (unscoped)
======================================================================== /*/

/* Bootstrap 5 style checkboxes and radios for the custom_controls() markup.
   Intentionally NOT scoped under .dawn: it modernizes existing checks on any
   page that loads this stylesheet, overriding crema/custom-controls. */

.custom-control {
	cursor: pointer;
}

/* Box: white with subtle border (replaces the translucent gray fill) */
.custom-checkbox .custom-control-input ~ .custom-control-label::before,
.custom-radio .custom-control-input ~ .custom-control-label::before {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Checked: solid brand blue */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
	background: #2181d4;
	border: 1px solid #2181d4;
}

/* BS5 check glyph (rounded stroke instead of the old sharp pixel check) */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") no-repeat 50% / 100% 100%;
}

/* BS5 radio dot (replaces the old thick-border donut) */
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") no-repeat 50% / 100% 100%;
}

/* Focus ring */
.custom-control-input:focus ~ .custom-control-label::before {
	border-color: #91c4ed;
	box-shadow: 0 0 0 0.25em rgba(33, 129, 212, 0.25);
}

/*/ ========================================================================
	Selection Card
======================================================================== /*/

/* Read-only display of a previously chosen option, echoing the selected
   nav-link/option-card look */
.dawn .selection-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 24px;
	margin-bottom: 28px;
	border: 2px solid var(--blue-700);
	border-radius: var(--radius);
	background: var(--blue-50);
	box-shadow: var(--shadow);
}

.dawn .selection-card > i { font-size: 44px; color: var(--blue-800); }

.dawn .selection-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dawn .selection-card-body small {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
}

.dawn .selection-card-body strong { font-size: 20px; color: var(--blue-800); }

.dawn .selection-card-price {
	font-weight: 800;
	font-size: 20px;
	color: var(--blue-800);
	white-space: nowrap;
}

/*/ ========================================================================
	Alerts
======================================================================== /*/

/* Full restyle of BS3 .alert/.alert-info into the Dawn info banner */
/* display: flex would defeat the hidden attribute without this guard */
.dawn .alert[hidden] { display: none; }

.dawn .alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	margin-bottom: 24px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	background: var(--gray-50);
	color: var(--gray-700);
	font-size: 15px;
}

.dawn .alert-info {
	background: var(--blue-50);
	border-color: var(--blue-100);
	color: var(--gray-700);
}

.dawn .alert strong { color: var(--blue-800); font-size: 16px; }

/* In-form alerts (paid-tier panes) need separation from the fields above */
.dawn form .alert { margin-top: 24px; }

/*/ ========================================================================
	Utilities
======================================================================== /*/

.dawn .form-group-label-note { font-weight: normal; text-transform: none; letter-spacing: 0; }

.dawn .required-field::after {
	content: "\f069";
	font-family: "Font Awesome 5 Pro";
	font-weight: 300;
	font-style: normal;
	font-size: .65em;
	vertical-align: middle;
	margin-left: 3px;
	color: inherit;
}

/* Floating debug-mode indicator, appended to main.content by page scripts */
.dawn .debug-label {
	position: fixed;
	bottom: 16px;
	right: 16px;
	z-index: 9999;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #842029;
	background: #f8d7da;
	border: 1px solid #f5c2c7;
	border-radius: 4px;
}

.dawn .benefits-info-btn {
	background: none;
	border: none;
	padding: 0;
	margin-left: auto;
	color: var(--gray-300);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.dawn .benefits-info-btn:hover { color: var(--blue-600); }

/*/ ========================================================================
	Modals
======================================================================== /*/

/* BS5's .modal-dialog-centered, ported: absolute centering on the dialog.
   The extra .fade/.modal-dialog classes lift specificity above BS3's
   .modal.in .modal-dialog transform, which would otherwise cancel ours. */
.modal-dawn.fade .modal-dialog.modal-dialog-centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.modal-dawn .modal-content {
	border: none;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,.15);
	overflow: hidden;
}

.modal-dawn .modal-narrow { width: 520px; }

/* Success variant */
.modal-dawn.modal-success .modal-body { padding: 30px 24px; }

.modal-dawn .modal-success-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--accent);
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-dawn .modal-success-icon i { color: #fff; font-size: 22px; }
.modal-dawn .modal-success-title  { margin: 0 0 8px; font-weight: 700; }
.modal-dawn .modal-success-body   { font-size: 15px; color: #555; margin: 0 0 20px; }
.modal-dawn .modal-success-close  { border-radius: 6px; padding: 8px 28px; }

/* Canceled variant: neutral gray icon, benign tone (no charge made) */
.modal-dawn.modal-canceled .modal-body { padding: 30px 24px; }
.modal-dawn.modal-canceled .modal-success-icon { background: var(--gray-500); }

/* Info variant */
.modal-dawn.modal-info .modal-header { border-bottom: none; padding: 20px 24px 0; }
.modal-dawn.modal-info .modal-title  { font-size: 17px; font-weight: 700; color: var(--blue-800); }
.modal-dawn.modal-info .modal-body   { padding: 16px 24px 24px; }

.modal-dawn .benefits-level {
	background: var(--gray-50);
	border-radius: 8px;
	padding: 14px 16px;
}

.modal-dawn .benefits-level + .benefits-level { margin-top: 10px; }

.modal-dawn .benefits-level-name {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}

.modal-dawn .benefits-level-name strong { font-size: 14px; color: var(--gray-900); }
.modal-dawn .benefits-level-price       { font-size: 14px; font-weight: 700; color: var(--blue-800); }

.modal-dawn .benefits-perks {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: 13px;
	color: var(--gray-500);
	line-height: 1.5;
}

.modal-dawn .benefits-perks li::before { content: '\2022'; color: var(--accent); margin-right: 8px; }

/*/ ========================================================================
	Responsive
======================================================================== /*/

@media (max-width: 992px) {
	.dawn .nav-pills-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.dawn .event-details { flex-direction: column; }
	.dawn .event-detail {
		border-right: none;
		border-bottom: 1px solid #ddd;
		padding: 18px 24px;
	}
	.dawn .event-detail:last-child { border-bottom: none; }
	.dawn .nav-pills,
	.dawn .nav-pills-cols-4                      { grid-template-columns: 1fr; }
	.dawn .nav-link small                        { display: none; }
	.dawn .options-grid                          { grid-template-columns: 1fr; }
	.dawn .option-card-inline                    { flex-wrap: wrap; gap: 8px; }
	.dawn .option-card-inline .option-card-price { margin-left: 0; }
	.dawn .option-card-header                    { flex-direction: column; gap: 2px; }
	.dawn .option-group,
	.dawn .option-group.option-group-cols-3      { grid-template-columns: 1fr; }
	.dawn .form-grid                             { grid-template-columns: 1fr; }
	.dawn .checkbox-columns                      { columns: 1; }
	.dawn .alert                                 { flex-direction: column; align-items: flex-start; gap: 4px; }
}