/* The outer .row becomes a plain single column in the app frame. */
.app-shell .bg-img-wrap {
    display: block;
    margin: 0;
}

/* Narrow frames: one stacked column, map above the form. No max-width cap —
   at 480px the stacked form sat visibly narrower than the page footer, which
   fills the app shell. The frame itself is the width constraint. */
.app-shell .bg-img-wrap > form {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--app-pad);
}

.app-shell .bg-img-wrap > form > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}

/* Page edge spacing from the shared tokens, so every layout 1 page clears the
   header above and the fixed bottom nav below by the same amount, instead of
   each sheet picking its own literal. */
.app-shell .spad {
    padding: var(--app-page-top) 0 var(--app-page-bottom);
}

.app-shell .md-container {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding-inline: var(--app-pad);
}

/* The signup page's own top-level wrapper — .spad above is not on it. At 8px
   the heading sat almost against the header's utility strip, tighter than any
   other layout 1 page, so it takes the shared page-edge tokens too. */
.app-shell .py-4-signup {
     padding-block: 16px var(--app-page-bottom);
}

.app-shell .px-40-desktop {
    padding-inline: 0;
}

/* The form card. */
.app-shell .inner-backgroud {
    width: 100%;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 22px 18px 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    box-sizing: border-box;
    /* The column wrapper carries Bootstrap's d-flex/align-items-center, meant
       for the desktop two-column split; left-align the fields explicitly so a
       centred inheritance cannot reach the labels. */
    text-align: left;
}

/* One line of text with a link — a bordered, shadowed card around it read as a
   second panel competing with the form above. Plain centred text instead, with
   the link carrying the emphasis. */
.app-shell .login-wrap-clr {
    width: 100%;
    margin: 16px 0 0 !important;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--app-muted);
    text-align: center;
}

.app-shell .login-wrap-clr a {
    color: var(--app-theme);
    font-weight: 700;
    text-decoration: none;
}

.app-shell .login-wrap-clr a:hover {
    text-decoration: underline;
}

/* The column carries d-flex + align-items-center + flex-column from the desktop
   markup; as a flex column that centres and shrink-wraps every child. Forced
   back to a plain block so the card fills the width and its text stays left.

   !important on padding: the template's inline <style> carries
   `@media (min-width: 1530px) { .wrap-form-addded { padding: 90px 120px } }`,
   a desktop inset. That block sits in the body and so loads after this sheet,
   so at equal specificity it would otherwise win and add 240px of horizontal
   padding inside the app frame. */
.app-shell .wrap-form-addded {
    display: block !important;
    text-align: left;
    width: 100%;
    padding: 0 !important;
    background: none;
    border: 0;
    box-shadow: none;
}

/* Card heading, same treatment as "Log in with" on the login page. */
.app-shell .inner-backgroud > h5 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef0f3;
}

.app-shell .title h2,
.app-shell .title h3,
.app-shell .contact__form__title h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}

.app-shell .title p {
    margin: 0 0 18px;
    color: var(--app-muted);
    font-size: 14px;
}

/* Two fields per line, as in the reference — Mobile beside Email, Password
   beside Confirm Password, and so on. This was `display: block` with every
   child forced to width:100%, which stacked every field full width and lost
   the col-md-6 pairing the markup already expresses. */
.app-shell .inner-backgroud .form-row {
    display: flex;
    flex-wrap: wrap;
    /* The gutter between paired fields; the columns below subtract half of it
       from each side. */
    margin-inline: -7px;
}

.app-shell .inner-backgroud .form-row > [class*="col-"] {
    padding-inline: 7px;
    margin-bottom: 14px;
    /* Without this the 7px gutter adds ON TOP of the 50% basis, so each paired
       column measured 50% + 14px and its input overran the cell — which is why
       Full Name and Mobile spilled past their boxes. */
    box-sizing: border-box;
}

/* Half-width fields pair up; anything explicitly col-md-12 (full name, street
   address, the nested .form-row wrappers) still spans the line. */
.app-shell .inner-backgroud .form-row > .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.app-shell .inner-backgroud .form-row > .col-md-12,
.app-shell .inner-backgroud .form-row > .form-row {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Phones: one field per line. Two-across left each input ~150px wide, so the
   placeholders ("Enter your Mobile Number", "name@domain.com", "Confirm
   Password") were cut mid-word and the selected State read "British Colum…".
   The pairing returns once the card is wide enough to give each half room. */
@media (max-width: 600px) {
    .app-shell .inner-backgroud .form-row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* One text size for everything inside the form fields — typed text,
   placeholders, and the Country / State selects (native and select2) — so
   full-width and half-width fields read alike. 13px also lets the longest
   half-width placeholder ("Enter your Mobile Number*") show in full. */
.app-shell .inner-backgroud .form-control,
.app-shell .inner-backgroud select,
.app-shell .inner-backgroud textarea,
.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__rendered,
.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 13px !important;
}

.app-shell .inner-backgroud .form-control::placeholder,
.app-shell .inner-backgroud textarea::placeholder {
    font-size: 13px;
}

@media (min-width: 601px) {
    .app-shell .inner-backgroud #phone,
    .app-shell .inner-backgroud #email_id {
        padding-right: 10px;
        text-overflow: ellipsis;
    }
}

/* --- Country / State (select2) ------------------------------------------
   These selects are upgraded by select2, which hides the <select> and draws
   its own box — so they missed the field styling every input has and showed a
   square 3px-radius frame, a darker border and a small triangle (the inline
   <style> pins the arrow at `top: 80%`). Matched to the inputs here; the
   dropdown list itself attaches to <body> and is left as select2 draws it.
   !important where the template's inline rules use it. */
.app-shell .inner-backgroud .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px !important;
    padding: 0 !important;
    border: 1px solid #e3e5e9;
    border-radius: 10px !important;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 38px 0 14px;
    color: var(--app-ink);
    font-size: 15px;
    line-height: 46px;
}

.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--app-muted);
}

/* The same chevron the native selects in layout 1 use, in place of
   select2's triangle. */
.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 12px;
    width: 14px;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.app-shell .inner-backgroud .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.app-shell .inner-backgroud .select2-container--default.select2-container--open .select2-selection--single,
.app-shell .inner-backgroud .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--app-theme);
    box-shadow: 0 0 0 3px var(--app-theme-soft);
}

/* A field the template has marked d-none must not still occupy a grid cell —
   flex would otherwise give it half the row and leave a hole beside its
   neighbour. (Country is d-none for vendors with is_visible set.) */
.app-shell .inner-backgroud .form-row > .d-none {
    display: none;
}

/* A nested .form-row is itself a grid container, so it must not also carry the
   outer row's negative margin — that would pull its first field out past the
   card's padding. */
.app-shell .inner-backgroud .form-row .form-row {
    margin-inline: 0;
}

/* The inner .form-group would otherwise add a second gap on top of it. */
/* Matches the 14px the columns above carry — at 18px a .form-group sitting
   directly on the row was spaced further from its neighbour than two fields in
   a paired row were, so the vertical rhythm changed halfway down the card. */
.app-shell .inner-backgroud .form-row > .form-group {
    margin-bottom: 14px;
}

.app-shell .inner-backgroud .form-group .form-group {
    margin-bottom: 0;
}

.app-shell .required {
    color: #dc2626;
}

.app-shell .position-relative > .field_icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    color: var(--app-muted);
    cursor: pointer;
}

/* The toggles sit inside .position-relative wrappers in the markup, so the
   input needs to leave room for the icon. */
.app-shell .toggle-password,
.app-shell .toggle-password-confirm {
    z-index: 2;
}

.app-shell .position-relative input.form-control {
    padding-right: 44px;
}

.app-shell .address_fields,
.app-shell .wrap-address-inner {
    margin-top: 4px;
}

/* Google Places autocomplete field — the dropdown attaches to <body>, so only
   the input itself is styled here. */
.app-shell .pac-target-input {
    width: 100%;
}

.app-shell .rightcontent-alignment {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

/* The heading, search and map are the whole step, so it is not boxed in a card
   the way the field form is — the map is its own visual block. */
.app-shell .inner-container-signup {
    width: 100%;
    max-width: none;
    padding-inline: 0;
    margin-bottom: 4px;
}

.app-shell .inner-container-signup h1 {
    /* 40px+ desktop hero down to an app heading. */
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 6px;
    text-align: center;
}

.app-shell .inner-container-signup label {
    display: block;
    margin: 0 0 16px;
    color: var(--app-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* The search box sits above the map rather than floating over its corner.
   The template's inline <style> gives .wrap-address-inner position:absolute with
   a 95px/176px padding pair so it hovers over the desktop map. In the app frame
   that lifted it out of flow and dropped it on top of the heading, so the
   positioning is undone here rather than just re-margined. */
.app-shell .wrap-address-inner {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    z-index: auto;
}

.app-shell .address_fields {
    margin: 0 0 14px;
}

/* Its .form-group would otherwise add its own 18px on top of that margin. */
.app-shell .address_fields .form-group {
    margin-bottom: 0;
}

.app-shell #map-canvas {
    height: 320px !important;
    width: 100% !important;
    /* Matches the field card's border and radius so the two columns read as a
       pair rather than a bordered form beside a bare image. */
    border: 1px solid #ececf0 !important;
    border-radius: 16px !important;
    /* The inline rule also carries a heavy 8px/4px shadow. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04) !important;
    overflow: hidden !important;
}

/* Google injects its own controls into the canvas; keep them inside the
   rounded corners. */
.app-shell #map-canvas > div {
    border-radius: 12px;
}

/* Populated by the Places callback and shown in an info window, so it must not
   also render as loose text under the map. */
.app-shell #infowindow-content {
    display: none;
}

/* --- Terms + referral ----------------------------------------------------- */
.app-shell .term-condition-font,
.app-shell .tc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--app-muted);
}

.app-shell .term-condition-font a,
.app-shell .tc a {
    color: var(--app-theme);
    text-decoration: none;
}

.app-shell .term-condition-font a:hover,
.app-shell .tc a:hover {
    text-decoration: underline;
}

/* Checkbox and sentence on one row. The label must not take the form's field
   label style (uppercase, 11.5px, block) — this is a sentence, not a field
   caption — hence the higher-specificity reset. */
.app-shell .inner-backgroud .signup-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
}

.app-shell .inner-backgroud .signup-terms input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px !important;
    margin: 1px 0 0;
    accent-color: var(--app-theme);
    cursor: pointer;
}

.app-shell .inner-backgroud .signup-terms label {
    display: block;
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45;
    text-transform: none;
    text-align: left;
    color: var(--app-muted);
    cursor: pointer;
}

.app-shell .inner-backgroud .signup-terms label a.tc {
    color: var(--app-theme);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .inner-backgroud .signup-terms label a.tc:hover {
    text-decoration: underline;
}

.app-shell .website_referal_code,
.app-shell .reward_points_status {
    font-size: 13px;
    color: var(--app-muted);
}

.app-shell .phone_num {
    position: relative;
}

.app-shell .phone_num input {
    width: 100%;
}

/* --- Actions -------------------------------------------------------------
   Full width with a 48px tap target, matching the login page's button. */
.app-shell .inner-backgroud .site-btn,
.app-shell .inner-backgroud .btn-primary,
.app-shell #btn_submit {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

/* The desktop form parks a Reset button beside Submit with inline margins.
   Stacked here so it does not sit half off the card. */
.app-shell #reset_form {
    width: 100%;
    margin: 10px 0 0 !important;
    background: #fff;
    color: var(--app-theme);
}

/* --- signup_6 ------------------------------------------------------------- */
.app-shell .contact__form__title {
    margin-bottom: 16px;
}

.app-shell .address-field {
    margin-bottom: 18px;
}

@media (min-width: 960px) {
    /* No max-width cap here: .app-shell is 1100px, so a 980px form sat 120px
       narrower than the footer below it, which fills the shell. The form now
       spans the frame and takes its side breathing room from the padding-inline
       set on the base rule. */
    .app-shell .bg-img-wrap > form {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        max-width: 100%;
    }

    .app-shell .bg-img-wrap > form > .col-md-6 {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }

    .app-shell .bg-img-wrap > form {
        align-items: stretch;
    }

    .app-shell .bg-img-wrap > form > .col-md-6:first-child {
        display: flex;
        flex-direction: column;
    }

    /* Lets the map take all the height the taller field column creates. */
    .app-shell .rightcontent-alignment {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* The map card is now the thing inside that column, so it is what has to
       stretch — and the map inside it in turn. Without this the card sized to
       the map's fixed 420px and left a gap below it against the taller form. */
    .app-shell .su-map-card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    /* The wrapper is now the card's stretching child; the map fills it. */
    .app-shell .su-map-wrap {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 420px;
    }

    .app-shell .su-map {
        flex: 1 1 auto;
        /* A floor rather than a fixed height: it grows with the form beside it
           but never collapses when the form is short. */
        height: auto;
        min-height: 420px;
    }

    /* Side by side, so the stacked gap is unwanted and the heading reads as
       the map column's own title rather than a centred page banner. */
    .app-shell .rightcontent-alignment {
        margin-bottom: 0;
        text-align: left;
    }

    .app-shell .inner-container-signup h1,
    .app-shell .inner-container-signup label {
        text-align: left;
    }

    /* Starts the map column's heading on the same line as the card's heading
       opposite it: the card's 22px top padding plus its 1px border. */
    .app-shell .inner-container-signup {
        padding-top: 23px;
    }

    /* Fills the viewport beside the long field column instead of floating as a
       small tile in a tall empty space, capped for short windows. */
    .app-shell #map-canvas {
        height: min(560px, calc(100vh - 210px)) !important;
    }
}

/* =========================================================================
   Layout 1 signup — card redesign
   Centred page heading above both columns, the map and its search in their own
   card, and icon-led fields. The existing .inner-backgroud card rules above
   still style the form panel; these add the surrounding structure.
   ========================================================================= */

/* --- Page heading -------------------------------------------------------- */

.app-shell .su-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 22px;
    padding-inline: var(--app-pad);
}

.app-shell .su-title {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: var(--app-ink);
}

.app-shell .su-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--app-muted);
}

/* --- Map card ------------------------------------------------------------ */

.app-shell .su-map-card {
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    margin-bottom: 18px;
}

/* Left-aligned in every width: it inherited .rightcontent-alignment's centring
   on a phone, and a centred heading over a left-aligned field read as a page
   banner rather than the card's own title. */
.app-shell .su-map-head {
    margin: 0 0 12px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--app-muted);
}

/* Search field and Locate button share one row. */
.app-shell .su-locate-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The search input yields the button's width; the left inset reserves room for
   the magnifier placed inside it — matched to the form fields' 34px so the two
   cards read the same. */
/* Icon + input box. It takes the row's spare width, and is the positioning
   context the glyph is centred against — so the glyph tracks the input, not
   the row. */
.app-shell .su-locate-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.app-shell .su-locate-row #autocomplete {
    width: 100%;
    /* The inline <style> caps `.wrap-address-inner input` at 500px. */
    max-width: none;
    height: 44px;
    padding: 0 12px 0 38px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
    text-overflow: ellipsis;
}

.app-shell .su-locate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--app-theme);
    border-radius: 10px;
    background: var(--app-theme-soft, #eef4ff);
    color: var(--app-theme);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.app-shell .su-locate-btn:hover {
    background: var(--app-theme);
    color: #fff;
}

/* The map itself. Height is set here rather than on the element's style
   attribute, which hardcoded 800px — taller than most screens, so the form
   beside it scrolled past before the map ended. */
.app-shell .su-map {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

/* --- Centre pin -----------------------------------------------------------
   Laid over the map rather than drawn by it, so panning and zooming move the
   map underneath while the pin stays perfectly still. Its TIP is the map's
   centre point — translate(-50%, -100%) puts the bottom of the icon there —
   and the map centre is the location the form saves. */

.app-shell .su-map-wrap {
    position: relative;
}

.app-shell .su-center-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    /* The script moves this inside Google's .gm-style layer (so it survives
       fullscreen). Above the map panes there (tiles, polygons — z-index in the
       low hundreds), below Google's controls (~1,000,000); the controls never
       reach the centre anyway. */
    z-index: 1000;
    width: 36px;
    height: 46px;
    transform: translate(-50%, -100%);
    color: var(--app-theme);
    /* Never intercepts the pan / pinch meant for the map below. */
    pointer-events: none;
}

.app-shell .su-pin-icon {
    display: block;
    filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .3));
    transition: transform .18s ease;
}

/* Ground shadow under the tip: it stays on the spot while the pin lifts. */
.app-shell .su-pin-shadow {
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 12px;
    height: 5px;
    border-radius: 50%;
    background: rgba(16, 24, 40, .35);
    transform: translateX(-50%);
    transition: transform .18s ease, opacity .18s ease;
}

/* While the map is being dragged the pin lifts a little and its shadow
   shrinks — the usual cue that the spot will be picked on release. */
.app-shell .su-center-pin.is-moving .su-pin-icon {
    transform: translateY(-8px);
}

.app-shell .su-center-pin.is-moving .su-pin-shadow {
    transform: translateX(-50%) scale(.7);
    opacity: .6;
}

/* Hint bubble above the pin, gone once the customer has moved the map. */
.app-shell .su-pin-hint {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    padding: 7px 11px;
    border-radius: 8px;
    background: var(--app-ink, #1f2937);
    box-shadow: 0 4px 12px rgba(16, 24, 40, .2);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    transition: opacity .2s ease;
}

.app-shell .su-pin-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 6px solid transparent;
    border-top-color: var(--app-ink, #1f2937);
    transform: translateX(-50%);
}

.app-shell .su-center-pin.is-touched .su-pin-hint {
    opacity: 0;
}

/* Map control (bottom-left, above the Google logo) that frames all delivery
   areas. Styled like Google's own white map buttons so it reads as one. */
.su-areas-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    color: #1f2937;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.su-areas-btn i {
    color: var(--app-theme);
}

.su-areas-btn:hover {
    background: #f6f7f9;
}

/* --- Form card headings -------------------------------------------------- */

.app-shell .su-card-head {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--app-ink);
}

.app-shell .su-card-sub {
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--app-muted);
}

/* --- Icon-led fields ----------------------------------------------------- */

/* Positioning context for the leading glyph. The glyph is absolutely placed so
   it never takes a slot in the flow — several of these fields are populated or
   toggled by the page's own scripts, which walk the inputs directly. */
.app-shell .su-field {
    position: relative;
}

/* Centred on the input, not measured from the field's bottom edge. The old
   `bottom: 13px` assumed a fixed control height and a single-line label — a
   label that wrapped to two lines, or the 47px control this sheet actually
   renders, left the glyph sitting low and out of line with its placeholder.
   Anchoring to the input's own box keeps it centred whatever is above it. */
.app-shell .su-field-icon {
    position: absolute;
    /* Measured from the input's own left edge, not the wrapper's. Several of
       these fields carry .su-field on the Bootstrap column itself
       (.form-group.col-md-6.su-field), so the wrapper's box starts 15px of grid
       padding outside the input — a flat `left: 14px` there put the glyph that
       much further from the placeholder than on the fields whose .su-field is a
       plain div. The custom property is 0 by default and set to the column's
       own padding on the column-hosted fields below. */
    left: calc(14px + var(--su-icon-inset, 0px));
    /* The input's height, measured from the field's bottom edge: 2 x 12px
       padding + a ~21px line box. Half of that centres the glyph on it. */
    bottom: 23px;
    transform: translateY(50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    /* Light grey, as in the reference — the glyph marks the field, it is not
       something to read. */
    color: #aeb4bd;
    /* Never intercepts a tap meant for the input behind it. */
    pointer-events: none;
    z-index: 1;
}

/* --- Labels --------------------------------------------------------------
   Uppercase, small and light, as in the reference. They were mixed-case body
   text in near-black, which read with the same weight as the values typed
   below them. */
.app-shell .inner-backgroud label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
}

/* The required mark keeps its red but sits tight against the label rather than
   dropping onto a line of its own — it was breaking below on narrow columns. */
.app-shell .inner-backgroud label .text-danger {
    margin-left: 2px;
    white-space: nowrap;
}

/* Inside the map card the icon is centred on the input's own box
   (.su-locate-field), which has no label above it. */
.app-shell .su-locate-row .su-field-icon {
    left: 14px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Where .su-field is the grid column itself, the glyph's offset is measured
   from the column's border box — which starts one gutter (7px, set on
   .form-row > [class*="col-"] above) outside the input. Adding that back puts
   the glyph the same 14px from the input's edge as on the fields whose
   .su-field is a plain wrapper, so every placeholder clears its icon by the
   same amount. */
.app-shell .inner-backgroud .form-row > [class*="col-"].su-field {
    --su-icon-inset: 7px;
}

/* Reserves room for the glyph. 34px rather than 40px: the icon sits at 14px and
   is ~13px wide, so it ends near 27px — a 40px inset left a wide blank strip
   between the glyph and the placeholder, which read as the text being indented
   rather than the icon belonging to the field. */
.app-shell .su-field > .form-control,
.app-shell .su-field > input.form-control {
    padding-left: 34px;
}

/* Mobile number with the country picker on (country_drop): intlTelInput wraps
   the input in .iti and puts the dial code ("+91 ▾") at its left edge — exactly
   where the mobile glyph sits, so the two were drawn over each other and the
   number read as cut off. The dial code already marks the field, so the glyph
   stands down whenever the picker is there. */
.app-shell .su-field:has(.iti) > .su-field-icon {
    display: none;
}

/* The dial-code box, squared off to the input's own corners (the inline 18px
   radius was for the old pill inputs) with a divider before the number. */
.app-shell .su-field .iti {
    display: block;
    width: 100%;
}

.app-shell .su-field .iti--separate-dial-code .iti__selected-flag {
    padding: 0 8px 0 12px;
    border-right: 1px solid #e3e5e9;
    border-radius: 10px 0 0 10px;
    background: #f7f8fa;
}

.app-shell .su-field .iti__selected-dial-code {
    margin-left: 0;
    font-size: 14px;
    color: #374151;
}

/* The password fields carry a trailing eye toggle too. */
.app-shell .su-field--pass > .form-control {
    padding-right: 42px;
}

@media (max-width: 600px) {
    .app-shell .su-title {
        font-size: 23px;
    }

    .app-shell .su-map {
        height: 300px;
    }

    .app-shell .su-map-card {
        padding: 12px;
    }

    /* Field and button stay on one row: wrapping the button under the field
       made a full-width second control that read as the form's submit. The
       button narrows instead, and the field keeps the rest of the width. */
    .app-shell .su-locate-btn {
        padding: 0 12px;
    }
}

/* Very narrow phones: the button drops to its icon so the search field keeps
   usable width. font-size:0 hides the word visually only — it is still the
   button's accessible name. */
@media (max-width: 360px) {
    .app-shell .su-locate-btn {
        width: 44px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .app-shell .su-locate-btn i {
        font-size: 15px;
    }
}