/* product gallery  */
.offer-table tr td .kd-product-tooltip{
	background : #253461 !important;
	width : 320px;
}


.kd-product-images ol.flex-control-nav {
    display: flex;
    flex-flow: row wrap;
    column-gap: 10px;
    row-gap: 10px;
    padding: 0 10px !important;
    margin-top:  15px !important;
}


.kd-product-images ol.flex-control-nav li {
    width: 18.5% !important;
    float: left;
    margin: 0;
    list-style: none;
    padding: 5px;
    background: #e6e6e6;
    border-radius: 15px;
}


.your-offer-title{
    font-family: Jost;
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #253461;
}

.offer-table{
    max-width: calc(100% - 40px);
    margin: 0 20px;
}

.offer-table * {
    border: none;
    background: transparent !important;
    padding: 9px;
    color: #253461;
}


/* product gallery */

.kd-image-selector{
    column-gap: 20px;
    row-gap: 20px;
}

.kd-image-selector-col {
    width: 30.5% !important;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row;
    /* margin-right: 20px; */
    width: 130px;
    /* margin-bottom: 10px; */
    text-align: center;
}

.kd-image-selector-title{
    color: #253461;
    font-family: Jost;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    overflow: hidden;
}


.pearl-step.default-select {
    display: none;
}

.kd-step-collapse{
	padding-left : 20px;
	/* padding-right : 20px; */
}

.kd-step-collapse label.kd-radio-option {
    display: flex;
    align-items: center;
    /* justify-content: space-between !important; */
    padding: 12px 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
}

.kd-step-collapse label.kd-radio-option:last-child {
    border-bottom: none;
}

/* Custom radio style */
.kd-step-collapse input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #469ADC;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.kd-step-collapse input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 2px;
}

.kd-radio-option span{
    font-family: Jost;
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
text-transform: uppercase;
color: #253461;

}

.kd-round-btn{
	    border-radius: 50%;
    background-color: rgb(37, 52, 97);
    color: rgb(255, 255, 255);
    border: none;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	padding : 0 !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #253461;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: none;
  margin-top: -6px; /* aligns thumb with track */
}

input[type="range"]::-moz-range-thumb {
  background-color: #253461;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: none;
}

input[type="range"]::-ms-thumb {
  background-color: #253461;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  border: none;
}


.kd-radio-option  input[type="range"]::-ms-thumb {
    background-color: #253461;
}


.specific-qty-title{
	font-family: Jost;
font-weight: 400;
font-size: 16px;
	line-height: 100%;
	letter-spacing: 0%;
	color: #253461; 
	padding-bottom : 20px;
}

.step-contact{
    background-color: #10C99E;
    font-family: "Jost", Sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    fill: #FFFFFF;
    color: #FFFFFF !important;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #10C99E !important;
    border-radius: 50px 50px 50px 50px;
    padding: 10px 30px 10px 30px;
    
	/* background-color: #10C99E;
    font-family: "Jost", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize !important;
    border-style: solid; 
    border-width: 1px 1px 1px 1px; 
    border-color: #10C99E; 
    border-radius: 100px 100px 100px 100px; 
    padding: 8px 20px 8px 20px;
	color: white !important; */
}

.step-contact:hover{
	background-color: transparent;
	color: #10C99E !important;
	border-color: #10C99E;;
}

.kd-qty-range-price-tooltip{
    margin-top: 32px;
    position: relative;
    font-family: Jost;
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0%;
text-transform: uppercase;
color: #253461;
}

.kd-qty-range-price-tooltip:before{
    content: "";
    position: absolute;
    height: 14px;
    background-color: #BCBCBC;
    width: 1px;
    bottom: calc(100% + 7px);
    left: calc(49.5%);
}

.kd-qty-range-price-tooltip:not(:last-child):after{
    content: "";
    position: absolute;
    height: 7px;
    background-color: #BCBCBC;
    width: 1px;
    bottom: calc(100% + 14px);
    left: 149.5%;
}

/* Quantity on left */
.pearl-step h3 button:hover{
	width : 20% !important;
    
}
.kd-radio-option>div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 80px;
    color: #2a3654;
    font-weight: 500;
    width: 40.5%;
}

.kd-radio-option:first-of-type .kd-radio-meta span{
    margin-left: auto !important;
}

/* Save % and price on right */
.kd-radio-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #2a3654;
    white-space: nowrap;
    width: 59.5%;
    justify-content: space-between;
}

.kd-radio-meta .save {
    color: #007bff;
    font-weight: 600;
}

.pearl-step .range-wrapper {
    margin-bottom: 20px;
}

.kd-verify-qty-btn {

    background-color: #10C99E;
    font-family: "Jost", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase !important;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #10C99E;
    border-radius: 50px 50px 50px 50px;
    padding: 10px 30px 10px 30px;

    /* background-color: #10C99E;
    font-family: "Jost", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize !important;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #10C99E;
    border-radius: 100px 100px 100px 100px;
    padding: 8px 25px 8px 25px;
    color: white !important; */
}

.kd-verify-qty-btn:hover , .kd-verify-qty-btn:focus{
    background-color: transparent !important;
    color: #10C99E !important;
    border-color: #10C99E !important;
}

.pearl-step.collapsed .kd-step-collapse {
    display: none;
}

.kd-selected-val{
    font-family: Jost;
font-weight: 500;
font-size: 13px;
line-height: 100%;
letter-spacing: 0%;
text-transform: uppercase;
color: #10A380;

}

.pearl-step.collapsed.selected{
    cursor: pointer;
}


#pearl-wc-steps-form {
    border: 1px solid #DCDCDC;
    padding-bottom: 26px;
    border-radius: 20px;
    background-color: white;

}

.pearl-step-indicator {
    padding: 20px;
    margin: 0;
    padding-bottom: 15px;
    font-family: Jost;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #253461;
	display: flex;
    justify-content: space-between;
}

.pearl-step-indicator h2 {
    font-family: Jost;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #253461;
    margin: 0 !important;
}

/* .pearl-wc-steps {
    margin: 20px 0;
} */

.pearl-step {
    
    border-bottom: 1px solid #DCDCDC;
    padding: 18px 21px;
    box-shadow: 0px 0px 25px 5px #0000001A;

}

.pearl-step:first-of-type{
    border-top: 1px solid #DCDCDC;
}

.pearl-step.collapsed.selected {
    background: #E0F9F3;
	padding: 12px 21px 15px 21px !important;
}

.pearl-step.collapsed {
    /* background: #E0F9F3; */
    box-shadow: none;
    padding: 16px 21px 12px 21px;
}

.pearl-step h3 {
    font-family: Jost;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    margin: 0;
    color: #253461;
    display: flex;
}

.offer-table tr td:first-child{
	    font-family: Jost;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 174%;
    letter-spacing: 0%;
    padding: 0;
    width : 40% !important;
}

.offer-table tr td{
	padding-top : 0;
	padding-bottom : 0;
}

.kd-prod-attribute-title-wrapper{
	display: flex;
	flex-flow : column;
    align-items: flex-start;
    justify-content: flex-start;
	width : 50%;
}

.kd-selected-val{
	width : 35% !important;
}

.pearl-step h3 small{
	width: 50%;
    font-family: Jost;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: #8D8D8D;
}

.pearl-step h3 button {
    font-family: Jost;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #253461;
    border: none;
	padding-top : 0 !important;
	padding-bottom: 0 !important;
    padding: 0 !important;
}

.pearl-step:not(.collapsed) h3 {
    margin-bottom: 15px;
}

.box-selector {
    border-width: 1px;
    border-radius: 10px;
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-flow: row wrap;
}


.box-selector-item {
    cursor: pointer;
    border: 1px solid rgb(221, 221, 221);
    padding: 10px;
    border-radius: 10px;
    width: 31%;
    display: flex;
    align-items: center;
}

.box-selector strong {
    font-family: Jost;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #253461;

}

.box-selector p {
    font-family: Jost;
    font-weight: 400;
    font-size: 12px;
    line-height: 98%;
    letter-spacing: 0%;

}

.image-selector {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.image-selector div {
    cursor: pointer;
    text-align: center;
}

.image-selector img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 2px solid transparent;
}

.image-selector div:hover img {
    border-color: #000;
}

.variation-summary {
/*     margin-top: 20px; */
    padding: 13px 21px 15px 21px;
font-family: 'Jost';
    font-size: 16px;
	border-bottom: 1px solid #DFDFDF;
}

.kd-action-btns-wrapper {

    padding: 0 20px;
    display: flex;
    column-gap: 12px;
    justify-content: center;
}

.kd-action-btns-wrapper .kd-single-action-btn:first-child button {
    font-family: Jost;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #469ADC;
    padding: 15px;
    border: 1px solid #469ADC;
    border-radius: 83px;
}

.kd-addon-submit-btn{
	    background-color: #10C99E;
    font-family: "Jost", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    fill: #FFFFFF;
    color: #FFFFFF;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #10C99E;
    border-radius: 50px 50px 50px 50px;
    padding: 10px 30px 10px 30px;
}

.kd-addon-submit-btn:hover , .kd-addon-submit-btn:active , .kd-addon-submit-btn:focus{
	 background-color: transparent !important;
	color: #10C99E !important;
}

.kd-action-btns-wrapper .kd-single-action-btn:first-child button:disabled  , .kd-action-btns-wrapper .kd-single-action-btn:last-child button:disabled{
    background-color: #ccc;      /* Grey background */
    color: #666;                 /* Darker grey text */
    cursor: not-allowed;         /* Indicate disabled state */
    opacity: 0.7;                /* Slight transparency */
    pointer-events: none;  
    border: none;      /* Prevent any interaction */
  }

.kd-action-btns-wrapper .kd-single-action-btn:last-child button {
    font-family: Jost;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    background-color: #10C99E;
    color: white;
    padding: 15px;
    border: 1px solid #10C99E;
    border-radius: 83px;
    min-width: 247px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kd-action-btns-wrapper .kd-single-action-btn {
    width: 48%;
    text-align: center;
}

.kd-action-btns-wrapper button{
    width : 100%;
}

.kd-delivery-tooltip{
	    position: absolute;
    top: -5px;
/*     left: 91px; */
	left:117px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    width: 13px;
    height: 13px;
    background: #253461 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 10px;
}

.closeUrgentPopup{
	position: absolute;
    right: 10px;
    top: 0;
    font-size: 30px;
    color: red;
    font-family: 'Jost';
    cursor: pointer;
}


@media(max-width : 767px){
	.pearl-step.collapsed.selected .kd-selected-step-info{
		width : 80% !important;
	}
	
	.pearl-step.collapsed.selected .kd-selected-chng-btn{
		width : 20% !important;
	}
}