/* styles.css */

.tickety-boo-wrap h4 { font-size: 24px!important; font-weight: 400!important; margin: 18px 0!important;  color: #374146!important; line-height: 1.2!important; letter-spacing: -0.35px!important;}
.tickety-boo-wrap h5 { font-size: 21px!important; font-weight: 700!important; margin: 18px 0 26px!important;  line-height: 1.2!important; letter-spacing: -0.35px!important; color: #012a44;}
.tickety-boo-wrap p { line-height: 1.2!important; letter-spacing: -0.35px!important;}

.tickety-boo-wrap .wrapper {
    width: 1300px; max-width: calc(100% - 128px);
    padding: 34px;
    margin: 0px auto;
    overflow: visible;
    font-family: 'Lato', sans-serif;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tickety-boo-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
    font-weight: 600;
    color: #353c42;
    position: relative;
    background: #e2e2e2;
    height: 52px; 
}

.tickety-boo-wrap .hidden { display: none; }

.tickety-boo-wrap input[type="text"].text-input { background: #e2e2e2; border-radius: 4px; border: 0; height: 32px; padding: 8px 18px; color: #353c42; font-weight: 500; transition: all ease 0.3s; }

.tickety-boo-wrap button[name="submit-quote"] { width: 100%; height: 50px; padding: 12px 16px; border: 0; margin-top: 20px; border-radius: 4px; background: #012a44; font-weight: 600; font-size: 15px; text-transform: uppercase; color: #ffd100; cursor: pointer; transition: all ease 0.3s; }
.tickety-boo-wrap button[name="submit-quote"]:hover { background: #ffd100; color: #012a44; }
.tickety-boo-wrap button[name="submit-quote"]::before {content: '\f1ec'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 11px; transition: all ease 0.3s; }
.tickety-boo-wrap button[name="submit-quote"]:hover::before {margin-right: 14px;}

/* The switch - the box around the slider */
.tickety-boo-wrap .toggle-wrapper {
position: relative;
display: inline-block;
width: 60px;
height: 28px; 
}

/* Hide default HTML checkbox */
.tickety-boo-wrap .toggle-wrapper input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.tickety-boo-wrap .toggle {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.tickety-boo-wrap .toggle:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .3s;
transition: .3s;
}

.tickety-boo-wrap input:checked + .toggle {
background-color: #012a44; color: #ffc100
}

.tickety-boo-wrap input:checked + .toggle:before {
-webkit-transform: translateX(31px);
-ms-transform: translateX(31px);
transform: translateX(31px);
}

/* Rounded sliders */
.tickety-boo-wrap .toggle.round {
border-radius: 24px;
}

.tickety-boo-wrap .toggle.round:before {
border-radius: 50%;
}

.tickety-boo-wrap .toggle.round:before {
border-radius: 50%;
}
.tickety-boo-wrap input + .toggle:after {
position: absolute;
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
left: 40px;
top: 6px;
-webkit-transition: .4s;
transition: .4s;
}

.tickety-boo-wrap input:checked + .toggle:after {
position: absolute;
content: "\f00c"; 
font-family: "Font Awesome 5 Free";
font-weight: 900;
left: 8px;
top: 6px;
-webkit-transition: .3s;
transition: .3s;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusts space between toggle and label */
}

.toggle-wrapper {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0; /* Prevents the toggle from shrinking */
}

.toggle-label {
    font-size: 16px; /* Adjust as needed */
    line-height: 1; /* Helps with vertical alignment */
}

/* Prem Steez */
.hidden { display: none; }

button.product-btn { border: 0; padding: 15px 21px; margin-right: 7px; margin-bottom: 7px; background: #c4c4c4; color: #444444; font-weight: 700; text-transform: uppercase;border-radius: 4px; cursor: pointer; transition: all ease 0.3s; }
button.product-btn:hover { background-color: #012a44; color: #fff; }
button.product-btn.active { background-color: #012a44; color: #ffd100; }

.size-grid { display:flex; flex-wrap: wrap; gap: 30px; text-align: center; }
.size-grid .col-1_4 {width: calc(25% - 33px)}
.size-grid .col-1_5 {width: calc(20% - 33px)}
.size-grid .col-1_6 {width: calc(16.66% - 33px)}

.item-option { margin-bottom: 30px; border: 3px solid #fff; border-bottom-color: #c4c4c4; padding-bottom: 20px; cursor: pointer; transition: all ease 0.3s; }
.item-option:hover { background: #fffcec; border-color: #ffd100!important; }
.item-option.active {border-color: #ffd100!important; }

.calc-item-title { font-size: 14px; font-weight: 700; }
.calc-item-code { font-size: 13px; font-weight: 700; }

a.calc-button[name="add-to-quote"] {border: 0; padding: 15px 21px; margin: 15px 0; display: inline-block; text-decoration: none; background: #012a44; color: #ffd100; font-weight: 700; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: all ease 0.3s;}
a.calc-button[name="add-to-quote"]:hover {background: #ffd100; color: #012a44;}
a.calc-button[name="add-to-quote"]::after {content: '\f217'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 11px; transition: all ease 0.3s; }

.quantity-selector button#minus-btn, .quantity-selector button#plus-btn { height: 50px; border: 0; width: 50px; font-weight: 700; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: all ease 0.3s; display: inline-block; background: #e1e1e1; }
.quantity-selector input[type="number"]#quantity-input {-moz-appearance: textfield; text-align: center; height: 44px; border: 2px solid #e1e1e1; border-radius: 4px; font-weight: 500; width: 50px; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}

.highlight { background: #fef19b; margin: 30px 0 4px 0; padding: 4px 34px 34px 34px; border-radius: 8px;}
.user-details {display: flex; gap: 20px; flex-wrap: wrap; }
.calc-user-input { flex: 1 0 calc(100% - 20px); }
.user-details input[type="text"].text-input {background-color: #fff; width: calc(100% - 36px)!important; font-weight: bold; color: #012a44; }
.calc-user-input p { font-weight: 600; margin: 0 0 10px 0; }
.calc-user-input select { font-weight: 600; color: #012a44; border: 1px solid #fff; background: #fff; }



.quote-wrapper {display: flex; flex-wrap: wrap; flex: 0 0 50%; gap: 40px; position: relative; }

.quote-col-1 { width: calc(100% - 380px); }


.h-scroller { overflow-x: scroll; /* Changed from auto to scroll */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ffc100 #fffcec; /* Firefox */
  overflow-y: hidden; 
}

@media (min-width: 940px) {
    .h-scroller { overflow-x: hidden;}
}
.quote-col-2 {
  width: 340px;
}

#price h5.item-name { margin-bottom: 7px !important; padding-top: 15px; border-top: 1px dotted #ccc; }

.line-items { padding: 0; margin: 0; display: flex; gap: 20px; align-items: center; border-bottom: 1px dotted #000; min-width: 592px;}
.line-items li { padding: 12px; margin: 0; list-style: none; /* height: 50px; */ min-width: 50px; width: 15%; text-align: right; font-weight: 600}
.line-items li:nth-child(1) { text-align: left; width: 50px; height: 50px; padding: 0 0; }
.line-items li:nth-child(2) {width: calc(40% - 70px); text-align: left; min-width: 200px; }
.line-items li:nth-child(3), .line-items li:nth-child(4) { text-align: center; min-width: 60px; }
.line-items li:nth-child(6) {width: 20px; padding: 0}
.qty-btn { background-color: #012a44; color: #ffd100; border-radius: 2px; width: 18px; height: 18px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; }
.qty-value { padding: 0 4px; }
.line-item-img img { width: 50px; height: 50px; border: 1px solid #ccc; background: #fff; border-radius: 3px; }
.line-item-header li { height: 18px; padding-top: 0!important; padding-bottom: 0!important; }
.trash-btn {border: 0; background-color: transparent; cursor: pointer; transition: all ease 0.3s; }
.trash-btn:hover { color: red; }
#grand-total { text-align: right; padding: 12px;}

.fusion-filter a { font-size: 14px!important; font-weight: 700!important; }


/* Mobile UX */
@media (max-width: 1360px) {
.quote-col-1 { width: calc(100% - 300px);  }
.quote-col-2 { width: 240px;  }
}
@media (max-width: 1160px) {
.size-grid .col-1_6 {width: calc(25% - 33px)}
.quote-wrapper {display: block; }
.quote-col-1 { width: 100% }
.quote-col-2 { width: 100%;}
.line-items li { font-size: 14px; }
}
@media (max-width: 960px) {
    .tickety-boo-wrap h4 { font-size: 18px!important; }
    .tickety-boo-wrap .wrapper { margin: 0px auto; padding: 24px; max-width: 100%;}
    .tickety-boo-wrap select { font-size: 15px; height: 46px; padding: 10px 8px; }
}
@media (max-width: 900px) {
.size-grid .col-1_6 {width: calc(33% - 33px)}
#grand-total { text-align: left;}
}
@media (max-width: 660px) {
.size-grid .col-1_6 {width: calc(50% - 33px)}
}
@media (min-width: 760px) {
.small-screens { display: none; }
}
.small-screens { text-transform: uppercase; font-size: 10px; font-weight: 600; position: absolute; right: 0; top: 25px; }
.small-sc-wrap { padding: 5px 15px; background: #fff; border-radius: 12px; display: inline-block; margin: 4px 0; }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #888!important; opacity:1!important}
::-moz-placeholder { /* Firefox 19+ */
  color: #888!important; opacity:1!important}
:-ms-input-placeholder { /* IE 10+ */
  color: #888!important; opacity:1!important}
:-moz-placeholder { /* Firefox 18- */
  color: #888!important; opacity:1!important}