/* 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;
}

.app-shell .spad {
    padding: 20px 0 28px;
}

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

.app-shell .py-4-signup {
    padding-block: 8px;
}

.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;
}

.app-shell .inner-backgroud .form-row {
    display: block;
    margin-inline: 0;
}

.app-shell .inner-backgroud .form-row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
}

.app-shell .inner-backgroud .form-row > [class*="col-"] {
    margin-bottom: 18px;
}

/* The inner .form-group would otherwise add a second gap on top of it. */
.app-shell .inner-backgroud .form-row > .form-group {
    margin-bottom: 18px;
}

.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;
}

.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;
    }

    /* 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;
    }
}