/* ==========================================================================
   Size-guide modal (product page)
   Loaded only on the product page (see Layouts/default.ctp -> if(!empty($sizeGuide))).
   Markup lives in Shoes/inner.ctp; behaviour lives in js/product-page.js.
   ========================================================================== */

/* the underlined "Таблица с размери" trigger */
.sizetable-link {
	text-decoration: underline;
	cursor: pointer;
}

/* full-screen overlay container (hidden until opened) */
.size-guide-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
}
.size-guide-modal.is-open {
	display: block;
}

/* dark backdrop */
.size-guide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

/* the white panel — capped height, scrolls inside itself on small screens */
.size-guide-dialog {
	position: relative;
	background: #fff;
	max-width: 520px;
	width: 92%;
	margin: 6vh auto;
	max-height: 88vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 26px 22px;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.size-guide-close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 38px;
	height: 38px;
	border: 0;
	background: transparent;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: #333;
}

.size-guide-title {
	margin: 0 0 16px;
	font-size: 20px;
	text-align: center;
}

/* per-table heading used in the "both tables" fallback */
.size-guide-section {
	margin: 18px 0 6px;
	font-size: 16px;
}

/* the tables themselves — style ANY table in the modal body, so the standard
   (seeded) tables AND admin WYSIWYG-created tables render identically, with or
   without a CSS class on the <table>. */
.size-guide-body table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 8px;
}
.size-guide-body table th,
.size-guide-body table td {
	border: 1px solid #ddd;
	padding: 8px 10px;
	text-align: center;
}
/* shaded header row for tables that use a real <thead> (the seeded standard
   tables). WYSIWYG tables without a <thead> still render as a clean bordered
   grid via the rules above. */
.size-guide-body table thead th {
	background: #f5f5f5;
	font-weight: bold;
}

/* lock the page behind the modal while it is open (toggled by product-page.js) */
body.size-guide-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.size-guide-dialog {
		width: 96%;
		margin: 4vh auto;
		padding: 18px 12px;
	}
}