@charset "utf-8";
/* Order create / checkout page (PDM-7370).
   Loaded for every product code on Order/Create except the KCRAR skin, which
   keeps its own stylesheet.  Class prefix "oc-" = order create. */

:root {
    --oc-navy: #12294d;
    --oc-blue: #1f5fbf;
    --oc-text: #3f4a5a;
    --oc-muted: #7b8798;
    --oc-line: #e3e7ed;
    --oc-field: #ccd4de;
    --oc-bg: #f4f6f8;
    --oc-card: #ffffff;
    --oc-tint: #eef4fc;
    --oc-req: #d64545;
    /* The site's own link green, from blueline.css `a { color: #4a7d41 }` */
    --oc-green: #4a7d41;
}

html {
    font: normal 14px / 1.45 "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background: var(--oc-bg) !important;
    color: var(--oc-text);
}

body { background: var(--oc-bg); }

/* Overrides for the store bundle, which this page still loads:
   uikit.min.css forces "Trebuchet MS" on every heading, and blueline.css sets
   `color: #4b5052 !important` on h1-h6 — so headings need both restated, the
   colour with !important of its own. */

.oc-page,
.oc-page h1,
.oc-page h2,
.oc-page h3,
.oc-page p,
.oc-page label,
.oc-page a,
.oc-page input,
.oc-page select,
.oc-footer,
.oc-footer p,
.oc-footer a,
.supportinfo,
.supportinfo a {
    font-family: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.oc-page h1,
.oc-page h2,
.oc-page h3 { text-transform: none; }

h1.oc-header-title,
h2.oc-card-title,
h2.oc-summary-title,
h3.oc-sub-title { color: var(--oc-navy) !important; }

/* ------------------------------------------------------------------ shell -- */

.uk-navbar.gray,
nav.uk-navbar {
    background: #fff;
    border-bottom: 1px solid var(--oc-line);
    box-shadow: none;
}

nav.uk-navbar .uk-container {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The layout's nav puts the logo and the support blurb in one .uk-hidden-small
   block; lay them out on a single row. Kept inside a media query so uikit's
   hide-below-768px behaviour is preserved. */
@media (min-width: 768px) {
    nav.uk-navbar .uk-hidden-small {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 66px;
    }

    nav.uk-navbar #supportArea { float: none !important; margin: 0; }
}

/* The asset is 1516x161 (9.4:1).  Two things have to be undone for it to size
   correctly here: flex-shrink (the nav row would squeeze it), and the store
   bundle's `.logo { padding: 8px 0 }`, which under uikit's global
   `box-sizing: border-box` eats 16px out of any height set here. */
nav.uk-navbar #logo-link { flex: 0 0 auto; display: block; }

#logo, nav.uk-navbar img.logo {
    height: 34px;
    width: auto;
    max-width: none;
    padding: 0;
    flex: 0 0 auto;
    display: block;
}

.supportinfo { font-size: 12px; color: var(--oc-navy); }
.supportinfo a { font-size: 12px; color: var(--oc-green); text-decoration: underline; }

.oc-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 64px;
}

/* ----------------------------------------------------------------- header -- */

.oc-header { padding: 40px 0 24px; }

h1.oc-header-title {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--oc-navy);
    letter-spacing: -.2px;
}

.oc-header-price {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--oc-navy);
}

.oc-header-price strong { color: var(--oc-blue); font-weight: 700; }

.oc-header-intro,
.oc-header-note {
    margin: 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--oc-muted);
}

.oc-header-note { margin-top: 10px; }

/* ----------------------------------------------------------------- layout -- */

.oc-layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.oc-main { flex: 1 1 auto; min-width: 0; }
.oc-aside { flex: 0 0 258px; width: 258px; }

/* ------------------------------------------------------------------ cards -- */

.oc-card {
    background: var(--oc-card);
    border: 1px solid var(--oc-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(18, 41, 77, .04);
    margin-bottom: 22px;
}

.oc-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px 0;
}

.oc-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--oc-tint);
    color: var(--oc-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

h2.oc-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--oc-navy);
}

.oc-card-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--oc-muted);
}

.oc-card-body { padding: 20px 24px 24px; }

/* ------------------------------------------------------------------ forms -- */

.oc-row {
    display: flex;
    gap: 18px;
    margin-bottom: 16px;
}

.oc-row > * { flex: 1 1 0; min-width: 0; }
.oc-row-full > * { flex: 1 1 100%; }
.oc-row:last-child { margin-bottom: 0; }

.oc-field { display: block; }

label.oc-label,
.oc-label {
    display: inline-block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--oc-navy);
}

.oc-req {
    color: var(--oc-req);
    font-size: 12px;
    font-weight: 600;
    margin-left: 3px;
}

.oc-input {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--oc-field);
    border-radius: 6px;
    background: #fff;
    color: var(--oc-text);
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

select.oc-input {
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237b8798'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.oc-input:focus {
    outline: none;
    border-color: var(--oc-blue);
    box-shadow: 0 0 0 3px rgba(31, 95, 191, .12);
}

.oc-input[disabled] { background: #f7f8fa; color: var(--oc-muted); }

.oc-input::-webkit-input-placeholder { color: var(--oc-muted); }
.oc-input::placeholder { color: var(--oc-muted); }

.oc-help {
    margin: -12px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--oc-muted);
}

.oc-help a { color: var(--oc-green); text-decoration: underline; }

.oc-err {
    display: inline-block;
    margin-left: 6px;
    color: var(--oc-req);
    font-size: 11px;
    font-weight: 700;
}

/* --------------------------------------------------------- MLS ID portals -- */

.oc-sub-title {
    margin: 26px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--oc-navy);
}

.oc-sub-help {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--oc-muted);
}

.oc-portal {
    padding: 14px;
    border: 1px solid var(--oc-line);
    border-radius: 8px;
    background: #f8fafc;
}

/* A portal block holding two fields, so it gets twice the width of a single-field
   one alongside it.  Ignored once .oc-row stops being a flex row on small screens. */
.oc-portal-wide {
    flex: 2 1 0;
}

.oc-portal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--oc-muted);
}

.oc-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--oc-tint);
    color: var(--oc-blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------- banner -- */

.oc-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 15px;
    border: 1px solid #c9dcf7;
    border-radius: 8px;
    background: var(--oc-tint);
    font-size: 12px;
    line-height: 1.55;
    color: var(--oc-navy);
}

.oc-banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--oc-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

/* ---------------------------------------------------------------- payment -- */

.oc-cards {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.oc-cards img { height: 26px; width: auto; }

.oc-exp { display: flex; gap: 10px; }
.oc-exp select { flex: 1 1 0; min-width: 0; }

.oc-cvv { display: flex; align-items: center; gap: 8px; }
.oc-cvv input { max-width: 120px; }

.oc-hint {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dbe4ef;
    color: var(--oc-navy);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.oc-choice { margin-bottom: 16px; }

.oc-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--oc-text);
    cursor: pointer;
}

.oc-check input { margin: 1px 0 0; flex: 0 0 auto; }
.oc-check + .oc-check { margin-top: 8px; }
.oc-check-billing { margin-top: 18px; }

.oc-billing { margin-top: 6px; }

.oc-billing .oc-sub-title {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--oc-line);
}

/* ---------------------------------------------------------- order summary -- */

.oc-summary { position: sticky; top: 20px; }
.oc-summary .oc-card-body { padding: 20px; }

h2.oc-summary-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--oc-navy);
}

.oc-summary-item {
    margin: 0;
    font-size: 12px;
    color: var(--oc-muted);
}

.oc-hr {
    height: 0;
    margin: 14px 0;
    border: 0;
    border-top: 1px solid var(--oc-line);
}

.oc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 12px;
    color: var(--oc-text);
}

.oc-line:last-of-type { margin-bottom: 0; }
.oc-amt { font-weight: 600; color: var(--oc-navy); white-space: nowrap; }

.oc-line-total { margin-bottom: 0; }
.oc-line-total > span:first-child { font-size: 13px; font-weight: 700; color: var(--oc-navy); }

.oc-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--oc-blue);
    white-space: nowrap;
}

.oc-summary-note {
    margin: 2px 0 0;
    font-size: 10px;
    color: var(--oc-muted);
    text-align: right;
}

.oc-check-terms { margin: 16px 0 12px; }
.oc-check-terms a { color: var(--oc-green); font-weight: 600; text-decoration: underline; }

.oc-btn {
    display: block;
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: var(--oc-green);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

    .oc-btn:hover:enabled {
        background: #6f9a68;
    }

.oc-btn[disabled] {
    background: #b9c2ce;
    color: #fff;
    cursor: not-allowed;
}

.oc-summary-reassure {
    margin: 12px 0 0;
    font-size: 10px;
    line-height: 1.55;
    color: var(--oc-muted);
    text-align: center;
}

.oc-seal { display: block; text-align: center; }
.oc-seal img { max-width: 110px; height: auto; }

/* ------------------------------------------------------------ MLS combobox -- */

.oc-combo { position: relative; }

/* Shown only once initMlsCombo() has replaced the select with the search input,
   so the plain select is what renders when scripting is unavailable. */
.oc-combo-input { cursor: text; }
.oc-combo.is-live .oc-combo-select { display: none; }

.oc-combo-list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--oc-field);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(18, 41, 77, .12);
    display: none;
}

.oc-combo-list.is-open { display: block; }

.oc-combo-list li {
    padding: 7px 11px;
    font-size: 13px;
    color: var(--oc-text);
    cursor: pointer;
}

.oc-combo-list li.is-active,
.oc-combo-list li:hover { background: var(--oc-tint); color: var(--oc-navy); }

.oc-combo-list li.is-empty { color: var(--oc-muted); cursor: default; }
.oc-combo-list li.is-empty:hover { background: none; }

/* ----------------------------------------------------------------- footer -- */

.oc-footer {
    border-top: 1px solid var(--oc-line);
    background: #fff;
    padding: 22px 0;
}

.oc-footer-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.oc-footer img { height: 26px; width: auto; display: block; }

.oc-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.oc-footer-copy { margin: 0; font-size: 11px; color: var(--oc-muted); }

.oc-footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.oc-footer-links a {
    font-size: 11px;
    font-weight: 600;
    color: var(--oc-green);
    text-decoration: none;
}

.oc-footer-links a:hover { text-decoration: underline; }

/* Any remaining in-page link keeps the site's green rather than picking up a
   navy from the rules above. */
.oc-page a:not(.oc-btn):not(.oc-hint),
.oc-footer a { color: var(--oc-green); }

/* ------------------------------------------------------------ error boxes -- */

.error-message-box,
.validation-summary-errors { margin-top: 24px; }

/* ------------------------------------------------------------ small screens -- */

@media (max-width: 860px) {
    .oc-layout { display: block; }
    .oc-aside { width: auto; margin-bottom: 22px; }
    .oc-summary { position: static; }
}

@media (max-width: 620px) {
    .oc-row { display: block; }
    .oc-row > * { margin-bottom: 16px; }
    .oc-row > *:last-child { margin-bottom: 0; }
    h1.oc-header-title { font-size: 24px; }
}