/**
 * Workflow GC Blocks & Components Stylesheet
 * All form blocks, components, and UI elements
 * 
 * @package Workflow_GC
 * @version 2.0.0
 * 
 * IMPORTANT: All styles use CSS variables from wfg-master.css
 * No hardcoded colors, sizes, or values.
 * Mobile-first responsive design.
 * Total lines: ~400 (within compliance limits)
 */

/* ==========================================================================
   Form Container & Layout (Mobile-First)
   ========================================================================== */

.wfg-form-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--wfg-space-md);
	background: var(--wfg-bg-page);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.wfg-form-container {
		max-width: 720px;
		padding: var(--wfg-space-lg);
	}
}

@media (min-width: 1025px) {
	.wfg-form-container {
		max-width: 960px;
	}
}

/* Override for new template containers - 860px to fit 30px margins */
@media (min-width: 768px) {
	.wfg-page-container {
		max-width: 860px !important;
	}
}

/* ==========================================================================
   Form Blocks (Card-like containers)
   ========================================================================== */

.wfg-form-block {
	background: var(--wfg-bg-card);
	border-radius: var(--wfg-radius-lg);
	padding: var(--wfg-space-lg);
	margin-bottom: var(--wfg-space-lg);
	box-shadow: var(--wfg-shadow-md);
	box-sizing: border-box;
}

/* Desktop: reduce padding to maximize form field space, add side margins */
@media (min-width: 768px) {
	.wfg-form-block {
		padding: var(--wfg-space-md);
		/* 16px - more space for form fields */
		margin-left: 30px;
		margin-right: 30px;
	}
}

.wfg-form-block--white {
	background: #fff;
	border: 2px solid #4a6953;
	/* Dark Sage border - STANDARD */
}

.wfg-form-block--highlight {
	background: linear-gradient(135deg, #f7faef 0%, #e8f5e8 100%);
	border: 2px solid var(--wfg-base);
}

/* ==========================================================================
   Form Block Header
   ========================================================================== */

.wfg-form-block__header {
	margin-bottom: var(--wfg-space-lg);
	padding-bottom: var(--wfg-space-md);
	border-bottom: 2px solid var(--wfg-border-light);
}

.wfg-form-block__title {
	font-size: var(--wfg-font-lg);
	/* 20px - Same size as card titles */
	font-weight: var(--wfg-font-semibold);
	color: var(--wfg-base);
	margin: 0 0 var(--wfg-space-sm) 0;
	line-height: var(--wfg-line-tight);
}

.wfg-form-block__subtitle {
	font-size: var(--wfg-font-sm);
	color: var(--wfg-text-secondary);
	margin: 0;
	line-height: var(--wfg-line-normal);
}

/* ==========================================================================
   Form Sections & Rows
   ========================================================================== */

.wfg-form-section {
	margin-bottom: var(--wfg-space-xl);
}

.wfg-form-section__title {
	font-size: var(--wfg-font-lg);
	font-weight: var(--wfg-font-semibold);
	color: var(--wfg-contrast);
	margin: 0 0 var(--wfg-space-md) 0;
}

.wfg-form-row {
	margin-bottom: var(--wfg-space-md);
}

/* Two-column layout (Mobile: stack, Tablet+: side-by-side) */
.wfg-form-row--two-columns {
	display: flex;
	flex-direction: column;
	gap: var(--wfg-space-md);
}

@media (min-width: 768px) {
	.wfg-form-row--two-columns {
		flex-direction: row;
		gap: var(--wfg-space-lg);
	}

	.wfg-form-row--two-columns>.wfg-form-col {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ==========================================================================
   Form Fields (Mobile-First)
   ========================================================================== */

.wfg-form-field {
	margin-bottom: var(--wfg-space-md);
}

.wfg-form-field__label {
	display: block;
	font-size: var(--wfg-font-sm);
	font-weight: var(--wfg-font-medium);
	color: var(--wfg-text-dark);
	margin-bottom: var(--wfg-space-sm);
	line-height: var(--wfg-line-normal);
}

.wfg-form-field__label--required::after {
	content: ' *';
	color: var(--wfg-danger);
}

.wfg-form-field__input,
.wfg-form-field__select,
.wfg-form-field__textarea {
	width: 100%;
	min-height: var(--wfg-touch-target);
	padding: var(--wfg-space-sm) var(--wfg-space-md);
	font-size: var(--wfg-font-base);
	font-family: var(--wfg-font-family);
	color: var(--wfg-text-primary);
	background: var(--wfg-bg-input);
	border: 2px solid var(--wfg-border-color);
	border-radius: var(--wfg-radius-md);
	transition: border-color var(--wfg-transition-base);
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Dropdown arrow for select boxes */
.wfg-form-field__select,
select.wfg-form-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a6953' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
	cursor: pointer;
}

.wfg-form-field__input:focus,
.wfg-form-field__select:focus,
.wfg-form-field__textarea:focus {
	outline: none;
	border-color: var(--wfg-primary);
	box-shadow: 0 0 0 3px rgba(94, 133, 103, 0.1);
}

.wfg-form-field__input:disabled,
.wfg-form-field__select:disabled,
.wfg-form-field__textarea:disabled {
	background: var(--wfg-bg-hover);
	cursor: not-allowed;
	opacity: 0.6;
}

/* Field validation states */
.wfg-form-field__input.is-valid,
.wfg-form-field__select.is-valid {
	border-color: var(--wfg-success);
}

.wfg-form-field__input.is-invalid,
.wfg-form-field__select.is-invalid,
.wfg-form-field__input.wfg-field-error,
.wfg-form-field__select.wfg-field-error,
.wfg-form-field__textarea.wfg-field-error {
	border-color: var(--wfg-danger);
	background-color: #fff5f5;
}

.wfg-field-error-message {
	display: none;
	/* Hidden by default */
	font-size: var(--wfg-font-sm);
	color: var(--wfg-danger);
	margin-top: var(--wfg-space-xs);
	min-height: 1.2em;
	font-weight: 500;
}

/* Show error message when it has content */
.wfg-field-error-message:not(:empty) {
	display: block;
}

/* ==========================================================================
   Buttons (Mobile-First, Touch-Friendly)
   ========================================================================== */

.wfg-btn {
	display: inline-block;
	min-height: var(--wfg-touch-target);
	padding: var(--wfg-space-sm) var(--wfg-space-lg);
	font-size: var(--wfg-font-base);
	font-weight: var(--wfg-font-semibold);
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--wfg-radius-md);
	cursor: pointer;
	transition: all var(--wfg-transition-base);
	box-sizing: border-box;
}

.wfg-btn--primary {
	color: #fff;
	background: var(--wfg-primary);
	border-color: var(--wfg-primary);
}

.wfg-btn--primary:hover:not(:disabled) {
	background: var(--wfg-accent6);
	border-color: var(--wfg-accent6);
	transform: translateY(-1px);
	box-shadow: var(--wfg-shadow-md);
}

.wfg-btn--secondary {
	color: #fff;
	background: var(--wfg-icon-color);
	/* Clay Rose #c48c6e */
	border-color: var(--wfg-icon-color);
}

.wfg-btn--secondary:hover:not(:disabled) {
	background: #b37b5e;
	/* Darker Clay Rose on hover */
	border-color: #b37b5e;
	transform: translateY(-1px);
}

.wfg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wfg-btn__icon {
	margin-left: var(--wfg-space-xs);
}

/* Full-width button on mobile */
@media (max-width: 767px) {
	.wfg-btn--mobile-full {
		width: 100%;
		display: block;
	}
}

/* ==========================================================================
   Alerts & Messages
   ========================================================================== */

.wfg-alert {
	padding: var(--wfg-space-md);
	border-radius: var(--wfg-radius-md);
	margin-bottom: var(--wfg-space-md);
	border: 1px solid transparent;
	display: flex;
	align-items: flex-start;
	gap: var(--wfg-space-sm);
}

.wfg-alert--info {
	background: #f0e2d5;  /* Accent 3 - BRAND COLOR */
	border-color: var(--wfg-accent6);  /* Dark Sage #4a6953 */
	color: #333;  /* Dark grey for readability */
}

.wfg-alert--success {
	background: #e8f5e8;  /* Light green - complementary to Soft Sage */
	border-color: var(--wfg-base);  /* Soft Sage #5e8567 - BRAND COLOR */
	color: var(--wfg-accent6);  /* Dark Sage for text */
}

.wfg-alert--warning {
	background: #dbd9d3;  /* Misty White (Accent 4) - EXACT match to Important Notice */
	border: none;  /* NO BORDER - matches Important Notice box */
	color: #333;  /* Dark grey text for readability */
}

.wfg-alert--danger {
	background: #f0e2d5;  /* Accent 3 - BRAND COLOR */
	border-color: var(--wfg-accent1);  /* Clay Rose #c48c6e */
	color: #333;  /* Dark grey for readability */
}

.wfg-alert--bordered {
	border-width: 2px;
}

.wfg-alert__icon {
	font-size: var(--wfg-font-lg);
	flex-shrink: 0;
}

/* ==========================================================================
   Checkbox & Radio
   ========================================================================== */

.wfg-checkbox,
.wfg-radio {
	display: flex;
	align-items: flex-start;
	gap: var(--wfg-space-sm);
	margin-bottom: var(--wfg-space-md);
}

.wfg-checkbox__input,
.wfg-radio__input {
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var(--wfg-icon-color);
	/* Clay Rose #c48c6e */
}

.wfg-checkbox__label,
.wfg-radio__label {
	font-size: var(--wfg-font-base);
	color: var(--wfg-text-primary);
	cursor: pointer;
	line-height: var(--wfg-line-normal);
}

/* ==========================================================================
   Signature Pad
   ========================================================================== */

.wfg-signature-pad {
	background: #fff;
	border: 2px solid var(--wfg-border-color);
	border-radius: var(--wfg-radius-md);
	padding: var(--wfg-space-md);
	margin-bottom: var(--wfg-space-md);
}

.wfg-signature-pad__canvas {
	width: 100%;
	height: 200px;
	border: 1px solid var(--wfg-border-light);
	border-radius: var(--wfg-radius-sm);
	touch-action: none;
	cursor: crosshair;
}

.wfg-signature-pad__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--wfg-space-sm);
}

/* ==========================================================================
   Progress Indicator
   ========================================================================== */

.wfg-progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--wfg-space-xl);
	padding: var(--wfg-space-md) 0;
}

.wfg-progress__step {
	flex: 1;
	text-align: center;
	position: relative;
}

.wfg-progress__step--active {
	color: var(--wfg-primary);
	font-weight: var(--wfg-font-semibold);
}

.wfg-progress__step--completed {
	color: var(--wfg-success);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.wfg-loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(94, 133, 103, 0.2);
	border-top-color: var(--wfg-primary);
	border-radius: 50%;
	animation: wfg-spin 0.8s linear infinite;
}

@keyframes wfg-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Page Header (Warm Beige background with Soft Sage title)
   ========================================================================== */

.wfg-page-header {
	background: var(--wfg-accent2);
	border-radius: var(--wfg-radius-lg);
	padding: var(--wfg-space-lg);
	margin-bottom: var(--wfg-space-xl);
	text-align: center;
	box-shadow: var(--wfg-shadow-sm);
}

.wfg-page-title {
	font-size: var(--wfg-font-3xl);
	font-weight: var(--wfg-font-bold);
	color: var(--wfg-base);
	margin: 0 0 var(--wfg-space-sm) 0;
	line-height: var(--wfg-line-tight);
}

.wfg-page-subtitle {
	font-size: var(--wfg-font-md);
	color: var(--wfg-contrast);
	margin: 0;
	line-height: var(--wfg-line-normal);
}

/* ==========================================================================
   T&C Content Display
   ========================================================================== */

.wfg-tc-content {
	padding: var(--wfg-space-md);
	font-size: var(--wfg-font-base);
	/* 16px - Standard readable size */
	line-height: var(--wfg-line-relaxed);
}

.wfg-tc-content h1,
.wfg-tc-content h2,
.wfg-tc-content h3 {
	color: var(--wfg-base);
	margin-top: var(--wfg-space-lg);
	margin-bottom: var(--wfg-space-sm);
}

/* T&C heading sizes - more controlled and professional */
.wfg-tc-content h1 {
	font-size: 24px;
	/* Main title - controlled size */
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	/* Center main titles */
}

.wfg-tc-content h2 {
	font-size: 20px;
	/* Section headings */
	font-weight: 600;
	line-height: 1.4;
	color: var(--wfg-dark-sage);
}

.wfg-tc-content h3 {
	font-size: 18px;
	/* Sub-section headings */
	font-weight: 600;
	line-height: 1.4;
}

/* Center logos and images in T&C */
.wfg-tc-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}

/* Center text in first paragraph after logo (typically the main title) */
.wfg-tc-content>p:first-of-type {
	text-align: center;
}

/* Form block content text - standard body size */
.wfg-form-block__content p {
	font-size: var(--wfg-font-base);
	/* 16px - STANDARD */
	line-height: 1.6;
	margin-bottom: var(--wfg-space-sm);
}

.wfg-tc-content p {
	margin-bottom: var(--wfg-space-md);
}

.wfg-tc-content ul,
.wfg-tc-content ol {
	margin-left: var(--wfg-space-lg);
	margin-bottom: var(--wfg-space-md);
}

/* ==========================================================================
   Form Actions Container
   ========================================================================== */

.wfg-form-actions {
	padding: var(--wfg-space-md);
	/* Equal top/bottom padding */
	text-align: center;
}

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

@media (max-width: 767px) {
	.wfg-hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) {
	.wfg-hide-tablet {
		display: none;
	}
}

@media (min-width: 1025px) {
	.wfg-hide-desktop {
		display: none;
	}
}

/* ==========================================================================
   Onboarding Categorization (Matches v1 Design)
   ========================================================================== */

.wfg-categorization-page {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--wfg-space-lg);
}

/* Title Banner */
.wfg-cat-title-banner {
	background: var(--wfg-accent2);
	padding: var(--wfg-space-lg) var(--wfg-space-xl);
	text-align: center;
	border-radius: var(--wfg-radius-md);
	margin-bottom: var(--wfg-space-xl);
	font-size: var(--wfg-font-md);
	font-weight: 500;
	color: var(--wfg-contrast);
}

/* Option Cards */
.wfg-cat-option-card {
	position: relative;
	background: var(--wfg-bg-card);
	border-radius: var(--wfg-radius-lg);
	box-shadow: var(--wfg-shadow-sm);
	margin-bottom: var(--wfg-space-lg);
	transition: all 0.3s ease;
}

.wfg-cat-option-card:hover {
	box-shadow: var(--wfg-shadow-md);
	transform: translateY(-2px);
}

/* Hide default radio button */
.wfg-cat-radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Label covers entire card */
.wfg-cat-label {
	display: block;
	padding: var(--wfg-space-xl);
	cursor: pointer;
	position: relative;
}

/* Custom Radio Button (top right) */
.wfg-cat-radio-indicator {
	position: absolute;
	top: var(--wfg-space-lg);
	right: var(--wfg-space-lg);
	width: 24px;
	height: 24px;
	border: 2px solid var(--wfg-border-medium);
	border-radius: 50%;
	background: var(--wfg-bg-card);
	transition: all 0.3s ease;
}

.wfg-cat-radio-indicator::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wfg-primary);
	transition: transform 0.3s ease;
}

.wfg-cat-radio:checked+.wfg-cat-label .wfg-cat-radio-indicator {
	border-color: var(--wfg-primary);
}

.wfg-cat-radio:checked+.wfg-cat-label .wfg-cat-radio-indicator::after {
	transform: translate(-50%, -50%) scale(1);
}

/* Selected card highlight */
.wfg-cat-radio:checked+.wfg-cat-label {
	background: var(--wfg-accent3);
	border-radius: var(--wfg-radius-lg);
}

/* Content */
.wfg-cat-content {
	padding-right: var(--wfg-space-xxl);
}

.wfg-cat-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--wfg-base);
	margin-bottom: var(--wfg-space-sm);
}

.wfg-cat-subtitle {
	font-size: var(--wfg-font-sm);
	color: #808080;
	margin-bottom: var(--wfg-space-lg);
	line-height: 1.5;
}

/* Feature List with Checkmarks */
.wfg-cat-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wfg-cat-features li {
	position: relative;
	padding-left: var(--wfg-space-lg);
	margin-bottom: var(--wfg-space-sm);
	font-size: var(--wfg-font-sm);
	color: var(--wfg-contrast);
}

.wfg-cat-features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: #D96B5B;
	font-weight: bold;
	font-size: 14px;
}

/* Privacy Section */
.wfg-cat-privacy {
	display: flex;
	gap: var(--wfg-space-md);
	background: var(--wfg-base);
	padding: var(--wfg-space-lg);
	border-radius: var(--wfg-radius-md);
	margin-bottom: var(--wfg-space-xl);
	align-items: flex-start;
}

.wfg-cat-privacy__icon {
	flex-shrink: 0;
	color: var(--wfg-accent2);
	display: flex;
	align-items: center;
}

.wfg-cat-privacy__content {
	flex: 1;
}

.wfg-cat-privacy__title {
	font-size: var(--wfg-font-md);
	font-weight: 600;
	color: var(--wfg-accent2);
	margin: 0 0 var(--wfg-space-sm) 0;
}

.wfg-cat-privacy__text {
	font-size: var(--wfg-font-sm);
	color: var(--wfg-accent2);
	margin: 0;
	line-height: 1.6;
	opacity: 0.95;
}

/* Submit Button Container */
.wfg-cat-submit-container {
	background: #fff;
	border: 1px solid var(--wfg-border-light);
	border-radius: var(--wfg-radius-md);
	padding: var(--wfg-space-lg);
	text-align: center;
}

.wfg-cat-submit-button {
	display: inline-flex;
	align-items: center;
	gap: var(--wfg-space-sm);
	background: var(--wfg-base);
	color: var(--wfg-accent2);
	border: none;
	padding: var(--wfg-space-md) var(--wfg-space-xl);
	border-radius: var(--wfg-radius-md);
	font-size: var(--wfg-font-md);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 280px;
	justify-content: center;
}

.wfg-cat-submit-button:hover {
	background: var(--wfg-accent6);
	transform: translateY(-2px);
	box-shadow: var(--wfg-shadow-md);
}

.wfg-cat-submit-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wfg-cat-submit-button svg {
	flex-shrink: 0;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
	.wfg-categorization-page {
		padding: var(--wfg-space-md);
	}

	.wfg-cat-title-banner {
		padding: var(--wfg-space-md);
		font-size: var(--wfg-font-sm);
	}

	.wfg-cat-label {
		padding: var(--wfg-space-md);
	}

	.wfg-cat-content {
		padding-right: var(--wfg-space-lg);
	}

	.wfg-cat-title {
		font-size: 18px;
	}

	.wfg-cat-submit-button {
		width: 100%;
		min-width: auto;
	}
}

/* ==========================================================================
   Dashboard Styles
   ========================================================================== */

.wfg-dashboard-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wfg-space-md);
}

.wfg-dashboard-header {
	margin-bottom: var(--wfg-space-xl);
	text-align: center;
}

.wfg-dashboard-title {
	font-size: var(--wfg-font-lg);
	color: var(--wfg-base);
	margin-bottom: var(--wfg-space-sm);
}

.wfg-dashboard-subtitle {
	font-size: var(--wfg-font-md);
	color: var(--wfg-contrast);
	margin: 0;
}

.wfg-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--wfg-space-md);
	background: var(--wfg-bg-card);
	border: 1px solid var(--wfg-border-light);
	border-radius: var(--wfg-radius-md);
	overflow: hidden;
}

.wfg-dashboard-table thead {
	background: var(--wfg-accent3);
}

.wfg-dashboard-table th,
.wfg-dashboard-table td {
	padding: var(--wfg-space-md);
	text-align: left;
	border-bottom: 1px solid var(--wfg-border-light);
}

.wfg-dashboard-table th {
	font-weight: 600;
	color: var(--wfg-contrast);
}

.wfg-dashboard-table tbody tr:hover {
	background: var(--wfg-accent3);
}

.wfg-dashboard-table tbody tr:last-child td {
	border-bottom: none;
}

@media (max-width: 767px) {
	.wfg-dashboard-table {
		font-size: var(--wfg-font-sm);
	}

	.wfg-dashboard-table th,
	.wfg-dashboard-table td {
		padding: var(--wfg-space-sm);
	}
}

/* ==========================================================================
   Page Banner Component
   ========================================================================== */

.wfg-page-banner {
	background: var(--wfg-bg-banner);
	padding: var(--wfg-space-lg) var(--wfg-space-xl);
	text-align: center;
	border-radius: var(--wfg-radius-md);
	margin-bottom: var(--wfg-space-xl);
	box-sizing: border-box;
}

.wfg-page-banner__content {
	max-width: 800px;
	margin: 0 auto;
}

.wfg-page-banner__title {
	font-size: var(--wfg-font-xl);
	font-weight: var(--wfg-font-semibold);
	color: var(--wfg-text-primary);
	margin: 0 0 var(--wfg-space-sm) 0;
	line-height: var(--wfg-line-tight);
}

.wfg-page-banner__subtitle {
	font-size: var(--wfg-font-base);
	color: var(--wfg-text-secondary);
	margin: 0;
	line-height: var(--wfg-line-normal);
}

@media (max-width: 767px) {
	.wfg-page-banner {
		padding: var(--wfg-space-md);
	}

	.wfg-page-banner__title {
		font-size: var(--wfg-font-lg);
	}

	.wfg-page-banner__subtitle {
		font-size: var(--wfg-font-sm);
	}
}


/* ================================================================
   Dashboard Sections (inside main white container)
   ================================================================ */
.wfg-dashboard-section {
	padding: 24px 30px;
	border-bottom: 1px solid #e9ecef;
}

.wfg-dashboard-section:last-child {
	border-bottom: none;
	padding-bottom: 30px;
}

.wfg-dashboard-section:first-child {
	padding-top: 30px;
}

/* Main white container for dashboard - needs generous padding */
.wfg-page-wrapper .wfg-form-block--white {
	padding: 30px !important;
	/* Same as other forms */
	margin: 0 30px 20px 30px !important;
	/* Left/right margins + bottom margin */
}

/* Mobile: reduce padding */
@media (max-width: 768px) {
	.wfg-page-wrapper .wfg-form-block--white {
		padding: 20px !important;
		margin: 0 10px 20px 10px !important;
	}
}

/* Dashboard Booking Items */
.wfg-dashboard-booking-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--wfg-color-neutral-sand);
}

.wfg-dashboard-booking-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wfg-dashboard-booking-info h3 {
	font-size: 18px;
	color: var(--wfg-color-dark-sage);
	margin: 0 0 8px 0;
}

.wfg-dashboard-booking-info p {
	font-size: 16px;
	color: var(--wfg-color-earth-grey);
	margin: 0 0 15px 0;
}

/* Booking Session Cards (V1 style - icon left, text middle, button right) */
.booking-session-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.booking-session-info {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1;
}

.booking-session-icon {
	flex-shrink: 0;
}

.booking-session-details h3 {
	margin: 0 0 5px 0;
	font-size: 18px;
	color: #4a6953;
	font-weight: 600;
}

.booking-session-details p {
	margin: 0;
	font-size: 16px;
	color: #666;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
	.booking-session-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.booking-session-item .wfg-button {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Buttons - V2 Standard Colors
   ========================================================================== */

.wfg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	gap: 6px;
}

.wfg-button .material-icons {
	margin: 0 !important;
	flex-shrink: 0;
	color: inherit;
	font-size: 18px;
}

.wfg-button--primary .material-icons {
	color: #ffffff !important;
}

.wfg-button--secondary .material-icons {
	color: #ffffff !important;
}

.wfg-button-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	text-align: center;
	flex: 1;
}

.wfg-button--primary {
	background: #c48c6e;
	/* Clay Rose */
	color: #ffffff;
}

.wfg-button--primary:hover {
	background: #b37d5f;
	/* Darker Clay Rose */
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(196, 140, 110, 0.3);
}

.wfg-button--secondary {
	background: #4a6953;
	/* Dark Sage */
	color: #ffffff;
}

.wfg-button--secondary:hover {
	background: #5e8567;
	/* Soft Sage */
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(74, 105, 83, 0.3);
}

.wfg-button--disabled {
	background: #d6d6d6;
	color: #888;
	cursor: not-allowed;
	box-shadow: none;
}

.wfg-button--disabled:hover {
	transform: none;
	box-shadow: none;
}

/* Icon inside button */
.wfg-button .material-icons {
	vertical-align: middle;
	font-size: 18px;
	margin-right: 4px;
}

/* Appointment Cards - V1 Style */
.appointment-card {
	background: white;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.appointment-details {
	flex: 1;
}

/* Mobile: stack button below details */
@media (max-width: 768px) {
	.appointment-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.appointment-actions {
		width: 100%;
		margin-top: 15px;
	}

	.appointment-actions .wfg-button {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Appointment Cards (Dashboard)
   ========================================================================== */

.appointment-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.appointment-details {
	flex: 1;
}

.appointment-card__badge {
	margin-bottom: 10px;
}

.appointment-card__title {
	margin: 0 0 12px 0;
	font-size: 18px;
	color: var(--wfg-accent6);  /* Dark Sage #4a6953 - BRAND COLOR */
	font-weight: 600;
}

.appointment-card__session {
	margin: 0 0 12px 0;
	padding: 6px 12px;
	background: var(--wfg-accent3);  /* Calm Cream #f0e2d5 */
	border-left: 3px solid var(--wfg-accent1);  /* Terracotta #c48c6e */
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.appointment-card__detail {
	margin-bottom: 8px;
	color: #666;
	font-size: 15px;
	display: flex;
	align-items: center;
}

.appointment-card__detail:last-child {
	margin-bottom: 0;
}

.appointment-card__icon {
	font-size: 16px;
	vertical-align: middle;
	margin-right: 6px;
	color: var(--wfg-accent1);  /* Clay Rose #c48c6e - BRAND COLOR */
}

.appointment-card__client-type {
	color: var(--wfg-base);  /* Soft Sage #5e8567 - BRAND COLOR */
	font-size: 0.9em;
}

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

.wfg-status-badge {
	background: var(--wfg-accent5);  /* Default: Accent 5 */
	color: white;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
}

.wfg-status-badge--success {
	background: var(--wfg-base);  /* Soft Sage #5e8567 - BRAND COLOR */
}

.wfg-status-badge--warning {
	background: var(--wfg-accent1);  /* Clay Rose #c48c6e - BRAND COLOR */
}

.wfg-status-badge--danger {
	background: var(--wfg-accent1);  /* Clay Rose #c48c6e - Used for expired too */
}

/* ==========================================================================
   Alert Title & Message Helpers
   ========================================================================== */

.wfg-alert__title {
	margin: 0 0 8px 0;
	font-weight: 600;
	font-size: 16px;
}

.wfg-alert__message {
	margin: 0 0 12px 0;
	line-height: 1.5;
}

.wfg-alert__message:last-child {
	margin-bottom: 0;
}

/* Appointment Expired Notice (Compact) */
.appointment-expired-notice {
	max-width: 250px;
	text-align: center;
}

/* Appointment Card Note */
.appointment-card__note {
	display: block;
	text-align: center;
	margin-top: 5px;
	color: #999;
}

/* ==========================================================================
   Current Appointment Section (Reschedule Page)
   ========================================================================== */

.wfg-current-appointment {
	background: #f0e2d5;  /* Calm Cream - STANDARD */
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 24px;
	box-sizing: border-box;
}

.wfg-current-appointment__title {
	font-size: 1.3rem;  /* 20-21px - matches form block title */
	font-weight: 600;  /* Semi-bold */
	color: #4a6953;  /* Dark Sage - STANDARD */
	margin: 0 0 16px 0;
	line-height: 1.4;
}

.wfg-current-appointment__details {
	font-size: 1rem;  /* 16px - body text */
	color: #333;  /* Dark grey - primary text */
	line-height: 1.6;
}

.wfg-current-appointment__details p {
	margin: 0 0 8px 0;
}

.wfg-current-appointment__details p:last-child {
	margin-bottom: 0;
}

.wfg-current-appointment__details strong {
	font-weight: 600;
	color: #4a6953;  /* Dark Sage - STANDARD for labels */
}

/* Mobile: adjust padding */
@media (max-width: 767px) {
	.wfg-current-appointment {
		padding: 16px;
		margin-bottom: 20px;
	}
	
	.wfg-current-appointment__title {
		font-size: 1.2rem;  /* Slightly smaller on mobile */
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   Reschedule Page Specific Styles - Work WITH WordPress, not against it
   ONLY applies to page-id-1295 (reschedule page)
   ========================================================================== */

/* Hide duplicate WordPress page title */
body.page-id-1295 h1.wp-block-post-title {
	display: none !important;
}

/* Override WordPress's constrained layout alignment - MUST NOT INTERFERE */
body.page-id-1295 .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Force main wrapper to be full width and use flexbox for centering */
body.page-id-1295 main.wp-block-group.has-global-padding.is-layout-constrained {
	display: flex !important;
	justify-content: center !important;
	align-items: flex-start !important;
	max-width: 100% !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Force entry-content to center everything */
body.page-id-1295 .entry-content.wp-block-post-content {
	display: flex !important;
	justify-content: center !important;
	align-items: flex-start !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Neutralize WordPress's default alignment on the reschedule page wrapper group */
body.page-id-1295 .wp-block-group.alignfull.has-global-padding {
	display: flex !important;
	justify-content: center !important;
	max-width: 100% !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Let WordPress handle the page - just style your content */
.wfg-reschedule-page {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
	max-width: 800px !important;
	display: block !important;
	/* Prevent flexbox from stretching this element full-width */
	flex: 0 0 auto !important;
}

/* Outer WHITE container - like dashboard's main white card */
.wfg-reschedule-page .wfg-reschedule-container {
	background: #ffffff !important;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	padding: 32px;
	width: 100% !important;
	max-width: 800px !important;
	box-sizing: border-box;
	margin: 0 auto !important;
}

/* Banner - Warm Beige with Dark Sage border */
.wfg-reschedule-page .wfg-banner {
	background: #dabea8 !important;  /* Warm Beige */
	border: 2px solid #4a6953 !important;  /* Dark Sage border */
	border-radius: 10px;
	padding: 24px;
	margin: 0 0 24px 0 !important;
	max-width: 100%;
}

.wfg-reschedule-page .wfg-banner__title {
	font-size: 1.8rem !important;
	font-weight: 700 !important;
	color: #4a6953 !important;  /* Dark Sage title */
	line-height: 1.3;
	margin: 0 !important;
}

.wfg-reschedule-page .wfg-banner__subtitle {
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: #666 !important;
	line-height: 1.5;
	margin: 8px 0 0 0 !important;
}

/* Content container - transparent to show Misty White */
.wfg-reschedule-page .wfg-content-container {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Current Appointment - White card with Dark Sage border */
.wfg-reschedule-page .wfg-current-appointment {
	background: #ffffff !important;  /* White */
	border: 2px solid #4a6953 !important;  /* Dark Sage border */
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}

/* AHB Calendar Wrapper - White card with Dark Sage border */
.wfg-reschedule-page .wfg-ahb-calendar-wrapper {
	background: #ffffff !important;
	border: 2px solid #4a6953 !important;  /* Dark Sage border */
	border-radius: 10px;
	padding: 28px;
	margin-bottom: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Reschedule Actions (Buttons) */
.wfg-reschedule-page .wfg-reschedule-actions {
	text-align: center;
	padding: 24px 0 0 0;
	margin-top: 24px;
}

.wfg-reschedule-page .wfg-reschedule-actions .wfg-btn {
	margin: 0 8px;
}

/* Mobile adjustments - ONLY for reschedule page */
@media (max-width: 767px) {
	/* Override WordPress mobile layout */
	body.page-id-1295 main.wp-block-group.has-global-padding.is-layout-constrained {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	
	body.page-id-1295 .wp-block-group.alignfull.has-global-padding {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	
	/* Reschedule page wrapper - responsive on mobile */
	.wfg-reschedule-page {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	/* Main white container - responsive on mobile */
	.wfg-reschedule-page .wfg-reschedule-container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 16px !important;
		margin: 0 !important;
		border-radius: 8px;
		box-sizing: border-box;
	}
	
	/* Banner - smaller padding on mobile */
	.wfg-reschedule-page .wfg-banner {
		padding: 16px !important;
		margin-bottom: 16px !important;
		border-radius: 8px;
	}
	
	.wfg-reschedule-page .wfg-banner__title {
		font-size: 1.4rem !important;
		line-height: 1.3;
	}
	
	.wfg-reschedule-page .wfg-banner__subtitle {
		font-size: 0.9rem !important;
	}
	
	/* Current Appointment - mobile styling */
	.wfg-reschedule-page .wfg-current-appointment {
		padding: 16px !important;
		margin-bottom: 16px !important;
		border-radius: 8px;
	}
	
	.wfg-reschedule-page .wfg-current-appointment__title {
		font-size: 1.1rem !important;
	}
	
	.wfg-reschedule-page .wfg-current-appointment__details {
		font-size: 0.9rem !important;
	}
	
	/* AHB Calendar - CRITICAL: ensure it stays in container on mobile */
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper {
		padding: 12px !important;
		margin-bottom: 16px !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 8px;
	}
	
	/* Force AHB calendar to be responsive */
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper #fbuilder,
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper .cpp_form,
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper .ahb_m2 {
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: visible !important;
	}
	
	/* Calendar widget itself - make it fit */
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper .ui-datepicker {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 0.85rem !important;
	}
	
	/* Time slot badges - stack vertically on mobile */
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper .availableslot {
		display: block !important;
		width: 100% !important;
		margin-bottom: 8px;
	}
	
	.wfg-reschedule-page .wfg-ahb-calendar-wrapper .availableslot a {
		display: block !important;
		width: 100% !important;
		padding: 12px !important;
		margin: 0 0 8px 0 !important;
		text-align: center;
		box-sizing: border-box;
	}
	
	/* Buttons - stack vertically, full width on mobile */
	.wfg-reschedule-page .wfg-reschedule-actions {
		padding: 16px 0 0 0 !important;
		margin-top: 16px !important;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	
	.wfg-reschedule-page .wfg-reschedule-actions .wfg-btn {
		width: 100% !important;
		margin: 0 !important;
		padding: 14px 20px !important;
		font-size: 1rem !important;
		box-sizing: border-box;
		display: block !important;
		text-align: center;
	}
}