/* =====================================================
   Secure Referral Form — srf-style.css v1.3
   All critical rules scoped under .srf-wrapper to
   beat theme CSS conflicts on any WordPress install.
   FOUC prevented via visibility:hidden + JS ready class.
   ===================================================== */

:root {
	--srf-red:        #e53935;
	--srf-red-light:  #ffeaea;
	--srf-text:       #1a1a1a;
	--srf-muted:      #555;
	--srf-border:     #d9d9d9;
	--srf-white:      #ffffff;
	--srf-radius:     8px;
	--srf-pill:       50px;
	--srf-font: 'Geist', sans-serif;
}

/* ── FOUC fix: hide until all resources loaded (set inline on element) ── */
#srf-wrapper.srf-ready {
	visibility: visible !important;
	opacity: 1 !important;
	transition: opacity 0.25s ease !important;
}

/* ════════════════════════════════════
   WRAPPER
════════════════════════════════════ */
#srf-wrapper.srf-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 32px !important;
	align-items: flex-start !important;
	font-family: var(--srf-font) !important;
	color: var(--srf-text) !important;
	padding: 32px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* Header row: text left, search right */
#srf-wrapper .srf-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

#srf-wrapper .srf-header-text {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Remove bottom margin from desc since header-row handles spacing */
#srf-wrapper .srf-main-desc {
    margin-bottom: 0 !important;
}

/* Remove bottom margin from search-row since header-row handles it */
#srf-wrapper .srf-search-row {
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

/* Mobile: stack vertically, search centered */
@media (max-width: 600px) {
    #srf-wrapper .srf-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #srf-wrapper .srf-search-row {
        justify-content: start !important;
    }
    #srf-wrapper .srf-main-desc {
        margin-bottom: 12px !important;
    }
}
/* ════════════════════════════════════
   LEFT PANEL
════════════════════════════════════ */
#srf-wrapper .srf-left {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: block !important;
	float: none !important;
}

#srf-wrapper .srf-main-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	line-height: 1.2 !important;
}

#srf-wrapper .srf-main-desc {
	font-size: 13.5px !important;
	color: var(--srf-muted) !important;
	line-height: 1.6 !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	max-width: 520px !important;
}

/* ── Search ── */
#srf-wrapper .srf-search-row {
	display: flex !important;
	margin-bottom: 14px !important;
}

#srf-wrapper .srf-search-wrap {
	position: relative !important;
	width: 200px !important;
}

#srf-wrapper .srf-search-input {
	display: block !important;
	width: 100% !important;
	padding: 8px 34px 8px 16px !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: var(--srf-pill) !important;
	font-size: 13px !important;
	font-family: var(--srf-font) !important;
	background: var(--srf-white) !important;
	box-sizing: border-box !important;
	outline: none !important;
	color: var(--srf-text) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

#srf-wrapper .srf-search-input:focus {
	border-color: var(--srf-red) !important;
	box-shadow: 0 0 0 2px rgba(229,57,53,.12) !important;
}

#srf-wrapper .srf-search-icon {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #999 !important;
	pointer-events: none !important;
	display: flex !important;
	align-items: center !important;
}

/* ── Select label ── */
#srf-wrapper .srf-select-label {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--srf-text) !important;
	margin-bottom: 12px !important;
}

/* ════════════════════════════════════
   GRID — most commonly broken by themes
════════════════════════════════════ */
#srf-wrapper .srf-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

/* ── Card ── */
#srf-wrapper .srf-card {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 18px 10px 14px !important;
	background: var(--srf-white) !important;
	border: 1.5px solid var(--srf-border) !important;
	border-radius: var(--srf-radius) !important;
	cursor: pointer !important;
	transition: border-color .15s, background .15s !important;
	text-align: center !important;
	min-height: 100px !important;
	user-select: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

#srf-wrapper .srf-card:hover {
	border-color: var(--srf-red) !important;
}

#srf-wrapper .srf-card--selected {
	border: 2px solid var(--srf-red) !important;
	background: #fff5f5 !important;
}

#srf-wrapper .srf-card--hidden {
	display: none !important;
}

/* Hidden radio */
#srf-wrapper .srf-radio {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

/* Circle indicator top-left */
#srf-wrapper .srf-card::before {
	content: '' !important;
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	width: 16px !important;
	height: 16px !important;
	border: 1.5px solid var(--srf-border) !important;
	border-radius: 50% !important;
	background: var(--srf-white) !important;
	transition: opacity .15s !important;
	display: block !important;
}

#srf-wrapper .srf-card--selected::before {
	opacity: 0 !important;
}

/* Check icon */
#srf-wrapper .srf-check-icon {
	position: absolute !important;
	top: 6px !important;
	left: 6px !important;
	width: 20px !important;
	height: 20px !important;
	color: var(--srf-red) !important;
	display: none !important;
	pointer-events: none !important;
}

#srf-wrapper .srf-check-icon svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

#srf-wrapper .srf-card--selected .srf-check-icon {
	display: block !important;
}

/* Card SVG icon */
#srf-wrapper .srf-card-icon {
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

#srf-wrapper .srf-card-icon img {
	width: 36px !important;
	height: 36px !important;
	display: block !important;
	/* tint dark PNG icons to red #e53935 */
	filter: invert(26%) sepia(96%) saturate(800%) hue-rotate(335deg) brightness(90%) contrast(100%) !important;
	transition: filter .15s !important;
}

#srf-wrapper .srf-card--selected .srf-card-icon img {
	filter: invert(26%) sepia(96%) saturate(1200%) hue-rotate(335deg) brightness(85%) contrast(110%) !important;
}

/* Card label */
#srf-wrapper .srf-card-label {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 1px !important;
	line-height: 1.3 !important;
}

#srf-wrapper .srf-label-line1,
#srf-wrapper .srf-label-line2 {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--srf-text) !important;
	transition: color .15s !important;
}

#srf-wrapper .srf-card--selected .srf-label-line1,
#srf-wrapper .srf-card--selected .srf-label-line2 {
	color: var(--srf-red) !important;
}

/* View Info link */
#srf-wrapper .srf-view-info {
	display: inline-flex !important;
	align-items: center !important;
	gap: 2px !important;
	font-size: 11.5px !important;
	color: var(--srf-red) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	pointer-events: auto !important;
	position: relative !important;
	z-index: 2 !important;
}

#srf-wrapper .srf-view-info:hover {
	text-decoration: underline !important;
}

#srf-wrapper .srf-arrow {
	font-size: 14px !important;
	line-height: 1 !important;
}

/* ── Other info ── */
#srf-wrapper .srf-other-info {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin-top: 20px !important;
	padding: 14px 16px !important;
	background: var(--srf-white) !important;
	border: 1.5px solid var(--srf-border) !important;
	border-radius: var(--srf-radius) !important;
}

#srf-wrapper .srf-other-icon {
	color: #888 !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
	display: flex !important;
}

#srf-wrapper .srf-other-icon img {
	width: 32px !important;
	height: 32px !important;
	display: block !important;
	filter: invert(27%) sepia(89%) saturate(1200%) hue-rotate(340deg) brightness(95%) contrast(95%) !important;
}

#srf-wrapper .srf-section-title img {
	width: 18px !important;
	height: 18px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right: 4px !important;
	filter: invert(27%) sepia(89%) saturate(1200%) hue-rotate(340deg) brightness(95%) contrast(95%) !important;
}

#srf-wrapper .srf-other-info strong {
	display: block !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	margin-bottom: 4px !important;
}

#srf-wrapper .srf-other-info p {
	font-size: 12.5px !important;
	color: var(--srf-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

/* ════════════════════════════════════
   RIGHT PANEL
════════════════════════════════════ */
#srf-wrapper .srf-right {
	width: 340px !important;
	flex-shrink: 0 !important;
	position: sticky !important;
	top: 80px !important;
	display: block !important;
	float: none !important;
}

#srf-wrapper .srf-form-card {
	background: #FAFAFA !important;
	border-radius: 10px !important;
	border: 1px solid #EDEDED !important;
	overflow: hidden !important;
	display: block !important;
}

#srf-wrapper .srf-form-header {
	padding: 20px 22px 14px !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

#srf-wrapper .srf-form-title {
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
}

#srf-wrapper .srf-title-red {
	color: var(--srf-red) !important;
}

#srf-wrapper .srf-form-subtitle {
	font-size: 12.5px !important;
	color: var(--srf-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important;
}

/* Form sections */
#srf-wrapper .srf-section {
	display: block !important;
	padding: 16px 22px !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

#srf-wrapper .srf-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--srf-text) !important;
	margin-bottom: 14px !important;
}

#srf-wrapper .srf-section-title svg {
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
}

#srf-wrapper .srf-field {
	display: block !important;
	margin-bottom: 12px !important;
}

#srf-wrapper .srf-field:last-child {
	margin-bottom: 0 !important;
}

#srf-wrapper .srf-label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--srf-text) !important;
	margin-bottom: 5px !important;
}

#srf-wrapper .srf-req {
	color: var(--srf-red) !important;
}

/* Inputs */
#srf-wrapper .srf-input,
#srf-wrapper .srf-select,
#srf-wrapper .srf-textarea {
	display: block !important;
	width: 100% !important;
	padding: 9px 12px !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-family: var(--srf-font) !important;
	color: var(--srf-text) !important;
	background: var(--srf-white) !important;
	box-sizing: border-box !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s, box-shadow .15s !important;
}

#srf-wrapper .srf-input--pill {
	border-radius: var(--srf-pill) !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	border: 1px solid #E6E6E5 !important;
}

#srf-wrapper .srf-input:focus,
#srf-wrapper .srf-select:focus,
#srf-wrapper .srf-textarea:focus {
	border-color: var(--srf-red) !important;
	box-shadow: 0 0 0 2px rgba(229,57,53,.1) !important;
}

#srf-wrapper .srf-input::placeholder,
#srf-wrapper .srf-textarea::placeholder {
	color: #bbb !important;
}

#srf-wrapper .srf-textarea {
	min-height: 80px !important;
	resize: vertical !important;
}

/* Phone row */
#srf-wrapper .srf-phone-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 0 !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: var(--srf-pill) !important;
	overflow: hidden !important;
	transition: border-color .15s, box-shadow .15s !important;
}

#srf-wrapper .srf-phone-row:focus-within {
	border-color: var(--srf-red) !important;
	box-shadow: 0 0 0 2px rgba(229,57,53,.1) !important;
}

#srf-wrapper .srf-country-select-wrap {
	position: relative !important;
	flex-shrink: 0 !important;
	width: 72px !important;
	border-right: 1px solid var(--srf-border) !important;
}

#srf-wrapper .srf-country-select {
	display: block !important;
	width: 100% !important;
	padding: 9px 22px 9px 14px !important;
	border: none !important;
	border-radius: 0 !important;
	font-size: 13px !important;
	font-family: var(--srf-font) !important;
	background: var(--srf-white) !important;
	color: var(--srf-text) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

#srf-wrapper .srf-country-select-wrap .srf-chevron {
	position: absolute !important;
	right: 5px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	color: #888 !important;
}

#srf-wrapper .srf-phone-input {
	flex: 1 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-left: 12px !important;
	-webkit-appearance: none !important;
}

/* DOB with calendar icon */
#srf-wrapper .srf-input-icon-wrap {
	position: relative !important;
	display: block !important;
}

#srf-wrapper .srf-input-icon-wrap .srf-input {
	padding-right: 40px !important;
}

#srf-wrapper .srf-cal-icon {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #aaa !important;
	display: flex !important;
	cursor: pointer !important;
	transition: color .15s !important;
}

#srf-wrapper .srf-cal-icon:hover {
	color: var(--srf-red) !important;
}

/* Select with chevron */
#srf-wrapper .srf-select-wrap {
	position: relative !important;
	display: block !important;
}

#srf-wrapper .srf-select-wrap .srf-input--pill {
	padding-right: 38px !important;
	cursor: pointer !important;
}

#srf-wrapper .srf-select-wrap .srf-chevron {
	position: absolute !important;
	right: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
	color: #888 !important;
}

/* ── Calendar ── */
#srf-wrapper .srf-calendar {
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	width: 270px !important;
	background: var(--srf-white) !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
	z-index: 9999 !important;
	padding: 12px !important;
	box-sizing: border-box !important;
}

#srf-wrapper .srf-cal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 8px !important;
}

#srf-wrapper .srf-cal-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: 6px !important;
	width: 28px !important;
	height: 28px !important;
	font-size: 18px !important;
	cursor: pointer !important;
	color: var(--srf-text) !important;
}

#srf-wrapper .srf-cal-nav:hover {
	background: var(--srf-red-light) !important;
	border-color: var(--srf-red) !important;
	color: var(--srf-red) !important;
}

#srf-wrapper .srf-cal-month-year {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--srf-text) !important;
}

#srf-wrapper .srf-cal-year-select-row {
	margin-bottom: 8px !important;
	text-align: center !important;
}

#srf-wrapper .srf-cal-year-select {
	padding: 4px 8px !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: 6px !important;
	font-size: 12.5px !important;
	cursor: pointer !important;
	outline: none !important;
	color: var(--srf-text) !important;
}

#srf-wrapper .srf-cal-weekdays {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	margin-bottom: 4px !important;
}

#srf-wrapper .srf-cal-weekdays span {
	display: block !important;
	text-align: center !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #aaa !important;
	padding: 4px 0 !important;
}

#srf-wrapper .srf-cal-days {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr) !important;
	gap: 2px !important;
}

#srf-wrapper .srf-cal-day {
	display: block !important;
	text-align: center !important;
	padding: 6px 2px !important;
	font-size: 12.5px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	color: var(--srf-text) !important;
	transition: background .1s, color .1s !important;
	line-height: 1 !important;
}

#srf-wrapper .srf-cal-day:hover {
	background: var(--srf-red-light) !important;
	color: var(--srf-red) !important;
}

#srf-wrapper .srf-cal-day--selected {
	background: var(--srf-red) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

#srf-wrapper .srf-cal-day--today {
	font-weight: 700 !important;
	color: var(--srf-red) !important;
}

#srf-wrapper .srf-cal-day--empty {
	cursor: default !important;
}

#srf-wrapper .srf-cal-day--empty:hover {
	background: none !important;
	color: var(--srf-text) !important;
}

/* ── Upload ── */
#srf-wrapper .srf-upload-area {
	position: relative !important;
	border: 1.5px dashed var(--srf-border) !important;
	border-radius: 6px !important;
	background: #fafafa !important;
	padding: 12px !important;
	text-align: center !important;
}

#srf-wrapper .srf-file-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

#srf-wrapper .srf-upload-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--srf-text) !important;
	cursor: pointer !important;
	padding: 6px 14px !important;
	border: 1px solid var(--srf-border) !important;
	border-radius: 5px !important;
	background: var(--srf-white) !important;
	transition: border-color .15s !important;
}

#srf-wrapper .srf-upload-label:hover {
	border-color: var(--srf-red) !important;
	color: var(--srf-red) !important;
}

#srf-wrapper .srf-upload-hint {
	display: block !important;
	font-size: 10.5px !important;
	color: #aaa !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
}

#srf-wrapper .srf-file-list {
	margin-top: 8px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

#srf-wrapper .srf-file-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 12px !important;
	background: #f0f0f0 !important;
	border-radius: 4px !important;
	padding: 5px 8px !important;
}

#srf-wrapper .srf-file-remove {
	background: none !important;
	border: none !important;
	color: var(--srf-red) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 0 0 0 6px !important;
}

#srf-wrapper .srf-upload-required {
	display: block !important;
	font-size: 11.5px !important;
	color: var(--srf-red) !important;
	margin: 5px 0 0 !important;
}

/* ── Submit ── */
#srf-wrapper .srf-submit-wrap {
	padding: 18px 22px 0 !important;
}

#srf-wrapper .srf-submit-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	padding: 13px 20px !important;
	background: var(--srf-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--srf-pill) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: var(--srf-font) !important;
	cursor: pointer !important;
	transition: background .15s, transform .1s, opacity .15s !important;
	letter-spacing: .01em !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
}

#srf-wrapper .srf-submit-btn:hover:not(:disabled) {
	background: #c62828 !important;
}

#srf-wrapper .srf-submit-btn:active:not(:disabled) {
	transform: scale(.99) !important;
}

#srf-wrapper .srf-submit-btn:disabled {
	background: #e57373 !important;
	cursor: not-allowed !important;
	opacity: 0.65 !important;
}

/* Messages */
#srf-wrapper .srf-message {
	margin: 12px 22px 0 !important;
	padding: 12px 14px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#srf-wrapper .srf-message--success {
	background: #e8f5e9 !important;
	color: #2e7d32 !important;
	border: 1px solid #a5d6a7 !important;
}

#srf-wrapper .srf-message--error {
	background: #ffebee !important;
	color: #c62828 !important;
	border: 1px solid #ef9a9a !important;
}

/* Security note */
#srf-wrapper .srf-security-note {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 14px 22px 18px !important;
	font-size: 11px !important;
	color: var(--srf-muted) !important;
	line-height: 1.5 !important;
}

#srf-wrapper .srf-shield {
	color: #43a047 !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 900px) {
	#srf-wrapper.srf-wrapper {
		flex-direction: column !important;
		padding: 20px !important;
		gap: 24px !important;
	}
	#srf-wrapper .srf-right {
		width: 100% !important;
		position: static !important;
	}
}

@media (max-width: 600px) {
	#srf-wrapper .srf-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	#srf-wrapper .srf-main-title {
		font-size: 22px !important;
	}
}

@media (max-width: 400px) {
	#srf-wrapper .srf-grid {
		grid-template-columns: 1fr !important;
	}
}