/**
 * Davies Color System
 * Room Visualizer
 */

/* ==========================================================
   Modal Backdrop
========================================================== */

.dcs-room-visualizer{

	position:fixed;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	padding:32px;
	background:rgba(0,0,0,.65);
	z-index:99999;

}

.dcs-room-visualizer.open{

	display:flex;

}

/* ==========================================================
   Modal
========================================================== */

.dcs-room-modal{

	position:relative;
	width:min(1200px,100%);
	max-height:90vh;
	background:#fff;
	border-radius:20px;
	padding:32px;
	overflow-y:auto;
	box-shadow:0 30px 80px rgba(0,0,0,.25);

}

/* ==========================================================
   Close Button
========================================================== */

.dcs-room-close{

	position:absolute;
	top:18px;
	right:18px;
	width:40px;
	height:40px;
	border:none;
	border-radius:50%;
	background:#f5f5f5;
	font-size:24px;
	cursor:pointer;
	transition:background .2s ease;

}

.dcs-room-close:hover{

	background:#e5e5e5;

}

/* ==========================================================
   Heading
========================================================== */

.dcs-room-modal h2{

	margin:0 0 28px;
	font-size:28px;
	font-weight:700;

}

/* ==========================================================
   Main Layout
========================================================== */

.dcs-room-layout{

	display:grid;
	grid-template-columns:320px minmax(0,1fr);
	gap:40px;
	align-items:start;

}

/* ==========================================================
   Sidebar
========================================================== */

.dcs-room-sidebar{

	display:flex;
	flex-direction:column;
	width:320px;
	flex-shrink:0;

}

/* ==========================================================
   Color Panel
========================================================== */

.dcs-color-panel{

	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding-bottom:12px;

}

.dcs-selected-swatch{

	width:140px;
	height:140px;
	border-radius:18px;
	margin-bottom:18px;
	border:1px solid rgba(0,0,0,.08);
	box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.dcs-selected-name{

	margin:0;
	font-size:24px;
	font-weight:700;
	line-height:1.2;

}

.dcs-selected-code{

	margin:8px 0 0;
	font-size:15px;
	color:#666;

}

/* ==========================================================
   Divider
========================================================== */

.dcs-room-divider{

	margin:28px 0;
	border:none;
	border-top:1px solid #ececec;

}

/* ==========================================================
   Room Browser
========================================================== */

.dcs-room-browser{

	margin:0;

}

.dcs-room-browser-title{

	margin:0 0 18px;
	font-size:14px;
	font-weight:700;
	line-height:1.2;

}

.dcs-room-grid{

	display:grid;
	grid-template-columns:1fr;
	gap:18px;

}

/* ==========================================================
   Room Card
========================================================== */

.dcs-room-card{

	background:#fff;
	border:2px solid transparent;
	border-radius:18px;
	overflow:hidden;
	cursor:pointer;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;

}

.dcs-room-card:hover{

	transform:translateY(-4px);
	box-shadow:0 14px 28px rgba(0,0,0,.12);

}

.dcs-room-card.selected{

	border-color:#222;
	box-shadow:0 18px 36px rgba(0,0,0,.18);

}

.dcs-room-card img{

	display:block;
	width:100%;
	aspect-ratio:16 / 10;
	object-fit:cover;

}

.dcs-room-name{

	padding:14px;
	text-align:center;
	font-size:15px;
	font-weight:600;

}

/* ==========================================================
   Upload Button
========================================================== */

.dcs-secondary-button{

	width:100%;
	margin-top:auto;
	padding:14px;
	border:1px solid #ddd;
	border-radius:12px;
	background:#fff;
	font-size:15px;
	font-weight:600;
	cursor:pointer;

	transition:
		background .2s ease,
		border-color .2s ease;

}

.dcs-secondary-button:hover{

	background:#fafafa;
	border-color:#222;

}

/* ==========================================================
   Viewer
========================================================== */

.dcs-room-content{

	min-width:0;

}

.dcs-room-viewer-title{

	margin:0 0 18px;
	font-size:14px;
	font-weight:700;
	line-height:1.2;

}

.dcs-room-preview{

	position:relative;

	width:100%;
	aspect-ratio:16 / 10;

	border-radius:18px;

	background:#f5f5f5;

	border:2px dashed #d6d6d6;

	display:flex;

	align-items:center;

	justify-content:center;

	overflow:hidden;

}

/* ==========================================================
   Preview Image
========================================================== */

.dcs-room-image{

	position:absolute;
	inset:0;

	width:100%;
	height:100%;

	object-fit:cover;

	display:block;

	border-radius:18px;

}

/* ==========================================================
   Placeholder
========================================================== */

.dcs-room-placeholder{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	gap:14px;

	padding:24px;

	text-align:center;

	color:#888;

	z-index:1;

}

.dcs-room-placeholder-icon{

	font-size:52px;

	line-height:1;

	opacity:.65;

}

.dcs-room-placeholder p{

	margin:0;

	font-size:16px;

	font-weight:500;

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:900px){

	.dcs-room-layout{

		grid-template-columns:1fr;

		gap:24px;

	}

	.dcs-room-sidebar{

		width:100%;

	}

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:480px){

	.dcs-room-visualizer{

		padding:16px;

	}

	.dcs-room-modal{

		padding:20px;

	}

	.dcs-selected-swatch{

		width:110px;
		height:110px;

	}

	.dcs-room-grid{

		grid-template-columns:1fr;

	}

}