/**
 * Korterid Plugin Styles
 *
 * Responsive table styles for apartment listings
 *
 * @package Korterid
 */

/* Table heading styling */
.korterid-table thead th {
	background-color: #C5A993;
	color: #fff;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	padding: 8px 10px;
}

/* Table cell alignment and sizing */
.korterid-table td {
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	padding: 2px 10px;
}

/* Table row hover transition */
.korterid-table tbody tr {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Style links in table rows */
.korterid-table tbody tr a {
	color: inherit;
	text-decoration: none;
}

.korterid-table tbody tr a:hover {
	text-decoration: none;
}

/* Contact info spacing */
.korterid-contact-info p {
	margin: 0;
	line-height: 1.5;
}

/* Action buttons container */
.korterid-action-buttons {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* PDF download button */
.korterid-pdf-btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #C5A993;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: background-color 0.3s ease;
}

.korterid-pdf-btn:hover {
	background-color: #B09883;
	color: #fff;
}

/* Contact button styling */
.contact-btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #C5A993;
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.contact-btn:hover {
	background-color: #B09883;
	color: #fff;
}

/* Active state for contact button when form is open */
.contact-btn.active {
	opacity: 0.8;
}

/* Form wrapper styling */
.korterid-form-wrapper {
	margin-top: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f9f9f9;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

/* Form header with close button */
.korterid-form-header {
	position: relative;
	padding: 15px;
	background: #f0f0f0;
	border-bottom: 1px solid #ddd;
	min-height: 20px;
}

/* Close button (X) styling */
.korterid-form-close {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	font-size: 24px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.korterid-form-close:hover {
	color: #000;
}

/* Form container */
.korterid-form-container {
	padding: 20px;
}

/* Hide pre-rendered forms in footer */
.korterid-hidden-form {
	display: none !important;
}

/* Desktop styles (>1000px) - Hide mobile column */
@media (min-width: 1001px) {
	.korterid-table .mobile-info-col,
	.korterid-table .mobile-info-cell {
		display: none;
	}
}

/* Mobile styles (<1000px) - Card view display */
@media (max-width: 1000px) {
	.korterid-table {
		width: 100%;
		font-size: 14px;
	}

	/* Hide table header on mobile */
	.korterid-table thead {
		display: none;
	}

	/* Display table rows as cards */
	.korterid-table tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* Each cell becomes a row in the card */
	.korterid-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border: none;
		border-bottom: 1px solid #f0f0f0;
		text-align: right;
	}

	.korterid-table tbody td:last-child {
		border-bottom: none;
	}

	/* Add labels before content using data-label attribute */
	.korterid-table tbody td::before {
		content: attr(data-label);
		font-weight: bold;
		text-align: left;
		flex: 0 0 40%;
		padding-right: 15px;
	}

	/* Hide mobile info column label */
	.korterid-table .mobile-info-cell::before {
		content: '';
	}

	.korterid-table .mobile-info-cell {
		display: flex;
		justify-content: flex-start;
		padding: 12px;
		background: #f8f8f8;
	}

	.korterid-table .hinnad-info-btn {
		display: inline-block;
		padding: 8px 16px;
		text-decoration: none;
		white-space: nowrap;
		border-radius: 4px;
		background: #C5A993;
		color: #fff;
		font-weight: 500;
	}

	.korterid-table .hinnad-info-btn:hover {
		background: #B09883;
		color: #fff;
	}
}

/* Loading state for submit button */
.korterid-loading {
	position: relative;
	opacity: 0.6;
	cursor: not-allowed;
}

.korterid-loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid #fff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: korterid-spinner 0.6s linear infinite;
}

@keyframes korterid-spinner {
	to {
		transform: rotate(360deg);
	}
}

/* Success message styling */
.korterid-success-message {
	text-align: center;
	padding: 40px 20px;
}

.korterid-success-heading {
	font-size: 24px;
	font-weight: bold;
	margin: 20px 0 10px;
	color: #2d7f3e;
}

.korterid-success-text {
	font-size: 16px;
	color: #666;
	margin: 0;
}

/* Animated checkmark SVG */
.korterid-checkmark {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	display: block;
	animation: korterid-checkmark-scale 0.6s ease-out;
}

@keyframes korterid-checkmark-scale {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.korterid-checkmark-circle {
	stroke: #2d7f3e;
	stroke-width: 2;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: korterid-checkmark-circle 0.6s ease-out forwards;
}

@keyframes korterid-checkmark-circle {
	to {
		stroke-dashoffset: 0;
	}
}

.korterid-checkmark-check {
	stroke: #2d7f3e;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: korterid-checkmark-check 0.4s ease-out 0.6s forwards;
}

@keyframes korterid-checkmark-check {
	to {
		stroke-dashoffset: 0;
	}
}

/* Hide form wrapper when printing */
@media print {
	.korterid-form-wrapper {
		display: none !important;
	}
}

/* ========================================
   KORTERID MODAL LAYOUT STYLES
   ======================================== */

/* Modal container */
.korterid-modal-container {
	width: 100%;
	max-width: 100%;
}

/* Logo row */
.korterid-modal-logo-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
}

.korterid-modal-logo-left,
.korterid-modal-logo-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.korterid-modal-logo {
	max-height: 55px;
	width: auto;
	height: auto;
}

/* Content row - 30/70 layout */
.korterid-modal-content-row {
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 30px;
}

/* Left column */
.korterid-modal-left-column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Right column */
.korterid-modal-right-column {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.korterid-modal-image {
	width: 100%;
	height: auto;
	display: block;
}

/* Mobile responsive - breakpoint at 768px */
@media (max-width: 768px) {
	/* Logo row - keep side by side but smaller */
	.korterid-modal-logo-row {
		gap: 10px;
		padding: 15px 0;
	}

	.korterid-modal-logo {
		max-height: 40px;
	}

	/* Content row - stack vertically */
	.korterid-modal-content-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Reorder: image first, then content */
	.korterid-modal-right-column {
		order: -1;
	}

	.korterid-modal-left-column {
		order: 1;
	}
}

/* ========================================
   PDF PRINT STYLES
   Based on old site implementation
   ======================================== */

@media print {
	/* Reset and global print settings */
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		color-adjust: exact !important;
	}

	/* Page setup - fit everything on one page */
	@page {
		size: A4;
		margin: 10mm !important;
	}

	body {
		width: 100% !important;
		min-width: 1200px !important; /* Force wide viewport to prevent mobile styles */
		margin: 0 !important;
		padding: 0 !important;
	}

	/* CRITICAL: When printing, we need to show ONLY the modal content */
	/* The strategy: hide the page, show the modal, and position it correctly */

	/* Hide EVERYTHING on the page first */
	body * {
		visibility: hidden !important;
	}

	/* Then make ONLY the popup container and its descendants visible */
	.ct-popup-container,
	.ct-popup-container * {
		visibility: visible !important;
	}

	/* Position the popup container as the only content */
	.ct-popup-container {
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: auto !important;
		display: block !important;
		background: white !important;
		z-index: 1 !important;
	}

	/* Style the actual content */
	.ct-popup-content {
		position: static !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 20px !important;
		overflow: visible !important;
		background: white !important;
		box-shadow: none !important;
		border: none !important;
	}

	/* Hide unnecessary elements globally */
	header,
	footer,
	.skip-link,
	.screen-reader-text,
	#inner-wrap,
	.kadence-pro-fixed-item,
	nav,
	.site-navigation,
	.site-header,
	.site-footer,
	.breadcrumbs,
	.navigation,
	.comments-area,
	.sidebar,
	.widget-area {
		display: none !important;
	}

	/* Hide modal overlay and close buttons */
	.ct-popup-container-overlay,
	.ct-toggle-close,
	.ct-close-button,
	.modal-close,
	.mw-close-btn,
	.modal-window__close-image,
	.modal-window__close.-image {
		display: none !important;
	}

	/* Hide Image Map Pro tooltips (not used in Blocksy modals) */
	.imp-tooltips-container,
	.imp-fullscreen-tooltip,
	.imp-tooltip-content,
	.imp-tooltip {
		visibility: hidden !important;
		display: none !important;
		opacity: 0 !important;
	}

	/* Korterid Modal Layout - Print Styles */
	.korterid-modal-container {
		width: 100% !important;
		display: block !important;
	}

	/* Logo row - 2 columns side by side */
	.korterid-modal-logo-row {
		display: flex !important;
		gap: 20px !important;
		justify-content: center !important;
		align-items: center !important;
		margin-bottom: 15px !important;
		padding-bottom: 10px !important;
		border-bottom: 1px solid #ddd !important;
		page-break-inside: avoid !important;
	}

	.korterid-modal-logo-left,
	.korterid-modal-logo-right {
		flex: 1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.korterid-modal-logo {
		max-height: 50px !important;
		width: auto !important;
		height: auto !important;
	}

	/* Content row - stack vertically for print */
	.korterid-modal-content-row {
		display: block !important;
		width: 100% !important;
	}

	/* Left column - full width in print */
	.korterid-modal-left-column {
		width: 100% !important;
		display: block !important;
		margin-bottom: 15px !important;
		page-break-inside: avoid !important;
	}

	/* Right column - full width in print */
	.korterid-modal-right-column {
		width: 100% !important;
		display: block !important;
		page-break-inside: avoid !important;
	}

	.korterid-modal-image {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
	}

	/* Hide action buttons (PDF download and contact form) */
	.korterid-action-buttons,
	.korterid-pdf-btn,
	.prindi-export-btn,
	.contact-btn,
	.wp-block-file__button {
		display: none !important;
	}

	/* Hide form wrapper */
	.korterid-form-wrapper {
		display: none !important;
	}

	/* Hide the duplicate contact info paragraph (we have korterid-contact-info already) */
	.kt-adv-heading13689_9199dd-4c {
		display: none !important;
	}

	/* CRITICAL FIX: Disable ALL ::before and ::after pseudo-elements in print */
	/* The mobile styles and theme styles add data-label content via ::before */
	/* This causes "Undefined" to appear in print preview when data-label is missing */
	.ct-popup-content *::before,
	.ct-popup-content *::after,
	.korterid-table tbody td::before,
	.korterid-table tbody td::after,
	.korterid-detail-table tbody td::before,
	.korterid-detail-table tbody td::after,
	.ct-popup-container *::before,
	.ct-popup-container *::after {
		content: none !important;
		display: none !important;
	}

	/* Ensure main row containers are visible and properly sized */
	.kb-row-layout-wrap {
		display: block !important;
		width: 100% !important;
		margin: 0 0 15px 0 !important;
		padding: 0 !important;
		page-break-inside: avoid !important;
	}

	/* Header area with logos - 2 column layout */
	/* This also applies to the main content row (.prindi) */
	.kt-row-column-wrap.kt-has-2-columns {
		display: flex !important;
		gap: 20px !important;
		flex-wrap: nowrap !important;
		margin-bottom: 0 !important;
		width: 100% !important;
		page-break-inside: avoid !important;
	}

	.kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column {
		flex: 1 1 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		display: block !important;
	}

	/* Logo images */
	.fv-logo,
	.kb-image13689_690c0f-b9,
	.kb-image13689_7636c7-eb {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.fv-logo figure,
	.fv-logo img {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	/* Detail table - full width of its column (not page) */
	.korterid-detail-table {
		display: table !important; /* Override mobile card view */
		width: 100% !important;
		max-width: 100% !important;
		border-collapse: collapse !important;
		margin: 0 0 20px 0 !important;
		page-break-inside: avoid !important;
		table-layout: fixed !important;
	}

	.korterid-detail-table thead {
		display: table-header-group !important; /* Re-enable header if hidden on mobile */
	}

	.korterid-detail-table tbody {
		display: table-row-group !important; /* Override mobile card view */
	}

	.korterid-detail-table tr {
		display: table-row !important; /* Override mobile card view */
		page-break-inside: avoid !important;
		page-break-after: auto !important;
		margin: 0 !important;
		border: none !important;
		box-shadow: none !important;
	}

	.korterid-detail-table td,
	.korterid-detail-table th {
		display: table-cell !important; /* Override mobile flex display */
		width: 50% !important;
		padding: 8px 12px !important;
		border: 1px solid #ddd !important;
		font-size: 12pt !important;
		vertical-align: middle !important;
		text-align: left !important;
		justify-content: flex-start !important;
	}

	.korterid-detail-table td:first-child {
		font-weight: bold !important;
		background-color: #f5f5f5 !important;
	}

	/* Contact information - stays within its column */
	.korterid-contact-info {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		page-break-inside: avoid !important;
	}

	.korterid-contact-info p {
		margin: 4px 0 !important;
		padding: 0 !important;
		font-size: 11pt !important;
		line-height: 1.4 !important;
	}

	.korterid-contact-info strong {
		font-weight: bold !important;
	}

	/* Left column - maintain column width (50% from parent flex) */
	.inner-column-1,
	.kadence-column13689_b17dd4-38 {
		/* Width is inherited from parent .kt-has-2-columns flex layout (50%) */
		margin: 0 !important;
		padding: 10px !important;
		page-break-inside: avoid !important;
	}

	/* Image container - maintain column width (50% from parent flex) */
	.inner-column-2,
	.kadence-column13689_2e02a6-ff {
		/* Width is inherited from parent .kt-has-2-columns flex layout (50%) */
		margin: 0 !important;
		padding: 10px !important;
		page-break-inside: avoid !important;
	}

	/* Images - full width of their container (column), responsive */
	.wp-block-image,
	.wp-block-image figure,
	.kb-image {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		page-break-inside: avoid !important;
	}

	.wp-block-image img,
	.kb-image img,
	figure.wp-block-image img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		object-fit: contain !important;
	}

	/* Ensure content blocks are visible */
	.kt-inside-inner-col,
	.wp-block-kadence-column {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Prevent page breaks inside important content */
	.ct-popup-content-area,
	.kt-row-column-wrap,
	.korterid-detail-table,
	.korterid-contact-info {
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	/* Headings */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid !important;
		margin: 10px 0 !important;
	}

	/* Paragraphs */
	p {
		orphans: 3 !important;
		widows: 3 !important;
	}

	/* Links - show as normal text, remove underlines */
	a {
		text-decoration: none !important;
		color: inherit !important;
	}

	/* Text blocks */
	.wp-block-kadence-advancedheading,
	.entry-content-wrap p {
		width: 100% !important;
		display: block !important;
		margin: 10px 0 !important;
	}
}