.flatpickr-calendar{background:transparent;overflow:hidden;max-height:0;opacity:0;visibility:hidden;text-align:center;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;visibility:visible;overflow:visible;max-height:640px}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px);}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.hasWeeks{width:auto}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:28px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.flatpickr-prev-month,.flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;line-height:16px;height:28px;padding:10px calc(3.57% - 1.5px);z-index:3;}.flatpickr-prev-month i,.flatpickr-next-month i{position:relative}.flatpickr-prev-month.flatpickr-prev-month,.flatpickr-next-month.flatpickr-prev-month{ left:0; }  .flatpickr-prev-month.flatpickr-next-month,.flatpickr-next-month.flatpickr-next-month{ right:0; }  .flatpickr-prev-month:hover,.flatpickr-next-month:hover{color:#959ea9;}.flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-prev-month svg,.flatpickr-next-month svg{width:14px;}.flatpickr-prev-month svg path,.flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto;}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.05);-webkit-box-sizing:border-box;box-sizing:border-box;}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute;top:33%}.numInputWrapper span.arrowUp{top:0;border-bottom:0;}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6)}.numInputWrapper span.arrowDown{top:50%;}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6)}.numInputWrapper span svg{width:inherit;height:auto;}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05);}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:6.16px 0 0 0;line-height:1;height:28px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.flatpickr-current-month.slideLeft{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-animation:fpFadeOut 400ms ease,fpSlideLeft 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeOut 400ms ease,fpSlideLeft 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-current-month.slideLeftNew{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-animation:fpFadeIn 400ms ease,fpSlideLeftNew 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeIn 400ms ease,fpSlideLeftNew 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-current-month.slideRight{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-animation:fpFadeOut 400ms ease,fpSlideRight 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeOut 400ms ease,fpSlideRight 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-current-month.slideRightNew{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-animation:fpFadeIn 400ms ease,fpSlideRightNew 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeIn 400ms ease,fpSlideRightNew 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0;}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block;}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:default;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:initial;border:0;border-radius:0;vertical-align:initial;}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:307.875px;}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.flatpickr-calendar.animate .dayContainer.slideLeft{-webkit-animation:fpFadeOut 400ms cubic-bezier(.23,1,.32,1),fpSlideLeft 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeOut 400ms cubic-bezier(.23,1,.32,1),fpSlideLeft 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.animate .dayContainer.slideLeft,.flatpickr-calendar.animate .dayContainer.slideLeftNew{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.flatpickr-calendar.animate .dayContainer.slideLeftNew{-webkit-animation:fpFadeIn 400ms cubic-bezier(.23,1,.32,1),fpSlideLeft 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeIn 400ms cubic-bezier(.23,1,.32,1),fpSlideLeft 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.animate .dayContainer.slideRight{-webkit-animation:fpFadeOut 400ms cubic-bezier(.23,1,.32,1),fpSlideRight 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeOut 400ms cubic-bezier(.23,1,.32,1),fpSlideRight 400ms cubic-bezier(.23,1,.32,1);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.flatpickr-calendar.animate .dayContainer.slideRightNew{-webkit-animation:fpFadeIn 400ms cubic-bezier(.23,1,.32,1),fpSlideRightNew 400ms cubic-bezier(.23,1,.32,1);animation:fpFadeIn 400ms cubic-bezier(.23,1,.32,1),fpSlideRightNew 400ms cubic-bezier(.23,1,.32,1)}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9;}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange,.flatpickr-day.startRange.startRange + .endRange,.flatpickr-day.endRange.startRange + .endRange{-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.disabled,.flatpickr-day.disabled:hover{pointer-events:none}.flatpickr-day.disabled,.flatpickr-day.disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{display:inline-block;float:left;}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day{display:block;width:100%;max-width:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left;}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;cursor:pointer;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;display:inline-block;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400;}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{background:#f0f0f0}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes fpSlideLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fpSlideLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes fpSlideLeftNew{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpSlideLeftNew{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes fpSlideRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fpSlideRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes fpSlideRightNew{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpSlideRightNew{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes fpFadeOut{from{opacity:1}to{opacity:0}}@keyframes fpFadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes fpFadeIn{from{opacity:0}to{opacity:1}}@keyframes fpFadeIn{from{opacity:0}to{opacity:1}}.bgc-calculator {
font-family: 'Poppins', sans-serif;
position: relative;
max-width: 960px;
margin: 0 auto;
} .bgc-layout {
display: flex;
gap: 0;
align-items: stretch;
}
.bgc-col-left {
flex: 1;
min-width: 0;
padding: 30px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px 0 0 8px;
}
.bgc-col-right {
width: 300px;
flex-shrink: 0;
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-left: none;
border-radius: 0 8px 8px 0;
}
.bgc-right-panel {
padding: 30px 24px;
position: sticky;
top: 40px;
} .bgc-main-title {
margin: 0 0 20px;
font-size: 22px;
color: #333;
font-weight: 700;
} .bgc-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 24px;
}
.bgc-step-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #ddd;
color: #888;
font-weight: 700;
font-size: 15px;
transition: all 0.3s;
}
.bgc-step-dot.bgc-step-active {
background: #3981b0;
color: #fff;
}
.bgc-step-dot.bgc-step-done {
background: #27ae60;
color: #fff;
}
.bgc-step-sep {
width: 40px;
height: 3px;
background: #ddd;
margin: 0 6px;
} .bgc-summary-bar {
background: #f0f6fc;
border: 1px solid #c3d4e5;
border-radius: 6px;
padding: 8px 14px;
margin-bottom: 20px;
font-size: 14px;
color: #333;
} .bgc-panel {
display: none;
}
.bgc-panel-active {
display: block;
}
.bgc-step-title {
margin: 0 0 16px;
font-size: 17px;
color: #333;
font-weight: 600;
}
.bgc-hint {
font-size: 13px;
color: #999;
margin: -10px 0 14px;
} .bgc-delivery-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.bgc-delivery-option {
cursor: pointer;
}
.bgc-delivery-option input[type="radio"] {
display: none;
}
.bgc-delivery-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
padding: 24px 14px;
border: 2px solid #e0e0e0;
border-radius: 6px;
transition: all 0.2s;
background: #fff;
height: 100%;
}
.bgc-delivery-card:hover {
border-color: #bbb;
}
.bgc-delivery-option input:checked + .bgc-delivery-card {
border-color: #3981b0;
background: #e8f0f5;
}
.bgc-delivery-icon {
font-size: 38px;
line-height: 1;
flex-shrink: 0;
color: #666;
}
.bgc-delivery-option input:checked + .bgc-delivery-card .bgc-delivery-icon {
color: #3981b0;
}
.bgc-delivery-label {
font-size: 14px;
font-weight: 600;
color: #333;
}
.bgc-delivery-option input:checked + .bgc-delivery-card .bgc-delivery-label {
color: #3981b0;
} .bgc-tank-row {
display: flex;
gap: 40px;
align-items: flex-start;
margin-bottom: 20px;
}
.bgc-tanks {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.bgc-tank-image {
width: 300px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.bgc-tank-image img {
max-width: 100%;
height: auto;
max-height: 200px;
object-fit: contain;
}
.bgc-tank-option {
cursor: pointer;
}
.bgc-tank-option input[type="radio"] {
display: none;
}
.bgc-tank-card {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 12px;
border: 2px solid #e0e0e0;
border-radius: 6px;
transition: all 0.2s;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #333;
background: #fff;
}
.bgc-tank-option input:checked + .bgc-tank-card {
border-color: #3981b0;
background: #e8f0f5;
color: #3981b0;
}
.bgc-tank-card:hover {
border-color: #bbb;
} .bgc-postal-wrap {
margin-bottom: 16px;
}
.bgc-postal-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.bgc-req {
color: #e74c3c;
margin-left: 2px;
}
.bgc-input-postal {
width: 130px;
padding: 10px 14px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
border: 2px solid #e0e0e0;
border-radius: 6px;
text-align: center;
letter-spacing: 2px;
outline: none;
}
.bgc-input-postal:focus {
border-color: #3981b0;
}
.bgc-postal-status {
margin-top: 8px;
font-size: 14px;
min-height: 20px;
}
.bgc-status-ok {
color: #27ae60;
font-weight: 600;
}
.bgc-status-err {
color: #e74c3c;
}
.bgc-contact-hint {
margin-top: 16px;
padding: 12px 15px;
background: #f0f6fc;
border: 1px solid #c3d4e5;
border-radius: 6px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.bgc-contact-hint a {
color: #3981b0;
font-weight: 600;
text-decoration: underline;
} .bgc-fill-section {
margin-bottom: 24px;
}
.bgc-slider-wrap {
margin-bottom: 12px;
}
.bgc-slider-row {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.bgc-slider-label-min,
.bgc-slider-label-max {
font-size: 12px;
color: #999;
flex-shrink: 0;
}
.bgc-slider-bar {
flex: 1;
height: 12px;
background: #e0e0e0;
border-radius: 6px;
position: relative;
}
.bgc-slider-bar-fill {
height: 100%;
width: 0%;
background: #ffb000;
border-radius: 6px;
}
.bgc-slider-thumb {
position: absolute;
top: 50%;
left: 0%;
width: 22px;
height: 22px;
background: #3981b0;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.bgc-slider-value {
text-align: center;
font-size: 20px;
font-weight: 700;
color: #3981b0;
margin-top: 8px;
}
.bgc-slider-hidden {
display: none;
}
.bgc-fill-info {
font-size: 13px;
color: #666;
}
.bgc-fill-info p {
margin: 4px 0;
}
.bgc-info-min,
.bgc-info-over {
background: #fdf0ef;
border: 1px solid #f5c6cb;
color: #c0392b;
font-weight: 600;
font-size: 13px;
padding: 10px 14px;
border-radius: 6px;
margin-top: 8px;
line-height: 1.5;
} .bgc-mode-section {
margin-bottom: 24px;
}
.bgc-mode-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 15px;
padding: 8px 0;
}
.bgc-mode-option input[type="radio"] {
display: none;
}
.bgc-switch {
display: inline-block;
width: 42px;
height: 24px;
background: #ccc;
border-radius: 12px;
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.bgc-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.bgc-mode-option input:checked + .bgc-switch {
background: #3981b0;
}
.bgc-mode-option input:checked + .bgc-switch::after {
transform: translateX(18px);
}
.bgc-manual-input {
margin-top: 6px;
padding-left: 52px;
}
.bgc-manual-input label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.bgc-input-amount {
width: 160px;
padding: 10px 14px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 6px;
outline: none;
}
.bgc-input-amount:focus {
border-color: #3981b0;
} .bgc-error {
padding: 12px 15px;
background: #fdf0ef;
color: #e74c3c;
border-radius: 6px;
margin-bottom: 15px;
font-size: 14px;
} .bgc-nav {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.bgc-btn {
padding: 12px 30px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.bgc-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.bgc-btn-next {
background: #3981b0;
color: #fff;
}
.bgc-btn-next:hover:not(:disabled) {
background: #3981b0;
}
.bgc-btn-back {
background: #f0f0f0;
color: #333;
}
.bgc-btn-back:hover {
background: #e0e0e0;
} .bgc-divider {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.bgc-divider-line {
flex: 1;
height: 1px;
background: #ccc;
}
.bgc-divider-text {
font-size: 12px;
color: #888;
text-transform: uppercase;
white-space: nowrap;
font-weight: 600;
letter-spacing: 0.5px;
}
.bgc-details {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.bgc-detail-row {
text-align: center;
}
.bgc-detail-row-highlight {
background: #e8f0f5;
border-radius: 6px;
padding: 12px 10px;
margin: 4px -10px 0;
}
.bgc-detail-label {
display: block;
font-size: 11px;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
font-weight: 600;
}
.bgc-detail-value {
display: block;
font-size: 16px;
font-weight: 700;
color: #333;
}
.bgc-detail-row-highlight .bgc-detail-value {
font-size: 22px;
color: #3981b0;
} .bgc-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.bgc-btn-quote {
width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
background: #3981b0;
color: #fff;
}
.bgc-btn-quote:hover:not(:disabled) {
background: #3981b0;
}
.bgc-btn-quote:disabled {
background: #ccc;
color: #999;
cursor: not-allowed;
}
.bgc-btn-contact {
width: 100%;
padding: 14px 20px;
font-size: 15px;
font-weight: 700;
border: 2px solid #3981b0;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
background: #fff;
color: #3981b0;
}
.bgc-btn-contact:hover:not(:disabled) {
background: #3981b0;
border-color: #3981b0;
color: #fff;
}
.bgc-btn-contact:disabled {
background: #f0f0f0;
color: #999;
border-color: #ccc;
cursor: not-allowed;
}
.bgc-right-footer {
font-size: 12px;
color: #999;
text-align: center;
padding-top: 10px;
border-top: 1px solid #e0e0e0;
} .bgc-popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
}
.bgc-popup {
background: #fff;
border-radius: 10px;
width: 100%;
max-width: 650px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.bgc-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid #e5e7eb;
background: #3981b0;
border-radius: 10px 10px 0 0;
}
.bgc-popup-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.bgc-popup-close {
background: none;
border: none;
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0;
line-height: 1;
opacity: 0.7;
transition: opacity 0.2s;
}
.bgc-popup-close:hover {
opacity: 1;
background: none !important;
}
.bgc-popup-body {
padding: 24px;
} .bgc-popup-summary {
background: #f8f9fa;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 14px 18px;
margin-bottom: 20px;
}
.bgc-popup-summary-row {
display: flex;
gap: 6px;
font-size: 13px;
color: #666;
padding: 3px 0;
}
.bgc-popup-summary-row strong {
color: #333;
} .bgc-form-row {
margin-bottom: 14px;
}
.bgc-form-row > label {
display: block;
font-size: 13px;
font-weight: 500;
color: #555;
margin-bottom: 5px;
}
.bgc-form-row input[type="text"],
.bgc-form-row input[type="email"],
.bgc-form-row input[type="tel"],
.bgc-form-row textarea,
.bgc-form-row select {
width: 100%;
padding: 9px 12px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
background: #fff;
}
.bgc-form-row input:focus,
.bgc-form-row textarea:focus,
.bgc-form-row select:focus {
border-color: #3981b0;
}
.bgc-form-row textarea {
resize: vertical;
}
.bgc-form-row-inline {
display: flex;
gap: 10px;
}
.bgc-form-col {
flex: 1;
min-width: 0;
}
.bgc-input-short {
width: 120px !important;
flex-shrink: 0;
}
.bgc-input-wide {
flex: 1;
min-width: 0;
}
.bgc-select {
appearance: auto;
} .bgc-schedule-card {
background: #f8fafb;
border: 1px solid #d6e0e8;
border-radius: 8px;
overflow: hidden;
margin-top: 2px;
}
.bgc-schedule-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #e8f0f5;
border-bottom: 1px solid #d6e0e8;
font-size: 13px;
font-weight: 600;
color: #3981b0;
}
.bgc-schedule-header i {
font-size: 15px;
line-height: 1;
}
.bgc-schedule-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 14px;
}
.bgc-schedule-field label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #555;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.bgc-schedule-field label i {
font-size: 13px;
color: #3981b0;
line-height: 1;
}
.bgc-schedule-field input[type="text"] {
width: 100%;
padding: 10px 12px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
transition: all 0.2s;
box-sizing: border-box;
background: #fff;
cursor: pointer;
}
.bgc-schedule-field input[type="text"]:focus {
border-color: #3981b0;
box-shadow: 0 0 0 3px rgba(0, 52, 80, 0.08);
}
.bgc-schedule-note {
font-size: 11px;
color: #888;
margin-top: 4px;
font-style: italic;
}
.bgc-time-range {
display: flex;
align-items: center;
gap: 10px;
}
.bgc-time-range input[type="text"] {
flex: 1;
padding: 10px 12px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
transition: all 0.2s;
box-sizing: border-box;
background: #fff;
cursor: pointer;
}
.bgc-time-range input[type="text"]:focus {
border-color: #3981b0;
box-shadow: 0 0 0 3px rgba(0, 52, 80, 0.08);
}
.bgc-time-sep {
color: #999;
font-size: 14px;
flex-shrink: 0;
}
.bgc-date-hint {
font-size: 12px;
color: #e74c3c;
margin-top: 4px;
} .flatpickr-calendar {
font-family: 'Poppins', sans-serif !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
border: 1px solid #e5e7eb !important;
overflow: hidden;
width: 260px !important;
padding: 0 !important;
}
.flatpickr-innerContainer {
padding: 4px 6px !important;
}
.flatpickr-months {
background: #3981b0 !important;
height: 32px !important;
}
.flatpickr-months .flatpickr-month {
background: #3981b0 !important;
color: #fff !important;
height: 32px !important;
}
.flatpickr-current-month {
font-size: 12px !important;
font-weight: 600 !important;
color: #fff !important;
padding-top: 6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: #3981b0 !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 12px !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.flatpickr-current-month input.cur-year {
color: #fff !important;
font-weight: 600 !important;
font-size: 12px !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
fill: #fff !important;
color: #fff !important;
padding: 6px 8px !important;
top: 0 !important;
height: 32px !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
fill: #fff !important;
width: 12px !important;
height: 12px !important;
}
span.flatpickr-weekday {
font-family: 'Poppins', sans-serif !important;
color: #999 !important;
font-size: 10px !important;
font-weight: 600 !important;
}
.flatpickr-day {
font-family: 'Poppins', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
border-radius: 4px !important;
color: #333 !important;
max-width: 30px !important;
height: 28px !important;
line-height: 28px !important;
margin: 1px !important;
}
.flatpickr-day:hover {
background: #e8f0f5 !important;
border-color: #e8f0f5 !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: #3981b0 !important;
border-color: #3981b0 !important;
color: #fff !important;
}
.flatpickr-day.today {
border-color: #3981b0 !important;
}
.flatpickr-day.today:hover {
background: #3981b0 !important;
color: #fff !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: #d1d5db !important;
background: transparent !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: #d1d5db !important;
} .flatpickr-calendar.hasTime .flatpickr-time {
border-top: 1px solid #e5e7eb !important;
height: 34px !important;
max-height: 34px !important;
}
.flatpickr-time input {
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #3981b0 !important;
}
.flatpickr-time .flatpickr-am-pm {
display: none !important;
}
.flatpickr-time .flatpickr-time-separator {
font-weight: 600 !important;
color: #3981b0 !important;
}
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
border: none !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #3981b0 !important;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #3981b0 !important;
}
.bgc-phone-hint {
font-size: 12px;
color: #e74c3c;
margin: -8px 0 14px;
} .bgc-contact-types,
.bgc-reply-types {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 4px;
}
.bgc-contact-type-option,
.bgc-reply-option {
cursor: pointer;
}
.bgc-contact-type-option input[type="radio"],
.bgc-reply-option input[type="radio"] {
display: none;
}
.bgc-contact-type-card,
.bgc-reply-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
padding: 16px 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #555;
transition: all 0.2s;
}
.bgc-contact-type-card:hover,
.bgc-reply-card:hover {
border-color: #9ca3af;
}
.bgc-contact-type-option input:checked + .bgc-contact-type-card,
.bgc-reply-option input:checked + .bgc-reply-card {
border-color: #3981b0;
background: #f0f6fc;
color: #3981b0;
font-weight: 600;
}
.bgc-contact-type-card .fi,
.bgc-reply-card .fi {
font-size: 18px;
line-height: 1;
} .bgc-consent-row {
margin-top: 18px;
margin-bottom: 18px;
}
.bgc-checkbox-label {
display: flex !important;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: 400 !important;
}
.bgc-checkbox-label input[type="checkbox"] {
display: none;
}
.bgc-checkbox-box {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: 4px;
flex-shrink: 0;
position: relative;
transition: all 0.2s;
margin-top: 1px;
}
.bgc-checkbox-box::after {
content: '';
position: absolute;
top: 1px;
left: 5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.15s;
}
.bgc-checkbox-label input:checked + .bgc-checkbox-box {
background: #3981b0;
border-color: #3981b0;
}
.bgc-checkbox-label input:checked + .bgc-checkbox-box::after {
opacity: 1;
}
.bgc-checkbox-text {
font-size: 12px;
line-height: 1.5;
color: #666;
font-weight: normal;
} .bgc-form-error {
padding: 10px 14px;
background: #fdf0ef;
border: 1px solid #f5c6cb;
color: #e74c3c;
border-radius: 6px;
margin-bottom: 14px;
font-size: 13px;
font-weight: 500;
}
.bgc-form-success {
padding: 10px 14px;
background: #eafaf1;
border: 1px solid #a3d9b1;
color: #27ae60;
border-radius: 6px;
margin-bottom: 14px;
font-size: 13px;
font-weight: 500;
}
.bgc-btn-submit {
width: 100%;
padding: 13px 20px;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
background: #3981b0;
color: #fff;
}
.bgc-btn-submit:hover:not(:disabled) {
background: #3981b0;
}
.bgc-btn-submit:disabled {
background: #999;
cursor: not-allowed;
} .bgc-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
z-index: 10;
}
.bgc-spinner {
width: 40px;
height: 40px;
border: 4px solid #e0e0e0;
border-top-color: #3981b0;
border-radius: 50%;
animation: bgc-spin 0.8s linear infinite;
}
@keyframes bgc-spin {
to { transform: rotate(360deg); }
} @media (max-width: 768px) {
.bgc-layout {
flex-direction: column;
}
.bgc-col-left {
border-radius: 8px 8px 0 0;
}
.bgc-col-right {
width: 100%;
border-left: 1px solid #e0e0e0;
border-top: none;
border-radius: 0 0 8px 8px;
}
.bgc-right-panel {
position: static;
}
.bgc-popup {
max-width: 100%;
}
}
@media (max-width: 480px) {
.bgc-delivery-options {
grid-template-columns: 1fr;
}
.bgc-col-left {
padding: 20px 16px;
}
.bgc-right-panel {
padding: 20px 16px;
}
.bgc-tank-row {
flex-direction: column;
}
.bgc-tank-image {
width: 100%;
}
.bgc-main-title {
font-size: 18px;
}
.bgc-nav {
flex-direction: column;
}
.bgc-btn {
width: 100%;
text-align: center;
}
.bgc-manual-input {
padding-left: 0;
}
.bgc-contact-types {
grid-template-columns: 1fr;
}
.bgc-form-row-inline {
flex-direction: column;
}
.bgc-input-short {
width: 100% !important;
}
.bgc-popup-body {
padding: 18px 16px;
}
.bgc-schedule-body {
padding: 12px;
}
.bgc-schedule-header {
padding: 8px 12px;
}
}