/*==============================================================
TRADE ENQUIRY MODAL
Theme : CoppersmithCreationsIND
==============================================================*/

/*==============================================================
1. MODAL FOUNDATION
==============================================================*/

.trade-modal{
	position:fixed;
	inset:0;
	z-index:99999;

	display:none;
	align-items:center;
	justify-content:center;

	padding:40px;

	opacity:0;
	visibility:hidden;

	transition:
		opacity .35s ease,
		visibility .35s ease;
}

.trade-modal.active{

	display:flex;

	opacity:1;
	visibility:visible;

}

body.trade-modal-open{

	overflow:hidden;

}

/*==============================================================
2. OVERLAY
==============================================================*/

.trade-modal-overlay{

	position:absolute;
	inset:0;

	background:rgba(15,15,15,.75);

	backdrop-filter:blur(8px);

}

/*==============================================================
3. MODAL CONTAINER
==============================================================*/

.trade-modal-container{

	position:relative;

	width:100%;
	max-width:1300px;

	max-height:92vh;

	background:#ffffff;

	border-radius:18px;

	overflow:hidden;

	box-shadow:
		0 35px 80px rgba(0,0,0,.30);

	animation:tradeModalFade .35s ease;

	z-index:2;

}

/*==============================================================
4. GRID LAYOUT
==============================================================*/

.trade-modal-grid{

	display:grid;

	grid-template-columns:1fr;

	min-height:720px;

}

/*==============================================================
5. CLOSE BUTTON
==============================================================*/

.trade-modal-close{

	position:absolute;

	top:20px;
	right:20px;

	width:46px;
	height:46px;

	border:none;

	border-radius:50%;

	background:#ffffff;

	cursor:pointer;

	font-size:2rem;

	line-height:1;

	z-index:20;

	box-shadow:
		0 8px 18px rgba(0,0,0,.15);

	transition:.30s;

}

.trade-modal-close:hover{

	transform:rotate(90deg);

	background:var(--color-primary);

	color:#ffffff;

}

/*==============================================================
Animation
==============================================================*/

@keyframes tradeModalFade{

	from{

		opacity:0;

		transform:translateY(35px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

/*==============================================================
6. LEFT PANEL
==============================================================*/

.trade-modal-info{

	position:relative;

	display:flex;
	align-items:stretch;
	justify-content:center;

	min-height:420px;

	background-image:url("../images/trade-modal-bg.jpg");
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;

	overflow:hidden;

}

.trade-info-overlay{

	position:absolute;
	inset:0;

	background:
		linear-gradient(
			135deg,
			rgba(12,12,12,.82),
			rgba(35,25,18,.72)
		);

	z-index:1;

}

.trade-info-content{

	position:relative;

	z-index:2;

	display:flex;
	flex-direction:column;
	justify-content:center;

	padding:60px;

	color:#ffffff;

	height:100%;

}

.trade-info-content .section-tag{

	display:inline-flex;
	align-items:center;

	width:max-content;

	padding:8px 18px;

	border-radius:30px;

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

	backdrop-filter:blur(12px);

	font-size:.85rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;

	margin-bottom:25px;

}

.trade-info-content h2{

	font-size:2.6rem;
	line-height:1.15;

	margin-bottom:22px;

	color:#ffffff;

	max-width:480px;

}

.trade-info-content>p{

	font-size:1.05rem;
	line-height:1.8;

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

	max-width:520px;

	margin-bottom:45px;

}

/*==============================================================
Feature List
==============================================================*/

.trade-feature-list{

	display:flex;
	flex-direction:column;

	gap:22px;

}

.trade-feature{

	display:flex;

	align-items:flex-start;

	gap:18px;

}

.trade-feature span{

	display:flex;
	align-items:center;
	justify-content:center;

	width:42px;
	height:42px;

	flex-shrink:0;

	border-radius:50%;

	background:var(--color-primary);

	color:#ffffff;

	font-weight:700;

	font-size:1rem;

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

}

.trade-feature h4{

	margin:0 0 6px;

	font-size:1.1rem;

	color:#ffffff;

}

.trade-feature p{

	margin:0;

	line-height:1.7;

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

	font-size:.95rem;

}

/*==============================================================
7. RIGHT PANEL
==============================================================*/

.trade-modal-form{

	display:flex;
	flex-direction:column;

	padding:60px;

	background:#ffffff;

	overflow-y:auto;

}

/*==============================================================
Progress
==============================================================*/

.trade-progress{

	display:flex;
	align-items:center;
	justify-content:center;

	margin-bottom:45px;

}

.trade-step{

	display:flex;
	flex-direction:column;
	align-items:center;

	gap:10px;

	width:120px;

	text-align:center;

}

.trade-step span{

	display:flex;
	align-items:center;
	justify-content:center;

	width:46px;
	height:46px;

	border-radius:50%;

	border:2px solid #d7d7d7;

	background:#ffffff;

	font-weight:700;

	font-size:1rem;

	color:#888;

	transition:.3s;

}

.trade-step.active span{

	background:var(--color-primary);

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

	color:#ffffff;

}

.trade-step p{

	margin:0;

	font-size:.9rem;

	font-weight:600;

	color:#777;

}

.trade-step.active p{

	color:#222;

}

.trade-progress-line{

	flex:1;

	height:2px;

	background:#dddddd;

	margin:0 15px;

	margin-bottom:28px;

}

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

.trade-form-step h3{

	margin:0 0 12px;

	font-size:2rem;

	font-weight:700;

	color:#1f1f1f;

}

.trade-step-intro{

	margin:0 0 40px;

	font-size:1rem;

	line-height:1.8;

	color:#6f6f6f;

	max-width:700px;

}

/*==============================================================
Form Step
==============================================================*/

.trade-form-step{

	display:none;

	animation:fadeStep .35s ease;

}

.trade-form-step.active{

	display:block;

}

/*==============================================================
Animation
==============================================================*/

@keyframes fadeStep{

	from{

		opacity:0;

		transform:translateY(15px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

/*==============================================================
8. FORM GRID
==============================================================*/

.trade-form-grid{

	display:grid;

	grid-template-columns:1fr;

	gap:28px;

}

.form-group{

	display:flex;

	flex-direction:column;

}

.form-group.full-width{

	grid-column:1 / -1;

}

/*==============================================================
Labels
==============================================================*/

.form-group label{

	display:block;

	margin-bottom:10px;

	font-size:.95rem;

	font-weight:600;

	color:#222;

}

/*==============================================================
Inputs / Selects / Textarea
==============================================================*/

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

	width:100%;

	padding:16px 18px;

	font-size:1rem;

	font-family:inherit;

	color:#222;

	background:#ffffff;

	border:1px solid #d9d9d9;

	border-radius:10px;

	outline:none;

	transition:.30s;

	box-sizing:border-box;

}

.form-group textarea{

	min-height:180px;

	resize:vertical;

	line-height:1.7;

}

/*==============================================================
Focus
==============================================================*/

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

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

	box-shadow:0 0 0 4px rgba(184,115,51,.12);

}

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

.form-group input::placeholder,
.form-group textarea::placeholder{

	color:#9b9b9b;

}

/*==============================================================
Select
==============================================================*/

.form-group select{

	cursor:pointer;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23777' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%23777' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	background-repeat:no-repeat;

	background-position:right 18px center;

	padding-right:55px;

	appearance:none;

}

/*==============================================================
File Upload
==============================================================*/

.form-group input[type=file]{

	padding:14px;

	background:#fafafa;

	cursor:pointer;

}

.form-group small{

	margin-top:10px;

	color:#777;

	font-size:.85rem;

	line-height:1.6;

}

/*==============================================================
Buttons
==============================================================*/

.trade-buttons{

	display:flex;

	justify-content:space-between;

	align-items:center;

	margin-top:45px;

	gap:20px;

}

.trade-buttons .btn{

	min-width:180px;

	padding:16px 28px;

	font-size:1rem;

	font-weight:600;

	border-radius:10px;

}

/*==============================================================
Success Screen
==============================================================*/

.trade-success{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	text-align:center;

	padding:90px 50px;

}

.trade-success-icon{

	width:90px;

	height:90px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	background:var(--color-primary);

	color:#ffffff;

	font-size:2rem;

	font-weight:700;

	margin-bottom:30px;

}

.trade-success h3{

	margin-bottom:20px;

	font-size:2rem;

}

.trade-success p{

	max-width:520px;

	margin-bottom:18px;

	line-height:1.8;

	color:#666;

}

/*==============================================================
9. PRODUCT SELECTION
==============================================================*/

.trade-checkbox-grid{

	display:grid;

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

	gap:15px;

	margin-top:5px;

}

.trade-checkbox-grid label{

	position:relative;

	display:flex;

	align-items:center;

	gap:12px;

	padding:18px 20px;

	border:1px solid #e2e2e2;

	border-radius:12px;

	background:#ffffff;

	cursor:pointer;

	font-weight:500;

	transition:all .30s ease;

}

.trade-checkbox-grid label:hover{

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

	transform:translateY(-2px);

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

}

.trade-checkbox-grid input{

	width:18px;

	height:18px;

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

	flex-shrink:0;

}

/*==============================================================
Scrollbar
==============================================================*/

.trade-modal-form{

	scrollbar-width:thin;

	scrollbar-color:var(--color-primary) #f2f2f2;

}

.trade-modal-form::-webkit-scrollbar{

	width:10px;

}

.trade-modal-form::-webkit-scrollbar-track{

	background:#f4f4f4;

}

.trade-modal-form::-webkit-scrollbar-thumb{

	background:var(--color-primary);

	border-radius:20px;

}

/*==============================================================
Desktop
==============================================================*/

@media (min-width:992px){

	.trade-modal-grid{

		grid-template-columns:38% 62%;

	}

	.trade-modal-info{

		min-height:820px;

		position:relative;

	}

	.trade-modal-form{

		max-height:92vh;

	}

	.trade-form-grid{

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

		column-gap:28px;

		row-gap:26px;

	}

	.form-group.full-width{

		grid-column:1 / -1;

	}

}

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

@media (max-width:991px){

	.trade-modal{

		padding:20px;

	}

	.trade-modal-grid{

		grid-template-columns:1fr;

	}

	.trade-modal-info{

		min-height:380px;

	}

	.trade-modal-form{

		padding:45px;

	}

	.trade-form-grid{

		grid-template-columns:1fr;

	}

	.trade-checkbox-grid{

		grid-template-columns:1fr;

	}

	.trade-buttons{

		flex-direction:column;

	}

	.trade-buttons .btn{

		width:100%;

	}

}

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

@media (max-width:767px){

	/*
	|--------------------------------------------------------------------------
	| Full-screen modal shell
	|--------------------------------------------------------------------------
	*/

	.trade-modal{
		align-items:flex-start;

		padding:0;

		overflow-y:auto;
		overscroll-behavior:contain;
		-webkit-overflow-scrolling:touch;

		background:#ffffff;
	}

	.trade-modal-overlay{
		display:none;
	}

	.trade-modal-container{
		width:100%;
		max-width:none;

		min-height:100dvh;
		height:auto;
		max-height:none;

		margin:0;

		border-radius:0;

		overflow:visible;

		box-shadow:none;
	}

	/*
	|--------------------------------------------------------------------------
	| Mobile layout
	|--------------------------------------------------------------------------
	*/

	.trade-modal-grid{
		display:block;

		min-height:100dvh;
		height:auto;
	}

	/*
	 * Hide the promotional panel on phones.
	 * The form is the primary task on mobile.
	 */
	.trade-modal-info{
		display:none;
	}

	/*
	|--------------------------------------------------------------------------
	| Form panel
	|--------------------------------------------------------------------------
	*/

	.trade-modal-form{
		width:100%;

		min-height:100dvh;
		height:auto;
		max-height:none;

		padding:82px 20px 42px;

		overflow:visible;

		background:#ffffff;
	}

	/*
	|--------------------------------------------------------------------------
	| Close button
	|--------------------------------------------------------------------------
	*/

	.trade-modal-close{
		position:fixed;

		top:14px;
		right:14px;

		width:46px;
		height:46px;

		font-size:1.8rem;

		z-index:100001;
	}

	/*
	|--------------------------------------------------------------------------
	| Progress indicator
	|--------------------------------------------------------------------------
	*/

	.trade-progress{
		width:100%;

		margin:0 0 30px;
		padding-right:46px;

		justify-content:space-between;
	}

	.trade-step{
		width:auto;
		flex:0 1 auto;

		gap:7px;
	}

	.trade-step span{
		width:38px;
		height:38px;

		font-size:.9rem;
	}

	.trade-step p{
		font-size:.72rem;
		line-height:1.25;
	}

	.trade-progress-line{
		min-width:18px;

		margin:0 7px 25px;
	}

	/*
	|--------------------------------------------------------------------------
	| Step content
	|--------------------------------------------------------------------------
	*/

	.trade-form-step{
		width:100%;

		min-height:0;
		height:auto;
		max-height:none;

		overflow:visible;
	}

	.trade-form-step h3{
		margin-bottom:10px;

		font-size:1.6rem;
		line-height:1.2;
	}

	.trade-step-intro{
		margin-bottom:28px;

		font-size:.95rem;
		line-height:1.65;
	}

	/*
	|--------------------------------------------------------------------------
	| Fields
	|--------------------------------------------------------------------------
	*/

	.trade-form-grid{
		grid-template-columns:1fr;

		gap:20px;
	}

	.form-group label{
		margin-bottom:8px;

		font-size:.9rem;
	}

	.form-group input,
	.form-group select,
	.form-group textarea{
		padding:14px 15px;

		font-size:16px;
		border-radius:8px;
	}

	/*
	 * Prevent iOS from zooming into focused inputs.
	 */
	.form-group input,
	.form-group select,
	.form-group textarea{
		font-size:16px;
	}

	.form-group textarea{
		min-height:145px;
	}

	.form-group select{
		background-position:right 15px center;
		padding-right:46px;
	}

	.form-group small{
		margin-top:7px;

		font-size:.8rem;
	}

	/*
	|--------------------------------------------------------------------------
	| Product selection
	|--------------------------------------------------------------------------
	*/

	.trade-checkbox-grid{
		grid-template-columns:1fr;

		gap:11px;
	}

	.trade-checkbox-grid label{
		padding:15px 16px;

		border-radius:9px;

		font-size:.9rem;
	}

	/*
	|--------------------------------------------------------------------------
	| Navigation buttons
	|--------------------------------------------------------------------------
	*/

	.trade-buttons{
		flex-direction:column-reverse;

		gap:12px;

		margin-top:30px;
	}

	.trade-buttons .btn{
		width:100%;
		min-width:100%;

		padding:15px 20px;

		border-radius:8px;
	}

	/*
	|--------------------------------------------------------------------------
	| Success screen
	|--------------------------------------------------------------------------
	*/

	.trade-success{
		min-height:calc(100dvh - 124px);

		padding:45px 10px;

		justify-content:center;
	}

	.trade-success-icon{
		width:72px;
		height:72px;

		margin-bottom:24px;

		font-size:1.7rem;
	}

	.trade-success h3{
		font-size:1.75rem;
		line-height:1.25;
	}

	.trade-success p{
		font-size:.95rem;
		line-height:1.65;
	}

}

/*==============================================================
Utility
==============================================================*/

.trade-modal *{

	box-sizing:border-box;

}

.trade-modal img{

	max-width:100%;

	height:auto;

	display:block;

}


/*=====================================================
Trade Partner CTA
=====================================================*/

.trade-partner-cta{

	margin-top:50px;

	padding:38px 42px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:40px;

	border-radius:18px;

	background:linear-gradient(
		135deg,
		#fffaf5,
		#f3e7d9
	);

	border:1px solid rgba(182,132,83,.25);

	box-shadow:
		0 20px 45px rgba(0,0,0,.08);

	position:relative;

	overflow:hidden;

}

.trade-partner-cta::before{

	content:"";

	position:absolute;

	right:-38px;
	top:98px;

	width:220px;
	height:220px;

	border-radius:50%;

	border:1px solid rgba(190,140,90,.12);

}

.trade-partner-tag{

	display:inline-block;

	margin-bottom:10px;

	font-size:12px;

	font-weight:700;

	letter-spacing:.18em;

	text-transform:uppercase;

	color:#b67946;

}

.trade-partner-cta h3{

	margin:0 0 10px;

	font-family:Georgia,serif;

	font-size:36px;

	font-weight:400;

	color:#1b2438;

}

.trade-partner-cta p{

	margin:0;

	max-width:620px;

	font-size:16px;

	line-height:1.7;

	color:#666;

}

.trade-partner-button{

	min-width:270px;

	padding:18px 30px !important;

	border-radius:999px !important;

	background:linear-gradient(
		135deg,
		#cb9157,
		#a96a39
	) !important;

	color:#fff !important;

	font-size:16px;

	font-weight:700;

	display:flex;

	align-items:center;

	justify-content:center;

	gap:14px;

	box-shadow:
		0 15px 35px rgba(171,108,54,.35);

	transition:.25s;

}

.trade-partner-button:hover{

	transform:translateY(-3px);

	box-shadow:
		0 22px 42px rgba(171,108,54,.40);

}

.trade-arrow{

	width:32px;

	height:32px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

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

	font-size:18px;

	transition:.25s;

}

.trade-partner-button:hover .trade-arrow{

	transform:translateX(4px);

}

@media(max-width:900px){

	.trade-partner-cta{

		flex-direction:column;

		align-items:flex-start;

		padding:30px;

	}

	.trade-partner-button{

		width:100%;

		min-width:0;

	}

}