/* Request-access modal — loaded site-wide so the modal can open over any page. Hidden by
   default so it never affects the base page. Self-contained: colors use brand-token vars
   with hard-coded fallbacks, so it needs no other stylesheet. */

.tc-modal[hidden] { display: none; }
.tc-modal {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 6vh 16px; overflow-y: auto;
}
.tc-modal__backdrop {
	position: fixed; inset: 0; background: rgba(27, 45, 91, 0.55);
	backdrop-filter: blur(3px);
}
.tc-modal__dialog {
	position: relative; z-index: 1; width: 100%; max-width: 640px;
	background: var(--offwhite, #F7F6F2); color: var(--slate, #2C3A4A);
	border-radius: 18px; padding: 40px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
	font-family: 'Ubuntu', system-ui, sans-serif;
}
.tc-modal__title { margin: 0 0 6px; color: var(--navy, #1B2D5B); font-weight: 700; }
.tc-modal__intro { margin: 0 0 18px; }
.tc-modal__close {
	position: absolute; top: 14px; right: 16px; border: 0; background: transparent;
	font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--navy, #1B2D5B);
}
.tc-modal__login { margin-top: 14px; font-size: .95rem; }

/* Request-access form (also used by the [tc_request_access] shortcode). */
.tc-request__form .tc-form__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.tc-request__form .tc-form__row { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tc-request__form .tc-form__row--wide { grid-column: 1 / -1; }
.tc-request__form label { font-weight: 500; color: var(--navy, #1B2D5B); font-size: .9rem; display: flex; flex-direction: column; gap: 4px; }
/* Scoped under .tc-request (the form's wrapper) so these win over the member base
   stylesheet's `.tc-form input[type="text"]` rule (same specificity, loaded earlier) on
   marketing pages — otherwise the text inputs pick up its grey `--offwhite` background. */
.tc-request .tc-request__form input,
.tc-request .tc-request__form textarea,
.tc-request .tc-request__form select {
	padding: 10px 12px; border: 1px solid var(--sand, #E8E6DF); border-radius: 10px;
	background: #fff; font: inherit; color: var(--navy, #1B2D5B);
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Region country picker: strip the native OS chrome and draw our own navy caret
   so it matches the rounded white inputs instead of a square system dropdown. */
/* .tc-request prefix matches the specificity of the shared `font: inherit` rule above so the
   font-size below actually wins (that rule resets font-size via the `font` shorthand). Native
   dropdown list options inherit the control's font-size on mobile, so pin it to 16px — readable
   in the country picker, and it also stops iOS zooming in on focus. */
.tc-request .tc-request__form select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	width: 100%; box-sizing: border-box; cursor: pointer;
	font-size: 16px;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2D5B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.tc-request__form input:focus, .tc-request__form textarea:focus, .tc-request__form select:focus {
	outline: none; border-color: var(--cerulean, #33C6F5);
	box-shadow: 0 0 0 3px rgba(51, 198, 245, 0.25);
}
.tc-request__form .tc-btn--primary {
	margin-top: 16px; background: var(--pumpkin, #F28030); color: #fff; border: 0;
	padding: 12px 26px; border-radius: 999px; font-weight: 500; cursor: pointer;
}
.tc-request__form .tc-btn--primary:hover { background: var(--navy, #1B2D5B); }

.tc-notice { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: .95rem; }
.tc-notice--success { background: #e6f6ec; color: #1c6b3a; }
.tc-notice--error { background: #fcecec; color: #9b2222; }

@media (max-width: 600px) {
	.tc-request__form .tc-form__grid { grid-template-columns: 1fr; }
	.tc-modal__dialog { padding: 28px 22px; }
}