/**
 * ============================================================
 * DOMATEN Service Requests
 * Frontend Styles
 * ============================================================
 */

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

:root{

	--dsr-gold:#C79A2D;
	--dsr-gold-hover:#B48722;

	--dsr-black:#111111;
	--dsr-dark:#1B1B1B;

	--dsr-white:#FFFFFF;

	--dsr-light:#F8F8F8;

	--dsr-border:#E6E6E6;

	--dsr-text:#2F2F2F;

	--dsr-muted:#707070;

}

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/

.dsr-service-form{

	max-width:900px;

	margin:0 auto;

	padding:40px;

	background:#fff;

	border:1px solid var(--dsr-border);

	border-radius:18px;

	box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.dsr-service-form *{

	box-sizing:border-box;

}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

.dsr-service-form h2{

	font-size:34px;

	font-weight:700;

	color:var(--dsr-black);

	margin:0 0 12px;

	line-height:1.2;

}

.dsr-service-form h3{

	font-size:22px;

	font-weight:600;

	margin:35px 0 18px;

	color:var(--dsr-black);

	padding-bottom:10px;

	border-bottom:2px solid var(--dsr-light);

}

.dsr-service-form p{

	line-height:1.8;

	color:var(--dsr-muted);

}

/*--------------------------------------------------------------
# Form Layout
--------------------------------------------------------------*/

.dsr-grid{

	display:grid;

	grid-template-columns:repeat(2,minmax(0,1fr));

	gap:24px;

}

.dsr-grid-full{

	grid-column:1/-1;

}

.dsr-field{

	display:flex;

	flex-direction:column;

}

.dsr-field label{

	font-weight:600;

	font-size:14px;

	margin-bottom:8px;

	color:var(--dsr-black);

}

.dsr-required{

	color:#C62828;

	margin-left:4px;

}

/*--------------------------------------------------------------
# Inputs
--------------------------------------------------------------*/

.dsr-service-form input,

.dsr-service-form select,

.dsr-service-form textarea{

	width:100%;

	padding:14px 16px;

	font-size:15px;

	border:1px solid var(--dsr-border);

	border-radius:10px;

	background:#fff;

	color:var(--dsr-text);

	transition:.25s;

}

.dsr-service-form textarea{

	min-height:160px;

	resize:vertical;

}

.dsr-service-form input:focus,

.dsr-service-form select:focus,

.dsr-service-form textarea:focus{

	outline:none;

	border-color:var(--dsr-gold);

	box-shadow:0 0 0 3px rgba(199,154,45,.15);

}

/*--------------------------------------------------------------
# Placeholder
--------------------------------------------------------------*/

.dsr-service-form input::placeholder,

.dsr-service-form textarea::placeholder{

	color:#9A9A9A;

}

/*--------------------------------------------------------------
# Description Text
--------------------------------------------------------------*/

.dsr-description{

	font-size:13px;

	color:var(--dsr-muted);

	margin-top:6px;

}

/*--------------------------------------------------------------
# Form Sections
--------------------------------------------------------------*/

.dsr-section{

	margin-bottom:40px;

	padding-bottom:35px;

	border-bottom:1px solid var(--dsr-border);

}

.dsr-section:last-child{

	border-bottom:none;

	margin-bottom:0;

	padding-bottom:0;

}

/*--------------------------------------------------------------
# Required Notice
--------------------------------------------------------------*/

.dsr-form-notice{

	background:#FFF8E8;

	border-left:4px solid var(--dsr-gold);

	padding:16px 20px;

	border-radius:8px;

	margin-bottom:30px;

	color:var(--dsr-text);

	font-size:14px;

}

/*--------------------------------------------------------------
# Select Fields
--------------------------------------------------------------*/

.dsr-service-form select{

	cursor:pointer;

	background:#fff;

}

/*--------------------------------------------------------------
# Radio Cards
--------------------------------------------------------------*/

.dsr-radio-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

	gap:18px;

}

.dsr-radio-card{

	position:relative;

}

.dsr-radio-card input{

	position:absolute;

	opacity:0;

	pointer-events:none;

}

.dsr-radio-card label{

	display:block;

	padding:18px;

	border:2px solid var(--dsr-border);

	border-radius:12px;

	cursor:pointer;

	background:#fff;

	transition:.25s ease;

	font-weight:600;

}

.dsr-radio-card label:hover{

	border-color:var(--dsr-gold);

	background:#FFFCF5;

}

.dsr-radio-card input:checked + label{

	border-color:var(--dsr-gold);

	background:#FFF8E8;

	box-shadow:0 0 0 3px rgba(199,154,45,.12);

}

/*--------------------------------------------------------------
# Upload Area
--------------------------------------------------------------*/

.dsr-upload{

	border:2px dashed var(--dsr-border);

	border-radius:14px;

	padding:30px;

	text-align:center;

	background:#FCFCFC;

	transition:.25s;

}

.dsr-upload:hover{

	border-color:var(--dsr-gold);

	background:#FFFCF5;

}

.dsr-upload input[type=file]{

	border:none;

	padding:0;

	background:transparent;

	box-shadow:none;

}

.dsr-upload small{

	display:block;

	margin-top:10px;

	color:var(--dsr-muted);

}

/*--------------------------------------------------------------
# Submit Area
--------------------------------------------------------------*/

.dsr-submit{

	margin-top:40px;

	text-align:center;

}

.dsr-submit .button,

.dsr-submit button,

.dsr-submit input[type=submit]{

	background:var(--dsr-gold);

	color:#fff;

	border:none;

	border-radius:10px;

	padding:16px 36px;

	font-size:16px;

	font-weight:600;

	cursor:pointer;

	transition:.25s ease;

}

.dsr-submit .button:hover,

.dsr-submit button:hover,

.dsr-submit input[type=submit]:hover{

	background:var(--dsr-gold-hover);

	transform:translateY(-2px);

	box-shadow:0 10px 25px rgba(199,154,45,.25);

}

/*--------------------------------------------------------------
# Validation
--------------------------------------------------------------*/

.dsr-error{

	color:#C62828;

	font-size:13px;

	margin-top:6px;

}

.dsr-invalid{

	border-color:#C62828 !important;

	box-shadow:0 0 0 3px rgba(198,40,40,.10);

}

.dsr-valid{

	border-color:#4CAF50 !important;

}

/*--------------------------------------------------------------
# Loading State
--------------------------------------------------------------*/

.dsr-loading{

	opacity:.7;

	pointer-events:none;

}

.dsr-loading button{

	position:relative;

}

.dsr-loading button::after{

	content:"";

	width:16px;

	height:16px;

	margin-left:10px;

	display:inline-block;

	border:2px solid rgba(255,255,255,.4);

	border-top-color:#fff;

	border-radius:50%;

	animation:dsr-spin .7s linear infinite;

	vertical-align:middle;

}

@keyframes dsr-spin{

	to{

		transform:rotate(360deg);

	}

}

/*--------------------------------------------------------------
# Success Popup
--------------------------------------------------------------*/

.dsr-popup-overlay{

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.65);

	display:flex;

	align-items:center;

	justify-content:center;

	padding:20px;

	z-index:99999;

	opacity:0;

	visibility:hidden;

	transition:.3s ease;

}

.dsr-popup-overlay.active{

	opacity:1;

	visibility:visible;

}

.dsr-popup{

	background:#fff;

	width:100%;

	max-width:520px;

	border-radius:18px;

	padding:40px;

	text-align:center;

	box-shadow:0 25px 70px rgba(0,0,0,.25);

	animation:dsrPopup .35s ease;

}

@keyframes dsrPopup{

	from{

		transform:translateY(25px) scale(.95);

		opacity:0;

	}

	to{

		transform:translateY(0) scale(1);

		opacity:1;

	}

}

.dsr-popup-icon{

	width:80px;

	height:80px;

	margin:0 auto 20px;

	border-radius:50%;

	background:#FFF8E8;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:34px;

	color:var(--dsr-gold);

}

.dsr-popup h2{

	margin:0 0 15px;

	color:var(--dsr-black);

	font-size:30px;

}

.dsr-popup p{

	margin:0 0 15px;

	line-height:1.8;

	color:var(--dsr-muted);

}

.dsr-reference{

	margin:22px 0;

	padding:16px;

	border-radius:10px;

	background:#F8F8F8;

	border:1px dashed var(--dsr-gold);

	font-size:18px;

	font-weight:700;

	color:var(--dsr-black);

	word-break:break-word;

}

/*--------------------------------------------------------------
# Success Buttons
--------------------------------------------------------------*/

.dsr-popup-actions{

	display:flex;

	justify-content:center;

	flex-wrap:wrap;

	gap:14px;

	margin-top:28px;

}

.dsr-popup-actions a,

.dsr-popup-actions button{

	min-width:180px;

	padding:14px 24px;

	border-radius:10px;

	font-weight:600;

	text-decoration:none;

	cursor:pointer;

	transition:.25s;

}

.dsr-btn-primary{

	background:var(--dsr-gold);

	color:#fff;

	border:none;

}

.dsr-btn-primary:hover{

	background:var(--dsr-gold-hover);

}

.dsr-btn-secondary{

	background:#fff;

	color:var(--dsr-black);

	border:1px solid var(--dsr-border);

}

.dsr-btn-secondary:hover{

	background:#F8F8F8;

}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media(max-width:768px){

	.dsr-service-form{

		padding:25px;

		border-radius:14px;

	}

	.dsr-grid{

		grid-template-columns:1fr;

		gap:18px;

	}

	.dsr-service-form h2{

		font-size:28px;

	}

	.dsr-service-form h3{

		font-size:20px;

	}

	.dsr-popup{

		padding:30px 24px;

	}

	.dsr-popup-actions{

		flex-direction:column;

	}

	.dsr-popup-actions a,

	.dsr-popup-actions button{

		width:100%;

	}

}

/*--------------------------------------------------------------
# Small Animations
--------------------------------------------------------------*/

.dsr-service-form input,

.dsr-service-form select,

.dsr-service-form textarea,

.dsr-radio-card label,

.dsr-upload,

.dsr-submit button{

	transition:all .25s ease;

}

.dsr-service-form{

	animation:dsrFadeIn .4s ease;

}

@keyframes dsrFadeIn{

	from{

		opacity:0;

		transform:translateY(20px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

.dsr-google-meet{

	display:none;

	margin:30px 0;

}

.dsr-google-meet-card{

	background:#FFF9EC;

	border:1px solid #E9D18A;

	border-radius:12px;

	padding:24px;

	text-align:center;

}

.dsr-google-meet-card h3{

	margin-bottom:12px;

}

.dsr-google-meet-card p{

	margin-bottom:20px;

}