/* ============================================
   AD LAYOUT PREVIEWS - GUIDE LAYOUTS
   ============================================ */

/* Ad Preview Container */
.ad-preview-container {
	background: #f8f9fa;
	border: 2px solid #dee2e6;
	border-radius: 4px;
	padding: 10px;
	margin: 15px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 120px;
}

/* Full Page Layout */
.ad-layout-full {
	width: 85px;
	height: 110px;
	background: #fff;
	border: 2px solid #333;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Two Page Spread */
.ad-layout-spread {
	width: 170px;
	height: 110px;
	background: #fff;
	border: 2px solid #333;
	position: relative;
	display: flex;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ad-layout-spread::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #999;
	transform: translateX(-50%);
}

/* Gatefold Layout */
.ad-layout-gatefold {
	width: 127px;
	height: 110px;
	background: #fff;
	border: 2px solid #333;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ad-layout-gatefold::before {
	content: "";
	position: absolute;
	left: 33%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #999;
	border-left: 1px dashed #666;
}

/* Half Page Horizontal */
.ad-layout-half-h {
	width: 85px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ad-layout-half-h::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #e6e6e6;
}

.ad-layout-half-h .ad-space {
	width: calc(100% - 8px);
	height: calc(50% - 6px);
	background: #fff;
	border: 2px solid #333;
	position: absolute;
	top: 4px;
	left: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Half Page Vertical */
.ad-layout-half-v {
	width: 85px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ad-layout-half-v::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-half-v .ad-space {
	width: calc(50% - 6px);
	height: calc(100% - 8px);
	background: #fff;
	border: 2px solid #333;
	position: absolute;
	left: 4px;
	top: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Three-Quarter Page */
.ad-layout-three-quarter {
	width: 85px;
	height: 110px;
	background: #f8f9fa;
	border: 2px solid #dee2e6;
	position: relative;
}

.ad-layout-three-quarter .ad-space {
	width: 100%;
	height: 75%;
	background: #fff;
	border: 2px solid #333;
	position: absolute;
	top: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Quarter Page */
.ad-layout-quarter {
	width: 85px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add muted grid lines */
.ad-layout-quarter::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-quarter::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #e6e6e6;
}

.ad-layout-quarter .ad-space {
	width: calc(50% - 6px);
	height: calc(50% - 6px);
	background: #fff;
	border: 2px solid #333;
	position: absolute;
	top: 4px;
	left: 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	z-index: 1;
}

/* ============================================
   MAP AD LAYOUTS
   ============================================ */

/* Map Full Page Ad */
.ad-layout-map-full {
	width: 180px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add fold lines */
.ad-layout-map-full::before {
	content: "";
	position: absolute;
	left: 25%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-full::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-full .ad-space {
	width: calc(25% - 8px);
	height: calc(100% - 8px);
	background: #fff;
	border: 2px solid #17a2b8;
	position: absolute;
	left: 4px;
	top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
	z-index: 1;
}

.ad-layout-map-full .ad-space::after {
	content: "FULL";
	font-size: 9px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* Map Front/Back Cover */
.ad-layout-map-front,
.ad-layout-map-back {
	width: 180px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add fold lines */
.ad-layout-map-front::before,
.ad-layout-map-back::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-front::after,
.ad-layout-map-back::after {
	content: "";
	position: absolute;
	left: 75%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-front .ad-space,
.ad-layout-map-back .ad-space {
	width: calc(25% - 8px);
	height: calc(100% - 8px);
	background: #fff;
	border: 2px solid #17a2b8;
	position: absolute;
	right: 4px;
	top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
	z-index: 1;
}

.ad-layout-map-front .ad-space::after {
	content: "FRONT";
	font-size: 7px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.ad-layout-map-back .ad-space::after {
	content: "BACK";
	font-size: 9px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

/* Map Three-Quarter Page */
.ad-layout-map-three-quarter {
	width: 180px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add fold lines */
.ad-layout-map-three-quarter::before {
	content: "";
	position: absolute;
	left: 25%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-three-quarter::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-three-quarter .ad-space {
	width: calc(24% - 9px);
	height: 60%;
	background: #fff;
	border: 2px solid #17a2b8;
	position: absolute;
	left: 6px;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
	z-index: 1;
}

.ad-layout-map-three-quarter .ad-space::after {
	content: "3/4";
	font-size: 10px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
}

/* Map Quarter Page */
.ad-layout-map-quarter {
	width: 180px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add fold lines */
.ad-layout-map-quarter::before {
	content: "";
	position: absolute;
	left: 25%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-quarter::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-quarter .ad-space {
	width: calc(23% - 9px);
	height: 25%;
	background: #fff;
	border: 2px solid #17a2b8;
	position: absolute;
	left: 7px;
	bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
	z-index: 1;
}

.ad-layout-map-quarter .ad-space::after {
	content: "1/4";
	font-size: 10px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
}

/* Map Half Page */
.ad-layout-map-half {
	width: 180px;
	height: 110px;
	background: #fff;
	border: 2px solid #e6e6e6;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Add fold lines */
.ad-layout-map-half::before {
	content: "";
	position: absolute;
	left: 25%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-half::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e6e6e6;
}

.ad-layout-map-half .ad-space {
	width: calc(24% - 9px);
	height: 45%;
	background: #fff;
	border: 2px solid #17a2b8;
	position: absolute;
	left: 6px;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(23, 162, 184, 0.2);
	z-index: 1;
}

.ad-layout-map-half .ad-space::after {
	content: "1/2";
	font-size: 10px;
	font-weight: bold;
	color: #17a2b8;
	opacity: 0.7;
}

/* ============================================
   PRICING DISPLAY
   ============================================ */

.price-display,
.price-display-addon {
	font-size: 1.5rem;
	font-weight: bold;
	font-family: Kanit, sans-serif;
	color: #28a745;
	margin: 10px 0;
}

.price-display.sold-out {
	color: #dc3545;
}