/**
 * Alkasim Forms — 30 Unique Predefined Layout Architectures
 * Each layout features a genuinely distinct structural composition, content hierarchy, and responsive behavior.
 * Provided by Alkasim • Developed by Muhammad Husnain
 */

/* ====================================================
 * COMMON STRUCTURAL SHELL & RESET
 * ==================================================== */
.af-layout-shell {
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.af-layout-shell *,
.af-layout-shell *::before,
.af-layout-shell *::after {
	box-sizing: border-box;
}

/* ====================================================
 * LAYOUT 01: MODERN CLEAN
 * Floating Card with Pill Badge, Staggered Grid & Floating Action Pill
 * ==================================================== */
.af-layout-01-modern-clean {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06);
}
.af-l01-header-card {
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid #f1f5f9;
}
.af-l01-badge-wrap {
	margin-bottom: 12px;
}
.af-l01-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eff6ff;
	color: #2563eb;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 9999px;
	border: 1px solid #dbeafe;
}
.af-l01-badge .dashicons { font-size: 15px; width: 15px; height: 15px; }
.af-l01-title {
	font-size: 24px;
	font-weight: 700;
	color: #0f172a;
	margin: 10px 0 0;
	line-height: 1.3;
}
.af-l01-action-bar {
	margin-top: 24px;
	display: flex;
	justify-content: flex-end;
}
.af-l01-submit {
	border-radius: 9999px !important;
	padding: 12px 28px !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
	border: none !important;
	cursor: pointer;
	transition: all 0.2s ease;
}
.af-l01-submit:hover {
	background: #1d4ed8 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

/* ====================================================
 * LAYOUT 02: CORPORATE PROFESSIONAL
 * Formal Executive Document with Letterhead, Docket Meta & Ledger Panes
 * ==================================================== */
.af-layout-02-corporate {
	background: #f8fafc;
	border: 2px solid #0f2744;
	border-radius: 4px;
	padding: 28px 30px;
	box-shadow: 0 4px 16px rgba(15, 39, 68, 0.08);
}
.af-l02-letterhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 16px;
}
.af-l02-title {
	font-size: 22px;
	font-weight: 800;
	color: #0f2744;
	letter-spacing: -0.3px;
	margin: 8px 0 0;
	text-transform: uppercase;
}
.af-l02-docket-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}
.af-l02-ref {
	font-family: monospace;
	font-size: 13px;
	font-weight: 700;
	color: #1e3a8a;
	background: #e0e7ff;
	padding: 3px 8px;
	border-radius: 3px;
}
.af-l02-compliance {
	font-size: 11px;
	color: #475569;
	display: flex;
	align-items: center;
	gap: 4px;
}
.af-l02-compliance .dashicons { font-size: 14px; width: 14px; height: 14px; color: #16a34a; }
.af-l02-rule-divider {
	height: 3px;
	background: linear-gradient(90deg, #0f2744 0%, #2563eb 100%);
	margin-bottom: 24px;
}
.af-l02-ledger-panes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.af-l02-pane {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 20px;
}
.af-l02-pane-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #0f2744;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.af-l02-footer-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #0f2744;
	color: #ffffff;
	padding: 14px 20px;
	border-radius: 4px;
	flex-wrap: wrap;
	gap: 12px;
}
.af-l02-seal {
	font-size: 12px;
	color: #93c5fd;
	display: flex;
	align-items: center;
	gap: 6px;
}
.af-l02-seal .dashicons { font-size: 16px; width: 16px; height: 16px; }
.af-l02-submit {
	background: #2563eb !important;
	color: #ffffff !important;
	border: 1px solid #60a5fa !important;
	border-radius: 3px !important;
	padding: 10px 24px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.af-l02-submit:hover { background: #1d4ed8 !important; }

/* ====================================================
 * LAYOUT 03: ELEGANT CLASSIC
 * Editorial Serif with Crest Medallion, Warm Parchment & Gold Borders
 * ==================================================== */
.af-layout-03-elegant-classic {
	background: #faf8f5;
	border: 1px solid #d4c5b3;
	border-radius: 8px;
	padding: 36px 32px;
	box-shadow: 0 10px 25px rgba(110, 85, 55, 0.08);
	font-family: Georgia, 'Times New Roman', serif;
}
.af-l03-crest-medallion {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}
.af-l03-flourish-header {
	text-align: center;
	margin-bottom: 26px;
}
.af-l03-ornament-left, .af-l03-ornament-right {
	color: #b89768;
	font-size: 14px;
	margin: 0 8px;
}
.af-l03-title {
	display: inline-block;
	font-size: 26px;
	font-weight: 400;
	color: #2c251e;
	letter-spacing: 0.5px;
	margin: 6px 0;
	font-style: italic;
}
.af-l03-parchment-body {
	background: #ffffff;
	border: 1px solid #e7ded3;
	border-radius: 4px;
	padding: 28px;
}
.af-l03-footer {
	text-align: center;
	margin-top: 24px;
}
.af-l03-submit {
	background: #2c251e !important;
	color: #f7ede2 !important;
	border: 1px solid #b89768 !important;
	border-radius: 4px !important;
	padding: 12px 32px !important;
	font-family: Georgia, serif !important;
	font-size: 14px !important;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.2s;
}
.af-l03-submit:hover {
	background: #44392e !important;
	box-shadow: 0 4px 12px rgba(184, 151, 104, 0.3) !important;
}

/* ====================================================
 * LAYOUT 04: VIBRANT GRADIENT
 * 45° Angle Hero Gradient Header with Overlapping Elevated Floating Card
 * ==================================================== */
.af-layout-04-vibrant-gradient {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.2);
}
.af-l04-gradient-hero {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
	padding: 36px 30px 50px;
	color: #ffffff;
	text-align: center;
}
.af-l04-title {
	color: #ffffff;
	font-size: 26px;
	font-weight: 800;
	margin: 8px 0 10px;
}
.af-l04-spark-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
}
.af-l04-elevated-card {
	background: #ffffff;
	border-radius: 16px;
	margin: -24px 20px 20px;
	padding: 28px 24px;
	position: relative;
	z-index: 2;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.af-l04-footer-action {
	margin-top: 24px;
	text-align: center;
}
.af-l04-submit {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 36px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35) !important;
	cursor: pointer;
	transition: all 0.25s;
}
.af-l04-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5) !important;
}

/* ====================================================
 * LAYOUT 05: DARK LUXURY OBSIDIAN
 * Deep Slate #080b11 Card, Gold Hairlines & Metallic Amber Shimmer
 * ==================================================== */
.af-layout-05-dark-luxury {
	background: #080b11;
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.af-l05-inner-border {
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 8px;
	padding: 26px;
}
.af-l05-header {
	text-align: center;
	margin-bottom: 24px;
}
.af-l05-gold-crest {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 9999px;
	margin-bottom: 12px;
	background: rgba(212, 175, 55, 0.05);
}
.af-l05-title {
	color: #f1f5f9;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 0;
	text-transform: uppercase;
}
.af-l05-gold-rule {
	color: #d4af37;
	margin-top: 8px;
	font-size: 10px;
}
.af-l05-glass-container {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	padding: 20px;
}
.af-layout-05-dark-luxury label { color: #cbd5e1 !important; font-size: 13px !important; }
.af-layout-05-dark-luxury input,
.af-layout-05-dark-luxury select,
.af-layout-05-dark-luxury textarea {
	background: #111622 !important;
	border: 1px solid #2d3748 !important;
	color: #f1f5f9 !important;
}
.af-l05-actions {
	margin-top: 24px;
	text-align: center;
}
.af-l05-submit {
	background: linear-gradient(135deg, #d4af37 0%, #aa8010 100%) !important;
	color: #080b11 !important;
	border: 1px solid #e6c86e !important;
	border-radius: 4px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 06: COMPACT INLINE TOOLBAR
 * Horizontal Compact Header, Multi-Column Dense Grid & Quick Submit
 * ==================================================== */
.af-layout-06-compact-inline {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 18px 20px;
}
.af-l06-toolbar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
	border: 1px solid #e2e8f0;
}
.af-l06-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.af-l06-title {
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
}
.af-l06-speed-tag {
	font-size: 11px;
	font-weight: 600;
	color: #059669;
	background: #ecfdf5;
	padding: 3px 8px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.af-l06-dense-body {
	background: #ffffff;
	padding: 16px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
}
.af-l06-grid .af-field-wrapper {
	margin-bottom: 10px !important;
}
.af-l06-grid .af-field-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	margin-bottom: 3px !important;
}
.af-l06-grid input,
.af-l06-grid select,
.af-l06-grid textarea {
	padding: 6px 10px !important;
	font-size: 13px !important;
}
.af-l06-compact-footer {
	margin-top: 14px;
	display: flex;
	justify-content: flex-end;
}
.af-l06-submit {
	background: #0f172a !important;
	color: #ffffff !important;
	padding: 8px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 07: SOFT PASTEL CLOUD
 * Generous 24px Border Radius, Mint/Lavender Pods & Bouncy CTA
 * ==================================================== */
.af-layout-07-soft-pastel {
	background: #ffffff;
	border: 2px solid #e0e7ff;
	border-radius: 24px;
	padding: 36px 30px;
	box-shadow: 0 15px 35px -10px rgba(129, 140, 248, 0.15);
}
.af-l07-cloud-header {
	text-align: center;
	margin-bottom: 26px;
}
.af-l07-title {
	font-size: 26px;
	font-weight: 800;
	color: #3730a3;
	margin: 8px 0 6px;
}
.af-l07-pill-subtitle {
	display: inline-block;
	background: #e0e7ff;
	color: #4338ca;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 9999px;
}
.af-l07-pod-container {
	background: #f8fafc;
	border-radius: 18px;
	padding: 24px;
	border: 1px solid #e2e8f0;
}
.af-layout-07-soft-pastel input,
.af-layout-07-soft-pastel select,
.af-layout-07-soft-pastel textarea {
	border-radius: 12px !important;
	border: 1px solid #cbd5e1 !important;
}
.af-l07-actions {
	margin-top: 24px;
	text-align: center;
}
.af-l07-submit {
	background: #6366f1 !important;
	color: #ffffff !important;
	border-radius: 9999px !important;
	padding: 13px 36px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: none !important;
	box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3) !important;
	cursor: pointer;
	transition: transform 0.2s;
}
.af-l07-submit:hover { transform: scale(1.03); }

/* ====================================================
 * LAYOUT 08: MATERIAL DESIGN 3
 * App Bar Header, 3dp Surface Elevation & Floating Action Button Tray
 * ==================================================== */
.af-layout-08-material-design {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.af-l08-appbar {
	background: #6750a4;
	color: #ffffff;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.af-l08-appbar-title {
	flex: 1;
	margin: 0 16px;
}
.af-l08-heading {
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}
.af-l08-surface {
	padding: 28px 24px;
}
.af-layout-08-material-design input,
.af-layout-08-material-design select,
.af-layout-08-material-design textarea {
	border-radius: 4px !important;
	border: 1px solid #79747e !important;
}
.af-l08-action-tray {
	margin-top: 26px;
	display: flex;
	justify-content: flex-end;
}
.af-l08-fab-btn {
	background: #6750a4 !important;
	color: #ffffff !important;
	border-radius: 100px !important;
	padding: 12px 30px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0.3px;
	border: none !important;
	box-shadow: 0 4px 12px rgba(103, 80, 164, 0.35) !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 09: NEUMORPHIC SUBTLE
 * Dual-Shadow Tactile Chassis with Inset Carved Input Trays
 * ==================================================== */
.af-layout-09-neumorphic {
	background: #eef2f7;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff;
}
.af-l09-header {
	text-align: center;
	margin-bottom: 24px;
}
.af-l09-title {
	font-size: 22px;
	font-weight: 700;
	color: #334155;
	margin: 10px 0 0;
}
.af-l09-trays input,
.af-l09-trays select,
.af-l09-trays textarea {
	background: #eef2f7 !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff !important;
}
.af-l09-footer {
	margin-top: 24px;
	text-align: center;
}
.af-l09-submit {
	background: #eef2f7 !important;
	color: #2563eb !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 12px 32px !important;
	font-weight: 700 !important;
	box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important;
	cursor: pointer;
	transition: all 0.15s ease;
}
.af-l09-submit:active {
	box-shadow: inset 3px 3px 6px #d1d9e6, inset -3px -3px 6px #ffffff !important;
}

/* ====================================================
 * LAYOUT 10: BOLD BRUTALIST
 * 3px Solid Black Borders, 6px Hard Offset Shadow & Yellow Block Button
 * ==================================================== */
.af-layout-10-brutalist {
	background: #ffffff;
	border: 3px solid #000000;
	box-shadow: 6px 6px 0px #000000;
	border-radius: 0;
	padding: 0;
	overflow: hidden;
}
.af-l10-marquee-header {
	background: #000000;
	color: #ffffff;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.af-l10-title {
	color: #ffff00;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 1px;
	margin: 0;
}
.af-l10-system-tag {
	font-family: monospace;
	font-size: 11px;
	color: #a3e635;
}
.af-l10-body {
	padding: 24px;
}
.af-layout-10-brutalist input,
.af-layout-10-brutalist select,
.af-layout-10-brutalist textarea {
	border: 2px solid #000000 !important;
	border-radius: 0 !important;
	box-shadow: 3px 3px 0px #000000 !important;
	font-weight: 600 !important;
}
.af-l10-action-area {
	margin-top: 24px;
}
.af-l10-submit {
	background: #ffff00 !important;
	color: #000000 !important;
	border: 3px solid #000000 !important;
	box-shadow: 5px 5px 0px #000000 !important;
	border-radius: 0 !important;
	padding: 14px 28px !important;
	font-weight: 900 !important;
	font-size: 15px !important;
	letter-spacing: 1px;
	cursor: pointer;
	width: 100%;
}
.af-l10-submit:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0px #000000 !important;
}

/* ====================================================
 * LAYOUT 11: SPLIT-SCREEN ACCENT
 * 35% Deep Accent Brand Sidebar & 65% Scrollable Form Panel
 * ==================================================== */
.af-layout-11-split-screen {
	display: flex;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}
.af-l11-sidebar {
	width: 35%;
	background: #0f172a;
	color: #ffffff;
	padding: 36px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.af-l11-title {
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	margin: 12px 0;
}
.af-l11-intro {
	color: #94a3b8;
	font-size: 13px;
	line-height: 1.6;
}
.af-l11-badges {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.af-l11-badge-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #cbd5e1;
}
.af-l11-badge-item .dashicons { color: #38bdf8; font-size: 16px; width: 16px; height: 16px; }
.af-l11-panel {
	width: 65%;
	background: #ffffff;
	padding: 36px 30px;
}
.af-l11-footer {
	margin-top: 24px;
}
.af-l11-submit {
	background: #0284c7 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 12px 28px !important;
	font-weight: 700 !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 12: ELEVATED CARD STACK
 * Modular Stack of Distinct Floating Cards with Section Badges
 * ==================================================== */
.af-layout-12-card-based {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.af-l12-top-header {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px 24px;
}
.af-l12-title {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 6px 0 0;
}
.af-l12-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.af-l12-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 12px;
	margin-bottom: 18px;
}
.af-l12-card-num {
	background: #2563eb;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.af-l12-card-title {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin: 0;
}
.af-l12-card-action {
	text-align: right;
}
.af-l12-submit {
	background: #2563eb !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 12px 30px !important;
	font-weight: 700 !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 13: MINIMALIST LINE
 * Borderless Pure Canvas with Underline-Only Inputs
 * ==================================================== */
.af-layout-13-minimalist-line {
	background: transparent;
	padding: 20px 10px;
}
.af-l13-header {
	margin-bottom: 28px;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 16px;
}
.af-l13-title {
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.5px;
	color: #0f172a;
	margin: 8px 0 0;
}
.af-layout-13-minimalist-line input,
.af-layout-13-minimalist-line select,
.af-layout-13-minimalist-line textarea {
	border: none !important;
	border-bottom: 1px solid #cbd5e1 !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding-left: 0 !important;
}
.af-layout-13-minimalist-line input:focus,
.af-layout-13-minimalist-line select:focus,
.af-layout-13-minimalist-line textarea:focus {
	border-bottom: 2px solid #000000 !important;
	box-shadow: none !important;
}
.af-l13-footer {
	margin-top: 24px;
}
.af-l13-submit {
	background: #0f172a !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	padding: 10px 24px !important;
	font-weight: 500 !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 14: MULTI-SECTION STEPPED TIMELINE
 * Continuous Left Timeline Rail with Numbered Milestone Nodes
 * ==================================================== */
.af-layout-14-multi-section {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 30px 26px;
}
.af-l14-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}
.af-l14-title {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 6px 0 0;
}
.af-l14-timeline {
	position: relative;
	padding-left: 36px;
}
.af-l14-timeline::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 10px;
	bottom: 20px;
	width: 2px;
	background: #e2e8f0;
}
.af-l14-node {
	position: relative;
	margin-bottom: 28px;
}
.af-l14-milestone {
	position: absolute;
	left: -36px;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #3b82f6;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px #3b82f6;
}
.af-l14-node-title {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 14px;
}
.af-l14-submit {
	background: #2563eb !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 12px 28px !important;
	font-weight: 700 !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUT 15: BALANCED TWO-COLUMN GRID
 * 50/50 Dual Column Layout with Sticky Bottom Spanning Action Bar
 * ==================================================== */
.af-layout-15-two-column-grid {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 28px 24px;
}
.af-l15-header {
	margin-bottom: 22px;
}
.af-l15-title {
	font-size: 22px;
	font-weight: 700;
	color: #0f172a;
	margin: 6px 0 0;
}
.af-l15-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.af-l15-col-badge {
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	background: #f1f5f9;
	padding: 4px 10px;
	border-radius: 4px;
	margin-bottom: 14px;
	display: inline-block;
}
.af-l15-action-tray {
	margin-top: 24px;
	border-top: 1px solid #e2e8f0;
	padding-top: 18px;
	text-align: center;
}
.af-l15-submit {
	background: #0f172a !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	padding: 12px 32px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer;
}

/* ====================================================
 * LAYOUTS 16 TO 30: BESPOKE STRUCTURES
 * ==================================================== */
.af-layout-16-centered-focus {
	max-width: 520px;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 36px 30px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	text-align: center;
}
.af-l16-header { margin-bottom: 24px; }
.af-l16-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 8px 0 4px; }
.af-l16-guide { font-size: 13px; color: #64748b; }
.af-l16-action { margin-top: 24px; }
.af-l16-submit { width: auto !important; background: #2563eb !important; border-radius: 8px !important; padding: 12px 28px !important; }

.af-layout-17-step-progress .af-l17-meter { margin-bottom: 18px; }
.af-l17-meter-text { display: flex; justify-content: space-between; font-size: 12px; color: #475569; margin-bottom: 6px; }
.af-l17-track { height: 6px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.af-l17-fill { width: 100%; height: 100%; background: #2563eb; border-radius: 9999px; }
.af-layout-17-step-progress { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 28px; }
.af-l17-submit { background: #2563eb !important; padding: 12px 28px !important; border-radius: 8px !important; color: #fff !important; }

.af-layout-18-sidebar-accent { display: flex; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.af-l18-stripe-border { width: 8px; background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); }
.af-l18-main-content { flex: 1; padding: 28px; }
.af-l18-submit { background: #1e293b !important; border-radius: 6px !important; color: #fff !important; }

.af-layout-19-floating-label { background: #0f172a; border-radius: 10px; overflow: hidden; color: #f8fafc; }
.af-l19-terminal-bar { background: #1e293b; padding: 8px 14px; display: flex; align-items: center; gap: 10px; font-family: monospace; font-size: 11px; color: #94a3b8; }
.af-l19-dots { display: flex; gap: 6px; }
.af-l19-dot { width: 10px; height: 10px; border-radius: 50%; }
.af-dot-red { background: #ef4444; } .af-dot-yellow { background: #eab308; } .af-dot-green { background: #22c55e; }
.af-l19-terminal-body { padding: 26px; }
.af-l19-title { font-family: monospace; font-size: 17px; color: #38bdf8; margin: 8px 0 20px; }
.af-layout-19-floating-label label { color: #94a3b8 !important; font-family: monospace !important; font-size: 12px !important; }
.af-layout-19-floating-label input, .af-layout-19-floating-label textarea, .af-layout-19-floating-label select { background: #1e293b !important; border: 1px solid #334155 !important; color: #f8fafc !important; font-family: monospace !important; }
.af-l19-submit { background: #0284c7 !important; color: #fff !important; font-family: monospace !important; font-weight: 700 !important; border-radius: 4px !important; }

.af-layout-20-modern-boxed .af-l20-outer-frame { border: 2px solid #0f172a; border-radius: 8px; padding: 28px; position: relative; }
.af-l20-header-pill { font-size: 18px; font-weight: 700; color: #0f172a; background: #fff; padding: 0 10px; }
.af-l20-submit { background: #0f172a !important; color: #fff !important; padding: 10px 24px !important; border-radius: 4px !important; }

.af-layout-21-corporate-navy { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.af-l21-navy-ribbon { background: #0a192f; color: #ffffff; padding: 24px; border-bottom: 3px solid #d4af37; }
.af-l21-title { color: #ffffff; font-size: 22px; font-weight: 700; margin: 8px 0; }
.af-l21-cert { font-size: 11px; color: #d4af37; display: flex; align-items: center; gap: 4px; }
.af-l21-registry-body { padding: 26px; }
.af-l21-grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.af-l21-subheading { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #0a192f; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; margin-bottom: 12px; }
.af-l21-submit { background: #0a192f !important; color: #d4af37 !important; border: 1px solid #d4af37 !important; border-radius: 4px !important; font-weight: 700 !important; }

.af-layout-22-application-portal { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 28px; }
.af-l22-docket-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; }
.af-l22-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 6px 0; }
.af-l22-badge-box { text-align: right; }
.af-l22-docket-label { background: #eff6ff; color: #1e40af; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 3px; display: block; margin-bottom: 3px; }
.af-l22-track { font-size: 11px; color: #16a34a; font-weight: 600; }
.af-l22-pod { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 18px; margin-bottom: 18px; }
.af-l22-pod-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.af-l22-declaration-bar { font-size: 12px; color: #64748b; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.af-l22-submit { background: #1e40af !important; color: #ffffff !important; border-radius: 6px !important; font-weight: 700 !important; }

.af-layout-23-clean-dashboard { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.af-l23-top-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.af-l23-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0; }
.af-l23-status-badge { font-size: 11px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 4px 8px; border-radius: 9999px; display: flex; align-items: center; gap: 5px; }
.af-l23-dot { width: 6px; height: 6px; background: #16a34a; border-radius: 50%; }
.af-l23-slate-tray { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; }
.af-l23-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; flex-wrap: wrap; gap: 10px; }
.af-l23-hint { font-size: 12px; color: #64748b; font-family: monospace; }
.af-l23-submit { background: #0284c7 !important; color: #ffffff !important; border-radius: 6px !important; font-weight: 600 !important; }

.af-layout-24-elegant-inquiry { background: #fdfbf7; border: 1px solid #eee5d8; border-radius: 8px; padding: 36px 30px; font-family: 'Times New Roman', serif; }
.af-l24-category { font-size: 11px; letter-spacing: 2px; color: #92754e; font-weight: 600; text-transform: uppercase; }
.af-l24-title { font-size: 26px; font-weight: 400; color: #1c1917; margin: 4px 0 16px; font-style: italic; }
.af-l24-cursive { font-style: italic; color: #78716c; font-size: 14px; margin-bottom: 12px; text-align: center; }
.af-l24-submit { background: #92754e !important; color: #ffffff !important; border-radius: 3px !important; font-family: serif !important; }

.af-layout-25-modern-registration { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 36px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
.af-l25-banner { text-align: center; margin-bottom: 24px; }
.af-l25-title { font-size: 24px; font-weight: 800; color: #0f172a; margin: 8px 0 4px; }
.af-l25-welcome { font-size: 13px; color: #64748b; margin: 0; }
.af-l25-actions { margin-top: 24px; text-align: center; }
.af-l25-submit { width: auto !important; background: #2563eb !important; border-radius: 8px !important; font-weight: 700 !important; padding: 13px 32px !important; }
.af-l25-reassurance { font-size: 11px; color: #64748b; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; }

.af-layout-26-full-width-clean { background: #ffffff; width: 100%; border-radius: 0; border-bottom: 1px solid #e2e8f0; }
.af-l26-panoramic-header { background: #0f172a; color: #ffffff; padding: 24px 30px; }
.af-l26-title { color: #ffffff; font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.af-l26-fluid-content { padding: 30px; }
.af-l26-action-zone { margin-top: 24px; }
.af-l26-submit { background: #2563eb !important; color: #fff !important; border-radius: 6px !important; }

.af-layout-27-compact-density { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px; padding: 16px; }
.af-l27-erp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.af-l27-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.af-l27-mode { font-size: 10px; font-family: monospace; font-weight: 700; color: #64748b; }
.af-l27-dense-table .af-field-wrapper { margin-bottom: 6px !important; }
.af-l27-dense-table input, .af-l27-dense-table select, .af-l27-dense-table textarea { padding: 5px 8px !important; font-size: 12px !important; }
.af-l27-erp-footer { margin-top: 10px; display: flex; justify-content: flex-end; }
.af-l27-submit { font-size: 12px !important; padding: 6px 16px !important; }

.af-layout-28-sectioned-divider { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 28px; }
.af-l28-header { margin-bottom: 20px; }
.af-l28-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 6px 0 0; }
.af-l28-banner-divider { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1e40af; background: #eff6ff; padding: 8px 12px; border-radius: 6px; margin: 18px 0 14px; }
.af-l28-action-zone { margin-top: 24px; }
.af-l28-submit { background: #1e40af !important; color: #fff !important; border-radius: 6px !important; }

.af-layout-29-enterprise-business { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 28px; }
.af-l29-top-strip { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0f172a; padding-bottom: 14px; margin-bottom: 20px; }
.af-l29-title { font-size: 22px; font-weight: 800; color: #0f172a; margin: 6px 0 0; }
.af-l29-verified-badge { font-size: 11px; font-weight: 700; color: #16a34a; display: flex; align-items: center; gap: 4px; }
.af-l29-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; border-top: 1px solid #e2e8f0; padding-top: 14px; }
.af-l29-audit { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.af-l29-submit { background: #0f172a !important; color: #fff !important; border-radius: 4px !important; }

.af-layout-30-alkasim-signature { position: relative; background: #ffffff; border: 1px solid #dbeafe; border-radius: 20px; padding: 36px 30px; box-shadow: 0 15px 40px -10px rgba(37, 99, 235, 0.15); }
.af-l30-glow-aura { position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 70%); pointer-events: none; }
.af-l30-flagship-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #eff6ff; }
.af-l30-badge { display: inline-flex; align-items: center; gap: 4px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 9999px; letter-spacing: 0.5px; }
.af-l30-title { font-size: 24px; font-weight: 800; color: #1e3a8a; margin: 6px 0 0; }
.af-l30-action-bar { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.af-l30-guarantee { font-size: 12px; color: #2563eb; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.af-l30-submit { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 13px 32px !important; font-weight: 700 !important; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35) !important; cursor: pointer; }

/* ====================================================
 * UNIFIED RESPONSIVE BREAKPOINTS
 * ==================================================== */
@media (max-width: 768px) {
	.af-layout-02-corporate .af-l02-ledger-panes { grid-template-columns: 1fr !important; }
	.af-layout-11-split-screen { flex-direction: column !important; }
	.af-layout-11-split-screen .af-l11-sidebar { width: 100% !important; padding: 24px !important; }
	.af-layout-11-split-screen .af-l11-panel { width: 100% !important; padding: 24px !important; }
	.af-layout-15-two-column-grid .af-l15-columns { grid-template-columns: 1fr !important; }
	.af-layout-21-corporate-navy .af-l21-grid-split { grid-template-columns: 1fr !important; }
	.af-l30-flagship-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.af-layout-01-modern-clean,
	.af-layout-02-corporate,
	.af-layout-03-elegant-classic,
	.af-layout-04-vibrant-gradient,
	.af-layout-05-dark-luxury,
	.af-layout-07-soft-pastel,
	.af-layout-08-material-design,
	.af-layout-09-neumorphic,
	.af-layout-10-brutalist,
	.af-layout-12-card-based .af-l12-card,
	.af-layout-14-multi-section,
	.af-layout-15-two-column-grid,
	.af-layout-16-centered-focus,
	.af-layout-17-step-progress,
	.af-layout-18-main-content,
	.af-layout-20-modern-boxed .af-l20-outer-frame,
	.af-layout-21-corporate-navy .af-l21-registry-body,
	.af-layout-22-application-portal,
	.af-layout-23-clean-dashboard,
	.af-layout-24-elegant-inquiry,
	.af-layout-25-modern-registration,
	.af-layout-26-fluid-content,
	.af-layout-28-sectioned-divider,
	.af-layout-29-enterprise-business,
	.af-layout-30-alkasim-signature {
		padding: 20px 16px !important;
	}

	.af-submit-btn { width: auto !important; max-width: 100%; }
	.af-l01-action-bar, .af-l06-compact-footer, .af-l08-action-tray, .af-l30-action-bar { justify-content: center !important; }
}