/* =====================================================
   ModArt Renov Framework
--------------------------------------------------------
   File        : contact.css
   Description : Contact Section
   Version     : 1.0.0
   Author      : Ayhan TACAR & Atlas
===================================================== */


/* =====================================================
   CONTACT
===================================================== */

.contact{

	position:relative;

	overflow:hidden;

	background:var(--color-surface);

}

.contact::before{

	content:"";

	position:absolute;

	inset:0;

	pointer-events:none;

	background:
		radial-gradient(
			circle at top right,
			rgba(212,175,55,.05),
			transparent 45%
		);

}


/* =====================================================
   GRID
===================================================== */

.contact-grid{

	position:relative;

	display:grid;

	grid-template-columns:.85fr 1.15fr;

	align-items:start;

	gap:40px;

}


/* =====================================================
   FORM
===================================================== */

.contact-form{

	padding:42px;

	background:var(--color-card);

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

	border-radius:var(--radius-md);

	box-shadow:var(--shadow-sm);

	-webkit-backdrop-filter:blur(10px);

	backdrop-filter:blur(10px);

}

.contact-form .form-group{

	margin-bottom:22px;

}

.contact-form label{

	display:block;

	margin-bottom:8px;

	color:var(--color-text-light);

	font-size:15px;

	font-weight:600;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

	width:100%;

	padding:16px 18px;

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

	border-radius:14px;

	background:rgba(255,255,255,.03);

	color:var(--color-text);

	font:inherit;

	transition:
		border-color var(--transition),
		background-color var(--transition),
		box-shadow var(--transition);

}

.contact-form input::placeholder,
.contact-form select::placeholder,
.contact-form textarea::placeholder{

	color:rgba(255,255,255,.45);

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

	outline:none;

	border-color:var(--color-primary);

	background:rgba(255,255,255,.05);

	box-shadow:0 0 0 4px rgba(212,175,55,.12);

}

.contact-form select{

	appearance:none;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 18px center;

	cursor:pointer;

}

.contact-form select option{

	background:var(--color-card);
	color:var(--color-text);

}



.contact-form button{

	width:100%;

	margin-top:10px;

	will-change:transform;

}

.contact-form textarea{

	min-height:180px;

	resize:vertical;

}


/* =====================================================
   FORM MESSAGE
===================================================== */

.form-message{

	margin-top:20px;

}

.form-success,
.form-error{

	padding:16px 20px;

	border-radius:14px;

	font-weight:600;

}

.form-success{

	background:rgba(0,180,80,.12);

	border:1px solid rgba(0,180,80,.25);

	color:#6be38d;

}

.form-error{

	background:rgba(220,60,60,.10);

	border:1px solid rgba(220,60,60,.25);

	color:#ff8c8c;

}


/* =====================================================
   CONTACT INFO
===================================================== */

.contact-info{

	display:flex;

	flex-direction:column;

	gap:20px;

}

.contact-item{

	display:flex;

	align-items:flex-start;

	gap:18px;

	padding:26px;

	background:var(--color-card);

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

	border-radius:var(--radius-md);

	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition);

	will-change:transform;

}

.contact-item:hover{

	transform:translateY(-6px);

	border-color:rgba(212,175,55,.35);

	box-shadow:var(--shadow);

}

.contact-icon{

	display:flex;

	align-items:center;

	justify-content:center;

	flex-shrink:0;

	width:60px;

	height:60px;

	border-radius:50%;

	background:var(--color-primary);

	color:#fff;

	font-size:24px;

	font-weight:700;

	transition:
		transform var(--transition),
		background-color var(--transition);

}

.contact-item:hover .contact-icon{

	transform:scale(1.08) rotate(4deg);

}

.contact-item h3{

	margin-bottom:8px;

	font-size:20px;

	line-height:1.3;

	text-wrap:balance;

}

.contact-item p,
.contact-item a{

	color:var(--color-text-muted);

	line-height:1.8;

	transition:color var(--transition);

}

.contact-item a:hover{

	color:var(--color-primary);

}


/* =====================================================
   HONEYPOT
===================================================== */

.contact-honeypot{

	position:absolute;

	left:-99999px;

	width:1px;

	height:1px;

	overflow:hidden;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:992px){

	.contact-grid{

		grid-template-columns:1fr;

	}

}

@media (max-width:768px){

	.contact-form{

		padding:30px;

	}

}


/* =====================================================
   PERFORMANCE
===================================================== */

.contact-item,
.contact-icon{

	backface-visibility:hidden;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion:reduce){

	.contact-form input,
	.contact-form textarea,
	.contact-form button,
	.contact-item,
	.contact-icon{

		animation:none !important;

		transition:none !important;

		transform:none !important;

	}

}

/* =====================================================
   PREMIUM OVERRIDES
===================================================== */

.contact::after{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 24%,transparent 78%,rgba(212,175,55,.04));
}

.contact-form{
	position:relative;
	overflow:hidden;
	background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(10,10,10,.9));
	border-color:rgba(212,175,55,.16);
	box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
}

.contact-form::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	background:radial-gradient(circle at top right,rgba(212,175,55,.11),transparent 44%);
}

.contact-form > *{
	position:relative;
	z-index:1;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
	border-color:rgba(212,175,55,.12);
	background:rgba(255,255,255,.025);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.contact-item{
	background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(11,11,11,.88));
	border-color:rgba(212,175,55,.14);
	box-shadow:0 16px 36px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04);
}

.contact-item:hover{
	transform:translateY(-8px);
	border-color:rgba(212,175,55,.34);
	box-shadow:0 22px 48px rgba(0,0,0,.28),0 0 0 1px rgba(212,175,55,.08) inset;
}

.contact-icon{
	background:radial-gradient(circle at 30% 25%,rgba(255,237,190,.16),rgba(212,175,55,.84));
	color:#1a1306;
	box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.contact-item h3{
	color:#f6ebd5;
}

.contact-item p,
.contact-item a,
.contact-form label{
	color:#d6cab6;
}