/* Button */
.pe-enquiry-btn{
	background:#111 !important;
	color:#fff !important;
	padding:10px 18px !important;
	border:none !important;
	border-radius:3px !important;
	cursor:pointer !important;
	font-weight:600 !important;
}

/* Modal backdrop */
.pe-modal{
	position:fixed;
	left:0;right:0;top:0;bottom:0;
	background:rgba(0,0,0,0.55);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	padding:20px;
}

/* Modal Box */
.pe-modal-content{
	background:#fff !important;
	border-radius:6px !important;
	width:75% !important;
	max-width:500px !important;
	min-width:320px !important;
	box-shadow:0 10px 30px rgba(0,0,0,0.2) !important;
	display:flex !important;
	flex-direction:column !important;
	height:68vh !important;
}

/* Header */
.pe-modal-header{
	background:#e6e6e6;
	padding:12px 18px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}

.pe-modal-header h2{
	margin:0;
	font-size:20px;
	font-weight:700;
	color:#333;
}

/* Close button pill */
.pe-close-pill{
	position: absolute !important;
    right: 10px !important;
    background: #222 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 6px 20px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    font-size: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    line-height: 0px !important;
}
.pe-close-pill:hover{opacity:0.95}

/* Modal Body */
.pe-modal-body{
	padding:18px;
	overflow:auto;
	max-height:calc(80vh - 56px);
	-webkit-overflow-scrolling:touch;
}

/* Scrollbar */
.pe-modal-body::-webkit-scrollbar{width:10px;height:10px}
.pe-modal-body::-webkit-scrollbar-track{background:#f1f1f1;border-radius:6px}
.pe-modal-body::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:6px}
.pe-modal-body::-webkit-scrollbar-thumb:hover{background:#a8a8a8}

/* Firefox Scrollbar */
.pe-modal-body{
	scrollbar-width:thin;
	scrollbar-color:#c1c1c1 #f1f1f1;
}

/* Form Fields */
.pe-field{margin-bottom:12px}
.pe-label{
	display:block;
	margin-bottom:6px;
	font-weight:600;
	color:#333;
}
.pe-required{color:#d00;margin-left:6px}
.pe-input{
	width:100%;
	padding:10px;
	border:1px solid #ccc;
	border-radius:3px;
	font-size:14px;
}
.pe-textarea{
	width:100%;
	padding:10px;
	border:1px solid #ccc;
	border-radius:3px;
	font-size:14px;
	min-height:90px;
}

/* Product Line */
.pe-product-line{
	font-weight:700;
	padding:8px 10px;
	background:#fafafa;
	border:1px solid #eee;
	border-radius:3px;
	margin-bottom:12px;
	color:#222;
}

/* Response Messages */
.pe-response{
	margin-top:10px;
	color:#459647;
	text-align:center;
}
.pe-response.pe-success{
	background:#459647;
	color:#fff;
	padding:8px;
	border-radius:4px;
}
.pe-response.pe-error{
	background:#d9534f;
	color:#fff;
	padding:8px;
	border-radius:4px;
}

/* Form buttons */
.pe-actions{text-align:center;margin-top:8px}

.pe-submit-btn{
	background: #000 !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.pe-close-text{
	background:transparent;
	border:none;
	color:#666;
	margin-right:12px;
	cursor:pointer;
	font-size:14px;
	padding:10px;
	border-radius:3px;
}
.pe-close-text:hover{
	color:#000;
	text-decoration:underline;
}

/* Mobile Responsive (Phones & small tablets) */
@media (max-width:768px){
	.pe-modal-content{
		width:94% !important;
		max-width:94% !important;
		height:59vh !important;
	}
	.pe-modal-header h2{font-size:18px}
	.pe-submit-btn{width:140px}
	.pe-modal-body{max-height:calc(80vh - 56px)}
	.pe-close-pill{
		right:10px;
		top:6px;
		padding:6px 8px;
		font-size:12px;
	}
}

/* iPad Air (Width ~820px) */
@media (max-width: 900px) and (min-width: 769px){
	.pe-modal-content{
		width:94% !important;
		max-width:94% !important;
		height:47vh !important; /* Your custom requirement */
	}
}