/* Inventory calculator styles.
 *
 * Ported 2026-08-27 from the legacy standalone page (newchamps/calculator/index.php),
 * where these rules lived in an inline <style> block. The Blade port carried the
 * markup across but not the styles, so /calculator/ and /calculator-id/ rendered
 * as unstyled text.
 *
 * The legacy page was standalone and its style block included global resets plus
 * its own header/footer/body rules. Those are deliberately NOT ported here — the
 * Blade version sits inside layouts.app and would have had its site chrome broken
 * by them. Rules already provided sitewide by style.css (.main-heading,
 * .heading-wrap, .form-control) are likewise omitted.
 *
 * Everything below is scoped to .tab-widget or #quoteDetailModal so it cannot
 * leak into any other page.
 */

/* The site header is position:absolute; top:0 with white nav text (style.css:548,
 * :675), so it is designed to sit over the dark .bread-banner every page opens
 * with. The calculator pages now have one too, which supplies that clearance -
 * this is just the section spacing. */
.tab-widget.space { padding: 70px 0; }

.tab-widget { position: relative; min-height: 88vh; }

/* NOTE: assets/img/calculator/bg.jpg was originally a stock dotted world map
 * that still carried visible Freepik watermarks - they showed through over the
 * page heading. On 2026-08-27 the file itself was replaced with the clean
 * background already used sitewide, so this path is now safe. To restore a
 * dotted map, drop a properly licensed image in at that path. */
.tab-widget::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: url(../img/calculator/bg.jpg) repeat center;
    background-size: cover;
    z-index: -1;
    opacity: .2;
}

/* --- tab strip --- */

.tab-widget .tab-wraper .scroll-left,
.tab-widget .tab-wraper .scroll-right { display: none; }

.tab-widget .tab-wraper .tab-menu {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    border-top: 2px dashed #243746;
    margin-bottom: 2.5rem;
    padding: 10px 0;
}

.tab-widget .tab-wraper .tab-menu li { text-align: center; }

.tab-widget .tab-wraper .tab-menu li .tab-btn {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding: 10px 28px;
    background-color: #243746;
    border: 0;
    width: 100%;
    white-space: nowrap;
    cursor: pointer;
    font-family: "Jost", sans-serif;
    border-radius: 3rem;
    position: relative;
}

.tab-widget .tab-wraper .tab-menu li .tab-btn.active {
    background-color: #efb371;
    color: #243746;
}

@keyframes calc-truck-in {
    0%   { transform: translate(-100%); }
    100% { transform: translate(0); }
}

.tab-widget .tab-wraper .tab-menu li .tab-btn.active::before {
    content: "";
    position: absolute;
    top: -4.5rem;
    left: 0;
    height: 60px;
    width: 100px;
    background: url(../img/calculator/car-new.png) no-repeat center;
    background-size: contain;
    filter: invert(18%) sepia(43%) saturate(421%) hue-rotate(163deg) brightness(96%) contrast(96%);
    animation: calc-truck-in .3s ease-in-out;
}

/* --- tab panels --- */

.tab-widget .tab-wraper .tab-content { display: none; }
.tab-widget .tab-wraper .tab-content.active { display: block; }

.tab-widget .tab-wraper .tab-content .menu-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.tab-widget .tab-wraper .tab-content .menu-content .item {
    font-size: 16px;
    font-weight: 500;
}

.tab-widget .tab-wraper .tab-content .menu-content .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.tab-widget .tab-wraper .tab-content .menu-content .btn-wrap .counter-btn {
    border: 1px solid rgba(42, 41, 46, .5019607843);
    border-radius: 3px;
    padding: 0 5px;
    background: transparent;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-widget .tab-wraper .tab-content .menu-content .btn-wrap .counter-btn i {
    color: rgba(42, 41, 46, .5019607843);
    font-size: 12px;
    line-height: 0;
}

.tab-widget .tab-wraper .tab-content .menu-content .btn-wrap .value {
    color: rgba(42, 41, 46, .5019607843);
    width: 1rem;
    text-align: center;
}

.tab-widget .tab-wraper .tab-content #textarea {
    border: 1px solid rgba(42, 41, 46, .5019607843);
    border-radius: 3px;
    background-color: #fff;
    padding: 1rem;
    height: 12rem;
    width: 100%;
    resize: none;
}

.tab-widget .tab-wraper .tab-content #textarea:focus { outline: 0; }

.tab-widget .tab-wraper .tab-content .text {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

/* --- running total panel --- */

.tab-widget .tab-wraper .inventory-calculator-wrap {
    border: 1px solid #243746;
    border-radius: 3px 3px 0 0;
    padding: 1rem;
}

.tab-widget .tab-wraper .inventory-calculator-wrap .head-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-widget .tab-wraper .inventory-calculator-wrap .head-wrap .title {
    font-size: 16px;
    font-weight: 500;
    color: #243746;
}

.tab-widget .tab-wraper .inventory-calculator-wrap .head-wrap .all-cta {
    font-size: 16px;
    font-weight: 500;
    color: #243746;
    border: 0;
    background: transparent;
    visibility: hidden;
    transition: .3s all ease-in-out;
}

.tab-widget .tab-wraper .inventory-calculator-wrap .sub-total,
.tab-widget .tab-wraper .inventory-calculator-wrap .sub-total .count {
    font-size: 16px;
    color: rgba(42, 41, 46, .5019607843);
    font-weight: 500;
}

.tab-widget .tab-wraper .main-items {
    border: 1px solid #243746;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    visibility: hidden;
    height: 0;
}

.tab-widget .tab-wraper .main-items.open {
    visibility: visible;
    height: -moz-fit-content;
    height: fit-content;
    padding: 1rem;
}

.tab-widget .tab-wraper .main-items .summary-wraper { margin-bottom: .8rem; }

.tab-widget .tab-wraper .main-items .summary-wraper .head {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-bottom: 10px;
}

.tab-widget .tab-wraper .main-items .summary-wraper .head .heading {
    font-size: 16px;
    font-weight: 500;
}

.tab-widget .tab-wraper .main-items .summary-wraper .head .heading:last-child { text-align: right; }

.tab-widget .tab-wraper .main-items .summary-wraper .content {
    display: grid;
    grid-template-columns: 50% 50%;
}

.tab-widget .tab-wraper .main-items .summary-wraper .content .object,
.tab-widget .tab-wraper .main-items .summary-wraper .content .unit,
.tab-widget .tab-wraper .main-items .summary-wraper .content .total-object {
    font-size: 16px;
    font-weight: 500;
    color: rgba(42, 41, 46, .5019607843);
}

.tab-widget .tab-wraper .main-items .summary-wraper .content .total-object { text-align: right; }
.tab-widget .tab-wraper .main-items .summary-wraper .content .unit { display: none; }

.tab-widget .tab-wraper .inventory-btn {
    font-size: 16px;
    font-weight: 500;
    padding: 1rem;
    display: flex;
    margin: auto;
    width: -moz-fit-content;
    width: fit-content;
    border: 0;
    border-radius: 5px;
    background-color: #243746;
    color: #fff;
    margin-top: 1rem;
}

.tab-widget .tab-wraper .total-wrap {
    display: none;
    justify-content: space-between;
    background-color: #243746;
    padding: 1rem;
    border-radius: 5px;
    position: relative;
}

.tab-widget .tab-wraper .total-wrap .heading {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.tab-widget .tab-wraper .total-wrap .text,
.tab-widget .tab-wraper .total-wrap #grand-total {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

/* --- quote modal (scoped by id so the sitewide quote modal is untouched) --- */

#quoteDetailModal .modal-header {
    padding: 10px 1rem;
    border-bottom: 0;
}

#quoteDetailModal .modal-header .close {
    font-size: 17px;
    border: 0;
    background: transparent;
    display: flex;
    margin-left: auto;
}

#quoteDetailModal .modal-body { padding-top: 0; }
#quoteDetailModal .modal-body .heading-box { margin-bottom: 1.3rem; }

#quoteDetailModal .modal-body .heading-box .modal-title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
}

#quoteDetailModal .modal-body .heading-box .sub-title {
    font-size: 16px;
    font-weight: 500;
    color: #243746;
    text-align: center;
    display: block;
}

#quoteDetailModal form .form-field { margin-bottom: .7rem; }

#quoteDetailModal form .form-field label {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #243746;
}

#quoteDetailModal form .form-check {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1rem;
}

#quoteDetailModal form .form-check .form-check-input {
    height: 12px;
    width: 12px;
    border-radius: 2px;
    margin-top: -3px;
}

#quoteDetailModal form .form-check .form-check-input:focus { box-shadow: none; }

#quoteDetailModal form .form-check .form-check-label {
    font-size: 14px;
    font-weight: 500;
}

#quoteDetailModal form input::-webkit-outer-spin-button,
#quoteDetailModal form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

#quoteDetailModal form input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

#quoteDetailModal .mail-response {
    background-color: #243746;
    font-size: 16px;
    color: #fff;
    padding: 10px;
    text-align: center;
    line-height: 1.5;
    border-radius: 3px;
    margin-bottom: 1rem;
}

/* --- responsive --- */

@media screen and (max-width: 1200px) {
    .tab-widget .tab-wraper { position: relative; }

    .tab-widget .tab-wraper .tab-menu {
        border-top: 0;
        margin: 0 2rem 1rem;
        padding-bottom: 1rem;
        overflow-x: scroll;
        scroll-behavior: smooth;
    }

    .tab-widget .tab-wraper .scroll-left,
    .tab-widget .tab-wraper .scroll-right {
        border: 0;
        position: absolute;
        top: 18px;
        background: #243746;
        padding: 7px;
        height: 30px;
        border-radius: 50%;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tab-widget .tab-wraper .scroll-left  { right: -7px; }
    .tab-widget .tab-wraper .scroll-right { left: -7px; }

    .tab-widget .tab-wraper .scroll-left i,
    .tab-widget .tab-wraper .scroll-right i { color: #fff; }
}

@media screen and (max-width: 991px) {
    .tab-widget.space { padding: 40px 0; }
}

/* The active-tab truck indicator is positioned -4.5rem (72px) above the tab
 * strip. style.css gives .heading-wrap only 40px of bottom margin sitewide,
 * so the truck rides up over the heading. The legacy page reserved 5.5rem
 * (88px) for exactly this reason. Scoped so the sitewide class is unaffected. */
.tab-widget .heading-wrap {
    margin-bottom: 5.5rem;
    text-align: center;
}