/**
 * Frontend Styles
 *
 * @package    IdeaForge_Sync
 * @subpackage IdeaForge_Sync/frontend/css
 */

/* ==========================================================================
   Calendar Styles
   ========================================================================== */

.ideaforge-sync-calendar-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.ideaforge-sync-calendar-header {
	margin-bottom: 30px;
	text-align: center;
}

.ideaforge-sync-calendar-header .property-name {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 15px 0;
	color: #333;
}

/* Calendar Legend */
.calendar-legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 15px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #666;
}

.legend-color {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	display: inline-block;
	border: 1px solid #ddd;
}

.legend-available {
	background-color: #e8f5e9;
}

.legend-booked {
	background-color: #ffebee;
}

.legend-today {
	background-color: #fff3e0;
	border-color: #ff9800;
}

/* Calendar Grid */
.ideaforge-sync-calendars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

.ideaforge-sync-calendar-month {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.month-header h4 {
	text-align: center;
	margin: 0 0 15px 0;
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.ideaforge-sync-calendar-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.ideaforge-sync-calendar-grid thead th {
	padding: 10px 5px;
	text-align: center;
	font-weight: 600;
	font-size: 12px;
	color: #666;
	border-bottom: 2px solid #e0e0e0;
}

.ideaforge-sync-calendar-grid td {
	padding: 8px;
	text-align: center;
	border: 1px solid #f0f0f0;
	vertical-align: top;
	height: 60px;
	position: relative;
}

.ideaforge-sync-calendar-grid td.empty-cell {
	background: #fafafa;
	border: none;
}

.calendar-day {
	cursor: pointer;
	transition: all 0.2s ease;
}

.calendar-day:hover:not(.past):not(.booked) {
	transform: scale(1.05);
	z-index: 1;
}

.calendar-day.available {
	background-color: #e8f5e9;
}

.calendar-day.available:hover {
	background-color: #c8e6c9;
}

.calendar-day.booked {
	background-color: #ffebee;
	cursor: not-allowed;
}

/* Explicitly prevent hover transform on booked and past dates */
.calendar-day.booked:hover,
.calendar-day.past:hover {
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

.calendar-day.past {
	background-color: #f5f5f5;
	color: #bbb;
	cursor: not-allowed;
}

.calendar-day.today {
	background-color: #fff3e0;
	border: 2px solid #ff9800;
}

.day-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.day-number {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.day-price {
	font-size: 11px;
	color: #4caf50;
	font-weight: 600;
	margin-top: 2px;
}

.calendar-day.booked .day-price {
	display: none;
}

/* ==========================================================================
   Booking Form Styles
   ========================================================================== */

.ideaforge-sync-booking-form-wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.booking-form-header {
	text-align: center;
	margin-bottom: 30px;
}

.booking-form-header h3 {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: #333;
}

.booking-form-header .property-name {
	font-size: 18px;
	color: #666;
	margin: 0;
}

/* Form Sections */
.form-section {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-section legend {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	padding: 0 10px;
}

.form-row {
	margin-bottom: 20px;
}

.form-row:last-child {
	margin-bottom: 0;
}

.form-row label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
	font-size: 14px;
}

.form-row label .required {
	color: #d32f2f;
	margin-left: 2px;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s ease;
}

.form-row input:focus,
.form-row textarea:focus {
	outline: none;
	border-color: #2196f3;
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.form-row textarea {
	resize: vertical;
	min-height: 100px;
}

/* Booking Summary */
.booking-summary {
	background: #f5f5f5;
	padding: 15px;
	border-radius: 4px;
	margin-top: 15px;
}

.booking-summary p {
	margin: 5px 0;
	font-size: 14px;
	color: #333;
}

.booking-summary .total-price {
	font-size: 18px;
	color: #4caf50;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

/* Payment Methods */
.payment-methods {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.payment-method-option {
	display: flex;
	align-items: center;
	padding: 12px;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.payment-method-option:hover {
	border-color: #2196f3;
	background-color: #f5f5f5;
}

.payment-method-option input[type="radio"] {
	margin-right: 10px;
}

/* Checkbox Labels */
.checkbox-label {
	display: flex;
	align-items: center;
	font-size: 14px;
	cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
	margin-right: 10px;
}

/* Form Actions */
.form-actions {
	text-align: center;
	margin-top: 30px;
}

.ideaforge-sync-submit-btn {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	color: #fff;
	border: none;
	padding: 15px 40px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ideaforge-sync-submit-btn:hover {
	background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

.ideaforge-sync-submit-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Form Messages */
.form-messages {
	margin-top: 20px;
	padding: 15px;
	border-radius: 4px;
	font-size: 14px;
}

.form-messages.success {
	background-color: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #81c784;
}

.form-messages.error {
	background-color: #ffebee;
	color: #c62828;
	border: 1px solid #e57373;
}

/* ==========================================================================
   Property Info Styles
   ========================================================================== */

.ideaforge-sync-property-info {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.ideaforge-sync-property-info .property-name h3 {
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: #333;
}

.ideaforge-sync-property-info .property-location,
.ideaforge-sync-property-info .property-nightly-rate,
.ideaforge-sync-property-info .property-max-guests {
	margin-bottom: 15px;
}

.ideaforge-sync-property-info .property-description {
	line-height: 1.6;
	color: #666;
}

/* ==========================================================================
   Notices and Alerts
   ========================================================================== */

.ideaforge-sync-error,
.ideaforge-sync-info-notice,
.ideaforge-sync-upgrade-notice {
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
}

.ideaforge-sync-error {
	background-color: #ffebee;
	color: #c62828;
	border: 1px solid #e57373;
}

.ideaforge-sync-info-notice {
	background-color: #e3f2fd;
	color: #1565c0;
	border: 1px solid #64b5f6;
}

.ideaforge-sync-upgrade-notice {
	background-color: #fff3e0;
	color: #e65100;
	border: 1px solid #ffb74d;
}

.ideaforge-sync-upgrade-notice a {
	color: #e65100;
	font-weight: 600;
	text-decoration: underline;
}

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

.ideaforge-sync-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.ideaforge-sync-badge-airbnb {
	background-color: #ff5a5f;
	color: #fff;
}

.ideaforge-sync-badge-vrbo {
	background-color: #0073bb;
	color: #fff;
}

.ideaforge-sync-badge-website {
	background-color: #9c27b0;
	color: #fff;
}

.ideaforge-sync-badge-manual {
	background-color: #757575;
	color: #fff;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ideaforge-sync-calendars {
		grid-template-columns: 1fr;
	}

	.ideaforge-sync-calendar-grid td {
		height: 50px;
		padding: 5px;
	}

	.day-number {
		font-size: 14px;
	}

	.day-price {
		font-size: 10px;
	}

	.calendar-legend {
		gap: 10px;
	}

	.legend-item {
		font-size: 12px;
	}

	.booking-form-header h3 {
		font-size: 24px;
	}

	.form-section {
		padding: 15px;
	}

	.ideaforge-sync-submit-btn {
		width: 100%;
		padding: 12px;
	}
}

@media screen and (max-width: 480px) {
	.ideaforge-sync-calendar-wrapper,
	.ideaforge-sync-booking-form-wrapper,
	.ideaforge-sync-property-info {
		padding: 10px;
	}

	.ideaforge-sync-calendar-grid thead th {
		font-size: 10px;
		padding: 8px 2px;
	}

	.ideaforge-sync-calendar-grid td {
		height: 44px; /* Minimum touch target size for accessibility */
		padding: 4px;
		min-width: 44px; /* Ensure square touch targets */
	}

	.calendar-day {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.day-number {
		font-size: 13px;
	}

	.day-price {
		display: none; /* Hide prices on very small screens for clarity */
	}

	/* Improve calendar header on mobile */
	.ideaforge-sync-calendar-header .property-name {
		font-size: 22px;
	}

	.month-header h4 {
		font-size: 18px;
	}
}

/* ==========================================================================
   Booking Confirmation Styles
   ========================================================================== */

.ideaforge-sync-confirmation-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

/* Success Header */
.confirmation-header {
	text-align: center;
	margin-bottom: 40px;
}

.success-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.success-icon svg {
	animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successPop {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.confirmation-title {
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: #2e7d32;
}

.confirmation-subtitle {
	font-size: 18px;
	color: #666;
	margin: 0;
}

/* Confirmation Number */
.confirmation-number {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	color: #fff;
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	margin-bottom: 30px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.confirmation-number .label {
	font-size: 14px;
	opacity: 0.9;
	display: block;
	margin-bottom: 5px;
}

.confirmation-number .number {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Status Messages */
.confirmation-section {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.confirmation-section h2 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: #333;
}

.status-message {
	display: flex;
	gap: 15px;
	padding: 20px;
	border-radius: 8px;
	align-items: flex-start;
	line-height: 1.6;
}

.status-message svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.status-message strong {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
}

.status-message p {
	margin: 0;
	color: #666;
}

.status-pending-approval {
	background: #fff3e0;
	border: 2px solid #ff9800;
}

.status-payment-pending {
	background: #e3f2fd;
	border: 2px solid #2196f3;
}

.status-confirmed {
	background: #e8f5e9;
	border: 2px solid #4caf50;
}

.status-message .button {
	display: inline-block;
	margin-top: 15px;
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.status-message .button-primary {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-message .button-primary:hover {
	background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

/* Summary Grid */
.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.summary-item {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.summary-item:last-child {
	border-bottom: none;
}

.item-label {
	font-weight: 500;
	color: #666;
	font-size: 14px;
}

.item-value {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	text-align: right;
}

.summary-total {
	grid-column: 1 / -1;
	margin-top: 10px;
	padding-top: 15px;
	border-top: 2px solid #e0e0e0;
}

.summary-total .item-label,
.summary-total .item-value {
	font-size: 18px;
	color: #4caf50;
}

/* Special Requests */
.special-requests {
	margin-top: 15px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 4px;
	border-left: 4px solid #2196f3;
}

.special-requests strong {
	display: block;
	margin-bottom: 8px;
	color: #333;
}

.special-requests p {
	margin: 0;
	color: #666;
	line-height: 1.6;
}

/* Contact Details */
.contact-details {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 15px;
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #333;
}

.contact-item svg {
	flex-shrink: 0;
	color: #2196f3;
}

.contact-item a {
	color: #2196f3;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.contact-item a:hover {
	color: #1976d2;
	text-decoration: underline;
}

/* Action Buttons */
.confirmation-actions {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 30px;
	flex-wrap: wrap;
}

.confirmation-actions .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
}

.confirmation-actions .button:hover {
	border-color: #2196f3;
	color: #2196f3;
	background: #f5f5f5;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.confirmation-actions .button svg {
	flex-shrink: 0;
}

/* Email Reminder */
.email-reminder {
	display: flex;
	gap: 15px;
	padding: 20px;
	background: #e3f2fd;
	border-radius: 8px;
	margin-top: 30px;
	align-items: center;
}

.email-reminder svg {
	flex-shrink: 0;
	color: #2196f3;
}

.email-reminder p {
	margin: 0;
	color: #666;
	line-height: 1.6;
}

.email-reminder strong {
	color: #333;
}

/* Print Styles */
@media print {
	.ideaforge-sync-confirmation-wrapper {
		max-width: 100%;
		padding: 20px;
	}

	.confirmation-actions,
	.email-reminder {
		display: none;
	}

	.confirmation-section {
		border: 2px solid #ddd;
		page-break-inside: avoid;
	}

	.status-message {
		border: 2px solid #ddd;
		background: #fff !important;
	}

	.confirmation-number {
		background: #f5f5f5 !important;
		color: #333 !important;
		border: 2px solid #ddd;
	}

	a {
		color: #333 !important;
		text-decoration: none !important;
	}
}

/* Responsive - Tablet */
@media screen and (max-width: 768px) {
	.ideaforge-sync-confirmation-wrapper {
		padding: 30px 15px;
	}

	.confirmation-title {
		font-size: 26px;
	}

	.confirmation-subtitle {
		font-size: 16px;
	}

	.confirmation-number .number {
		font-size: 24px;
	}

	.summary-grid {
		grid-template-columns: 1fr;
	}

	.summary-item {
		flex-direction: column;
		gap: 5px;
	}

	.item-value {
		text-align: left;
		font-size: 16px;
	}

	.confirmation-section {
		padding: 20px;
	}

	.confirmation-section h2 {
		font-size: 20px;
	}

	.status-message {
		flex-direction: column;
		gap: 10px;
	}

	.confirmation-actions {
		flex-direction: column;
		width: 100%;
	}

	.confirmation-actions .button {
		width: 100%;
		justify-content: center;
	}
}

/* Responsive - Mobile */
@media screen and (max-width: 480px) {
	.ideaforge-sync-confirmation-wrapper {
		padding: 20px 10px;
	}

	.confirmation-header {
		margin-bottom: 25px;
	}

	.success-icon svg {
		width: 48px;
		height: 48px;
	}

	.confirmation-title {
		font-size: 22px;
	}

	.confirmation-subtitle {
		font-size: 14px;
	}

	.confirmation-number {
		padding: 15px;
	}

	.confirmation-number .number {
		font-size: 20px;
	}

	.confirmation-section {
		padding: 15px;
		margin-bottom: 20px;
	}

	.confirmation-section h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}

	.status-message {
		padding: 15px;
	}

	.email-reminder {
		flex-direction: column;
		padding: 15px;
	}

	.contact-details {
		gap: 10px;
	}

	.contact-item {
		font-size: 14px;
	}
}

/* ==========================================================================
   Booking Status Page Styles
   ========================================================================== */

.ideaforge-sync-status-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

/* Page Header */
.status-page-header {
	text-align: center;
	margin-bottom: 30px;
}

.status-page-header h1 {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: #333;
}

.booking-reference {
	font-size: 14px;
	color: #666;
	margin: 0;
}

/* Current Status Badge */
.current-status-badge {
	text-align: center;
	padding: 30px 20px;
	background: #fff;
	border: 3px solid;
	border-radius: 12px;
	margin-bottom: 30px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.status-icon-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}

.status-label {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 5px 0;
}

.status-date {
	font-size: 13px;
	color: #666;
	margin: 0;
}

/* Status Timeline */
.status-timeline {
	margin-bottom: 30px;
	padding: 20px 0;
}

.timeline-item {
	display: flex;
	gap: 20px;
	padding: 15px 0;
	position: relative;
}

.timeline-item:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 11px;
	top: 40px;
	bottom: -15px;
	width: 2px;
	background: #e0e0e0;
}

.timeline-item.completed::after {
	background: #4caf50;
}

.timeline-item.active::after {
	background: #2196f3;
}

.timeline-marker {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid #e0e0e0;
	background: #fff;
	flex-shrink: 0;
	z-index: 1;
}

.timeline-item.completed .timeline-marker {
	border-color: #4caf50;
	background: #4caf50;
	position: relative;
}

.timeline-item.completed .timeline-marker::after {
	content: '✓';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

.timeline-item.active .timeline-marker {
	border-color: #2196f3;
	background: #2196f3;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(33, 150, 243, 0);
	}
}

.timeline-content {
	flex: 1;
}

.timeline-content strong {
	display: block;
	font-size: 16px;
	color: #333;
	margin-bottom: 5px;
}

.timeline-content p {
	margin: 0;
	font-size: 14px;
	color: #666;
	line-height: 1.4;
}

/* Status Message Box */
.status-message-box {
	margin-bottom: 30px;
}

.status-message {
	display: flex;
	gap: 15px;
	padding: 20px;
	border-radius: 8px;
	align-items: flex-start;
	line-height: 1.6;
}

.status-message svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.status-message strong {
	display: block;
	margin-bottom: 8px;
	font-size: 16px;
}

.status-message p {
	margin: 0 0 10px 0;
	color: #666;
}

.status-message p:last-child {
	margin-bottom: 0;
}

.status-pending-approval {
	background: #fff3e0;
	border: 2px solid #ff9800;
}

.status-payment-pending {
	background: #e3f2fd;
	border: 2px solid #2196f3;
}

.status-confirmed {
	background: #e8f5e9;
	border: 2px solid #4caf50;
}

.status-declined {
	background: #ffebee;
	border: 2px solid #f44336;
}

.status-cancelled {
	background: #f5f5f5;
	border: 2px solid #757575;
}

.status-message .button {
	display: inline-block;
	margin-top: 15px;
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.status-message .button-primary {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	color: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	border: none;
}

.status-message .button-primary:hover {
	background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	transform: translateY(-2px);
}

/* Booking Details Section */
.status-section {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 25px;
	margin-bottom: 25px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-section h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: #333;
}

.details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 15px;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-label {
	font-weight: 500;
	color: #666;
	font-size: 14px;
}

.detail-value {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	text-align: right;
}

/* Status Actions */
.status-actions {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 30px;
	flex-wrap: wrap;
}

.status-actions .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
}

.status-actions .button:hover {
	border-color: #2196f3;
	color: #2196f3;
	background: #f5f5f5;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.status-actions .button svg {
	flex-shrink: 0;
}

/* Print Styles */
@media print {
	.ideaforge-sync-status-wrapper {
		max-width: 100%;
		padding: 20px;
	}

	.status-actions {
		display: none;
	}

	.status-section {
		border: 2px solid #ddd;
		page-break-inside: avoid;
	}

	.status-message {
		border: 2px solid #ddd;
		background: #fff !important;
	}

	.current-status-badge {
		border: 2px solid #ddd;
	}

	a {
		color: #333 !important;
		text-decoration: none !important;
	}

	.timeline-marker {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}

/* Responsive - Tablet */
@media screen and (max-width: 768px) {
	.ideaforge-sync-status-wrapper {
		padding: 30px 15px;
	}

	.status-page-header h1 {
		font-size: 24px;
	}

	.current-status-badge {
		padding: 25px 15px;
	}

	.status-label {
		font-size: 20px;
	}

	.status-icon-wrapper svg {
		width: 40px;
		height: 40px;
	}

	.details-grid {
		grid-template-columns: 1fr;
	}

	.detail-item {
		flex-direction: column;
		gap: 5px;
	}

	.detail-value {
		text-align: left;
		font-size: 16px;
	}

	.status-section {
		padding: 20px;
	}

	.status-section h3 {
		font-size: 18px;
	}

	.status-message {
		flex-direction: column;
		gap: 10px;
	}

	.status-actions {
		flex-direction: column;
		width: 100%;
	}

	.status-actions .button {
		width: 100%;
		justify-content: center;
	}

	.timeline-item {
		gap: 15px;
	}
}

/* Responsive - Mobile */
@media screen and (max-width: 480px) {
	.ideaforge-sync-status-wrapper {
		padding: 20px 10px;
	}

	.status-page-header {
		margin-bottom: 20px;
	}

	.status-page-header h1 {
		font-size: 22px;
	}

	.booking-reference {
		font-size: 13px;
	}

	.current-status-badge {
		padding: 20px 15px;
	}

	.status-icon-wrapper svg {
		width: 36px;
		height: 36px;
	}

	.status-label {
		font-size: 18px;
	}

	.status-section {
		padding: 15px;
		margin-bottom: 20px;
	}

	.status-section h3 {
		font-size: 17px;
		margin-bottom: 15px;
	}

	.status-message {
		padding: 15px;
	}

	.timeline-item {
		gap: 12px;
		padding: 12px 0;
	}

	.timeline-content strong {
		font-size: 15px;
	}

	.timeline-content p {
		font-size: 13px;
	}

	.contact-details {
		gap: 10px;
	}

	.contact-item {
		font-size: 14px;
	}
}
/* ==========================================================================
   Calendar Navigation Styles (Added for single-month view)
   ========================================================================== */

/* Navigation Container */
.ideaforge-sync-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
}

/* Navigation Buttons */
.calendar-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: all 0.2s ease;
}

.calendar-nav-btn:hover:not(:disabled) {
	border-color: #2196f3;
	color: #2196f3;
	background: #e3f2fd;
}

.calendar-nav-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.calendar-nav-btn svg {
	width: 20px;
	height: 20px;
}

/* Month/Year Selector */
.calendar-month-selector {
	display: flex;
	align-items: center;
	gap: 10px;
}

.calendar-month-select,
.calendar-year-select {
	padding: 10px 35px 10px 15px;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: all 0.2s ease;
}

.calendar-month-select:hover,
.calendar-year-select:hover {
	border-color: #2196f3;
}

.calendar-month-select:focus,
.calendar-year-select:focus {
	outline: none;
	border-color: #2196f3;
	box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);
}

.calendar-month-select {
	min-width: 140px;
}

.calendar-year-select {
	min-width: 90px;
}

/* Calendar Container (single month) */
.ideaforge-sync-calendar-container {
	position: relative;
}

/* Override multi-column grid - now single column centered */
.ideaforge-sync-calendars {
	display: block;
	max-width: 420px;
	margin: 0 auto;
}

/* Single month styling - larger and centered */
.ideaforge-sync-calendar-month {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	margin: 0 auto;
	max-width: 420px;
}

.month-header h4 {
	text-align: center;
	margin: 0 0 20px 0;
	font-size: 22px;
	font-weight: 700;
	color: #333;
}

/* Calendar grid improvements */
.ideaforge-sync-calendar-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
	table-layout: fixed;
}

.ideaforge-sync-calendar-grid thead th {
	padding: 12px 5px;
	text-align: center;
	font-weight: 600;
	font-size: 13px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ideaforge-sync-calendar-grid td {
	padding: 0;
	text-align: center;
	border: none;
	vertical-align: middle;
	height: auto;
	position: relative;
}

.ideaforge-sync-calendar-grid td.empty-cell {
	background: transparent;
}

/* Day cells - square aspect ratio */
.calendar-day {
	aspect-ratio: 1;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-day:hover:not(.past):not(.booked) {
	transform: scale(1.08);
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-day.available {
	background-color: #e8f5e9;
	border: 1px solid #c8e6c9;
}

.calendar-day.available:hover {
	background-color: #c8e6c9;
	border-color: #a5d6a7;
}

.calendar-day.booked {
	background-color: #ffebee;
	border: 1px solid #ffcdd2;
	cursor: not-allowed;
}

/* Explicitly prevent hover transform on booked and past dates (responsive) */
.calendar-day.booked:hover,
.calendar-day.past:hover {
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

.calendar-day.past {
	background-color: #f5f5f5;
	color: #bbb;
	cursor: default;
	border: 1px solid #eee;
}

.calendar-day.today {
	background-color: #fff3e0;
	border: 2px solid #ff9800;
	font-weight: 700;
}

.day-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4px;
}

.day-number {
	font-size: 15px;
	font-weight: 600;
	color: #333;
	line-height: 1;
}

.calendar-day.past .day-number {
	color: #bbb;
}

.day-price {
	font-size: 10px;
	color: #4caf50;
	font-weight: 600;
	margin-top: 2px;
	line-height: 1;
}

/* Loading Overlay */
.calendar-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	z-index: 10;
}

.calendar-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid #e0e0e0;
	border-top-color: #2196f3;
	border-radius: 50%;
	animation: calendarSpin 0.8s linear infinite;
}

@keyframes calendarSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Today Button */
.calendar-today-btn-wrapper {
	text-align: center;
	margin-top: 20px;
}

.calendar-today-btn {
	padding: 10px 24px;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.calendar-today-btn:hover {
	border-color: #2196f3;
	color: #2196f3;
	background: #e3f2fd;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ideaforge-sync-calendar-nav {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px;
	}

	.calendar-month-selector {
		order: -1;
		width: 100%;
		justify-content: center;
		margin-bottom: 5px;
	}

	.calendar-month-select,
	.calendar-year-select {
		padding: 8px 30px 8px 12px;
		font-size: 14px;
	}

	.calendar-month-select {
		min-width: 120px;
	}

	.calendar-nav-btn {
		width: 44px;
		height: 44px;
	}

	.ideaforge-sync-calendar-month {
		padding: 15px;
		border-radius: 8px;
	}

	.month-header h4 {
		font-size: 18px;
	}

	.ideaforge-sync-calendar-grid thead th {
		font-size: 11px;
		padding: 8px 2px;
	}

	.calendar-day {
		min-height: 44px;
		border-radius: 6px;
	}

	.day-number {
		font-size: 14px;
	}
}

@media screen and (max-width: 480px) {
	.ideaforge-sync-calendar-wrapper {
		padding: 10px;
	}

	.ideaforge-sync-calendar-nav {
		padding: 10px;
	}

	.calendar-month-selector {
		gap: 8px;
	}

	.calendar-month-select {
		min-width: 100px;
		font-size: 13px;
	}

	.calendar-year-select {
		min-width: 75px;
		font-size: 13px;
	}

	.ideaforge-sync-calendar-month {
		padding: 12px;
	}

	.ideaforge-sync-calendar-grid {
		border-spacing: 2px;
	}

	.ideaforge-sync-calendar-grid thead th {
		font-size: 10px;
		padding: 6px 1px;
	}

	.calendar-day {
		min-height: 40px;
	}

	.day-number {
		font-size: 13px;
	}

	.day-price {
		display: none; /* Hide prices on very small screens */
	}
}

/* ==========================================================================
   Avada/Fusion Builder Table Override - Fix Calendar Grid Layout
   Added: 2025-12-02 by MOG
   Issue: All days appearing under Monday/Sunday due to Avada CSS conflicts
   ========================================================================== */

/* Force proper table display - override Avada flex/grid styles */
.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid,
.ideaforge-sync-calendar-grid,
table.ideaforge-sync-calendar-grid {
	display: table !important;
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 4px !important;
	table-layout: fixed !important;
}

.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid thead,
.ideaforge-sync-calendar-grid thead,
table.ideaforge-sync-calendar-grid thead {
	display: table-header-group !important;
}

.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid tbody,
.ideaforge-sync-calendar-grid tbody,
table.ideaforge-sync-calendar-grid tbody {
	display: table-row-group !important;
}

.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid tr,
.ideaforge-sync-calendar-grid tr,
table.ideaforge-sync-calendar-grid tr {
	display: table-row !important;
}

.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid th,
.ideaforge-sync-calendar-grid th,
table.ideaforge-sync-calendar-grid th {
	display: table-cell !important;
	width: 14.28% !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.ideaforge-sync-calendar-wrapper table.ideaforge-sync-calendar-grid td,
.ideaforge-sync-calendar-grid td,
table.ideaforge-sync-calendar-grid td {
	display: table-cell !important;
	width: 14.28% !important;
	text-align: center !important;
	vertical-align: middle !important;
}

/* Reset any flex/grid properties that Avada might apply */
.ideaforge-sync-calendar-wrapper .ideaforge-sync-calendar-grid *,
.ideaforge-sync-calendar-grid * {
	flex: unset !important;
	flex-grow: unset !important;
	flex-shrink: unset !important;
	flex-basis: unset !important;
	grid-column: unset !important;
	grid-row: unset !important;
}

/* Ensure the calendar container doesn't get wrapped in flex */
.ideaforge-sync-calendar-container {
	display: block !important;
}

.ideaforge-sync-calendar-month {
	display: block !important;
}

/* Calendar day cells - ensure they render correctly */
.ideaforge-sync-calendar-grid td.calendar-day {
	display: table-cell !important;
	box-sizing: border-box !important;
}

.ideaforge-sync-calendar-grid td.empty-cell {
	display: table-cell !important;
}

/* End Avada Override Fix */

/* ==========================================================================
   Enlarged Calendar Styles - Better Readability
   ========================================================================== */

/* Make calendar container larger */
.ideaforge-sync-calendar-wrapper {
	max-width: 100% !important;
	padding: 30px !important;
}

/* Larger month cards */
.ideaforge-sync-calendar-month {
	padding: 25px !important;
	min-width: 400px !important;
}

/* Larger month header */
.month-header h4 {
	font-size: 26px !important;
	margin-bottom: 20px !important;
}

/* Larger day headers (Sun, Mon, etc.) */
.ideaforge-sync-calendar-grid thead th {
	padding: 15px 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

/* Larger day cells */
.ideaforge-sync-calendar-grid td {
	padding: 12px !important;
	height: 80px !important;
	min-width: 50px !important;
}

/* Larger day numbers */
.day-number {
	font-size: 22px !important;
	font-weight: 700 !important;
}

/* Larger prices */
.day-price {
	font-size: 14px !important;
	margin-top: 4px !important;
}

/* Calendar navigation buttons - larger */
.ideaforge-sync-calendar-nav button,
.calendar-nav button,
.ideaforge-sync-calendar-header button {
	padding: 12px 24px !important;
	font-size: 16px !important;
	min-width: 120px !important;
}

/* Legend items larger */
.legend-item {
	font-size: 16px !important;
}

.legend-color {
	width: 24px !important;
	height: 24px !important;
}

/* Property name larger */
.ideaforge-sync-calendar-header .property-name {
	font-size: 32px !important;
}

/* Responsive - single column on smaller screens but still large */
@media (max-width: 768px) {
	.ideaforge-sync-calendars {
		grid-template-columns: 1fr !important;
	}
	
	.ideaforge-sync-calendar-month {
		min-width: unset !important;
	}
	
	.ideaforge-sync-calendar-grid td {
		height: 70px !important;
	}
	
	.day-number {
		font-size: 18px !important;
	}
	
	.month-header h4 {
		font-size: 22px !important;
	}
}

/* End Enlarged Calendar Styles */

/* ==========================================================================
   Calendar Width Fix - Full Width Layout
   ========================================================================== */

/* Force calendar grid to use full container width */
.ideaforge-sync-calendars {
	display: block !important;
	width: 100% !important;
}

/* Each month takes full width */
.ideaforge-sync-calendar-month {
	width: 100% !important;
	max-width: 100% !important;
	min-width: unset !important;
	box-sizing: border-box !important;
	margin-bottom: 30px !important;
}

/* Table must fill the container */
.ideaforge-sync-calendar-grid,
table.ideaforge-sync-calendar-grid {
	width: 100% !important;
	min-width: 100% !important;
	table-layout: fixed !important;
}

/* Each column gets equal width (100% / 7 = 14.28%) */
.ideaforge-sync-calendar-grid th,
.ideaforge-sync-calendar-grid td,
table.ideaforge-sync-calendar-grid th,
table.ideaforge-sync-calendar-grid td {
	width: 14.28% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

/* Day cells - square-ish proportions based on width */
.ideaforge-sync-calendar-grid td {
	height: auto !important;
	aspect-ratio: 1 / 0.8 !important;
	padding: 15px 10px !important;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
	.ideaforge-sync-calendar-grid td {
		height: 90px !important;
	}
}

/* End Calendar Width Fix */

/* ==========================================================================
   Date Range Selection Highlighting
   ========================================================================== */

/* Selected date (check-in or check-out) */
.ideaforge-sync-calendar-grid .calendar-day.selected {
	background-color: #1976d2 !important;
	color: #fff !important;
}

.ideaforge-sync-calendar-grid .calendar-day.selected .day-number {
	color: #fff !important;
}

.ideaforge-sync-calendar-grid .calendar-day.selected .day-price {
	color: #bbdefb !important;
}

/* Check-in date (start of range) */
.ideaforge-sync-calendar-grid .calendar-day.range-start {
	background-color: #1565c0 !important;
	border-radius: 8px 0 0 8px !important;
}

/* Check-out date (end of range) */
.ideaforge-sync-calendar-grid .calendar-day.range-end {
	background-color: #1565c0 !important;
	border-radius: 0 8px 8px 0 !important;
}

/* Dates in between */
.ideaforge-sync-calendar-grid .calendar-day.range-middle {
	background-color: #42a5f5 !important;
	color: #fff !important;
	border-radius: 0 !important;
}

.ideaforge-sync-calendar-grid .calendar-day.range-middle .day-number {
	color: #fff !important;
}

.ideaforge-sync-calendar-grid .calendar-day.range-middle .day-price {
	color: #e3f2fd !important;
}

/* Hover effect on selected range */
.ideaforge-sync-calendar-grid .calendar-day.selected:hover,
.ideaforge-sync-calendar-grid .calendar-day.range-start:hover,
.ideaforge-sync-calendar-grid .calendar-day.range-end:hover,
.ideaforge-sync-calendar-grid .calendar-day.range-middle:hover {
	opacity: 0.9 !important;
	transform: scale(1.02) !important;
}

/* End Date Range Selection Highlighting */

/* ==========================================================================
   Enhanced Date Selection UX
   ========================================================================== */

/* Pulsing effect when only check-in is selected (waiting for check-out) */
.ideaforge-sync-calendar-grid .calendar-day.range-start:not(.range-end) ~ .calendar-day:not(.range-middle):not(.range-end),
.ideaforge-sync-calendar-grid .calendar-day.selected.range-start:only-of-type {
	/* When only start is selected, give it a subtle pulse to indicate waiting */
}

/* Single selection state (check-in only, no check-out yet) */
.ideaforge-sync-calendar-grid .calendar-day.range-start:not(.range-end) {
	animation: pulse-selection 2s infinite;
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.3) !important;
}

@keyframes pulse-selection {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.3);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(21, 101, 192, 0.1);
	}
}

/* When range is complete (both start and end selected), remove pulse */
.ideaforge-sync-calendar-grid .calendar-day.range-start.selected,
.ideaforge-sync-calendar-grid .calendar-day.range-end.selected {
	animation: none;
	box-shadow: none !important;
}

/* Visual hint for selectable dates when in selection mode */
.ideaforge-sync-calendar-wrapper.selecting-checkout .calendar-day.available:not(.selected):not(.range-middle) {
	cursor: pointer;
}

/* Clear cursor on hover during checkout selection */
.ideaforge-sync-calendar-grid .calendar-day.available:hover {
	cursor: pointer;
}

/* End Enhanced Date Selection UX */

/* ==========================================================================
   Date Range Color Priority Fix
   Ensure start/end dates always show dark blue, middle dates light blue
   ========================================================================== */

/* Force range-start to be dark blue even if other classes present */
.ideaforge-sync-calendar-grid .calendar-day.range-start,
.ideaforge-sync-calendar-grid .calendar-day.selected.range-start {
	background-color: #1565c0 !important;
}

/* Force range-end to be dark blue even if other classes present */
.ideaforge-sync-calendar-grid .calendar-day.range-end,
.ideaforge-sync-calendar-grid .calendar-day.selected.range-end {
	background-color: #1565c0 !important;
}

/* Middle dates should be lighter blue (only if not start/end) */
.ideaforge-sync-calendar-grid .calendar-day.range-middle:not(.range-start):not(.range-end) {
	background-color: #64b5f6 !important;
}

/* End Date Range Color Priority Fix */

/* ==========================================================================
   Real-Time Form Validation Styles
   ========================================================================== */

/* Valid field state */
.ideaforge-sync-form .form-row.field-valid input,
.ideaforge-sync-form .form-row.field-valid textarea {
	border-color: #4caf50 !important;
	background-color: #f1f8e9;
}

.ideaforge-sync-form .form-row.field-valid::after {
	content: '✓';
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #4caf50;
	font-size: 18px;
	font-weight: bold;
}

/* Error field state */
.ideaforge-sync-form .form-row.field-error input,
.ideaforge-sync-form .form-row.field-error textarea {
	border-color: #f44336 !important;
	background-color: #ffebee;
}

/* Error message styling */
.ideaforge-sync-form .form-row .field-error-message {
	display: block;
	color: #d32f2f;
	font-size: 12px;
	margin-top: 4px;
	padding: 4px 8px;
	background-color: #ffebee;
	border-radius: 4px;
	border-left: 3px solid #f44336;
}

/* Make form rows relative for positioning */
.ideaforge-sync-form .form-row {
	position: relative;
}

/* Phone number input specific styling */
.ideaforge-sync-form #guest_phone {
	font-family: 'SF Mono', Monaco, Consolas, monospace;
	letter-spacing: 0.5px;
}

/* Number input - hide spin buttons for cleaner look */
.ideaforge-sync-form input[type="number"]::-webkit-inner-spin-button,
.ideaforge-sync-form input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ideaforge-sync-form input[type="number"] {
	-moz-appearance: textfield;
}

/* Shake animation for validation errors */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
	20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.ideaforge-sync-form .form-row.field-error input,
.ideaforge-sync-form .form-row.field-error textarea {
	animation: shake 0.5s ease-in-out;
}

/* Transition for smooth validation feedback */
.ideaforge-sync-form .form-row input,
.ideaforge-sync-form .form-row textarea {
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state override for validation */
.ideaforge-sync-form .form-row.field-valid input:focus,
.ideaforge-sync-form .form-row.field-valid textarea:focus {
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.ideaforge-sync-form .form-row.field-error input:focus,
.ideaforge-sync-form .form-row.field-error textarea:focus {
	box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}

/* Tooltip styling for international phone hint */
.ideaforge-sync-form .phone-hint {
	font-size: 11px;
	color: #666;
	margin-top: 4px;
	font-style: italic;
}

/* End Real-Time Form Validation Styles */

/* ==========================================================================
   Calendar Focus UX - Scroll to Calendar on Date Input Focus
   ========================================================================== */

/* Calendar pulse animation when user focuses date input */
@keyframes calendarPulse {
	0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
	50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
	100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.ideaforge-sync-calendar-wrapper.calendar-pulse {
	animation: calendarPulse 0.6s ease-out;
}

/* Also add a subtle border highlight */
.ideaforge-sync-calendar-wrapper.calendar-pulse .ideaforge-sync-calendar-month {
	border-color: #3b82f6 !important;
	transition: border-color 0.3s ease;
}

/* Date selection hint styling */
.ideaforge-sync-calendar-wrapper .date-selection-hint {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: white;
	padding: 8px 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	margin: 8px 0;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	animation: fadeInSlide 0.3s ease-out;
}

@keyframes fadeInSlide {
	0% { 
		opacity: 0; 
		transform: translateY(-10px);
	}
	100% { 
		opacity: 1; 
		transform: translateY(0);
	}
}

/* Make date inputs look more clickable */
.ideaforge-sync-form #check_in,
.ideaforge-sync-form #check_out {
	cursor: pointer;
}

.ideaforge-sync-form #check_in:hover,
.ideaforge-sync-form #check_out:hover {
	border-color: #3b82f6;
	background-color: #f8fafc;
}

/* End Calendar Focus UX */

/* ==========================================================================
   Property Selector
   ========================================================================== */

.ideaforge-sync-property-selector {
    max-width: 600px;
    margin-bottom: 20px;
}

.ideaforge-sync-property-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.ideaforge-sync-property-selector select {
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ideaforge-sync-property-selector select:hover {
    border-color: #cbd5e1;
}

.ideaforge-sync-property-selector select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

/* End Property Selector */
/* ==========================================================================
   Mobile Responsive Overhaul
   Priority: Overrides "Enlarged Calendar Styles" on mobile/tablet
   Added: 2026-02-24 by Luna [WP Plugins Mantle]

   ROOT CAUSE: The "Enlarged Calendar Styles" section (above) applies
   !important rules at all screen sizes, overriding all mobile media
   queries that appear earlier in the cascade. This block provides
   mobile overrides that come LAST in the file, ensuring they win.
   ========================================================================== */

/* --- BOOKING PAGES: Hide Footer Gallery on Mobile --- */
/* P2: The "Get Excited / Photo Gallery" section is distracting on
   transactional pages. Hide the gallery container on mobile. */
@media screen and (max-width: 768px) {
    /* Target the gallery container in the footer (first fullwidth section) */
    body.page-id-3719 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
    body.page-id-3707 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
    body.page-id-3704 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
    body.page-id-3705 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
    body.page-id-3706 .fusion-footer-widget-area > .fusion-fullwidth:first-child {
        display: none !important;
    }
}

/* --- TABLET & MOBILE (768px and below) --- */
@media screen and (max-width: 768px) {

    /* ====== P1: KILL EXCESSIVE WHITESPACE ====== */

    .ideaforge-sync-calendar-wrapper {
        padding: 10px !important;
    }

    .ideaforge-sync-calendar-header {
        margin-bottom: 10px !important;
    }

    .ideaforge-sync-calendar-header .property-name {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .calendar-legend {
        gap: 8px !important;
        margin-top: 6px !important;
    }

    .legend-item {
        font-size: 12px !important;
        gap: 4px !important;
    }

    .legend-color {
        width: 14px !important;
        height: 14px !important;
    }

    /* ====== P1: FIX CALENDAR DAY HEADERS ====== */
    /* At 375px, 7 columns = ~50px each. 3-letter abbreviations at
       16px !important (from Enlarged styles) overflow and merge.
       Fix: Reduce to 11px with proper spacing. */

    .ideaforge-sync-calendar-grid thead th {
        padding: 8px 2px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }

    /* ====== P2: COMPACT CALENDAR NAVIGATION ====== */

    .ideaforge-sync-calendar-nav {
        padding: 8px !important;
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .calendar-nav-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        min-width: unset !important;
    }

    /* Override the enlarged nav button styles */
    .ideaforge-sync-calendar-nav button,
    .calendar-nav button,
    .ideaforge-sync-calendar-header button {
        padding: 0 !important;
        min-width: unset !important;
        font-size: 14px !important;
    }

    /* ====== P2: FIX MONTH/YEAR SELECTOR ====== */

    .calendar-month-selector {
        margin-bottom: 0 !important;
    }

    .calendar-month-select,
    .calendar-year-select {
        padding: 6px 26px 6px 10px !important;
        font-size: 14px !important;
    }

    .calendar-month-select {
        min-width: 110px !important;
    }

    .calendar-year-select {
        min-width: 72px !important;
    }

    /* ====== CALENDAR MONTH CARD ====== */

    .ideaforge-sync-calendar-month {
        padding: 12px !important;
        min-width: unset !important;
    }

    .month-header h4 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* ====== CALENDAR DAY CELLS ====== */

    .ideaforge-sync-calendar-grid td {
        padding: 4px !important;
        height: auto !important;
        aspect-ratio: unset !important;
    }

    .ideaforge-sync-calendar-grid {
        border-spacing: 3px !important;
    }

    .calendar-day {
        min-height: 42px !important;
        border-radius: 6px !important;
    }

    .day-number {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .day-price {
        font-size: 9px !important;
    }

    .calendar-today-btn {
        padding: 8px 16px !important;
        margin-top: 12px !important;
    }

    .calendar-today-btn-wrapper {
        margin-top: 12px !important;
    }

    /* ====== P1: FORM SECTIONS — VISUAL HIERARCHY ====== */
    /* Add clear separation between form sections using accent-colored
       left border and tighter spacing for mobile rhythm. */

    .ideaforge-sync-booking-form-wrapper {
        padding: 10px !important;
    }

    .booking-form-header {
        margin-bottom: 14px !important;
    }

    .booking-form-header h3 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    .booking-form-header .property-name {
        font-size: 14px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-section {
        padding: 14px !important;
        margin-bottom: 12px !important;
        border-left: 3px solid #d4af37 !important;
        border-radius: 6px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-section legend {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        padding: 0 6px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-row {
        margin-bottom: 12px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-row label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    /* Prevent iOS auto-zoom on input focus */
    .ideaforge-sync-booking-form-wrapper .form-row input,
    .ideaforge-sync-booking-form-wrapper .form-row textarea,
    .ideaforge-sync-booking-form-wrapper .form-row select {
        font-size: 16px !important;
        padding: 10px !important;
    }

    /* Submit button */
    .ideaforge-sync-submit-btn {
        padding: 14px !important;
        font-size: 16px !important;
    }

    .form-actions {
        margin-top: 16px !important;
    }

    /* ====== PROPERTY SELECTOR ====== */

    .ideaforge-sync-property-selector {
        margin-bottom: 10px !important;
        max-width: 100% !important;
    }

    .ideaforge-sync-property-selector label {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .ideaforge-sync-property-selector select {
        min-width: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 12px !important;
        font-size: 16px !important;
    }

    /* ====== P3: FOOTER NAV STYLING ====== */
    /* The Avada footer menu renders as stacked full-width buttons.
       Make them more compact and less "green button stack" looking. */

    .fusion-footer-widget-area .awb-menu_column .awb-menu__main-ul {
        gap: 0 !important;
    }

    .fusion-footer-widget-area .awb-menu_column .awb-menu__main-li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .fusion-footer-widget-area .awb-menu_column .awb-menu__main-a {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }
}

/* --- SMALL MOBILE (480px and below) --- */
@media screen and (max-width: 480px) {

    .ideaforge-sync-calendar-wrapper {
        padding: 6px !important;
    }

    .ideaforge-sync-calendar-header .property-name {
        font-size: 20px !important;
    }

    .ideaforge-sync-calendar-grid thead th {
        font-size: 10px !important;
        padding: 6px 1px !important;
    }

    .ideaforge-sync-calendar-grid td {
        padding: 2px !important;
    }

    .ideaforge-sync-calendar-grid {
        border-spacing: 2px !important;
    }

    .calendar-day {
        min-height: 36px !important;
    }

    .day-number {
        font-size: 13px !important;
    }

    .day-price {
        display: none !important;
    }

    .ideaforge-sync-calendar-month {
        padding: 8px !important;
    }

    .month-header h4 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .booking-form-header h3 {
        font-size: 20px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-section {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .ideaforge-sync-booking-form-wrapper .form-section legend {
        font-size: 14px !important;
    }
}

/* --- TABLET 2-COLUMN LAYOUT (768px to 1023px) --- */
/* P3: On tablet, the form could use side-by-side layout instead
   of a single narrow column. This requires the form sections to
   use a grid layout. */
@media screen and (min-width: 769px) and (max-width: 1023px) {

    .ideaforge-sync-booking-form-wrapper {
        max-width: 100% !important;
        padding: 15px !important;
    }

    /* Expand the card to use full width on tablet */
    .ideaforge-sync-booking-form-wrapper .ifs-card {
        max-width: 100% !important;
    }

    /* Form uses CSS grid for 2-column layout */
    .ideaforge-sync-booking-form-wrapper #ideaforge-sync-booking-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 24px !important;
    }

    /* Hidden inputs and nonces span full width (they're invisible anyway) */
    .ideaforge-sync-booking-form-wrapper #ideaforge-sync-booking-form > input[type="hidden"] {
        grid-column: 1 / -1 !important;
    }

    /* Section dividers/headers (the h3 elements inside divs) stay in their column */
    /* Submit button, payment section, coupon, and special requests span full width */
    .ideaforge-sync-booking-form-wrapper #ideaforge-sync-booking-form > .form-actions,
    .ideaforge-sync-booking-form-wrapper #ideaforge-sync-booking-form > div:last-of-type {
        grid-column: 1 / -1 !important;
    }

    /* Alert messages span full width */
    .ideaforge-sync-booking-form-wrapper .ifs-alert {
        grid-column: 1 / -1 !important;
    }

    /* Form messages span full width */
    .ideaforge-sync-booking-form-wrapper .form-messages {
        grid-column: 1 / -1 !important;
    }

    /* Expand the calendar wrapper on tablet */
    .ideaforge-sync-calendar-wrapper {
        padding: 16px !important;
    }

    /* Calendar navigation more compact on tablet */
    .ideaforge-sync-calendar-nav {
        padding: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Calendar month takes reasonable width */
    .ideaforge-sync-calendar-month {
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    /* Property selector full width on tablet */
    .ideaforge-sync-property-selector {
        max-width: 100% !important;
    }

    .ideaforge-sync-property-selector select {
        max-width: 100% !important;
    }
}

/* End Mobile Responsive Overhaul */

/* ==========================================================================
   ROUND 2 MOBILE POLISH — Guest Auth Form Styling
   Date: Feb 23, 2026
   Ticket: MOG Round 2 Mobile Fixes
   
   The auth forms (Login, Register, Reset Password) use inline shortcode HTML
   with .ideaforge-sync-form / .ideaforge-sync-form-row classes that had no 
   CSS. These styles match the Night Sky Domes design system aesthetic.
   ========================================================================== */

/* --- Auth Form Containers --- */
.ideaforge-sync-guest-login,
.ideaforge-sync-guest-register,
.ideaforge-sync-password-reset,
.ideaforge-sync-password-reset-confirm {
    max-width: 440px;
    margin: var(--ifs-spacing-xl, 2.5rem) auto;
    padding: 0 var(--ifs-spacing-md, 1rem);
    font-family: var(--ifs-font-body, 'Lato', -apple-system, BlinkMacSystemFont, sans-serif);
    color: var(--ifs-text-main, #334155);
}

/* --- Card Wrapper for Auth Forms --- */
.ideaforge-sync-guest-login .ideaforge-sync-form,
.ideaforge-sync-guest-register .ideaforge-sync-form,
.ideaforge-sync-password-reset .ideaforge-sync-form,
.ideaforge-sync-password-reset-confirm .ideaforge-sync-form {
    background: var(--ifs-bg-surface, #ffffff);
    border-radius: var(--ifs-radius-md, 12px);
    box-shadow: var(--ifs-shadow-card, 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04));
    padding: var(--ifs-spacing-xl, 2.5rem);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

/* Featured top border accent */
.ideaforge-sync-guest-login .ideaforge-sync-form::before,
.ideaforge-sync-guest-register .ideaforge-sync-form::before,
.ideaforge-sync-password-reset .ideaforge-sync-form::before,
.ideaforge-sync-password-reset-confirm .ideaforge-sync-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ifs-color-primary, #0f172a), var(--ifs-color-accent, #d4af37));
    border-radius: var(--ifs-radius-md, 12px) var(--ifs-radius-md, 12px) 0 0;
}

/* --- Auth Form Headings --- */
.ideaforge-sync-password-reset h2,
.ideaforge-sync-password-reset-confirm h2 {
    font-family: var(--ifs-font-heading, 'Montserrat', sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ifs-color-primary, #0f172a);
    text-align: center;
    margin: 0 0 var(--ifs-spacing-sm, 0.5rem) 0;
    letter-spacing: -0.02em;
}

/* Subtitle / description text inside reset form */
.ideaforge-sync-password-reset .ideaforge-sync-form > p,
.ideaforge-sync-password-reset-confirm .ideaforge-sync-form > p {
    text-align: center;
    color: var(--ifs-color-secondary, #64748b);
    font-size: 0.95rem;
    margin-bottom: var(--ifs-spacing-lg, 1.5rem);
}

/* Insert a heading for login/register forms that don't have one in HTML */
.ideaforge-sync-guest-login .ideaforge-sync-login-form::after,
.ideaforge-sync-guest-register .ideaforge-sync-register-form::after {
    /* Cannot inject headings via CSS, but we'll make the first form-row look proper */
    display: none;
}

/* --- Form Rows --- */
.ideaforge-sync-form .ideaforge-sync-form-row {
    margin-bottom: var(--ifs-spacing-lg, 1.5rem);
}

/* --- Labels --- */
.ideaforge-sync-form .ideaforge-sync-form-row > label {
    display: block;
    font-family: var(--ifs-font-heading, 'Montserrat', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ifs-text-dark, #0f172a);
    margin-bottom: var(--ifs-spacing-sm, 0.5rem);
    letter-spacing: 0.01em;
}

/* --- Input Fields --- */
.ideaforge-sync-form .ideaforge-sync-form-row input[type="text"],
.ideaforge-sync-form .ideaforge-sync-form-row input[type="email"],
.ideaforge-sync-form .ideaforge-sync-form-row input[type="password"],
.ideaforge-sync-form .ideaforge-sync-form-row input[type="tel"],
.ideaforge-sync-form .ideaforge-sync-form-row input[type="number"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-family: var(--ifs-font-body, 'Lato', sans-serif);
    color: var(--ifs-text-dark, #0f172a);
    background-color: var(--ifs-bg-input, #f1f5f9);
    border: 2px solid transparent;
    border-radius: var(--ifs-radius-sm, 8px);
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.ideaforge-sync-form .ideaforge-sync-form-row input::placeholder {
    color: var(--ifs-text-light, #94a3b8);
}

.ideaforge-sync-form .ideaforge-sync-form-row input:hover {
    background-color: #e2e8f0;
}

.ideaforge-sync-form .ideaforge-sync-form-row input:focus {
    outline: none;
    background-color: var(--ifs-bg-surface, #ffffff);
    border-color: var(--ifs-color-accent, #d4af37);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

/* --- Small / Help Text --- */
.ideaforge-sync-form .ideaforge-sync-form-row small {
    display: block;
    font-size: 0.85rem;
    color: var(--ifs-color-secondary, #64748b);
    margin-top: var(--ifs-spacing-xs, 0.25rem);
}

/* --- Checkbox Row --- */
.ideaforge-sync-form .ideaforge-sync-form-checkbox {
    margin-bottom: var(--ifs-spacing-lg, 1.5rem);
}

.ideaforge-sync-form .ideaforge-sync-form-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: var(--ifs-spacing-sm, 0.5rem);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--ifs-text-main, #334155);
}

.ideaforge-sync-form .ideaforge-sync-form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ifs-color-accent, #d4af37);
    cursor: pointer;
}

/* --- Buttons --- */
.ideaforge-sync-form .ideaforge-sync-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ifs-spacing-sm, 0.5rem);
    padding: 0.875rem 1.75rem;
    font-family: var(--ifs-font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--ifs-radius-sm, 8px);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    letter-spacing: 0.02em;
    width: 100%;
}

.ideaforge-sync-form .ideaforge-sync-button-primary {
    background: var(--ifs-color-primary, #0f172a);
    color: var(--ifs-text-inverse, #ffffff);
    border-color: var(--ifs-color-primary, #0f172a);
}

.ideaforge-sync-form .ideaforge-sync-button-primary:hover {
    background: var(--ifs-color-primary-hover, #1e293b);
    border-color: var(--ifs-color-primary-hover, #1e293b);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

/* --- Form Links Footer --- */
.ideaforge-sync-form .ideaforge-sync-form-links {
    text-align: center;
    margin-top: var(--ifs-spacing-lg, 1.5rem);
    padding-top: var(--ifs-spacing-lg, 1.5rem);
    border-top: 1px solid #e2e8f0;
}

.ideaforge-sync-form .ideaforge-sync-form-links p {
    margin: var(--ifs-spacing-sm, 0.5rem) 0;
    color: var(--ifs-color-secondary, #64748b);
    font-size: 0.9rem;
}

.ideaforge-sync-form .ideaforge-sync-form-links a {
    color: var(--ifs-color-primary, #0f172a);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.ideaforge-sync-form .ideaforge-sync-form-links a:hover {
    color: var(--ifs-color-accent, #d4af37);
}

/* --- Success/Error Messages --- */
.ideaforge-sync-message {
    padding: var(--ifs-spacing-lg, 1.5rem);
    border-radius: var(--ifs-radius-sm, 8px);
    margin-bottom: var(--ifs-spacing-lg, 1.5rem);
    border-left: 4px solid;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ideaforge-sync-message.ideaforge-sync-success {
    background: var(--ifs-status-success-bg, #ecfdf5);
    border-left-color: var(--ifs-status-success, #10b981);
    color: #065f46;
}

.ideaforge-sync-message.ideaforge-sync-error {
    background: var(--ifs-status-error-bg, #fef2f2);
    border-left-color: var(--ifs-status-error, #ef4444);
    color: #991b1b;
}

.ideaforge-sync-message.ideaforge-sync-info {
    background: var(--ifs-status-info-bg, #eff6ff);
    border-left-color: var(--ifs-status-info, #3b82f6);
    color: #1e40af;
}

/* --- Guest Portal Login Prompt Styling (P2-D) --- */
/* When guest portal redirects to login, the "Please log in..." message */
.ideaforge-sync-guest-login .ideaforge-sync-message.ideaforge-sync-info,
.ideaforge-sync-message.ideaforge-sync-info + .ideaforge-sync-guest-login {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   P1-B: Hide Footer Gallery on Auth Pages
   Pages: guest-login (3709), guest-register (3713), guest-reset-password (3711)
   ========================================================================== */

body.page-id-3709 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
body.page-id-3713 .fusion-footer-widget-area > .fusion-fullwidth:first-child,
body.page-id-3711 .fusion-footer-widget-area > .fusion-fullwidth:first-child {
    display: none !important;
}

/* ==========================================================================
   P2-C: Booking Confirmed Empty State — Navigation Links
   Styled via CSS; the link markup will be added in PHP.
   ========================================================================== */

.ideaforge-sync-empty-state-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ifs-spacing-md, 1rem);
    margin-top: var(--ifs-spacing-lg, 1.5rem);
    padding-top: var(--ifs-spacing-lg, 1.5rem);
}

.ideaforge-sync-empty-state-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: var(--ifs-font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--ifs-radius-sm, 8px);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.02em;
}

.ideaforge-sync-empty-state-nav a.ifs-nav-primary {
    background: var(--ifs-color-primary, #0f172a);
    color: var(--ifs-text-inverse, #ffffff);
    border: 2px solid var(--ifs-color-primary, #0f172a);
    width: 100%;
    max-width: 280px;
}

.ideaforge-sync-empty-state-nav a.ifs-nav-primary:hover {
    background: var(--ifs-color-primary-hover, #1e293b);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.ideaforge-sync-empty-state-nav a.ifs-nav-secondary {
    background: transparent;
    color: var(--ifs-color-primary, #0f172a);
    border: 2px solid var(--ifs-color-primary, #0f172a);
    width: 100%;
    max-width: 280px;
}

.ideaforge-sync-empty-state-nav a.ifs-nav-secondary:hover {
    background: var(--ifs-bg-input, #f1f5f9);
}

/* ==========================================================================
   P2-E: iOS Form Input Zoom Prevention on Auth Pages
   iOS Safari zooms in on inputs with font-size < 16px.
   ========================================================================== */

@media screen and (max-width: 768px) {
    .ideaforge-sync-form input[type="text"],
    .ideaforge-sync-form input[type="email"],
    .ideaforge-sync-form input[type="password"],
    .ideaforge-sync-form input[type="tel"],
    .ideaforge-sync-form input[type="number"],
    .ideaforge-sync-form select,
    .ideaforge-sync-form textarea {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Responsive Adjustments for Auth Forms
   ========================================================================== */

@media screen and (max-width: 480px) {
    .ideaforge-sync-guest-login,
    .ideaforge-sync-guest-register,
    .ideaforge-sync-password-reset,
    .ideaforge-sync-password-reset-confirm {
        padding: 0 var(--ifs-spacing-sm, 0.5rem);
        margin-top: var(--ifs-spacing-lg, 1.5rem);
        margin-bottom: var(--ifs-spacing-lg, 1.5rem);
    }

    .ideaforge-sync-guest-login .ideaforge-sync-form,
    .ideaforge-sync-guest-register .ideaforge-sync-form,
    .ideaforge-sync-password-reset .ideaforge-sync-form,
    .ideaforge-sync-password-reset-confirm .ideaforge-sync-form {
        padding: var(--ifs-spacing-lg, 1.5rem);
    }
}

/* End Round 2 Mobile Polish */

/* ==========================================================================
   Guest Auth Forms - Night Sky Domes Theme
   Bridges shortcode classes (ideaforge-sync-*) to design-system aesthetic
   Added: 2026-02-23 by WPPM
   ========================================================================== */

/* --- Base Font Import (matches design-system.css) --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@500;600;700&display=swap');

/* --- Auth Form Wrappers --- */
.ideaforge-sync-guest-login,
.ideaforge-sync-guest-register,
.ideaforge-sync-password-reset,
.ideaforge-sync-password-reset-confirm,
.ideaforge-sync-edit-profile {
	max-width: 480px;
	margin: 2.5rem auto;
	padding: 2.5rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
	border: 1px solid rgba(0, 0, 0, 0.04);
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #334155;
	line-height: 1.65;
	position: relative;
}

/* Featured card gold/midnight top bar */
.ideaforge-sync-guest-login::before,
.ideaforge-sync-guest-register::before,
.ideaforge-sync-password-reset::before,
.ideaforge-sync-password-reset-confirm::before,
.ideaforge-sync-edit-profile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0f172a, #d4af37);
	border-radius: 12px 12px 0 0;
}

/* Account Dashboard - wider layout */
.ideaforge-sync-guest-account-dashboard {
	max-width: 640px;
	margin: 2.5rem auto;
	padding: 2.5rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
	border: 1px solid rgba(0, 0, 0, 0.04);
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #334155;
	line-height: 1.65;
	position: relative;
}

.ideaforge-sync-guest-account-dashboard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #0f172a, #d4af37);
	border-radius: 12px 12px 0 0;
}

/* --- Headings --- */
.ideaforge-sync-guest-login h2,
.ideaforge-sync-guest-register h2,
.ideaforge-sync-password-reset h2,
.ideaforge-sync-password-reset-confirm h2,
.ideaforge-sync-edit-profile h2,
.ideaforge-sync-guest-account-dashboard h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.75rem;
	font-weight: 600;
	color: #0f172a;
	text-align: center;
	margin: 0 0 1.5rem 0;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.ideaforge-sync-edit-profile h3,
.ideaforge-sync-guest-account-dashboard h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: #0f172a;
	margin: 1.5rem 0 1rem 0;
	line-height: 1.3;
}

/* --- Messages (success, error, info) --- */
.ideaforge-sync-message {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	border-left: 4px solid;
	font-size: 0.95rem;
	line-height: 1.5;
}

.ideaforge-sync-message a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.ideaforge-sync-success {
	background: #ecfdf5;
	border-left-color: #10b981;
	color: #065f46;
}

.ideaforge-sync-error {
	background: #fef2f2;
	border-left-color: #ef4444;
	color: #991b1b;
}

.ideaforge-sync-info {
	background: #eff6ff;
	border-left-color: #3b82f6;
	color: #1e40af;
}

/* --- Form Base --- */
.ideaforge-sync-form {
	width: 100%;
}

/* --- Form Rows --- */
.ideaforge-sync-form-row {
	margin-bottom: 1.5rem;
}

/* --- Labels --- */
.ideaforge-sync-form-row > label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 0.5rem;
	letter-spacing: 0.01em;
}

/* --- Input Fields --- */
.ideaforge-sync-form-row input[type="text"],
.ideaforge-sync-form-row input[type="email"],
.ideaforge-sync-form-row input[type="password"],
.ideaforge-sync-form-row input[type="tel"],
.ideaforge-sync-form-row input[type="number"],
.ideaforge-sync-form-row textarea,
.ideaforge-sync-form-row select {
	width: 100%;
	padding: 0.875rem 1rem;
	font-size: 16px; /* 16px prevents iOS zoom */
	font-family: 'Lato', sans-serif;
	color: #0f172a;
	background-color: #f1f5f9;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: all 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}

.ideaforge-sync-form-row input::placeholder,
.ideaforge-sync-form-row textarea::placeholder {
	color: #94a3b8;
}

.ideaforge-sync-form-row input:hover,
.ideaforge-sync-form-row textarea:hover,
.ideaforge-sync-form-row select:hover {
	background-color: #e2e8f0;
}

.ideaforge-sync-form-row input:focus,
.ideaforge-sync-form-row textarea:focus,
.ideaforge-sync-form-row select:focus {
	outline: none;
	background-color: #ffffff;
	border-color: #d4af37;
	box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

/* --- Small/Help Text --- */
.ideaforge-sync-form-row small {
	display: block;
	font-size: 0.85rem;
	color: #64748b;
	margin-top: 0.25rem;
}

/* --- Checkbox Row --- */
.ideaforge-sync-form-checkbox {
	display: flex;
	align-items: center;
}

.ideaforge-sync-form-checkbox label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: #334155;
	cursor: pointer;
	font-weight: 400 !important;
}

.ideaforge-sync-form-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #0f172a;
	cursor: pointer;
}

/* --- Buttons --- */
.ideaforge-sync-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.ideaforge-sync-button-primary {
	width: 100%;
	background: #0f172a;
	color: #ffffff;
	border-color: #0f172a;
}

.ideaforge-sync-button-primary:hover {
	background: #1e293b;
	border-color: #1e293b;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}

.ideaforge-sync-button-primary:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --- Form Links --- */
.ideaforge-sync-form-links {
	text-align: center;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
	color: #64748b;
	font-size: 0.95rem;
}

.ideaforge-sync-form-links p {
	margin: 0.5rem 0;
}

.ideaforge-sync-form-links a {
	color: #0f172a;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ideaforge-sync-form-links a:hover {
	color: #d4af37;
}

/* --- Account Dashboard Specific --- */
.ideaforge-sync-account-info {
	background: #f8fafc;
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	margin-bottom: 1.5rem;
}

.ideaforge-sync-account-info p {
	margin: 0.5rem 0;
	font-size: 0.95rem;
}

.ideaforge-sync-account-info strong {
	color: #0f172a;
}

.ideaforge-sync-booking-summary {
	margin-bottom: 1.5rem;
}

.ideaforge-sync-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ideaforge-sync-stat {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.25rem;
	text-align: center;
}

.ideaforge-sync-stat .stat-value {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 2rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
}

.ideaforge-sync-stat .stat-label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
	margin-top: 0.25rem;
	font-weight: 600;
}

.ideaforge-sync-account-actions ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ideaforge-sync-account-actions li {
	margin-bottom: 0;
}

.ideaforge-sync-account-actions a {
	display: block;
	padding: 0.875rem 1rem;
	color: #0f172a;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.15s ease;
}

.ideaforge-sync-account-actions a:hover {
	background: #f1f5f9;
	color: #d4af37;
}

/* --- Booking History --- */
.ideaforge-sync-booking-history {
	max-width: 900px;
	margin: 2.5rem auto;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #334155;
}

.ideaforge-sync-booking-history h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.625rem;
	font-weight: 600;
	color: #0f172a;
	margin: 0 0 1.5rem 0;
	letter-spacing: -0.02em;
}

/* Booking filters */
.ideaforge-sync-booking-filters {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.ideaforge-sync-booking-filters a {
	padding: 0.625rem 1.25rem;
	background: #f1f5f9;
	border-radius: 9999px;
	color: #334155;
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ideaforge-sync-booking-filters a:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.ideaforge-sync-booking-filters a.active {
	background: #0f172a;
	color: #ffffff;
}

/* Booking table */
.ideaforge-sync-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
}

.ideaforge-sync-table thead {
	background: #0f172a;
}

.ideaforge-sync-table thead th {
	padding: 1rem 1.25rem;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-align: left;
}

.ideaforge-sync-table tbody tr {
	border-bottom: 1px solid #e2e8f0;
	transition: background-color 0.15s ease;
}

.ideaforge-sync-table tbody tr:last-child {
	border-bottom: none;
}

.ideaforge-sync-table tbody tr:hover {
	background: #f8fafc;
}

.ideaforge-sync-table tbody td {
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
	color: #334155;
}

/* --- Logout Link --- */
.ideaforge-sync-logout-link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	color: #0f172a;
	background: transparent;
	border: 2px solid #0f172a;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.15s ease;
}

.ideaforge-sync-logout-link:hover {
	background: #f1f5f9;
}

/* ==========================================================================
   Hide Footer Gallery on Auth Pages (3709, 3711, 3713)
   Same pattern used for booking pages
   ========================================================================== */

.page-id-3709 .fusion-footer,
.page-id-3711 .fusion-footer,
.page-id-3713 .fusion-footer {
	display: none !important;
}

/* Also hide footer gallery widget area specifically if needed */
.page-id-3709 .fusion-footer-widget-area .fusion-gallery,
.page-id-3711 .fusion-footer-widget-area .fusion-gallery,
.page-id-3713 .fusion-footer-widget-area .fusion-gallery {
	display: none !important;
}

/* ==========================================================================
   iOS Zoom Prevention
   Inputs must be 16px+ to prevent iOS Safari auto-zoom on focus
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
	.ideaforge-sync-form-row input,
	.ideaforge-sync-form-row textarea,
	.ideaforge-sync-form-row select,
	.ideaforge-sync-form input,
	.ideaforge-sync-form textarea,
	.ideaforge-sync-form select {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   Auth Forms - Mobile Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ideaforge-sync-guest-login,
	.ideaforge-sync-guest-register,
	.ideaforge-sync-password-reset,
	.ideaforge-sync-password-reset-confirm,
	.ideaforge-sync-edit-profile {
		margin: 1.5rem auto;
		padding: 1.5rem;
		border-radius: 8px;
	}

	.ideaforge-sync-guest-account-dashboard {
		margin: 1.5rem auto;
		padding: 1.5rem;
	}

	.ideaforge-sync-guest-login h2,
	.ideaforge-sync-guest-register h2,
	.ideaforge-sync-password-reset h2,
	.ideaforge-sync-password-reset-confirm h2,
	.ideaforge-sync-edit-profile h2,
	.ideaforge-sync-guest-account-dashboard h2 {
		font-size: 1.375rem;
	}

	.ideaforge-sync-stats {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}

	.ideaforge-sync-booking-filters {
		gap: 0.375rem;
	}

	.ideaforge-sync-booking-filters a {
		padding: 0.5rem 1rem;
		font-size: 0.85rem;
	}

	/* Table responsive - horizontal scroll */
	.ideaforge-sync-booking-history {
		overflow-x: auto;
	}

	.ideaforge-sync-table {
		min-width: 600px;
	}
}

@media screen and (max-width: 480px) {
	.ideaforge-sync-guest-login,
	.ideaforge-sync-guest-register,
	.ideaforge-sync-password-reset,
	.ideaforge-sync-password-reset-confirm,
	.ideaforge-sync-edit-profile {
		margin: 1rem 0.5rem;
		padding: 1.25rem;
	}

	.ideaforge-sync-guest-account-dashboard {
		margin: 1rem 0.5rem;
		padding: 1.25rem;
	}

	.ideaforge-sync-guest-login h2,
	.ideaforge-sync-guest-register h2,
	.ideaforge-sync-password-reset h2,
	.ideaforge-sync-password-reset-confirm h2,
	.ideaforge-sync-edit-profile h2,
	.ideaforge-sync-guest-account-dashboard h2 {
		font-size: 1.25rem;
	}

	.ideaforge-sync-button-primary {
		padding: 0.75rem 1.25rem;
		font-size: 0.95rem;
	}

	.ideaforge-sync-stats {
		grid-template-columns: 1fr;
	}

	.ideaforge-sync-stat .stat-value {
		font-size: 1.5rem;
	}

	.ideaforge-sync-booking-filters {
		flex-direction: column;
	}

	.ideaforge-sync-booking-filters a {
		text-align: center;
	}
}

/* End Guest Auth Forms */