/* Navbar */
.navitem.pnd{
    border-bottom: 3px solid var(--white-text)!important;
    font-weight: 500;
    color: var(--white-text)!important;
    font-style: italic;
}
/* End of Navbar */

/* Page Structure */
.content{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    align-items: flex-start;
    column-gap: 50px;
    row-gap: 40px;
    font-family: "montserrat", "futura", Arial, Helvetica, sans-serif;
}
/* Do not show content until everything has been loaded */
#loading{
    text-align: center;
    margin:20px auto;
    color:var(--grey-background);
}

/* Portal - hide content until everything has been loaded */
.content_init {
    opacity: 0;
    display: none;
    visibility: hidden;
    transition: opacity 0.4s ease-in, visibility 0s linear 0.4s;
}
.content_init.loaded {
    opacity: 1;
    display: flex;
    visibility: visible;
    transition: opacity 0.4s ease-in, visibility 0s linear 0s;
}

.portal, .seller_summary_stats, .ad_summary_stats{
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: 30px;
    row-gap: 40px;
    max-width: 1140px;
}
.seller_summary_stats, .ad_summary_stats{
    width: 100%;
}
/* Hold the full available width so the card list never shrink-wraps to the deal
   count row alone, which pulled Sort inwards when a filter returned no deals */
.content_init .portal{
    width: 100%;
}
@media screen and (max-width: 780px){
    .portal{
        justify-content: center;
    }
}
.left_col{
    width: 320px;
    margin:0 15px;
    padding-top: 30px;
}
.right_col{
    width: 360px;
    margin:0 15px;
    padding-top: 30px;
    position:sticky;
    top: 90px;
}
/* End of Page Structure */

/* Common Styling */
a {
    color: inherit;
    text-decoration: none;
}
a:hover{
    cursor: pointer;
}
input:focus{
    outline:none;
    border-color: var(--lh-yellow);
    border-width: 2px;
}
.hyperlink{
    text-align: center;
    color: var(--gold);
    text-decoration: underline;
    cursor: pointer;
}
.small_cta_btn_red, .small_cta_btn_yellow{
    display: inline-block;
    border: 1.2px solid var(--label-text);
    border-radius: 5px;
    padding: 3px 5px;
    margin-top: 5px;
    cursor: pointer;
    color: var(--label-text);
    font-size: 11.5px;
    font-weight: 600;
}
.small_cta_btn_red:hover, .small_cta_btn_red:active, .small_cta_btn_red:focus {
    border-color: var(--red);
    color: var(--white-text);
    background-color: var(--red);
    font-style: italic;
}
.small_cta_btn_yellow:hover, .small_cta_btn_yellow:active, .small_cta_btn_yellow:focus{
    border-color: var(--lh-yellow);
    color: var(--white-text);
    background-color: var(--lh-yellow);
    font-style: italic;
}
/* End of common */

/* PND Portal */
.portal_tagline{
    text-align: center;
    margin: 0 auto;
    font-style: italic;
    color: #404040;
    font-size: 16px;
    line-height: 1.2em;
    letter-spacing: 0.05em;
    text-transform: none;
    padding-bottom: 10px;
}
.portal_intro{
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    row-gap: 15px;

    font-family: "montserrat";
    color: var(--label-text);
    font-weight: 500;
    font-size: 13px;
}
.portal_intro ol{
    font-weight: 500;
}
.intro_detail li{
    margin: 10px 0;
}
.portal_note{
    font-weight: 500;
    font-family: "futura", "montserrat", sans-serif, monospace;
    flex-basis: 100%;
    font-size: 15px;
}
.intro_link{
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    color: var(--gold);
    font-style: italic;
}
input.search_val, input.search_lead{
    text-align: center;
}
input.search_val::placeholder, input.search_lead::placeholder{
    font-size: 11.5px;
    font-style: italic;
}
.portal_header_cta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.seller_acct_links{
    font-family: 'montserrat';
    font-size: 13px;
    font-weight: 500;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
/* End of PND Portal */

/* Form */
.return, .forward{
    font-size: 12px;
    font-family: "Montserrat";
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    color:var(--label-text);
    padding: 0vh 10vw;

}
.return{
    text-align: left;
}
.forward{
    text-align: right;
    align-self: flex-end;
}
.deal_form{
    font-family: "montserrat", "Lato", sans-serif;
    font-weight: 500;
}
.header_announcement {
    color: var(--label-text);
    font-family: "montserrat", "hind", "futura", Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.5em;
    font-size: 14px;
    font-weight: 450;
    font-style: italic;
}
/* Form Section Title */
.section_heading{
    padding: 5px 0;
}
.section_title{
    padding: 10px;
    font-family: "futura", "proxima-nova", "helvetica neue";
    font-size: 16px;
    font-weight: normal;
    letter-spacing: .4em;
    text-transform: uppercase;
}
.section_title.tighter_title{
    letter-spacing: 0.3em;
}
.section_divider{
    background-color: #2d2d2d;
    height: 2px;
    width: 100%;
    margin: 0 0 10px 0;
}
.section_info{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    line-height: 1.4em;
}
.info_txt, .seller_info_warning{
    font-size: 12px;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    font-family: "montserrat", "futura", Arial, Helvetica, sans-serif;
    font-weight: 600;
}
.info_txt{
    color: var(--dark-text);
}
.seller_info_warning{
    color: var(--red);
    padding: 0 0 5px 5px;
}
#deal_detail_fields, #con_deal_detail_fields{
    background: var(--light-grey-background);
    padding: 10px 0 5px 0;
}
#das_tax_checkbox_div{
    padding: 0 5px;

}
#das_tax_checkbox_div i {
    font-size: 14px;
}
/* End of Form Section Title */
/* Animated input fields */
.input_div{
    position: relative;
    padding: 10px 5px;
    margin: 5px 0;
}
.input_label, .top_label, .checkbox_div {
    font-family: "montserrat";
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1em;
    letter-spacing: 1.4px;
    color: var(--label-text);
}
.top_label{
    margin-left: 5px;
}
.sub_label{
    background: var(--disabled-text);
    color: var(--white-text);
    display: inline-block;
    padding: 5px;
    margin-left: 0px;
}
.lead_inputs .top_label{
    margin: 7px 0;
    display: block;
}
.input_label{
    transition: all .3s ease;
    position: absolute;
    top: 27px;
    transform: translateY(-50%);
    padding-left: 5px;
}
.input_label.label_active, .input_label.always_active {
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 1px;
    height: 11px;
    display: inline-flex;
    align-items: flex-end;

    padding-top: 5px;
    transform: translateY(0);

    top: -4px;
    left: 3px;
    right: 0;
}
.input_field, .fixed_input{
    font-family: "montserrat","Lato", sans-serif;
    font-weight: 550;
    font-size: 12.5px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #000000;
}
.input_field {
    width: calc(100% - 10px);
    border: 0;
    border-bottom: 1px solid #9b9b9b;
    outline: 0;
    padding: 5px;
    background: transparent;
    transition: all 0.2s;
}
.input_field:disabled {
    color: var(--disabled-text);
    cursor: default;
    -webkit-text-fill-color: var(--disabled-text);
}
/* Zipcode city/state label — positioned right side of input, same level as typed value */
#seller_zipcode {
    padding-right: 90px;
    box-sizing: border-box;
    width: 100%;
}
.zipcode_location {
    position: absolute;
    top: 27px;
    transform: translateY(-50%);
    right: 8px;
    font-family: "montserrat";
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lh-dark-green, #2a7a2a);
    line-height: 11px;
    pointer-events: none;
}
/* Seller Account Password Hide/Show Icon */
.pw_field {
    padding-right: 28px;
    width: calc(100% - 38px);
}
.pw_input_wrap {
    position: relative;
}
.pw_toggle {
    position: absolute;
    right: 8px;
    top: 27px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #9b9b9b;
    font-size: 13px;
    user-select: none;
    transition: color 0.2s;
}
.pw_toggle:hover {
    color: #000;
}
/* End of animated input fields */

/* Radio */
/* Clip radio */
input[type=radio], .checkbox_option input[type=checkbox], input.search_checkbox{
    width:1px;
    height: 1px;
    position:absolute;
    clip: rect(0 0 0 0);
}
/* radio label styling */
input[type=radio]+label, .checkbox_option input[type=checkbox]+label, .nodeal_reason, input.search_checkbox+label{
    transition: all 0.25s;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;

    background: #ededed;
    font-family: 'montserrat', 'futura';
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 1.4px;
    color: var(--label-text);

    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #ededed;

    cursor: pointer;
}
input[type=radio]:hover+label, .checkbox_option input[type=checkbox]:hover+label, .nodeal_reason:hover, .nodeal_reason:focus, input.search_checkbox:hover+label{
    background-color: var(--lh-yellow);
    color: var(--white-text);
}
input[type=radio]:checked+label, .checkbox_option input[type=checkbox]:checked+label, .nodeal_reason:active, input.search_checkbox:checked+label{
    background-color: var(--lh-yellow);
    color: var(--white-text);

    border-color: var(--lh-yellow);
    border-bottom-color: #d9b527;
    border-bottom-width: 3px;
}
.radio_options{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    grid-template-rows: 50px;
}
.radio_options.three{
    grid-template-columns: 1fr 1fr 1fr;
}
.radio_options input[type='radio']+label{
    padding: 10px;
    display: block;
    text-align: center;
}
/* Grade picker (bad / meh / great), wherever it appears -- the standalone
   survey, the conversion form, the on-track rating. The face sits above the
   word inside the same label, so the two are one click target, and it inherits
   the label's colour rather than carrying a red/yellow/green of its own: that
   way it follows the label to white when the option is checked. Must stay after
   the .radio_options rule above, which sets the same property at the same
   specificity. The survey emails use PNGs for these faces instead -- mail
   clients strip icon fonts. */
.grade_options input[type='radio']+label{
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    padding: 12px 10px 8px;
}
.grade_options input[type='radio']+label i{
    font-size: 19px;
    line-height: 1;
    color: inherit;
}
/* The icon adds a line, so the fixed 50px row the other pickers use would clip
   the word underneath it. */
.radio_options.grade_options{
    grid-template-rows: auto;
}
.input_full{
    margin: 10px 0;
}
.flex_radio_options{
    display: flex;
    flex-flow: row wrap;
    gap: 10px 10px;
    margin:15px 0 10px 0;
}
.flex_radio_options input[type='radio']+label, .flex_radio_options input[type='checkbox']+label{
    padding: 10px;
    display: block;
    letter-spacing: 0.5px;
}
/* Checkbox list (BJ-09's cancellation reasons). The radio pickers are two or
   three short words across a grid; these are full sentences, so they stack full
   width and read left-aligned in sentence case rather than as letterspaced
   uppercase pills.

   Checked and hover use --dark-text on the yellow rather than the white the
   radio labels use. White on --lh-yellow measures about 1.46:1, which the radio
   labels get away with because the customer already knows what a two-word label
   says -- here the label IS the content, and a customer has to be able to read
   back the nine reasons they just picked. The navbar's --dark-text on the same
   yellow measures 6.7:1. See decision 12, which parks the same question for the
   hub tiles. */
.checkbox_options{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0;
}
.checkbox_options input[type=checkbox]+label{
    display: block;
    padding: 12px 14px;
    text-align: left;
    text-transform: none;
    font-size: 12.5px;
    line-height: 1.45em;
    letter-spacing: 0.2px;
    font-weight: 600;
}
.checkbox_options input[type=checkbox]:hover+label,
.checkbox_options input[type=checkbox]:checked+label{
    color: var(--white-text);
}
/* Keyboard users get no :hover, and the clipped input means no focus ring of
   its own -- so the label carries one. */
.checkbox_options input[type=checkbox]:focus-visible+label{
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* End of radios */

/* Form Regions */
#avail_states {
    border-left: 2px solid var(--disabled-text);
}
#avail_states > div {
    margin-left: 5px;
}
.avail_states_grp{
    display:none;
}
/* End of Form Regions */

/* Select dropdown */
select{
    padding: 5px 10px;
    border-style: none;
    border-bottom: 1px solid #CCC;
    background-color: transparent;
    color: inherit;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    -webkit-appearance: menulist;
    outline-color: #ffe95e;
    box-sizing: border-box;

    font-family: 'montserrat', 'futura';
    font-weight: 500;
    font-style: italic;
    color: var(--dark-text);
    margin:7.5px 0;
    border-bottom: 1px solid #9b9b9b;
}
select.res_select{
    text-align: start;
    font-style: normal;
    font-family: "montserrat";
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1em;
    letter-spacing: 1.4px;
    color: var(--label-text);
    padding: 5px 0;
}
select option:first-child{
    font-family: "montserrat";
    font-weight: 700;
    text-transform: uppercase !important;
    font-size: 10px;
    line-height: 1em;
    letter-spacing: 1.4px;
    color: var(--label-text);
}
/* End of Select Dropdown */
/* Form Disclaimers */
.seller_disclaimer_editor{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 10px 0;
    color: var(--label-text);
}
.disclaimer_item {
    width: 100%;
}
.disclaimer_toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 4px 0;
    user-select: none;
}
.disclaimer_item_action{
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    font-family: "montserrat", "Lato", sans-serif;
    color: var(--label-text);
}
.disclaimer_item_action:hover{
    color: var(--lh-yellow);
    color: var(--btn-background);
}
.disclaimer_toggle .fa-caret-right {
    transition: transform 0.2s;
    font-size: 11px;
}
.disclaimer_content {
    font-size: 11px;
    color: var(--label-text);
    line-height: 1.5;
    padding: 6px 0 4px 18px;
}
.disclaimer_sup {
    cursor: pointer;
    text-decoration: underline;
    font-size: 8px;
}
.disclaimer_num {
    margin-right: 2px;
}
.disclaimer_item_editable {
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.015);
    box-sizing: border-box;
}
.disclaimer_item_editable .disclaimer_content {
    padding-left: 4px;
}
/* Explanation Text */
.exp_txt, .checkbox_exp_txt, .exp_txt p{
    font-size: 12px;
    color: dimgray;
    font-style: italic;
    line-height: 1.4em;
    margin: 7.5px 0 0 0;
    font-weight: 500;
    font-family: "montserrat", "futura", Arial, Helvetica, sans-serif;

}
.checkbox_exp_txt{
    text-transform: none;
    margin: 0 0 0 28px;
}
/* Onboarding form exp_txt */
.exp_txt.form_exp_txt, .exp_txt.form_exp_txt p{
    margin: 0 0 15px 0;
    color: var(--label-text);
    font-size: 13px;
    font-style: normal;
}
.exp_txt p{
    margin: 1em 0;
}
.exp_txt p a{
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
}
.exp_txt.form_checkbox_txt{
    text-transform:none;
    letter-spacing: 0;
    color: var(--label-text);
    font-size: 13px;
    margin: 0;
}
/* Colors */
.green{
    color: var(--green);
}
.blue{
    color: var(--blue);
}
.yellow{
    color: var(--lh-yellow);
}
.pink{
    color: var(--pink);
}
/* Checkbox and Text Areas */
textarea{
    background: var(--white-text);
    padding: 10px;
    margin: 10px 5px;
    box-sizing: border-box;
    display: block;
    width: calc(100% - 10px);

}
.checkbox_div{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 0.8em;
    line-height: 1.4em;
}
.checkbox_div input[type=checkbox]{
    cursor: pointer;
}
.lead_body .list_item, .summary_header .list_item{
    font-weight: bold;
    color: var(--dark-text);
}
.list_item{
    font-weight: 400;
}
.section_info .list_item{
    margin-bottom: 1.2em;
}
ol, .survey_lead{
    letter-spacing: 0.5px;
    font-weight: 500;
}
ol {
    padding-inline-start: 25px;
}
.subsection_title{
    font-style: italic;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-top: 10px;
    margin-bottom: 5px;
}
.fine_print, .checkbox_txt{
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.3px;
    line-height: 1.4em;
    color: var(--dark-text);
    font-family: "Lato", "montserrat", sans-serif;
    text-transform: none;
}
.checkbox_txt{
    line-height: 1.2em;
}
.form_btns{
    margin: 15px auto;
    display: flex;
    flex-direction: column;
    gap:10px;
}
.fa-check{
    color: var(--green);
}
/* File Upload */
/* Every file input in PND is hidden and driven by a <label for> -- the .drop
   dropzone on the reservation form and on the CTA cards. Removing this shows a
   raw "Choose file" control next to each dashed box. */
input[type="file"] {
    width:1px;
    height: 1px;
    position:absolute;
    clip: rect(0 0 0 0);
}
#file-upload{
    padding: 5px 0px;
}
#file-upload .disclaimer{
    margin: 10px auto!important;
    text-align: justify!important;
    max-width: 500px;
}
.filenames{
    background: #e8e8e8;
    padding: 15px 10px;
    font-style: italic;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-all;

}
.filenames p{
    margin: 0;
    line-height: 2em;
}
.filenames .filename{
    color: var(--label-text);
}
/* direct_upload.js writes a heading above the rows on both forms. On the grey
   band it needs the same label treatment the card gives it. */
.filenames .files_heading{
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--label-text);
    font-style: normal;
}
/* End of form */

/* Deal card */
.deal_card, .lead_card, .card_wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--white-text);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    box-sizing: border-box;
}
.deal_card{
    padding: 40px 30px 30px 30px;
    width: 360px;
    gap: 10px;
}
/* Generic card shell for content that fills the card edge to edge, rather than the
   deal card's centered stack. */
.card_wrapper{
    padding: 65px 60px 85px;
    width: 100%;
    max-width: 560px;
    align-items: stretch;
}
/* Keep every child inside that padding. box-sizing is opt-in in this stylesheet
   -- there is no global reset -- so a child with width:100% and any padding of
   its own renders wider than the card's content box. That matters more here than
   usual: .survey is a wrapping column flex container, so the flex line takes the
   width of its widest item, and one overflowing child drags its margin:0 auto
   siblings off-centre with it. Scoped to direct children so the check-in
   journey's next screens inherit it without each remembering to. */
.card_wrapper > *{
    box-sizing: border-box;
}
/* The wider card, for content that is not one column of questions: the seller's
   sales report puts two groups of numbers side by side, and 440px of content is
   not enough for both. 550px of content plus the card's own 60px of side
   padding -- the padding is part of the max-width because box-sizing is
   border-box above. */
.card_wide{
    max-width: 670px;
}
/* 60px of side padding is a third of a phone's width. Nothing overflows without
   this -- the card shrinks correctly and the page never scrolls sideways -- but
   at 390px it leaves 242px for the content, which wraps every tile label on the
   help hub and every heading in the journey harder than it needs to. These
   screens are reached by tapping a tile in an email, which is overwhelmingly a
   phone, so the padding comes down and the words get the room. Same breakpoint
   as .page_heading's step down, so the header and its card change together. */
@media screen and (max-width: 520px){
    .card_wrapper{
        padding: 40px 24px 50px;
    }
}
.deal_card_deal, .deal_card_info{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
}
.deal_card_info{
    padding: 20px 0 10px 0;
}
.info_details_container {
    width: 100%;
}
.deal_card_deal{
    gap: 10px;
}
.card_header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    column-gap: 10px;

    font-size: 12px;
    font-family: 'montserrat';
    font-weight: 500;
}
.header_region{
    color: var(--green);
    font-weight: bold;
}
.delivery_option_val{
    font-style: italic;
    color: dimgray;
    font-weight: 500;
    font-size: 11.5px;
    line-height: 1.5em;
}
.header_exp{
    flex:0 0 auto;
}
.card_title{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 5px;
    width: 100%;
    padding: 20px 0 0 0;
    /* margin: 30px 0 0 0; */
    font-weight: 500;
}
.title_yrmk{
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.model_val{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}
.trim_val{
    font-style: italic;
    font-size: 13px;
}
.card_qty, .lh_note_section .info_subtitle{
    background-color: var(--lh-yellow);
    color: var(--label-text);
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    padding: 6px 10px;
    /* margin: 5px auto; */
}
.card_qty.card_flash{
    background-color: var(--pink);
    color: var(--white-text);
}
.card_img{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.card_img img{
    max-width: 100%;
    /* transform: scale(1.2); */
}
.card_msrp{
    font-weight: 500;
    text-align: center;
    margin: auto;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.card_pricing{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* margin: 20px 0 10px 0; */
    padding:
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
}
.pricing_sublabel{
    font-size: 11.5px;
    font-weight: 500;
}
.pricing_divider{
    width: 40.8px;
    height: 0px;
    border: 0.5px solid #C2C2C2;
    transform: rotate(-75deg);
}
.card_das, .info_content{
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.01rem;
    line-height: 1.05rem;
}
.card_das{
    text-align: center;
}
.info_content{
    width:100%;
    text-align: left;
}
.info_content_list{
    text-align: left;
    display:flex;
    flex-direction: column;
    gap:5px;
    margin:5px 0;
}
.info_content_list .fa-check{
    color: var(--green);
    font-size: 14px;
    line-height: 1.4em;
}
.info_content_list .fa-xmark{
    color: var(--red);
    font-size: 15.5px;
    line-height: 1.4em;
}
.card_list_div{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    gap: 0.8em;
    line-height: 1.4em;
}
.info_content.lh_take_val, .info_content.lh_note_val {
    text-align: center;
}
.card_con{
    text-align: center;
}
.card_con_link{
    font-size: 14px;
    font-style: italic;
    line-height: 1.4em;
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color:var(--lh-yellow);
    text-decoration-thickness: 3px;
}
.emphasize{
    font-weight: 500;
}
.card_toggle{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    /* padding: 10px 0 10px 0; */
}
.info_toggle{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.info_details{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px
}
.expand{
    transform: rotate(90deg);
}
.italic{
    font-style: italic;
}
.fa-link{
    cursor: pointer;
}
.copied{
    color: dimgray;
    font-weight: 500;
    text-transform: none;
    text-align: center;
    font-size: 12px;
}
.copied_input{
    padding: 5px 10px;
    font-size: 14px;
    border-style: none;
    border-bottom: 1px solid #CCC;
    background-color: transparent;
    width:260px;
    margin:10px 0;

}
.info_section{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.info_subtitle{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.calc_val {
    text-decoration: underline;
}
.seller_note_section{
    background: #eeeeee;
    padding: 10px;
    box-sizing: border-box;
    border:#eeeeee solid 1px;
    border-radius: 2px;
}
/* Disclaimers */
.lucid_disclaimers_section {
    width: 100%;
}

.button{
    background-color: var(--btn-background);
    color: var(--lh-yellow);

    border: 2px solid var(--btn-background);
    border-radius: 3px;

    font-size: 12px;
    font-weight: 600;
    font-family: 'montserrat';

    line-height: 1.2em;
    letter-spacing: 2px;
    text-transform: uppercase;

    padding: 15px 25px;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
    /* display: block; */
}
.button.btn_outline{
    background-color: transparent;
    color: var(--lh-yellow);

    border: 2px solid var(--lh-yellow);
}
/* Outlined in the body grey rather than yellow -- for a secondary action on a
   page that has no primary button competing with it. */
.button.btn_dark_outline{
    background-color: transparent;
    color: var(--label-text);

    border: 2px solid var(--label-text);
}
.button.btn_dark_outline:hover, a.button.btn_dark_outline:hover{
    background-color: var(--label-text);
    color: var(--white-text);

    border: 2px solid var(--label-text);
    border-width: 0 1px 2px;
    border-bottom-color: #2e2e2e;
}
.button.btn_grey{
    background: #D7D7D7;
    color: #7E7E7E;
    cursor: auto;
    border: 2px solid #D7D7D7;
    pointer-events: none;
    cursor: default;
}
.green_btn{
    background-color: var(--green);
    color: var(--white-text);
    border: 2px solid var(--green);
}
.red_btn{
    background-color: var(--red);
    color: var(--white-text);
    border: 2px solid var(--red);
}
.portal_header .button{
    width: auto;
    display: block;
}
.see_leads_btn{
    border: 2px solid var(--btn-background);
}
.button:hover:enabled, .button.btn_outline.btn_checked, .portal_header .button:hover, a.button:hover{
    background-color: var(--lh-yellow);
    color: var(--white-text);
    font-style: italic;

    transition: all 0.25s;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;

    border: 2px solid var(--lh-yellow);
    border-width: 0 1px 2px;
    border-bottom-color: #d9b527;
}

.no_click{
    pointer-events: none;
}
.btn_div{
    display: flex;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}
.btn_div.lead_btns{
    flex-direction: column;
}
.lead_card .button{
    margin: 0;
    padding: 13px 15px;
}
.lead_inputs .action_btn, .summary_cta .card_field .action_btn{
    max-width: 110px;
    padding: 11px 15px;
}
.lead_inputs #in_progress_action_btn{
    max-width: 100%;
}
.nodeal_reasons{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}
.nodeal_reason{
    width: 100%;
    text-align: center;
    cursor: pointer;
}
.pnd_form_common .button{
    padding: 15px 15px;
}
.seller_cta .btn_div, .lead_cta .btn_div, .deal_card_customer_div .btn_div, .summary_cta .btn_div{
    width: 300px;
}

.btn_div > button, .btn_div > div{
    box-sizing: border-box;
    flex: 1;
}
.deal_card_customer_div .btn_div > button{
    margin: 5px auto;
}
.tight_btn.button{
    line-height: 1em;
    letter-spacing: 1px;
}
.button.update_qty, .button.email_price{
    padding: 15px 10px;
}
.qty_cta_container{
    display: flex;
    flex-direction: column;
}
.email_cta, .seller_cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
}
.card_field{
    width:300px;
    display: flex;
    align-items: end;
    gap: 10px;
}
.card_field .button{
    margin: 0;
}
.deal_card_staff_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    row-gap: 10px;
}
.deal_card_box{
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--label-text);
    padding: 10px;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.staff_seller_name{
    background: #dddddd;
    padding: 10px;
}
.even_flex{
    display:flex;
    justify-content: space-evenly;
    column-gap: 10px;
    width: 100%;
}
.deal_stats{
    width: 100%;
}
.deal_stats .button{
    margin: 0;
}
.stat_details{
    margin: 10px 0;
    padding: 0 10px;
    font-size: 12px;
    font-family: "montserrat", Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: var(--label-text);
    line-height: 1.4em;
    width:100%;
}
.stat{
    font-weight: 600;
    color: var(--dark-text);
    margin: 0 0 0 5px;
}
/* End of deal card */

/* Lead card */
.lead_card{
    width: 360px;
    padding: 30px;
    gap: 10px;
}
.lead_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.lead_name{
    font-weight: bold;
    font-size: 18px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.lead_status, .seller_status, .survey_grade{
    padding: 5px 7.5px;
    color: #ffffff;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 3px;
    font-style: italic;
    flex-shrink: 0;
}
.survey_grade{
    margin: 0 5px;
}
.lead_status.new, .blue_background{
    background-color: var(--blue);
}
.lead_status.in_progress, .yellow_background{
    background-color: var(--lh-yellow);
}
.lead_status.deal, .seller_status, .green_background{
    background-color: var(--green);
}
.lead_status.no_deal, .seller_status.inactive, .grey_background{
    background-color: var(--grey-background);
}
.lead_status.spam{
    background-color: var(--disabled-text);
}
.pink_background{
    background-color: var(--pink);
}
.red_background{
    background-color: var(--red) !important;
}
.light-grey-background{
    background-color: var(--light-grey-background);
}
.disabled_text{
    color: var(--disabled-text);
}
.lead_body{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px;
    line-height: 1.4em;
}
.lead_section{
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-all;
}
.lead_section a{
    color: var(--gold);
    font-weight: 600;
}
.lead_section .subsection_title{
    text-decoration: underline;
}
.lead_inputs .action_btn.lead_cta_btn_full {
    max-width: 300px;
    margin-top:5px;
}
/* End of Lead card */
/* Lead Portal */
.portal_header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 15px;
}
.portal_header.seller{
    flex-direction: column;
}
.portal_arrows{
    display: flex;
    justify-content: space-between;
}
.arrow_txt{
    padding: 0 10px;
}
.portal_filters, .sub_filters{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.portal_filter, .summary_filter, .filter_label, .sub_filters_label, .expand_toggle{
    padding: 10px 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-family: 'montserrat';
    font-weight: 700;
    cursor: pointer;
    color:var(--label-text);
    background-color: transparent;
    border-bottom: 3px solid var(--label-text);

    transition: all 0.25s;
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
    transition-delay: 0s;
}
.portal_info{
    flex: 1 1 100%;
    text-align: center;
    text-transform: none;
}
.portal_info.filter_label{
    cursor: auto;
}
.portal_info.deal_count_container{
    padding: 0;
    font-style: italic;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 360px);
    column-gap: 30px;
    justify-content: center;
}
.deal_count_container .deal_count_row{
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.deal_count_container .deal_count_left{
    flex: 0 0 auto;
    z-index: 1;
}
.deal_count_container .deal_count_center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 0;
}
.deal_count_container .deal_count_right{
    flex: 0 0 auto;
    text-align: right;
    z-index: 1;
}
/* Sort dropdown */
.portal_sort_label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.portal_sort_label:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
/* Regular fills in to solid on hover, the same way .filter_icon does. Weight is
   what picks the style within the Font Awesome family, so 900 renders the
   fa-regular glyph as fa-solid without swapping the class. */
.portal_sort_label:hover .fa-sort {
    font-weight: 900;
}
/* Bridge the gap between label and dropdown */
.portal_sort_label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4px;
    display: none;
}
.portal_sort_label:hover::after {
    display: block;
}
.portal_sort_dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: rgba(51, 51, 51, 0.65);
    backdrop-filter: blur(8px);
    min-width: 230px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    overflow: hidden;
    z-index: 1000;
}
.portal_sort_label:hover .portal_sort_dropdown,
.portal_sort_dropdown:hover {
    display: block;
    animation: fadeInDown 0.2s ease;
}
.portal_sort_option {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 550;
    font-style: normal;
    color: var(--white-text);
    transition: all 0.2s ease;
}
.portal_sort_option:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--lh-yellow);
}
.portal_sort_option.selected {
    color: var(--lh-yellow);
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* End of Staff Sort Dropdown */
.lead_search_pagination, .deal_search_pagination{
    text-decoration: underline;
    cursor: pointer;
    display: inline-block;
    font-style: italic;
}
.deal_search_pagination_container, .lead_search_pagination_container{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    text-align: center;
    margin: 15px 0;
}
/* sub_filter */
.sub_filters{
    gap: 2.5px;
}
.portal_filter.sub_filter, .expand_toggle{
    border-bottom: none;
    padding:6.5px 10px;
}
.expand_toggle{
    text-align: center;
}
.portal_filter.sub_filter.btn_checked,
.portal_filter.sub_filter.sort_by:has(input[type="radio"]:checked) {
    background: var(--lh-yellow);
    color: var(--white-text);
}
/* Sort radio buttons - maintain same styling as other sub_filters */
.portal_filter.sub_filter.sort_by {
    cursor: pointer;
    display: inline-block;
}
.portal_filter.sub_filter.sort_by input[type="radio"] {
    display: none;
}
.sub_filters_label{
    border-bottom: none;
    text-align: center;
    color: grey;
    padding: 0 0 5px 0;
}
.sub_filter_groups{
    background: var(--light-grey-background);
    padding: 20px;
    box-sizing: border-box;
    max-width: 750px;
    margin: 0 auto;
}
/* PND Home filters open as an overlay anchored to the Filters toggle, sharing the
   translucent panel and hover language of the sort dropdown, rather than pushing
   the deal cards down. The staff actions panel above still expands in place. */
.sub_filter_groups.filter_panel{
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: min(750px, 100%);
    margin: 0;
    padding: 20px 15px;
    background-color: rgba(51, 51, 51, 0.65);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    z-index: 1000;

    color: var(--white-text);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.sub_filter_groups.filter_panel.open{
    display: block;
    animation: fadeInDown 0.2s ease;
}
/* Panel contents, restyled for the dark backdrop */
.filter_panel .filter_label{
    color: var(--white-text);
}
.filter_panel .filter_divider{
    border-bottom-color: rgba(255, 255, 255, 0.25);
}
.filter_panel .portal_filter.sub_filter{
    color: var(--white-text);
    border-radius: 4px;
}
.filter_panel .portal_filter.sub_filter.btn_checked{
    background: var(--lh-yellow);
    color: var(--label-text);
}
.filter_panel select,
.filter_panel input.deal_search_input{
    color: var(--white-text);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}
/* The closed control paints its selected option's colours, so the option list has to
   carry the panel's palette rather than a light one */
.filter_panel select option{
    color: var(--white-text);
    background-color: #3a3a3a;
}
.filter_panel input.deal_search_input::placeholder{
    color: rgba(252, 252, 252, 0.5);
}
.filter_panel .deal_search_clear{
    color: rgba(252, 252, 252, 0.6);
}
.filter_panel .deal_search_clear:hover{
    color: var(--white-text);
}
.intro_detail{
    background-color: var(--light-grey-background);
    padding: 10px 1.5em 20px 0;
}

/* Filter dropdown container and elements */
.sub_filter_container{
    width:100%;
}
.sub_filter_dropdown_container {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 360px;
    margin: 10px auto;
    padding: 0 5px;
}

/* These rows are as narrow as a single deal card, and a label padded out to a fixed
   120px pushed its control onto a second line on a phone. The label now takes only
   the width it needs and the control takes what is left, up to its 180px ideal, so
   the pair shares one line wherever the screen has room for both. Below the control's
   120px floor the row still wraps rather than squeezing the control down to nothing. */
.filter_label.sub_filter_dropdown_label {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.sub_filter_dropdown_select,
.deal_search_input_container {
    flex: 0 1 180px;
    min-width: 120px;
    max-width: 180px;
}
.sub_filter_groups .sub_filter_container{
    margin:0 auto;
}
/* Deal name search filter */
.deal_search_input_container{
    position: relative;
}
input.deal_search_input{
    width: 100%;
    margin: 0;
    font-size: 12px;
    height: 30px;
    padding: 0 32px 0 10px;
    box-sizing: border-box;
    text-align: center;
}
/* The glyph is 12px, too small to hit with a thumb, so the padding around it is
   the tap target and the input reserves that much room on its right. */
.deal_search_clear{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 9px 10px;
    line-height: 1;
    font-size: 12px;
    color: grey;
    cursor: pointer;
    touch-action: manipulation;
}
.deal_search_clear:hover{
    color: var(--label-text);
}
/* end of sub_filter */

.portal_filter.btn_checked, .summary_filter.btn_checked, select.btn_checked{
    background: #DDDDDD;
    font-style: italic;
}
@media (hover: hover){
     .portal_filter:hover, .summary_filter:hover{
        background: #DDDDDD;
        font-style: italic;
    }
    .portal_filter.sub_filter:hover{
        background: var(--lh-yellow);
        color: var(--white-text)
    }
    .filter_panel .portal_filter.sub_filter:hover{
        background-color: rgba(255, 255, 255, 0.15);
        color: var(--lh-yellow);
    }
    .filter_panel .portal_filter.sub_filter.btn_checked:hover{
        background: var(--lh-yellow);
        color: var(--label-text);
    }
}
/* Portal Filter */
.filter_label{
    border-bottom: none;
    width: fit-content;
    margin: 0 auto;
}
.filter_divider{
    border-bottom: 3px solid #bababa;
    width: 20px;
    margin: 10px auto;
}
#avail_locations{
    width: 200px;
    margin: 0;
    font-size: 12px;
    padding: 0 10px;
    height: 30px;
    text-align: center;
}
/* end of  Portal Filter */
.portal_cta_btn{
    padding: 10px 25px;
}
/* PND Summary Portal Date Buttons */
.portal_subheader_div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.portal_date_btn {
    font-size: 10px;
    padding: 6px 12px;
}
/* End of PND Summary Portal Date Buttons */
/* Portal search bar */
.search_div, .search_subdiv{
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    row-gap: 20px;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 430px){
    .search_div{
        flex-wrap: wrap;
    }
    .search_filters{
        flex: 1 1 100%;
    }

}
input.search_checkbox+label{
    padding: 10px;
}
/* End of Portal search bar */
.prevent_overflow{
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    display: inline-block;
}

/* End of Lead Portal */
/* Portal Tooltip */
/* Container for the text with tooltip */
.copy_label {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The tooltip bubble */
.copy_label .tooltip-portal-text {
    visibility: hidden;
    width: 85px;
    background-color: #333;
    color: var(--white-text);
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;

    /* Positioning */
    position: absolute;
    z-index: 1;
    bottom: 90%; /* Place above the text */
    left: 30%;
    transform: translateX(-50%);
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s; /* Smooth appearance */

    /* Font Styling */
    font-family: 'lato', 'Montserrat';
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4em;
    letter-spacing: 0.05em;
}

/* Arrow below the tooltip */
.copy_label .tooltip-portal-text::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Show the tooltip text when hovering */
.copy_label:hover .tooltip-portal-text {
    visibility: visible;
    opacity: 0.95;
}
/* End of Portal Tooltip */
/* Start of Performance Summary Portal */
/* Summary Portal Header */
.summary_form{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 5px;
}
.summary_sums, .summary_header_div{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    width: 100%;
}
.summary_sum{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 25px;
    row-gap: 10px;
    color:var(--dark-text);
}
.summary_date .date_label{
    font-family: "montserrat";
    font-weight: 700;
    font-size: 11px;
    line-height: 1em;
    letter-spacing: 1.4px;
    padding: 2px 10px;
    background-color: var(--lh-yellow);
    color: var(--label-text);
    font-style: italic;
}
.summary_header_divider{
    border-bottom: 2px solid var(--grey-background);
    width: 20px;
    margin: 10px auto;
}
/* End of Summary Portal Header */
/* Summary card */
.summary_header{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 5px;
}
.summary_header .summary_header_name{
    display: flex;
    justify-content: space-between;
}
.summary_header .summary_cta{
    padding: 5px 7.5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 3px;
    font-style: italic;
    border: 2px solid var(--lh-yellow);
    color: var(--lh-yellow);
    font-weight: 600;
}
.summary_header .summary_header_info{
    display: flex;
    flex-direction: column;
    gap: 2.5px;
}
.summary_filters{
    width: 100%;
}
.seller_info{
    font-size: 12px;
    font-weight: 500;
    color: var(--dark-text);
}
.seller_status_container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.seller_card .list_item + span {
    font-weight: 500;
}
.summary_cta .action_btns{
    margin-top: 10px;
}
.summary_staff_cta_container{
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    gap:10px;
}
.summary_staff_action_btn_container{
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.status_msg{
    white-space: pre-line;
    word-wrap: break-word;
    width:300px;
    margin-bottom:5px
}
.action_div.other{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fit_content {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}
.staff_seller_settings{
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}
.staff_seller_settings a{
    text-decoration: underline;
}
/* End of Performance Summary Portal */

/* Survey */
.survey{
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    align-items: stretch;
    row-gap: 20px;
}
.survey .section_title{
    padding:10px 0;
}
.survey_customer{
    /* width + auto margins, not the parent's align-items: stretch — a flex item with
       auto cross-axis margins ignores align-self and would otherwise shrink to fit. */
    width: 100%;
    margin: 0 auto;
}
.survey_lead{
    font-size: 13.5px;
    display: flex;
    flex-flow: column wrap;
    row-gap: 8px
}
/* .survey_sections is the same column on a card that has no form -- the help
   hub, whose sections are links. It carries a different class only so
   pnd_form.js, which feature-detects .survey_form, does not load the survey
   module for a page with no form on it. */
.survey_form, .survey_sections{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
/* The bare `textarea` rule further up sets no font, so a textarea falls back to
   the browser's monospace default -- invisible until BJ-04 gave one a
   placeholder, and wrong for the survey's comment field too. Scoped to the
   journey's cards rather than fixed globally: the same element is used across
   the seller portal, and matching those to the text inputs is not this change's
   call to make. */
.survey_form textarea, .survey_sections textarea{
    /* The bare `textarea` rule sets margin: 10px 5px and width: calc(100% - 10px),
       which insets the box 5px from the left and leaves it 10px short on the
       right -- so it lined up with neither the label above it nor the .input_field
       beside it. Border-box plus a full width puts both edges on the card's. */
    margin: 10px 0;
    width: 100%;
    font-family: "montserrat", "Lato", sans-serif;
    font-weight: 550;
    font-size: 12.5px;
    line-height: 1.5em;
    letter-spacing: 0.1em;
    color: #000000;
}
.survey_form textarea::placeholder, .survey_sections textarea::placeholder{
    font-style: italic;
    letter-spacing: 0;
    color: var(--disabled-text);
    font-weight: 400;
}
.survey_form .input_full{
    margin:0;
}
/* The global .top_label carries margin-left: 5px, which the seller and staff
   forms are built around. On these cards nothing else is inset -- the heading,
   the lede, the sub-label, the radios, the section rules and the button all sit
   flush at the card's left edge -- so the label was the one thing 5px out, and
   the italic sub-label under it made the step visible. Scoped here rather than
   removed globally: every other form in the app is aligned to the 5px.

   The bare `textarea` rule earlier has the same 5px, on margin, and it is off
   the same edge -- so a textarea and the label above it now line up too. */
.survey_form .top_label, .survey_sections .top_label{
    font-size: 11px;
    line-height: 2em;
    margin-left: 0;
}
.survey_deal_status{
    font-weight:bold;
    font-style: italic;
}
/* End of Survey */

/* Customer check-in landing pages ("I got my car" and its confirmation).
   The card, sections, radios and inputs are the survey's; only the header
   changes -- every one of these cards, the survey included, leads with a
   left-aligned eyebrow, heading and lede. */
.card_header_lead{
    text-align: left;
}
.card_header_lead_header{
    padding: 20px 0 10px;
}
/* Same column as .survey_customer / .survey_form, so the header's left edge
   lines up with the fields under it instead of running the card's full width. */
.card_header_lead{
    width: 100%;
    margin: 0 auto;
}
.page_eyebrow{
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1.4em;
    letter-spacing: 1.4px;
    color: var(--label-text);
}
.page_heading{
    text-align: left;
    font-family: "futura", "montserrat", sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.32em;
    letter-spacing: 0.01em;
    color: #1e1e1e;
    margin: 10px 0 0 0;
}
.page_lede{
    font-family: "Lato", "montserrat", sans-serif;
    font-size: 15px;
    line-height: 1.62em;
    letter-spacing: 0.1px;
    color: var(--dark-text);
    margin: 12px 0 0 0;
}
@media screen and (max-width: 520px){
    .page_heading{
        font-size: 21px;
    }
}
/* Italic helper line under a field -- explains the prefilled vehicle name. */
.input_hint{
    font-family: "Lato", sans-serif;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--disabled-text);
    margin-top: 6px;
}
/* Client-side validation message above the submit button, and the server-side
   error banner shown when a POST is rejected. */
.form_msg{
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    font-style: italic;
    color: var(--gold);
    margin: 0 0 4px 0;
}
.form_msg.form_err{
    color: var(--red);
}
/* Callout box: yellow left rule, uppercase lead-in. */
.info_note{
    background: #fdf7e3;
    border-left: 3px solid var(--lh-yellow);
    border-radius: 0 3px 3px 0;
    padding: 14px 16px;
    font-family: "Lato", sans-serif;
    font-size: 14.5px;
    line-height: 1.6em;
    color: var(--dark-text);
}
.info_note b{
    display: block;
    margin-bottom: 4px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold);
}
/* Multi-paragraph note. The bare `p` rule sets its own font and margins, so both
   are restated. */
.info_note .note_p{
    font: inherit;
    letter-spacing: inherit;
    margin: 0 0 9px 0;
}
.info_note .note_p:last-child{
    margin-bottom: 0;
}
/* A link inside a note. Gold and underlined, the same as .msg_container a --
   without a rule it falls to the browser's blue, which is the one colour on
   these cards that belongs to no palette. */
.info_note a{
    color: var(--gold);
    text-decoration: underline;
}
/* Inline label inside a note, as opposed to .info_note b, the note's lead-in. */
.info_note strong{
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    color: var(--label-text);
    letter-spacing: 0.2px;
}
/* An <a> styled as a button does not get the block box a <button> gets for free. */
.card_header_lead a.button{
    display: block;
    box-sizing: border-box;
    text-align: center;
    margin-top: 26px;
}
.card_header_lead .info_note{
    margin-top: 22px;
}
/* Green tick above the confirmation heading, or a red cross for an outcome that
   closed the reservation without a car -- a cancellation is not a success. */
.done_mark{
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e4f6ec;
    color: var(--green);
    margin-bottom: 16px;
}
.done_mark.neutral_mark{
    background: #fdeaea;
    color: var(--red);
}
/* An alert callout: the same box as .info_note with a red rule and a red
   lead-in, for a note that says why the button under it will not move. */
.info_note.alert_note{
    background: #fdf1f1;
    border-left-color: var(--red);
}
.info_note.alert_note b{
    color: var(--red);
}
/* A button on the card that navigates rather than submits. <button> is a block
   for free and <a> is not, so it needs the box stated -- the same rule
   .card_header_lead a.button makes for the end screens' button, which this one
   is not inside. */
.card_wrapper > a.button{
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}
/* Seller sales report -- the numbers on the card. Volume and Performance are
   two groups of one field, so they lay out as two columns and fold to one when
   the card is too narrow for both. auto-fit rather than a media query: the
   fold belongs to how much room the card has, which is the padding and the
   card's width as much as it is the viewport's. */
.stat_groups{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 34px;
}
.stat_group_title{
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.4em;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--label-text);
    margin-bottom: 4px;
}
/* Label left, number right, on a hairline -- so a column of figures can be read
   down its right edge instead of hunted for at the end of each sentence. */
/* The hairline is the item's, not the row's, so a row with a hint under it
   keeps both inside one ruled block instead of the hint reading as the head of
   the next number. */
.stat_item{
    border-bottom: 1px solid #ededed;
}
.stat_item:last-child{
    border-bottom: 0;
}
.stat_row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 12px;
    padding: 7px 0;
    font-family: "Lato", "montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    letter-spacing: 0.1px;
    color: var(--dark-text);
}
/* A word about one number -- why it is there, or what to do about it. Italic
   and quiet, the same as .input_hint under a field. */
.stat_hint{
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.5em;
    letter-spacing: 0.3px;
    color: var(--disabled-text);
    margin: -2px 0 8px 0;
}
.stat_value{
    font-weight: 700;
    white-space: nowrap;
    color: #1e1e1e;
}
/* The two numbers a seller is looking for: the conversions they made, and the
   count that is holding the confirm button. */
.stat_row.good .stat_value{
    color: var(--green);
}
.stat_row.alert .stat_value{
    color: var(--red);
}
/* The conversions themselves. The bare `ol` inherits the page's heading font
   and the list sits in a card that is otherwise all Lato. */
.stat_list{
    margin: 0;
    padding-left: 20px;
    font-family: "Lato", "montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.7em;
    letter-spacing: 0.1px;
    color: var(--dark-text);
}
/* Issue tiles -- the help hub's four choices. Links rather than fields: the
   screen records nothing, it only routes, so there is no control to style and
   the whole row is the target. */
.tiles{
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}
.tile{
    display: flex;
    align-items: center;
    column-gap: 14px;
    box-sizing: border-box;
    padding: 14px 16px;
    border-left: 2px solid #4D4D4D80;
    border-radius: 0.5px;
    background: rgb(240 240 240 / 45%);
    color: var(--dark-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tile:hover, .tile:focus-visible{
    background: var(--lh-yellow);
    color: var(--white-text);
    border-left: 3px solid #d9b527;
}
.tile i{
    flex: 0 0 auto;
    width: 24px;
    font-size: 23px;
    line-height: 1;
    text-align: center;
    color: inherit;
    padding: 0 5px;
    color: var(--disabled-text);
}
.tile_tx{
    min-width: 0;
}
.tile_tx b{
    display: block;
    font-family: "montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35em;
}
.tile_tx span{
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    line-height: 1.45em;
    color: var(--disabled-text);
    margin-top: 3px;
    transition: color 0.15s ease;
}
/* Pushed to the far edge, so it reads as "this goes somewhere" rather than as
   part of the label it would otherwise sit against. */
.tile_arrow{
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--disabled-text);
    transition: color 0.15s ease;
}
/* These two are the only things in the tile that set a colour of their own, so
   they are the only two that do not follow the label to white when the tile
   fills in. inherit rather than a literal white, so they keep tracking whatever
   .tile:hover sets. */
.tile:hover .tile_tx span, .tile:focus-visible .tile_tx span,
.tile:hover .tile_arrow, .tile:focus-visible .tile_arrow,
.tile:hover i, .tile:focus-visible i{
    color: inherit;
}
/* The quiet way back off a screen the customer may have picked by mistake --
   the four issue screens all point at the help hub with it. A link, not a
   button: the card already has one action, and this is a correction rather than
   a choice. Italic gold, matching the journey's other secondary text. */
.linkback{
    display: inline-flex;
    align-items: center;
    column-gap: 6px;
    align-self: flex-start;
    margin-top: 22px;
    font-family: "montserrat", sans-serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--gold);
    text-decoration: underline;
}
.linkback:hover, .linkback:focus-visible{
    color: var(--btn-background);
}

/* Deal block -- who a screen is about to act on. Only the not-heard screen
   uses it today: that is the one place a customer sends something to a seller
   with nobody reading it first, so the screen names them, the reservation and
   the day it was made before the button that sends it.

   Same left rule and grey field as .tile above, so a card that signposts and a
   card that states a fact read as the same family. No hover state -- nothing
   here is a link. */
.deal_block{
    display: flex;
    align-items: center;
    column-gap: 14px;
    box-sizing: border-box;
    padding: 14px 16px;
    border-left: 2px solid #4D4D4D80;
    border-radius: 0.5px;
    background: rgb(240 240 240 / 45%);
    color: var(--dark-text);
}
/* The deal's own photo of the car. `contain`, not `cover`: these are press
   shots of a whole vehicle, and cropping one to fill a box takes the front off
   it. Wider than it is tall for the same reason -- a car in a square is mostly
   empty space above and below. */
.deal_block_img{
    flex: 0 0 auto;
    width: 68px;
    height: 44px;
    object-fit: contain;
    object-position: center;
}
/* [hidden] on its own loses to the display below, so the monogram waiting behind
   a photo needs saying twice. */
.deal_block [hidden]{
    display: none;
}
/* The fallback, for a deal with no photo or one that fails to load: two letters
   in a filled square, which reads as an identity where a broken <img> would not. */
.deal_block_mark{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: var(--btn-background);
    color: var(--lh-yellow);
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.deal_block_tx{
    min-width: 0;
}
/* The deal and the date carry a top margin that only makes sense under the
   name. On a card with no name to reveal the first line is one of them, and the
   margin would push the pair off the centre the flex row just put them on. */
.deal_block_tx > :first-child{
    margin-top: 0;
}
.deal_block_name{
    font-family: "montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35em;
}
/* The reserved deal, full name and all, linked to its page. Gold like the
   journey's other links, and underlined only on hover -- it sits between two
   plain lines and a permanent rule would break the block up. */
.deal_block_deal{
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    line-height: 1.45em;
    color: var(--gold);
    text-decoration: none;
    margin-top: 3px;
}
.deal_block_deal:hover, .deal_block_deal:focus-visible{
    text-decoration: underline;
}
.deal_block_sub{
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    line-height: 1.45em;
    color: var(--disabled-text);
    margin-top: 3px;
}

/* Attachment dropzone (BJ-05). The <input type=file> is clipped by the global
   rule near the top of this file, so this label is the whole visible control and
   `for` is what opens the picker. */
.drop{
    display: block;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 24px 18px;
    border: 1px dashed #9b9b9b;
    border-radius: 3px;
    background: transparent;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drop:hover, .drop.is_over, .drop:focus-visible{
    border-color: var(--lh-yellow);
    background: #fffdf4;
}
.drop svg{
    color: var(--disabled-text);
    margin-bottom: 9px;
}
.drop:hover svg, .drop.is_over svg{
    color: var(--lh-yellow);
}
.drop b{
    display: block;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--dark-text);
}
/* Underline offset clear of the uppercase label. */
.drop b u{
    text-decoration-color: var(--lh-yellow);
    text-underline-offset: 3px;
}
.drop span{
    display: block;
    font-family: "Lato", sans-serif;
    font-size: 12px;
    line-height: 1.5em;
    color: var(--disabled-text);
    margin-top: 6px;
}
/* file_upload.js writes filenames here. The global .filenames is a centred grey
   band for the reservation form; on these cards it belongs in the column. */
.survey_form .filenames{
    background: transparent;
    padding: 0;
    margin-top: 10px;
    text-align: left;
    font-style: normal;
}
.survey_form .filenames p{
    font-family: "Lato", sans-serif;
    font-size: 12.5px;
    line-height: 1.8em;
}
.survey_form .filenames .files_heading{
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--label-text);
}
.survey_form .filenames .filename{
    color: var(--dark-text);
}
.survey_form .filenames .filename i{
    color: var(--disabled-text);
    margin-right: 6px;
}
/* A file that finished uploading swaps its icon for a tick, so the two states
   are distinguishable without reading the bar. */
.filenames .filename .fa-check-circle{
    color: var(--green);
}
/* direct_upload.js's progress bar, one per file still in flight. Inline rather
   than a block of its own so a row does not change height when the bar goes.

   These three are unscoped, unlike the .survey_form .filenames block above
   them, which only restyles the CTA card's layout. Both forms upload the same
   way now, so the upload's own states belong to both. */
.filenames .upload_bar{
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    height: 4px;
    margin-left: 8px;
    border-radius: 2px;
    background: var(--light-grey-background);
    overflow: hidden;
}
.filenames .upload_bar span{
    display: block;
    height: 100%;
    background: var(--lh-yellow);
    transition: width .15s linear;
}
/* An upload that could not start or could not finish. The submit stays disabled
   until the customer picks again, so this is the only thing in the list. */
.filenames .upload_err{
    color: var(--red);
}

/* Special Highlights */
.red, .err_msg, .lead_status.red, .red a, .required_asterisk{
    color: var(--red) !important;
}
.required_asterisk{
    margin: 0 0.25em;
}
.red_link{
    text-decoration: underline var(--red);
    font-style:italic;
    font-weight: bold;
}
.err_msg{
    text-align: center;
    font-style: italic;
}
.form_warning{
    font-family: 'lato', 'montserrat';
    flex: 1 1 100%;
    line-height: 1.5em;
}
.form_warning_div{
    max-width: 450px;
    margin: auto;
}
.summary_label{
    font-style: italic;
    padding: 3.5px 0px;
    border-bottom: 3px solid currentColor;
}
.summary_deal_label{
    font-style: italic;
    color: var(--green);
}
/* End of Special Highlights */

/* Vehicle Dropdown Loading States */
select.dropdown_loading {
    background-color: var(--light-grey-background);
    color: var(--disabled-text);
    opacity: 0.6;
    cursor: not-allowed;
}

select.dropdown_loading:disabled {
    background-color: var(--light-grey-background);
    color: var(--disabled-text);
    border-color: var(--light-grey-border);
}


/* End of Vehicle Dropdown Loading States */

/* Start of Tooltips */
.fa.fa-info-circle{
    color: dimgray;
}

/* Update History */
.update_history{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.history_group_header {
    width:100%;
    background-color: var(--light-grey-background);
    box-sizing: border-box;
}
.history_content_group{
    font-size: 13px;
    font-weight: 550;
    line-height: 1.6em;
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.history_content{
    padding: 0 5px;
    word-break: break-word;
}
.history_content_label{
    margin: 0;
}
.history_evt_desc{
    font-style: italic;
    padding: 5px 5px 0 10px;
    color: var(--disabled-text);
    text-transform: none;
}
.prev_val{
    color: var(--red);
    text-decoration: line-through;
}
.new_val{
    color: var(--green);
}
/* End of Update History */
/* Filter Icon Hover */
.filter_icon:hover .fa-filter {
    font-weight: 900;
}
/* Filters toggle sits in the deal count row and matches the Sort label */
.deal_count_left .filter_icon.portal_sort_label{
    margin: 0;
    text-transform: none;
}
/* Black Friday Campaign Styles */
.summary_label.black{
    color: var(--btn-background);
}
.card_qty.card_black_friday{
    background-color: var(--btn-background);
    color: var(--lh-yellow);
}