/* =========================================================================
   The shipment price calculator on the banner.

   Built to the reference: one field per row, placeholders doing the work of
   labels, a select that does not look like a browser default, and a submit
   that carries an arrow.

   Loaded after style.css so the original stays untouched, and nothing here
   moves any markup — the same four fields in the same order, the two-column
   grid folded to one by the rules below rather than by editing the blade.
   ========================================================================= */

.rate-form-wrap {
    width: 430px;
    max-width: 100%;
    background: #fff;
    padding: 34px 34px 30px;
    border-radius: 16px;
    box-shadow: 0 30px 60px -25px rgba(2, 19, 91, .45);
}

/* -------------------------------------------------------------------------
   The heading.

   Was a red bar bled to the edges of the card, which read as a title bar on
   a dialog. The reference sets its heading in the card, large and quiet, and
   lets the button carry the colour.
   ------------------------------------------------------------------------- */

.rate-form-wrap h3 {
    background: transparent;
    color: var(--elite-navy, #02135b);
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
}

.rate-form-wrap p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #5b6478;
}

.rate-form-wrap form {
    margin-top: 22px;
}

/* -------------------------------------------------------------------------
   The fields.

   One per row. The blade asks for col-md-6 on four of them; rather than
   change it, they are widened here — the calculator sits in a 430px card
   where two columns leave each field too narrow to read a country in.
   ------------------------------------------------------------------------- */

.rate-form-wrap form .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.rate-form-wrap .form-group {
    margin-bottom: 14px;
}

/* The labels go: every field says what it is in its own placeholder, and a
   label above a placeholder saying the same word twice is noise. Kept in the
   markup and hidden, so a screen reader still reads them. */
.rate-form-wrap label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rate-form-wrap .form-control {
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
    color: #16203d;
    background: #f5f6fa;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease;
}

.rate-form-wrap .form-control::placeholder {
    color: #98a0b3;
}

.rate-form-wrap .form-control:focus {
    background: #fff;
    border-color: var(--elite-red, #e80719);
    box-shadow: 0 0 0 3px rgba(232, 7, 25, .12);
    outline: 0;
}

/* A disabled field is a statement, not a broken one: everything leaves
   Nepal, so From says so and cannot be argued with. */
.rate-form-wrap .form-control:disabled,
.rate-form-wrap .form-select:disabled {
    /* background-color, not background: the shorthand resets background-image
       too, which took the chevron off the From select and left it the only
       field of the three without one. */
    background-color: #eef0f6;
    color: #6b7280;
    cursor: default;
}

/* -------------------------------------------------------------------------
   The selects.

   Browsers each draw their own arrow in their own place. One chevron,
   drawn here, so From, To and Integrator look like one family.
   ------------------------------------------------------------------------- */

.rate-form-wrap select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316203d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 13px 8px;
}

/* -------------------------------------------------------------------------
   Check price.
   ------------------------------------------------------------------------- */

.rate-form-wrap .btn,
.rate-form-wrap #checkPrice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 54px;
    margin-top: 4px;
    padding: 0 26px;
    background: var(--elite-red, #e80719);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    /* Something upstream shouts every button on this site. The reference sets
       its own in title case, and so does the word in the markup. */
    text-transform: none;
    transition: background .25s ease;
}

/* The arrow the reference carries, drawn rather than added to the markup. */
.rate-form-wrap .btn::after,
.rate-form-wrap #checkPrice::after {
    content: "";
    width: 26px;
    height: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='10' fill='none'%3E%3Cpath d='M0 9h24L17.1 1' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .25s ease;
}

.rate-form-wrap .btn:hover,
.rate-form-wrap #checkPrice:hover {
    background: var(--elite-red-dark, #c00614);
    color: #fff;
}

.rate-form-wrap .btn:hover::after,
.rate-form-wrap #checkPrice:hover::after {
    transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   The answer.

   The one thing somebody came to this form for, so it is given room rather
   than a thin red strip under the button.
   ------------------------------------------------------------------------- */

.rate-form-wrap #price,
#price {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #f0f7f2;
    border: 1px solid #cfe7d6;
    color: #14532d;
    font-size: 15px;
    line-height: 1.55;
    text-align: left;
}

#price #resultweight,
#price #resultprice {
    font-weight: 800;
    color: #0f3d21;
}

#price small {
    display: block;
    margin-top: 6px;
    color: #4b7a5c;
    font-size: 12px;
}

/* -------------------------------------------------------------------------
   Narrower screens.
   ------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .rate-form-wrap {
        padding: 26px 22px 24px;
        border-radius: 14px;
    }

    .rate-form-wrap h3 {
        font-size: 25px;
    }
}

/* =========================================================================
   Landscape.

   The card above was cut for a 430px slot beside the tracking box, one field
   per row. That box has moved onto the banner, so the calculator has the
   whole strip — and one narrow column of five stacked fields in a page-wide
   space reads as something that failed to load.

   Across, then: the four fields and the button in a single row, which is
   also the shape of the question. Nothing moves in the markup — the blade's
   Bootstrap row is re-laid as a grid, and #price keeps its col-md-12 by
   spanning every column of it.
   ========================================================================= */

@media (min-width: 992px) {

    .rate-form-wrap {
        width: 100%;
        padding: 32px 34px 34px;
    }

    /* The heading holds the top of the card rather than a column of its own:
       a five-field row needs the full width, and "Check Shipment Price" set
       beside it would take a sixth. */
    .rate-form-wrap form {
        margin-top: 24px;
    }

    /* Grid, not the flex row Bootstrap builds. The four fields share the
       space and the button takes only what it needs. */
    .rate-form-wrap form .row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
        align-items: end;
        gap: 18px;
        /* The row's own negative gutters have nothing to pull against now. */
        margin: 0;
    }

    .rate-form-wrap form .row > [class*="col-"] {
        /* width, not just max-width. Bootstrap 5 sizes .col-md-6 with
           width: 50%, and as a grid item that resolves against its own
           column — so each field came out half the 211.5px it had been
           given, and "Countries" rendered as "Countr". */
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .rate-form-wrap .form-group {
        margin-bottom: 0;
    }

    /* The answer spans the row, wherever the row happens to end. */
    .rate-form-wrap form .row > .col-md-12 {
        grid-column: 1 / -1;
    }

    /* The labels come back. Stacked, each field's placeholder said what it
       was and the label above repeated it; in a row of four, "Nepal",
       "Countries", "integrator" and "Weight" are four values with no
       shared heading to read them under. */
    .rate-form-wrap label {
        position: static;
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        margin: 0 0 7px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #8a92a8;
    }

    /* The button lines up with the fields beside it, not with a full-width
       block of its own. Its label is two words and should not wrap. */
    .rate-form-wrap .btn,
    .rate-form-wrap #checkPrice {
        width: auto;
        min-width: 190px;
        height: 52px;
        margin-top: 0;
        white-space: nowrap;
    }
}