/*
  Modern look for the classic quote form (LTL, FTL, Parcel, Vehicle tabs)
  while ShowNewRateOnly is false. Styling follows the new Rate Widget (FreightRun.RateWidget/src/app/app.css).
  Everything is scoped under .fr-quote-modern (set on the form wrapper in Views/Rate/_QuoteFormTabsPartial.cshtml),
  so deleting this file and that class restores the old look.
*/

/* ---------- 1. Tabs: card tabs like the widget (active tab filled blue, small icon) ---------- */
.fr-quote-modern .nav-tabs.quote-form-navs {
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 0 18px;
    position: relative;
    z-index: 1;
}

    .fr-quote-modern .nav-tabs.quote-form-navs:before,
    .fr-quote-modern .nav-tabs.quote-form-navs:after {
        display: none;
    }

    .fr-quote-modern .nav-tabs.quote-form-navs > li {
        float: none;
        margin: 0;
    }

        .fr-quote-modern .nav-tabs.quote-form-navs > li > a {
            align-items: center;
            background: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%);
            border: 1px solid #e0e6f2;
            border-bottom: 0;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 10px 24px rgba(69, 93, 150, 0.08);
            box-sizing: border-box;
            color: #667287;
            display: inline-flex;
            float: none;
            font-size: 14px !important;
            font-weight: 600;
            gap: 10px;
            line-height: 1;
            margin: 0;
            min-height: 52px;
            padding: 12px 18px;
            white-space: nowrap;
        }

            .fr-quote-modern .nav-tabs.quote-form-navs > li > a small {
                color: inherit;
                font-size: 12px;
                font-weight: 400;
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li > a:hover,
            .fr-quote-modern .nav-tabs.quote-form-navs > li > a:focus {
                background: linear-gradient(180deg, #ffffff 0%, #eef2fc 100%);
                border-color: #cfd8ec;
                color: #364cbc;
                text-decoration: none;
            }

        .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a,
        .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a:hover,
        .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a:focus {
            background: linear-gradient(135deg, #576ed9 0%, #364cbc 100%);
            border-color: transparent;
            box-shadow: 0 14px 28px rgba(54, 76, 188, 0.28);
            color: #ffffff;
            font-weight: 700;
        }

            /* tab icons (the widget's): anchors are matched by href because their classes differ for anonymous and logged-in users */
            .fr-quote-modern .nav-tabs.quote-form-navs > li > a:before {
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                content: "";
                display: inline-block;
                flex: 0 0 20px;
                height: 20px;
                width: 20px;
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li > a[href$="/rate/freight-quote"]:before,
            .fr-quote-modern .nav-tabs.quote-form-navs > li > a[href*="ftl"]:before,
            .fr-quote-modern .nav-tabs.quote-form-navs > li > a[href*="ltl"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3z'/%3E%3Cpath d='M14 10h3l3 3v2h-6z'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.5'/%3E%3C/svg%3E");
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li > a[href*="parcel"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 7 4v10l-7 4-7-4V7l7-4Z'/%3E%3Cpath d='m12 12 7-4M12 12 5 8M12 12v9'/%3E%3C/svg%3E");
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li > a[href*="vehicle"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526080' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V9l2-3h10l2 3v7'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.5'/%3E%3C/svg%3E");
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a[href$="/rate/freight-quote"]:before,
            .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a[href*="ftl"]:before,
            .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a[href*="ltl"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3z'/%3E%3Cpath d='M14 10h3l3 3v2h-6z'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.5'/%3E%3C/svg%3E");
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a[href*="parcel"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 7 4v10l-7 4-7-4V7l7-4Z'/%3E%3Cpath d='m12 12 7-4M12 12 5 8M12 12v9'/%3E%3C/svg%3E");
            }

            .fr-quote-modern .nav-tabs.quote-form-navs > li.active > a[href*="vehicle"]:before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V9l2-3h10l2 3v7'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.5'/%3E%3C/svg%3E");
            }

/* ---------- 2. Frame: one white card instead of the steel-blue box ---------- */
.fr-quote-modern .fr-form-wrapper,
.fr-quote-modern .quote-form-tabs .tab-pane.first.active .fr-form-wrapper {
    background: #ffffff;
    border: 1px solid #e3e8f2;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    padding: 14px;
}

    .fr-quote-modern .fr-form-wrapper .fr-form-row {
        background: #ffffff;
        border: 1px solid #edf1f8;
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
    }

/* ---------- 3. Section labels: soft rail with a round icon ---------- */
.fr-quote-modern .fr-blue-background {
    align-items: center;
    background: linear-gradient(180deg, #fcfdff 0%, #f4f7ff 100%);
    border-radius: 12px 0 0 12px;
    box-shadow: inset -1px 0 0 #eef2f8;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fr-quote-modern .fr-quote-title {
    color: #4a5370;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.fr-quote-modern .fr-panel-icon:before {
    background-color: #eef2ff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    border-radius: 999px;
    content: "";
    display: block;
    flex-shrink: 0;
    height: 36px;
    margin: 0 auto 8px;
    width: 36px;
}

/* same pin for Ship From and Ship To */
.fr-quote-modern .fr-panel-origin:before,
.fr-quote-modern .fr-panel-destination:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566fd9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.33-6-11a6 6 0 1 1 12 0c0 5.67-6 11-6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='%23566fd9'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-items:before,
.fr-quote-modern .fr-panel-shipment:before {
    background-color: #f2efff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6cf2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 7 4v10l-7 4-7-4V7l7-4Z'/%3E%3Cpath d='m12 12 7-4M12 12 5 8M12 12v9'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-pickup:before,
.fr-quote-modern .fr-panel-details:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566fd9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-contact:before {
    background-color: #eef4ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23576ed9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-truck:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566fd9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v8H3z'/%3E%3Cpath d='M14 10h3l3 3v2h-6z'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='1.5'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-vehicle:before {
    background-color: #eef9ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c8dcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V9l2-3h10l2 3v7'/%3E%3Cpath d='M3 16h18'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.5' fill='%233c8dcf'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.5' fill='%233c8dcf'/%3E%3C/svg%3E");
}

.fr-quote-modern .fr-panel-comment:before {
    background-color: #fff4eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1872a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");
}

/* ---------- 4. Inputs and dropdowns ---------- */
/* only vertical sizing changes, so the existing column widths are kept */
.fr-quote-modern .fr-form-wrapper input[type="text"],
.fr-quote-modern .fr-form-wrapper input[type="number"],
.fr-quote-modern .fr-form-wrapper input[type="email"],
.fr-quote-modern .fr-form-wrapper input[type="tel"],
.fr-quote-modern .fr-form-wrapper select,
.fr-quote-modern .fr-form-wrapper textarea {
    border: 1px solid #d7dee9;
    border-radius: 8px;
    box-shadow: none;
    color: #1f2937;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* plain inputs are content-box: 20px + 2 x 8px padding + border = 38px */
.fr-quote-modern .fr-form-wrapper input[type="text"],
.fr-quote-modern .fr-form-wrapper input[type="number"],
.fr-quote-modern .fr-form-wrapper input[type="email"],
.fr-quote-modern .fr-form-wrapper input[type="tel"] {
    height: 20px;
    line-height: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
}

/* Bootstrap span inputs and all dropdowns are border-box, and custom.css forces min-height 25px / select height 25px with !important */
.fr-quote-modern .fr-form-wrapper input[class*="span"][type="text"],
.fr-quote-modern .fr-form-wrapper input[class*="span"][type="number"],
.fr-quote-modern .fr-form-wrapper input[class*="span"][type="email"],
.fr-quote-modern .fr-form-wrapper input[class*="span"][type="tel"],
.fr-quote-modern .fr-form-wrapper select {
    height: 38px !important;
    line-height: 20px;
    min-height: 38px !important;
}

    .fr-quote-modern .fr-form-wrapper input[type="text"]:focus,
    .fr-quote-modern .fr-form-wrapper input[type="number"]:focus,
    .fr-quote-modern .fr-form-wrapper input[type="email"]:focus,
    .fr-quote-modern .fr-form-wrapper input[type="tel"]:focus,
    .fr-quote-modern .fr-form-wrapper select:focus,
    .fr-quote-modern .fr-form-wrapper textarea:focus {
        border-color: #0668cf;
        box-shadow: 0 0 0 3px rgba(6, 104, 207, 0.15);
        outline: 0;
    }

/* ---------- 4b. Checkboxes: rounded, filled blue with a white tick when checked (layout unchanged) ---------- */
.fr-quote-modern .fr-form-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff center / 12px 12px no-repeat;
    border: 1.5px solid #b8c2d6;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    height: 16px;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
    width: 16px;
}

    .fr-quote-modern .fr-form-wrapper input[type="checkbox"]:hover {
        border-color: #576ed9;
    }

    .fr-quote-modern .fr-form-wrapper input[type="checkbox"]:focus {
        outline: 0;
    }

    .fr-quote-modern .fr-form-wrapper input[type="checkbox"]:focus-visible {
        box-shadow: 0 0 0 3px rgba(87, 110, 217, 0.25);
    }

    .fr-quote-modern .fr-form-wrapper input[type="checkbox"]:checked {
        background-color: #576ed9;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
        border-color: #576ed9;
    }

    .fr-quote-modern .fr-form-wrapper input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

/* the box is 3px wider than the browser default, keep a readable gap before the label */
.fr-quote-modern .fr-form-wrapper .fr-checkbox input[type="checkbox"] {
    margin-right: 4px;
}

/* plain service labels were very light gray; description links keep their blue */
.fr-quote-modern .fr-form-wrapper .fr-checkbox label:not(.fr-link) {
    color: #5b6475;
}

/* ---------- 5. Get Rates button: orange, like the widget ---------- */
.fr-quote-modern .btn.quote-button,
.fr-quote-modern .btn.quote-button:focus {
    background: linear-gradient(135deg, #ffb44d 0%, #f1872a 100%);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 16px 28px rgba(241, 135, 42, 0.28);
    color: #ffffff;
    filter: none;
    font-size: 14px;
    font-weight: 700;
    min-height: 44px;
    min-width: 190px;
    padding: 10px 18px;
    text-shadow: none;
}

    .fr-quote-modern .btn.quote-button:hover,
    .fr-quote-modern .btn.quote-button:active {
        background: linear-gradient(135deg, #ffab38 0%, #e57a1c 100%);
        color: #ffffff;
    }

    .fr-quote-modern .btn.quote-button[disabled] {
        opacity: 0.7;
    }

/* ---------- tablets and small laptops: Items to Ship wraps onto two lines (Quantity / Package / Weight / Class, then Size and Haz / Stackable) ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .fr-quote-modern .fr-shipment-row .contents > .span6 {
        margin-left: 0;
        width: 100%;
    }

    .fr-quote-modern .fr-shipment-row .contents > .span4 {
        margin-left: 0;
        margin-top: 8px;
        width: 62%;
    }

    .fr-quote-modern .fr-shipment-row .contents > .span2 {
        margin-left: 2%;
        margin-top: 8px;
        width: 36%;
    }
}

/* ---------- touch screens (tablets get this desktop form): finger-sized checkboxes, readable labels, Today / Tomorrow pills ---------- */
@media (pointer: coarse) {
    .fr-quote-modern .fr-form-wrapper input[type="checkbox"] {
        background-size: 14px 14px;
        border-radius: 5px;
        height: 22px;
        width: 22px;
    }

    .fr-quote-modern .fr-form-wrapper .fr-checkbox {
        min-height: 32px;
    }

        .fr-quote-modern .fr-form-wrapper .fr-checkbox label {
            font-size: 13px !important;
            line-height: 1.3;
        }

    .fr-quote-modern .fr-form-wrapper label.inline,
    .fr-quote-modern .fr-form-wrapper .control-label {
        font-size: 13px !important;
    }

    /* the pills get their own row under the "Pickup" label */
    .fr-quote-modern .fr-form-wrapper .fr-label-form[for$="PickupDate"] + span {
        display: flex;
        margin: 4px 0 6px;
    }

    .fr-quote-modern .fr-form-wrapper .fr-jquery-date-link {
        align-items: center;
        background: #ffffff;
        border: 1px solid #cfd8ec;
        border-radius: 999px;
        color: #364cbc;
        display: inline-flex;
        font-size: 13px;
        font-weight: 600;
        height: 30px;
        padding: 0 10px;
        text-decoration: none;
    }
}

/* ---------- small screens: rail becomes a header row (icon left of the title) ---------- */
@media (max-width: 767px) {
    .fr-quote-modern .nav-tabs.quote-form-navs {
        gap: 6px;
        padding-left: 0;
    }

        .fr-quote-modern .nav-tabs.quote-form-navs > li > a {
            gap: 8px;
            min-height: 44px;
            padding: 10px 12px;
        }

    .fr-quote-modern .fr-blue-background {
        border-radius: 12px 12px 0 0;
        box-shadow: inset 0 -1px 0 #eef2f8;
        flex-direction: row;
        gap: 10px;
        justify-content: flex-start;
    }

    .fr-quote-modern .fr-panel-icon:before {
        background-size: 18px 18px;
        height: 30px;
        margin: 0;
        width: 30px;
    }

    .fr-quote-modern .fr-quote-title br {
        display: none;
    }
}