<style>
/* =========================================================
SAAS FORM SYSTEM
Reusable global form styling
========================================================= */

/* =========================================================
ACCOUNT LAYOUT
========================================================= */

.account-layout{
	display:grid;
	grid-template-columns:minmax(0,1.6fr) minmax(280px,0.7fr);
	gap:40px;

	align-items:start;
}

/* prevents grid overflow */
.account-main,
.account-sidebar{
	min-width:0;
}

/* sticky sidebar */
.account-sidebar{
	position:sticky;
	top:110px;
}

/* responsive */
@media(max-width:1000px){

	.account-layout{
		grid-template-columns:1fr;
	}

	.account-sidebar{
		position:static;
	}

}

/* =========================================================
ACCOUNT HEADER
========================================================= */

.account-header h1{
	margin-bottom:14px;
}

/* =========================================================
INFO / WARNING BOX
========================================================= */

.ai-warning{
	background:#f8fafc;
	border:1px solid #e2e8f0;
	border-radius:16px;

	padding:20px 22px;
	margin-bottom:24px;
}

.ai-warning strong{
	display:block;

	margin-bottom:6px;

	color:#0f172a;

	font-size:.95rem;
	font-weight:700;
	letter-spacing:.02em;
}

.ai-warning p{
	margin:0;
	color:#64748b;
	line-height:1.7;
}

/* =========================================================
FORM CORE
========================================================= */

.saas-form{
	display:flex;
	flex-direction:column;
	gap:28px;
}

/* =========================================================
FORM SECTION CARDS
========================================================= */

.form-section{
	background:#fff;

	border:1px solid #e2e8f0;
	border-radius:20px;

	padding:28px;

	box-shadow:
		0 10px 30px rgba(15,23,42,.04);
}

.form-section-title{
	font-size:1rem;
	font-weight:700;

	color:#0f172a;

	margin-bottom:18px;
}

/* =========================================================
FORM GRID
========================================================= */

.form-grid{
	list-style:none;

	margin:0;
	padding:0;

	display:grid;
	grid-template-columns:1fr 1fr;

	gap:18px 20px;
}

/* removes old list styling */
.form-grid li{
	list-style:none;
	margin:0;
	padding:0;
}

/* full-width helper */
.form-grid .full{
	grid-column:1 / -1;
}

/* mobile */
@media(max-width:700px){

	.form-grid{
		grid-template-columns:1fr;
	}

}

/* =========================================================
LABELS
========================================================= */

label{
	display:block;

	font-size:.82rem;
	font-weight:600;

	color:#334155;

	margin-bottom:7px;
}

/* =========================================================
INPUTS / SELECTS
========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea{
	width:100%;

	min-height:46px;

	padding:0 14px;

	border:1px solid #dbe3ec;
	border-radius:12px;

	background:#fff;

	font-size:.95rem;
	font-family:inherit;
	color:#0f172a;

	transition:
		border-color .2s ease,
		box-shadow .2s ease,
		background .2s ease;
}

/* textarea */
textarea{
	padding:14px;
	min-height:140px;
	resize:vertical;
}

/* focus state */
input:focus,
select:focus,
textarea:focus{
	outline:none;

	border-color:#16a34a;

	box-shadow:
		0 0 0 4px rgba(34,197,94,.12);
}

/* placeholder */
input::placeholder,
textarea::placeholder{
	color:#94a3b8;
}

/* select appearance */
select{
	appearance:none;
	-webkit-appearance:none;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 9 11 12 8'/%3E%3C/svg%3E");

	background-repeat:no-repeat;
	background-position:right 14px center;

	padding-right:42px;
}

/* =========================================================
FORM HELPERS
========================================================= */

.form_hint{
	display:block;

	margin-top:6px;

	font-size:.78rem;
	line-height:1.5;

	color:#94a3b8;
}

/* =========================================================
CHECKBOXES
========================================================= */

.checkbox-group{
	display:flex;
	align-items:center;
	gap:10px;

	margin-top:4px;
}

.checkbox-group input[type="checkbox"]{
	width:18px;
	height:18px;

	accent-color:#16a34a;
}

.checkbox-group label{
	margin:0;
	font-size:.9rem;
	font-weight:500;
	color:#475569;
}

/* =========================================================
FORM ACTIONS
========================================================= */

.form-actions{
	display:flex;
	justify-content:flex-start;

	padding-top:6px;
	margin-top:4px;
}

/* =========================================================
BUTTONS
========================================================= */

.btn,
button{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	gap:10px;

	padding:14px 22px;

	border-radius:12px;
	border:1px solid transparent;

	font-size:.95rem;
	font-weight:700;
	font-family:inherit;

	cursor:pointer;

	text-decoration:none;

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

/* primary */
.primary-btn{
	background:#1f4f82;
	color:#fff;
	border-color:#1f4f82;
}

.primary-btn:hover{
	background:#163b63;
	border-color:#163b63;

	transform:translateY(-1px);
}

/* secondary */
.secondary-btn{
	background:#fff;
	color:#1f4f82;

	border-color:#dbe3ec;
}

.secondary-btn:hover{
	background:#f8fafc;
	border-color:#1f4f82;

	transform:translateY(-1px);
}

/* =========================================================
SIDEBAR CARD
========================================================= */

.sidebar-card{
	background:#fff;

	border:1px solid #e2e8f0;
	border-radius:20px;

	padding:24px;

	box-shadow:
		0 10px 30px rgba(15,23,42,.04);
}

.sidebar-card h3{
	margin-bottom:12px;
}

.sidebar-card p{
	margin:0;

	color:#64748b;
	line-height:1.7;
}

/* =========================================================
RADIO GROUP SYSTEM (SAAS STYLE)
========================================================= */

.radio-group{
	display:flex;
	gap:14px;
	margin:10px 0 26px;
	flex-wrap:wrap;
}

/* each option becomes a pill */
.radio-option{
	display:flex;
	align-items:center;
	gap:10px;

	padding:12px 16px;

	border:1px solid #dbe3ec;
	border-radius:999px;

	background:#fff;

	cursor:pointer;

	font-size:.95rem;
	font-weight:600;
	color:#334155;

	transition:.2s ease;
}

/* hide native radio */
.radio-option input{
	accent-color:#16a34a;
	transform:scale(1.1);
}

/* hover */
.radio-option:hover{
	border-color:#86efac;
	background:#f8fafc;
}

/* selected state (modern SaaS feel) */
.radio-option:has(input:checked){
	border-color:#16a34a;
	background:#f0fdf4;
	color:#166534;
}



/* =========================================================
SUBSCRIPTION FORM WRAPPER
========================================================= */

.account-subscriptions h3{
	font-size:1.05rem;
	margin:18px 0 12px;
	color:#0f172a;
}



/* =========================================================
BUTTON ALIGNMENT FIX (IMPORTANT)
========================================================= */

.account-subscriptions .form-actions{
	margin-top:10px;
}

/* prevents floating / misalignment in sidebar layouts */
.account-subscriptions{
	display:flex;
	flex-direction:column;
}

/* =========================================
ACCOUNT LAYOUT (MODERN REPLACEMENT)
========================================= */

.account-section{
	padding:64px 0;
}

.account-layout{
	display:grid;
	grid-template-columns:1.6fr .7fr;
	gap:40px;
	align-items:start;
}

/* MAIN */
.account-main{
	min-width:0;
}

/* SIDEBAR */
.account-sidebar{
	position:relative;
}

/* sticky sidebar behaviour */
.account-sidebar .support-sidebar-card{
	position:sticky;
	top:110px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1000px){

	.account-layout{
		grid-template-columns:1fr;
	}

	.account-sidebar .support-sidebar-card{
		position:static;
	}
}

/* =========================================
PAGE TITLE (MODERN REPLACEMENT)
========================================= */

.page-title{
	font-size:clamp(2rem,3vw,2.6rem);
	margin-bottom:10px;
	color:#0f172a;
	letter-spacing:-.02em;
}

/* =========================================
SECTION LABELS (replaces inline blue divs)
========================================= */

.form-section-title{
	margin:26px 0 14px;
	padding:14px 0 8px;
	font-size:.8rem;
	letter-spacing:1.5px;
	text-transform:uppercase;
	color:#2563eb;
	border-bottom:1px solid #e5e7eb;
	font-weight:700;
}

/* =========================================
FORM SPACING HELPERS (replace p_b_24 etc)
========================================= */

.form-block{
	margin-bottom:24px;
}

.form-block-lg{
	margin-bottom:48px;
}

/* =========================================
SUPPORT CARD ENHANCEMENT
========================================= */

.support-card{
	background:#fff;
	border:1px solid #e2e8f0;
	border-radius:22px;
	padding:34px;
	box-shadow:0 10px 30px rgba(15,23,42,.04);
}

/* intro text */
.support-intro{
	margin-bottom:18px;
	color:#475569;
	line-height:1.7;
}

/* =========================================
ERROR / MESSAGE BOX (replaces .required)
========================================= */

.support-alert{
	padding:14px 16px;
	border-radius:12px;
	margin:18px 0;
	font-size:.95rem;
	font-weight:500;
}

.error-alert{
	background:#fef2f2;
	color:#991b1b;
	border:1px solid #fecaca;
}

/* =========================================
ACCOUNT LAYOUT (if not already present)
========================================= */

.account-layout{
	display:grid;
	grid-template-columns:1.6fr .7fr;
	gap:40px;
	align-items:start;
}

.account-sidebar .support-sidebar-card{
	position:sticky;
	top:110px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1000px){

	.account-layout{
		grid-template-columns:1fr;
	}

	.account-sidebar .support-sidebar-card{
		position:static;
	}
}
</style>