/*
* © Seddike Tanvir
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: var(--bn_font_5);
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background-color: var(--bgColor01);
}

p {
	color: var(--textColor01);
	letter-spacing: 0.5px;
}

.p1 {
	font-weight: 650;
	font-size: 1.1rem;
}

.p2 {
	font-weight: 550;
	font-size: 1.05rem;
}

.p3 {
	font-weight: 450;
	font-size: 1rem;
}

#p3_contact span {
	-webkit-user-select: all;
	-moz-user-select: all;
	user-select: all;
}

.bold_p {
	font-weight: 550;
}

/* Calculator Card */
.calculator-card {
	background-color: var(--cardBgColor01);
	width: 90vw;
	max-width: 45rem;
	margin: 2.5rem auto 0;
	border-radius: 10px;
	padding: 1.5rem 0;
	border: 1px solid #ffffff11;
	-webkit-box-shadow: 0 0 8px var(--boxShadowColor01);
	box-shadow: 0 0 8px var(--boxShadowColor01);
	scroll-margin: 8.5rem;
}

.form_title {
	color: var(--textColor01);
	text-align: center;
	margin-bottom: 2rem;
	font-size: 1.4rem;
	font-family: var(--bn_font_13);
	/* background-image: -o-linear-gradient(290deg, #b721ff 0%, #21d4fd 100%); */
	/* background-image: linear-gradient(200deg, #b721ff 0%, #21d4fd 100%); */
	background-image: linear-gradient(-225deg, #fa2f91 0%, #b721ff 50%, #21d4fd 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

#price-calculator-form {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 15px;
	width: 90%;
	margin: 0 auto;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
	padding: 7px 10px;
	background-color: var(--cardBgColor01);
	border: 1px solid #55555550;
	border-radius: 5px;
	color: var(--textColor01);
	font-size: 0.9rem;
	-webkit-user-select: all;
	-moz-user-select: all;
	user-select: all;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 100%;
	flex: 1 1 100%;
	text-align: center;
	outline: none;
}

input::-webkit-input-placeholder {
	color: #777;
}

input::-moz-placeholder {
	color: #777;
}

input:-ms-input-placeholder {
	color: #777;
}

input::-ms-input-placeholder {
	color: #777;
}

input::placeholder,
select:invalid,
.select_1st_option {
	color: #777;
}

input:focus,
select:focus,
textarea:focus{
	border: 1px solid #24f7759c;
	box-shadow: 0 0 5px #24f775;
}

select option:not(.select_1st_option) {
	color: var(--textColor01);
	background-color: var(--cardBgColor01);
}

textarea {
	resize: vertical;
	min-height: 80px;
}

/* Calculate Button */
button#calculate-price-btn {
	padding: 0.4rem 1.1rem;
	background-color: #00e673;
	color: #000;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin: 1.2rem auto 0;
	/* display: block; */
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}

button#calculate-price-btn:hover {
	background-color: #00e673e3;
}

/* Total Price Section */
#total-price {
	background-color: var(--cardBgColor02);
	border-radius: 8px;
	padding: 0;
	margin: 2rem auto 0;
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	-webkit-box-shadow: 0 .5px 8px var(--boxShadowColor02);
	box-shadow: 0 .5px 8px var(--boxShadowColor02);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	/* opacity: 0; */
	height: auto;
	overflow: hidden;
	width: 90%;
	padding: 2rem 1rem;
	/* padding: 2rem 0rem; */

}

/* #total-price.show {
  opacity: 1;
  height: auto;
  padding: 1.5rem;
} */

.total_price_line {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--textColor02);
    border-radius: 5px;
    padding: 0.5rem 0;
    transition: all 0.6s ease-in-out;
}

#price-amount {
	/* color: #01aa07; */
	font-weight: bold;
	font-size: 1.2rem;
}

.total-price-buttons {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	gap: 1rem;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/* .total-price-buttons-a{
  text-decoration: none;
} */

#total-price button {
	padding: 0.5rem 1.2rem;
	/* border: none; */
	border-radius: 5px;
	cursor: pointer;
	font-weight: 500;
	-webkit-transition: background-color 0.2s;
	-o-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

#refresh-btn {
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #191e242d;
}

#refresh-btn:hover {
	background-color: #e0e0e0e0;
}

#order-now-btn {
	background-color: #00e673;
	color: #000000;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
	padding: 0.4rem 1.1rem;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	display: block;
}

#order-now-btn:hover {
	background-color: #00e673e3;
}

.hidden {
	display: none;
}
.btn_semi_hidden{
	border:1px solid var(--cardBgColor02);
	background-color: transparent;
}



.flash-animation {
    background-color: #01cc45 !important;
    color: #fff !important;
    transform: scale(1.4);
	/* max-width: fit-content; */
	/* padding: 0 5%; */
	/* margin-left: auto; */
	/* margin-right: auto; */
    box-shadow: 0 0 15px rgba(1, 214, 72, 0.6);
    transition: all 0.6s ease-in-out;
}

/* Optional: add a subtle pulse */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px rgba(1, 214, 72, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(1, 214, 72, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(1, 214, 72, 0.4);
    }
}