/* @import url('https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');

.product_cat-calculator {
    position: relative;
}

/* Step Tabs */
.step-tab-container {
    border-radius: 13px;
}

.step-tab-container .step-tabs {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-tab-container .step-tabs li {
    display: flex;
    flex-grow: 1;
}

.step-tab-container .step-tabs li a {
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    line-height: 1.7;
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 23px;
    background-color: #6a6a6a;
    box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.1);
}

.step-tab-container .step-tabs li.active a {
    background-color: #f26a21;
}

.step-tab-container .step-tabs .step-number {
    display: inline-block;
    text-align: center;
    width: 26px;
    height: 26px;
    font-weight: 700;
    color: #6a6a6a;
    background-color: #ffffff;
    border-radius: 13px;
    margin-right: 7px;
}

.step-tab-container .step-tabs li.active .step-number {
    color: #f26a21;
}

/* Calculator body */

.calculator-body {
    display: none;
    width: 100%;
    margin: 40px 0;
    padding: 40px;
    border-radius: 23px;
    background-color: #f26a21;
    box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.1);
}

.calculator-body,
.calculator-body a,
.calculator-body label,
.calculator-body span {
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.calculator-body .dashicons {
    font-family: dashicons;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    vertical-align: middle;
}

.woocommerce div.product.product_cat-calculator div.summary,
.woocommerce-page div.product.product_cat-calculator div.summary {
    float: none;
    width: 100%;
}

.calculator-body.active {
    display: block;
}

.calculator-body .form-container,
.calculator-body .summary form {
    display: flex;
    column-gap: 30px;
}

.calculator-body .form-container .column-input,
.calculator-body .summary .column-input {
    width: 70%;
}

.calculator-body .column-input p {
    color: #ffffff;
}

.calculator-body .form-container .column-totals,
.calculator-body .summary .column-totals {
    position: relative;
    font-size: 13px;
    width: 30%;
    padding: 25px 30px 120px 30px;
    border-radius: 23px;
    background-color: #ffffff;
    box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.1);
}

.calculator-body .form-container .column-totals span,
.calculator-body .summary .column-totals span {
    font-size: 13px;
}

.calculator-body .form-container .column-input {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 4%;
}

.calculator-body .headline {
    display: flex;
    column-gap: 10px;
    align-items: center;
    color: #ffffff;
    width: 100%;
}

.calculator-body .headline .dashicons {
    color: #f26a21;
    font-size: 60px;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #ffffff;
    padding: 10px 0;
}

.calculator-body .headline.minor .dashicons {
    font-size: 40px;
    width: 60px;
    height: 60px;
}

.calculator-body .headline h2 {
    color: #ffffff;
    margin: 0;
    font-size: 32px;
}

.section-base {
    width: 48%;
    margin: 30px 0 0 0;
}

.calculator-body table {
    color: #ffffff;
    border: none;
}

.calculator-body table.table-fixed {
    table-layout: fixed;
}

.calculator-body table.table-nowrap th,
.calculator-body table.table-nowrap td {
    white-space: nowrap;
}

.calculator-body table.table-center td {
    text-align: center;
}

.calculator-body table th,
.calculator-body table td {
    padding: 2px 6px;
    background: none !important;
    border: none;
    text-align: left;
    vertical-align: middle;
}

.section-summary table th,
.section-summary table td {
    padding-bottom: 6px;
    vertical-align: top;
}

.calculator-body table th.text-right,
.calculator-body table td.text-right,
.content-calculations td {
    text-align: right;
}

.calculator-body table .column-spacer {
    width: 10px;
}

.calculator-body table .row-spacer {
    height: 20px;
}

.section-options,
.section-summary,
.section-artwork {
    width: 100%;
    margin: 30px 0 0 0;
}

.section-shapes {
    width: 48%;
    margin: 30px 0 0 0;
}

.section-shapes table {
    margin-bottom: 40px;
}

.section-shapes table td {
    vertical-align: top;
}

.calculator-body select,
.calculator-body input[type='text'],
.calculator-body input[type='number'],
.calculator-body textarea {
    color: #000000;
    font-family: "Poppins", Sans-serif;
    font-size: 17px;
    line-height: 1.5;
    margin: 0;
    border: none !important;
    border-radius: 10px !important;
    padding: 7px 15px 7px 15px !important;
    width: 100% !important;
}

.calculator-body input:disabled,
.woocommerce .calculator-body input:disabled {
    cursor: default;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
}

.calculator-body select {
    padding-right: 30px !important;
}

.calculator-body select[title] {
    color: #ff00ff;
}

.calculator-body input[type='radio'] {
    vertical-align: middle;
}

.calculator-body input[type="file"] {
    display: none;
}

.calculator-body input.input-error,
.calculator-body textarea.input-error {
    background-color: #FFE5E5 !important;
    border: 2px solid #dc3545 !important;
}

.calculator-body .input-error-text {
    display: none;
    background-color: #fff;
    padding: 5px 7px;
    color: #dc3545;
    margin: 6px;
    line-height: 1em;
}

.calculator-body input.input-error+.input-error-text,
.calculator-body textarea.input-error+.input-error-text {
    display: block;
}

.calculator-body .input-info-text {
    display: block;
    background-color: #fff;
    padding: 5px 7px;
    color: #17a2b8;
    margin: 6px;
    line-height: 1em;
}

.calculator-body .custom-file-upload {
    color: #00263a;
    background-color: #F8DA3B;
    display: inline-block;
    padding: 14px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.1);
    line-height: 17px;
    font-weight: 500;
    width: 100%;
}

.calculator-body ul.custom-file-upload-list {
    margin: 15px 0 0 20px;
}

.calculator-body .action {
    display: flex;
    position: absolute;
    bottom: 40px;
    left: 30px;
    right: 30px;
    column-gap: 15px;
    flex-wrap: nowrap;
}

.calculator-body .action button,
.calculator-body .summary form.cart .column-totals .action button.button {
    color: #ffffff;
    font-family: "Poppins", Sans-serif;
    font-size: 17px;
    font-weight: 500;
    background-color: #f26a21;
    border: none;
    border-radius: 10px;
    box-shadow: inset 0 0 15px 15px rgba(0, 0, 0, 0.1);
    padding: 14px;
    width: 100%;
    line-height: 1.5;
    margin: 40px 0 0 0;
}

.calculator-body .action button.back {
    background-color: #00263a;
}

.calculator-body .action button:hover,
.calculator-body .summary form.cart .column-totals .action button.button:hover {
    color: #00263a;
    background-color: #f8da3b;
    /* background: linear-gradient(to bottom, #ffa659 0, #d26605 100%); */
}

.calculator-body .action button span {
    font-size: 17px !important;
    font-weight: 500;
}

.calculator-body .large-total {
    font-size: 18px;
    text-align: center;
    color: #00263a;
    white-space: nowrap;
}

.calculator-body .large-total h3 {
    font-size: 50px;
}

.calculator-body .cost-sheet {
    margin-top: 40px;
}

.calculator-body .cost-sheet table,
.calculator-body .cost-items table,
.calculator-body .total-items table {
    color: #00263a;
}

.calculator-body .cost-sheet table td {
    font-family: "Azeret Mono", monospace;
}

.calculator-body .cost-sheet table th:last-child,
.calculator-body .cost-sheet table td:last-child {
    text-align: right;
}

.calculator-body .cost-sheet .quantity-item {
    display: none;
}

.calculator-body .cost-sheet .quantity-item.active {
    display: table-row;
}

.calculator-body .cost-sheet .quantity-item.current {
    background-color: #00263acc;
    color: #ffffff;
}

/* Content Calculations for debugging */

.content-calculations table {
    font-size: 11px;
}

.content-calculations table th,
.content-calculations table td {
    padding: 10px 5px;
}

.calculator-body .summary .column-totals button {
    margin: 40px 0 0 0;
    width: 100%;
}

.calculator-body .calculator-inputs {
    display: none;
}

.calculator-body .column-totals .cost-items tr {
    display: none;
}

.calculator-body .column-totals .cost-items th,
.calculator-body .column-totals .cost-items .cost-value {
    white-space: nowrap;
}

.calculator-body .column-totals .cost-items .additional-totals {}

.calculator-body .column-totals .cost-items .grand-total .cost-value {
    font-weight: 700;
    color: #f26a21;
    text-decoration: underline;
    text-underline-offset: 6px;
}

.calculator-body .column-totals .cost-information .delivery-shipping-date {
    font-weight: 600;
}

.calculator-body .information-block {
    padding: 15px 20px 15px 20px;
    background-color: #ffffff;
    border-radius: 10px;
    color: #000000;
    margin-bottom: 1.5em;
}

.calculator-body .information-block p {
    color: #000000;
    margin-bottom: 5px;
}

.calculator-body .information-block p:last-child {
    margin-bottom: 0;
}

/* .calculator-body .product_title,
.calculator-body .single-product-category,
.calculator-body p.price {
    display: none !important;
} */



/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #00263af0;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -90px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #00263af0 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* spinner */
.ajax-active {
    /* visibility: hidden; */
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #00263a43;
    z-index: 10000;
    border-radius: 23px;
}

.ajax-active .spinner {
    width: 80px;
    height: 80px;
    border: 2px solid #f3f3f3;
    border-top: 3px solid #f25a41;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
    z-index: 10001;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* woocommerce fixes */
.woocommerce-js div.product form.cart::after,
.woocommerce-js div.product form.cart::before {
    display: none !important;
}

.woocommerce-js div.product div.summary {
    margin-bottom: 0 !important;
}




/* responsive */
.quantity-table tr.flex-override {
    display: flex;
    flex-wrap: wrap;
}

.quantity-table tr.flex-override td {
    width: 20%;
}


@media only screen and (max-width: 1200px) {
    .calculator-body {
        padding: 30px 25px;
    }

    .calculator-body .form-container .column-totals,
    .calculator-body .summary .column-totals {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media only screen and (max-width: 1100px) {

    .calculator-body .form-container .column-input,
    .calculator-body .summary .column-input {
        width: 66%;
    }

    .calculator-body .form-container .column-totals,
    .calculator-body .summary .column-totals {
        width: 34%;
    }

    .section-base,
    .section-shapes {
        width: 100%;
    }

    .calculator-body .large-total h3 {
        font-size: 40px;
    }
}

@media only screen and (max-width: 900px) {

    .calculator-body .form-container,
    .calculator-body .summary form {
        flex-wrap: wrap;
    }

    .calculator-body .form-container .column-input,
    .calculator-body .summary .column-input,
    .calculator-body .form-container .column-totals,
    .calculator-body .summary .column-totals {
        width: 100%;
    }

    .calculator-body .form-container .column-totals,
    .calculator-body .summary .column-totals {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 700px) {
    .step-tab-container {
        display: none;
    }

    .calculator-body {
        margin-top: 0;
    }
}

@media only screen and (max-width: 600px) {

    .calculator-body table.table-fixed {
        table-layout: unset;
    }

    .winding-direction-table tr.flex-override {
        display: flex;
        flex-wrap: wrap;
    }

    .quantity-table tr.flex-override td {
        width: 30%;
    }

    .winding-direction-table tr.flex-override td:nth-child(odd) {
        width: 44% !important;
    }
}

@media only screen and (max-width: 400px) {
    .quantity-table tr.flex-override td {
        width: 50%;
    }
}