:root {
    --main-blue: #00457c;
    --main-green: #14d214;
    --main-white: #ffffff;
    --main-grey: #eff3f8;
    --main-yellow:#cf9406;
    --header-brad:10px;
    --header-shadow:#878787 0px -8px 3px 0;
    --color-background-primary:#00457c;
    --color-background-secondary:#eff3f8;
    --color-background-success:#14d214 ;


    --color-text-primary:black;
    --color-text-secondary:grey;
    --color-text-success:#0D0;
    --color-border-primary:#333;
    --color-border-secondary:#333;
    --color-border-tertiary:#333;
    --color-text-danger:#fff;
    --color-background-danger:#D00;

    --color-border-danger:#D00;
    --color-border-success:#0D0;

    --border-radius-lg:15px;
    --border-radius-md:3px;

}

*{box-sizing:border-box;margin:0;padding:0}
/*body{font-family:var(--font-sans);font-size:15px;color:var(--color-text-primary);background:transparent}*/
.form-wrap{max-width:760px;
    margin:0 auto;
    padding:1.5rem 1rem 3rem;
    background: white;
    border-radius: 8px;
    box-shadow: 2px 2px 2px 1px #aaa;}

/* Breadcrumb
   Styled to match the Quote Portal "wf-quote-steps" stepper:
     done   = navy  (#1E3A66) filled circle + navy label
     active = gold  (#C9A227) filled circle + gold label (current step)
     future = hollow grey circle + muted label
   Class names (.bc-step / .bc-num / .bc-label and the .done/.active state
   classes) are toggled by multistep.breadcrumb.form.js and are left intact. */
.breadcrumb{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0;margin-bottom:1.5rem;background:#fff;border:1px solid #E3E7EE;border-radius:12px;padding:16px 26px;overflow:hidden}
.bc-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0;position:relative;color:#B6BEC9;cursor:default}
/* connector line running between adjacent step circles;
   short segment centred in the gap so it clears both nodes */
.bc-step:not(:first-child)::before{
    content:'';
    position:absolute;
    top:20px;            /* vertical centre of the 40px circle */
    left:-22%;
    width:44%;
    height:3px;
    border-radius:2px;
    background:#D9DEE6;
    z-index:0
}
/* line leading into a reached (done/active) step is navy */
.bc-step.done::before,
.bc-step.active::before{background:#1E3A66}
.bc-step .bc-num{
    position:relative;
    z-index:1;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;align-items:center;
    justify-content:center;font-size:15px;font-weight:bold;margin-bottom:0;
    /* future (default) */
    background:#fff;
    border:2px solid #D9DEE6;
    color:#B6BEC9;
    box-sizing:border-box;
}
.bc-label{margin-top:6px;text-align:center;font-size:10.5px;line-height:1.25;color:#B6BEC9}
/* active = current step (gold) */
.bc-step.active .bc-num{
    background:#C9A227;
    color:#fff;
    border-color:#C9A227
}
.bc-step.active .bc-label{color:#C9A227;font-weight:700}
/* done = completed step (navy) */
.bc-step.done .bc-num{
    background:#1E3A66;
    color:#fff;
    border-color:#1E3A66;
}
.bc-step.done .bc-label{color:#1E3A66;font-weight:600}

.bc-num .fa,
.bc-num .fa-solid,
.bc-num .fa-regular{
    font-size: 15px;
}

/* Responsive: compact the stepper, mirroring the quote portal breakpoints */
@media (max-width: 991px){
    .breadcrumb{padding:12px 14px}
    .bc-step .bc-num{width:32px;height:32px;font-size:13px}
    .bc-step:not(:first-child)::before{top:16px}
    .bc-label{font-size:9px}
}
@media (max-width: 575px){
    .breadcrumb{padding:10px 8px}
    .bc-step .bc-num{width:28px;height:28px;font-size:12px}
    .bc-step:not(:first-child)::before{top:14px}
    .bc-label{display:none}
    .bc-step.active .bc-label{display:block}
}

/* Page containers */
.page{display:none}
.page.active{display:block}

/* Section title */
.section-title{font-size:18px;font-weight:500;margin-bottom:1.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}
/* Only details.phtml and main.phtml load this stylesheet, so this rule is
   already scoped to the FNOL form -- the agent-portal quote pages that also use
   .info-panel markup get their layout from elsewhere and are unaffected.
   auto-fit + minmax(240px, 1fr) makes the cards share the full panel width
   instead of sitting as two fixed 240px columns pushed to opposite ends, and
   collapses to one full-width column when there is no room for two.
   justify-content is gone deliberately: 1fr tracks consume all the free space,
   so there was nothing left for it to distribute. */
.info-panel {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 5px;
}
.section-title > span:first-child{font-size:1.9rem;color:grey}

/* Responsive: scale the section title down and let the info panel go
   edge-to-edge. These live AFTER the base rules on purpose -- media queries add
   no specificity, so an override placed in the earlier @media blocks would lose
   to .section-title > span:first-child above on source order alone. */
@media (max-width: 991px){
    .section-title{font-size:16px}
    .section-title > span:first-child{font-size:1.5rem}
    .info-panel{margin:0}
}
@media (max-width: 575px){
    .section-title{font-size:15px}
    .section-title > span:first-child{font-size:1.25rem}
}
/* Card */
.card{border:1px solid #d9d9d9;border-radius:var(--border-radius-lg);padding:1.25rem;margin-bottom:1rem}

/* Form fields */
.field{margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:13px;color:var(--color-text-secondary);margin-bottom:4px}
.field input,.field select,.field textarea{
    width:100%;
    padding:8px 10px;
    font-size:14px;
    /*border:0.5px solid var(--color-border-secondary);*/
    border-radius:var(--border-radius-md);color:var(--color-text-primary);outline:none;transition:border 0.1s
}
/* Checkboxes/radios must not inherit the full-width text-input sizing, or the
   box sits at the far edge of the cell, away from its label ("No Email"). */
.field input[type="checkbox"],.field input[type="radio"]{width:auto;padding:0;margin:0 6px 0 0;vertical-align:middle}
.field input[type="checkbox"] + label,.field input[type="radio"] + label{display:inline-block;vertical-align:middle;margin-bottom:0}
/* email + "No Email": line the checkbox up with the input, not its label */
.field-row--bottom{align-items:end}
.field-row--bottom .field{margin-bottom:1rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-border-primary)}

/* Input group (e.g. datepicker icon + input, injected at runtime by
   forms.min.js as <div class="input-group"><i class="...input-group-addon">
   <input></div>). Declared explicitly so the layout doesn't depend on
   Bootstrap's version-specific .input-group behavior. */
.input-group{display:flex;align-items:stretch;width:100%}
.field .input-group input,.field .input-group select{width:auto;flex:1 1 auto;min-width:0;border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}
.input-group-addon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:8px 10px;
    font-size:14px;
    font-style:normal;
    color:var(--color-text-secondary);
    background:var(--color-background-secondary);
    /*border:0.5px solid var(--color-border-secondary);*/
    border-right:none;
    border-radius:var(--border-radius-md) 0 0 var(--border-radius-md);
}

/* Time-of-loss field (rendered by Wellington_View_Helper_TimeOfDay, shared
   across the app). Its .form-group / .col-sm-* markup relies on Bootstrap's
   .row flex context, which this form doesn't provide, so it stacks. Scoped
   to this field's id so other pages using the same helper are unaffected. */
#form-element-lossTime .form-group{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:12px;
}
#form-element-lossTime .form-group .col-sm-4{
    /*padding-top:9px;*/
    line-height:1.4;
    display:grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    align-items: center;
    row-gap: 3px;
    width: auto;
    align-self: flex-start;
}
#form-element-lossTime .form-group input[type="radio"]{
    display:inline-block;
    vertical-align:middle;
    margin:0 6px 0 0;
}
#lossTime_pm{
    margin-top:10px;
}
/*.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}*/
.field-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:12px}


/* Accordion subsections */
.subsection{border:none;border-radius:var(--border-radius-lg);margin-bottom:10px;overflow:hidden}
.sub-header{
    /*display:flex;*/
    /*align-items:center;*/
    display: grid;
    grid-template-columns: auto 20px 1fr;
    justify-items: end;
    gap:10px;
    padding:12px 16px;
    cursor:pointer;
    user-select:none;
    transition:background 0.12s;
    border-bottom: 1px solid var(--main-grey);}
.sub-header:hover{background:var(--color-background-secondary)}
.sub-icon{font-size:16px;transition:transform 0.2s;color:var(--color-text-secondary)}
.sub-icon.open{transform:rotate(180deg)}
.sub-title{font-size:1rem;font-weight:bold;flex:1}
.status-badge{display:flex;
    align-items:center;
    justify-content:center;
    width:22px;height:22px;
    border-radius:50%;font-size:11px;font-weight:500;flex-shrink:0}
.badge-ok{background:var(--color-background-success);color:white;)}
.badge-err{background:var(--color-background-danger);color:white;}
/* Keep the sticky footer from covering the field that just received focus
   (tabbing only scrolls it to the viewport edge, which is under the footer). */
html{scroll-padding-bottom:100px}

/* "N fields need your attention" tooltip above the footer buttons */
.validation-toast{position:absolute;right:1.25rem;bottom:calc(100% + 8px);background:var(--color-border-danger,#b3261e);color:#fff;font-size:13px;line-height:1.3;padding:8px 14px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.validation-toast.show{opacity:1;transform:translateY(0)}
.validation-toast::after{content:"";position:absolute;top:100%;right:28px;border:6px solid transparent;border-top-color:var(--color-border-danger,#b3261e)}
.sub-body{padding:16px;display:none}
.sub-body.open{display:block}

/* Sticky footer */
.sticky-footer{background: var(--main-white); position:sticky;bottom:0;border-top:0.5px solid var(--color-border-tertiary);padding:12px 1.25rem;display:flex;gap:10px;justify-content:flex-end;z-index:10;margin:0 -1rem;border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg)}
.btn{padding:12px 22px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;border:0.5px solid var(--color-border-secondary);background:transparent;color:var(--color-text-primary);transition:background 0.12s,transform 0.1s}
.btn:hover{background:var(--color-background-secondary)}
.btn:active{transform:scale(0.97)}
/* Matches the Quote Portal's #continue button (public/css/modern-quote.css):
   solid wf-green fill, white text, bold label, soft green shadow. */
.btn-primary{
    background-color:#2E8B46;
    color:#fff;
    border:0.5px solid #2E8B46;
    border-radius:8px;
    padding:12px 22px;
    font-weight:700;
    box-shadow:0 4px 12px rgba(46,139,70,.2);
    transition:filter 0.12s,transform 0.1s;
}
.btn-primary:hover{background-color:#2E8B46;color:#fff;filter:brightness(1.05)}
.btn-danger{color:var(--color-text-danger);border-color:var(--color-border-danger)}
.btn-danger:hover{background:var(--color-background-danger)}

/* Nav buttons (prev/next) */
.nav-row{display:flex;gap:10px;justify-content:flex-end;margin-top:1.5rem}

/* Confirm page */
.confirm-box{border:0.5px solid var(--main-grey);
    border-radius:var(--border-radius-lg);
    padding:2rem;
    text-align:center;margin-bottom:1.5rem}
.confirm-box .big-icon{font-size:40px;color:var(--color-text-success);margin-bottom:0.75rem}
.confirm-box h2{font-size:18px;font-weight:500;margin-bottom:0.5rem}
.confirm-box p{font-size:14px;}

/* Error toast */
.error-msg{font-size:12px;color:var(--color-text-danger);margin-top:4px;display:none}
.error-msg.show{display:block}
.field input.invalid,.field select.invalid{border-color:var(--color-border-danger)}
.form-element.invalid{box-shadow:inset 3px 0 0 var(--color-border-danger);padding-left:10px}

/* specific to this form for the time entry
   the buttons are set to float so we undo that
*/
.field.loss-time *{
    float:none;
}
/* Water-damage guidance above Type of Loss. The element carries an inline
   max-width:50%; let it use the full card width. */
.water-note,.water-note *{max-width:100% !important}
.water-note{color:#c00}

/* Legal/fraud notice at the end of Loss Details */
#advisory{margin:20px 0 10px}
#advisory .advisory p{font-size:15px;line-height:1.6;margin:0 0 12px}
#advisory .advisory .p2{font-weight:bold}

/* Express Pay has only four steps, so every step keeps its label on phones. The rules above hide
   all but the active label at narrow widths because the claim form has five steps (BV33350). */
.expresspay-steps .bc-step .bc-label{display:block}