@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    user-select: none;
}
:root {
    --borderColor: #DADDDE;
    --textLight: #898D8F;
    --textDark: #000000;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p, ul {
    margin-bottom: 0;
    line-height: unset;
    font-family: "Plus Jakarta Sans", sans-serif;
}
ul {
    padding-left: 0;
    list-style: none;
}

/* BOOTSTRAP CSS */
.offcanvas {
    width: 249px !important;
    padding-right: 8px;
    padding-left: 16px;
}
.offcanvas-backdrop.show {
    opacity: 0;
}
.offcanvas-body {
    padding: 0;
}
.accordion-button:not(.collapsed)::after {
    background-image: url('images/icons/accClose.png');
}
.accordion-button::after {
    background-image: url('images/icons/accOpen.png');
}
.accordion-button {
    background-color: transparent;
    color: var(--textDark);
    font-weight: 500;
    font-size: 18px;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--textDark);
    box-shadow: none !important;
}
.accordion-button.collapsed {
    box-shadow: none;
}

.form-check-input {
    height: 1.2em;
    width: 1.2em;
}
.form-check-input:checked {
    background-color: #5B5E63;
    border-color: #5B5E63;
}
.form-check-input:focus {
    box-shadow: none;
}
.form-check .form-check-input {
    margin-left: -1.8em;
}
/* BOOTSTRAP CSS */

.customContainer {
    height: 100vh;
    width: 100%;
    display: none;
}
.headerContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 10vh;
    padding: 10px;
}
.orderTypeItem, .sportItem, .gloveTypeItem, .positionItem, .handednessItem, .gloveSizeItem, .wristTypeItem, .leatherTypeItem, .leatherType2Item {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 100%;
    text-align: center;
    vertical-align: middle;
    color: var(--textDark);
}

.selectOrderPageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.exitIconContainer {
    position: absolute;
    left: 20px;
    border: 1px solid var(--borderColor);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pageTitle {
    font-size: 18px;
    color: var(--textDark);
    text-align: center;
    font-weight: 700;
}
.orderTypeContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.orderTypeItem {
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    height: 184px;
    max-width: 271px;
    width: 100%;
    padding: 20px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.orderTypeItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.orderTypeItem.active .activeIndicator {
    background-color: #5B5E63;
}

.activeIndicator {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 18px;
    width: 18px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    display: flex;
    justify-content: center;
    align-items: center;
}
.activeIndicator.active {
    background-color: #5B5E63;
}
.activeIndicatorInner {
    background-color: white;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.orderTypeItemTitle {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--textDark);
}

.orderTypeItemDescription {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: var(--textLight);
}

.nextbackBtnsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    width: 90%;
    margin: 0 auto;
}
.nextbackBtns {
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    border: 0;
    font-weight: 500;
    font-size: 16px;
    height: 48px;
    width: 166px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nextBtn {
    background-color: black;
    color: white;
}
.backBtn {
    background-color: white;
    background-color: white;
    color: black;
    height: unset;
    width: unset;
    padding: 0 36px;
    font-family: "Roboto", sans-serif;
}
/* SPORTS PAGE CSS */

.selectSportPageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.exitIconContainer {
    position: absolute;
    left: 20px;
    border: 1px solid var(--borderColor);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sportContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.sportItem {
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    height: 184px;
    max-width: 184px;
    width: 100%;
    padding: 20px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.sportItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.sportItem.active .activeIndicator {
    background-color: #5B5E63;
}

.activeIndicator {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 18px;
    width: 18px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    display: flex;
    justify-content: center;
    align-items: center;
}
.activeIndicator.active {
    background-color: #5B5E63;
}
.activeIndicatorInner {
    background-color: white;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.sportItemTitle {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--textDark);
}

.sportBtnsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    width: 60%;
    margin: 0 auto;
}

.sportBtns {
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    border: 0;
    font-weight: 500;
    font-size: 16px;
    height: 48px;
    width: 166px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* SPORTS PAGE CSS */

/* GLOVE TYPE PAGE CSS */

.selectgloveTypePageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.exitIconContainer {
    position: absolute;
    left: 20px;
    border: 1px solid var(--borderColor);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gloveTypeContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
}

.gloveTypeItem {
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    height: 184px;
    max-width: 184px;
    width: 100%;
    padding: 20px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.gloveTypeItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.gloveTypeItem.active .activeIndicator {
    background-color: #5B5E63;
}

.activeIndicator {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 18px;
    width: 18px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    display: flex;
    justify-content: center;
    align-items: center;
}
.activeIndicator.active {
    background-color: #5B5E63;
}
.activeIndicatorInner {
    background-color: white;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

.gloveTypeItemTitle {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: var(--textDark);
}

.gloveTypeBtnsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    width: 60%;
    margin: 0 auto;
}

.gloveTypeBtns {
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    border: 0;
    font-weight: 500;
    font-size: 16px;
    height: 48px;
    width: 166px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* GLOVE TYPE PAGE CSS */

/* POSITION PAGE CSS */
.selectPositionPageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.positionItemContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.positionItem {
    height: 68px;
    width: 343px;
    padding: 20px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    position: relative;
}
.positionItem.active .activeIndicator {
    background-color: #5B5E63;
}
.infieldTxt {
    color: var(--textLight);
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    letter-spacing: 0%;
    text-align: center;
}
#infieldPosition {
    height: 144px;
}
/* POSITION PAGE CSS */

/* HANDESNESS PAGE CSS */
.selectHandednessPageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.handednessTitTxt {
    color: var(--textLight);
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    text-align: center;
    position: absolute;
    top: 15%;
}
.handednessItemContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.handednessItem {
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    height: 184px;
    max-width: 184px;
    width: 100%;
    padding: 20px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.handednessItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.handednessItem.active .activeIndicator {
    background-color: #5B5E63;
}
/* HANDEDNESS PAGE CSS */

/* GLOVE SIZE PAGE CSS */
.selectglovesizePageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.glovesizeItemContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.glovesizeItem {
    width: 108px;
    height: 108px;
    padding: 20px 16px 20px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    border-radius: 8px;
    border: 1px solid var(--borderColor);

}
.glovesizeItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.glovesizeItem.active .activeIndicator {
    background-color: #5B5E63;
}
/* GLOVE SIZE PAGE CSS */

/* WRIST TYPE PAGE CSS */
.selectwristTypePageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.wristTypePageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    gap: 16px;
}
.wristTypeItem {
    width: 343px;
    height: 132px;
    border: 1px solid var(--borderColor);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
}
.wrist-image-box {
    background-image: url('./images/cardImgBg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    border-radius: 8px;
}
.wrist-image-box img {
    height: 100%;
    width: 100%;
}
.wristTypeItem.active {
    border-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.wristTypeItem.active .activeIndicator {
    background-color: #5B5E63;
}
/* WRIST TYPE PAGE CSS */

/* LEATHER TYPE PAGE CSS */
.leatherTypePageContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.leatherTypeContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 16px;
    column-gap: 8px;
    width: 100%;
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 8px; */
}

.leatherTypeCard {
    height: 226px;
    max-width: 157px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 8px;
    cursor: pointer;
}
.leatherType2Card {
    height: 211px;
    max-width: 104px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 8px;
    cursor: pointer;
}
.leatherTypeImgBox {
    height: 250px;
    width: 100%;
    border-radius: 10px;
    background-image: url("./images/cardImgBg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.leatherTypeImgBox img {
    width: 100%;
}
.leatherTypeTitle {
    font-size: 16px;
    font-weight: 700;
}
.leatherTypeDescription {
    font-size: 12px;
    font-weight: 600;
    color: var(--textLight);
}
.ratingStarsBox {
    display: flex;
    justify-content: center;
    align-items: center;
}
.leatherTypePrice {
    font-size: 18px;
    font-weight: 600;
}
/* LEATHER TYPE PAGE CSS */

/* LEATHER TYPE 2 PAGE CSS */
/* .selectedContInner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
} */
.selectedCardContainer {
    padding: 10px 18px;
    width: 100%;
    box-shadow: 2px -4px 4.3px 0px #00000040;
    margin-top: 40px;
}
.selectedCardContainerInner {
    max-width: 500px;
    margin: 0 auto;
}
.selectedText {
    font-size: 16px;
    font-weight: 500;
    color: var(--textLight);
    padding: 8px 16px 8px 16px;
    border-radius: 48px;
    background-color: #E6E9EB;
    text-align: center;
}
.selectedCardThumbnail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.selectedCardThumbnailImgBox {
    background-image: url("./images/cardImgBg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 107px;
    width: 111px;
}
.selectedCardThumbnailText ul li {
    font-size: 12px;
    font-weight: 400;
}
/* LEATHER TYPE 2 PAGE CSS */






/* OTHER CSS */
/* .options {
    padding: 2.5rem;
    text-align: center;
    border: 1px solid rgb(150, 148, 148);
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow .3s ease-in-out;
}
.options:hover {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}
.next-previous-btn {
    padding: 8px 20px;
    border-radius: 15px;
    border: none;
}
#next-btn {
    background-color: #000000;
    color: white;
    font-weight: 600;
}
#previous-btn {
    background-color: #ffffff;
    border: 1px solid black;
}
.back-icon {
    border: 1px solid rgb(150, 148, 148);
    border-radius: 15px;
    width: 45px;
    text-align: center;
    padding: 10px;
    position: absolute;
    top: 50px;
    cursor: pointer;
}
.wrist-image-box {
    background-image: url("./images/cardImgBg.png");
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.wrist-image-box img {
    width: 100%;
    height: 100px;
} */
/* OTHER CSS */