/* The insurance step (templates/new-design/partials/insurance-step.html, canvas board "Insurance step").
   A native <dialog>, so it opens in the top layer above every Bootstrap modal and header. It loads on the
   vehicle page, the live auction page and that page's offer frame, which have different site CSS, so every
   rule is scoped under .ins and sets what it needs. Desktop: a centered card. Phone: a bottom sheet with the
   button pinned. */

.ins {
    --ins-navy: #19284A;
    --ins-body: #4A5468;
    --ins-muted: #5B6478;
    --ins-line: #E3E6EC;
    --ins-soft: #F3F3F3;
    --ins-purple: #5B2FC9;
    --ins-purple-dark: #4A23AE;
    --ins-purple-soft: #F4F1FC;
    --ins-green: #0F6B3E;
    --ins-green-soft: #E7F6EE;
    --ins-red: #A3122A;
    --ins-red-soft: #FDE7EA;
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 520px;
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #FFFFFF;
    color: var(--ins-navy);
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.35);
    font-family: var(--ff-primary, 'Poppins', sans-serif);
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
}
.ins[open] { display: flex; flex-direction: column; }
.ins::backdrop { background: rgba(16, 24, 40, 0.55); }
.ins *, .ins *::before, .ins *::after { box-sizing: border-box; }
.ins p { margin: 0; }
.ins svg { flex-shrink: 0; }
.ins [hidden] { display: none !important; }

.ins__form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.ins__top { display: flex; align-items: center; gap: 16px; padding: 24px 28px 0; }
.ins__progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ins__bar { display: flex; gap: 4px; }
.ins__seg { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--ins-line); }
.ins__seg--done { background: var(--ins-green); }
.ins__seg--now { background: var(--ins-purple); }
.ins__step { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ins-body); }
.ins__step b { font-weight: 600; color: var(--ins-navy); }
.ins__verified { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ins-green); }
/* At sign-up the top row holds only "ID verified", with no progress bar. */
.ins__top > .ins__step { flex: 1; margin: 0; }
.ins .ins__close {
    flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
    background: var(--ins-soft); color: var(--ins-navy); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ins .ins__close:hover { background: #E8E9EC; }

.ins__body { display: flex; flex-direction: column; gap: 18px; padding: 18px 28px 0; overflow-y: auto; min-height: 0; }
.ins__tile {
    width: 48px; height: 48px; border-radius: 14px; background: var(--ins-green-soft); color: var(--ins-green);
    display: flex; align-items: center; justify-content: center;
}
.ins__intro { display: flex; flex-direction: column; gap: 6px; }
.ins .ins__title {
    margin: 0; font-family: inherit; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ins-navy);
    text-transform: none; letter-spacing: normal;
}
.ins__why { font-size: 15px; line-height: 22px; color: var(--ins-body); }

.ins__car { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ins-soft); }
.ins__car img { width: 52px; height: 39px; border-radius: 8px; object-fit: cover; background: var(--ins-line); }
.ins__car-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 17px; color: var(--ins-body); }
.ins__car-text b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ins-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ins__alert {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    background: var(--ins-red-soft); color: var(--ins-red); font-size: 14px; line-height: 20px; font-weight: 500;
}

.ins__fields { display: flex; flex-direction: column; gap: 14px; }
.ins__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ins .ins__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; font-weight: 400; }
.ins__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ins-navy); }
.ins .ins__input {
    width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid #C9CED8; border-radius: 12px;
    background: #FFFFFF; color: var(--ins-navy); font-family: inherit; font-size: 16px; line-height: 22px; box-shadow: none; outline: 0;
}
.ins .ins__input::placeholder { color: #8A93A6; opacity: 1; font-style: normal; }
.ins .ins__input:focus { border-color: var(--ins-purple); box-shadow: 0 0 0 3px rgba(91, 47, 201, 0.15); }
.ins .ins__input[aria-invalid="true"] { border-color: var(--ins-red); }
.ins__error { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ins-red); }

.ins__hint { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 19px; color: var(--ins-body); }
.ins__hint svg { margin-top: 1px; color: var(--ins-muted); }

.ins__foot { display: flex; flex-direction: column; gap: 8px; padding: 18px 28px 22px; background: #FFFFFF; }
.ins .ins__save {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; padding: 0 20px;
    border: 0; border-radius: 12px; background: var(--ins-purple); color: #FFFFFF; cursor: pointer;
    font-family: inherit; font-size: 16px; line-height: 22px; font-weight: 600; text-transform: none;
}
.ins .ins__save:hover { background: var(--ins-purple-dark); }
.ins .ins__save:focus-visible, .ins .ins__close:focus-visible, .ins .ins__later:focus-visible { outline: 3px solid rgba(91, 47, 201, 0.4); outline-offset: 2px; }
.ins__saving { display: none; align-items: center; gap: 8px; }
.ins__saving svg { animation: ins-spin 0.8s linear infinite; }
.ins[data-ins-state="saving"] .ins__save { background: #8C74D8; cursor: progress; }
.ins[data-ins-state="saving"] .ins__save-label { display: none; }
.ins[data-ins-state="saving"] .ins__saving { display: inline-flex; }
.ins__private { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; line-height: 17px; color: var(--ins-body); text-align: center; }
.ins .ins__later {
    align-self: center; padding: 6px 10px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ins-navy); text-decoration: underline;
}

/* The words that follow what was tapped: Make an offer, Buy now or Bid. */
.ins [data-ins-show] { display: none; }
.ins[data-ins-for="offer"] [data-ins-show="offer"],
.ins[data-ins-for="buy_now"] [data-ins-show="buy_now"],
.ins[data-ins-for="bid"] [data-ins-show="bid"] { display: inline; }

/* Saved with a card on file: a moment of "You're all set", then on to what they tapped. */
.ins__done { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 44px 28px 40px; text-align: center; }
.ins[data-ins-state="done"] .ins__form { display: none; }
.ins[data-ins-state="done"] .ins__done { display: flex; }
.ins__done-mark {
    width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; background: var(--ins-green); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; animation: ins-pop 0.35s ease-out;
}
.ins__next { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ins-navy); }

/* Saved with no card on file: the card is the last step, in the same pop-up. */
.ins__card { display: none; flex-direction: column; min-height: 0; }
.ins[data-ins-state="card"] .ins__form { display: none; }
.ins[data-ins-state="card"] .ins__card { display: flex; }
.ins__tile--card { background: var(--ins-purple-soft); color: var(--ins-purple); }

@keyframes ins-spin { to { transform: rotate(360deg); } }
@keyframes ins-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .ins__saving svg, .ins__done-mark { animation: none; }
}

/* Phone: a bottom sheet. The fields scroll; the button stays pinned above the keyboard line. */
@media (max-width: 575px) {
    .ins {
        width: 100%; max-width: none; max-height: calc(100% - 24px); margin: auto 0 0;
        border-radius: 20px 20px 0 0;
    }
    .ins__top { position: relative; padding: 20px 20px 0; }
    .ins__top::before {
        content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
        border-radius: 2px; background: #C9CED8;
    }
    .ins__body { padding: 14px 20px 16px; gap: 16px; }
    .ins__tile { display: none; }
    .ins__card .ins__tile { display: flex; }   /* the card step is short: room for its icon */
    .ins__pair { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ins__foot { padding: 12px 20px 20px; border-top: 1px solid #EEF0F4; }
}