/* Chrome for the dedicated cotizador page (/Estimate). Minimal "app"-style
   layout (logo + Back + close, no navbar/footer) -- see
   Views/Home/Cotizador.cshtml. The --niuroof-* variables and the
   .quote-section/.step-*/.btn-* classes come from home.css, loaded first. */

body {
    background: var(--color-bg, #fff);
    min-height: 100vh;
}

/* Bar stays full-bleed; see .cotizador-page-header-inner below for the
   capped/centered content (back/logo/close). */
.cotizador-page-header {
    height: 76px;
    background: #f7f9fc;
}

/* Capped so back/close don't drift to the browser edges on wide screens.
   Deliberately wider than .quote-container's 1000px (styles.css), on
   request -- not meant to align with the card below it. */
.cotizador-page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Matches back's own pill look (same gray box/height/padding/radius as
   .btn-back-step in styles.css) so both sides of the header share one
   style. Icon-only -- back is the only one with a text label. */
.cotizador-page-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    background: #f5f5f5;
    color: var(--niuroof-ink, #0f172a);
    text-decoration: none;
    font-size: 1rem;
}

/* .cotizador-page-back is a <button> (click behavior, see btnPageBack in
   cotizador.js) -- resets native button chrome so it still looks like the
   plain .btn-back-step pill (styles.css). */
.cotizador-page-back {
    padding: 0 12px;
    font-family: inherit;
    cursor: pointer;
}

.cotizador-page-logo img {
    height: 30px;
    display: block;
}