/* Customer-facing pages (register.html, rma.html). Loaded after sitestyles.css, which the admin pages
   also use, so everything that changes the look of the customer flow lives here and nothing in
   sitestyles.css needs to change. */

:root {
    --navy: #253551;
    --blue: #499fd1;
    --blue-dark: #1f6f9f;
    --ink: #1f2937;
    --muted: #5b6577;
    --line: #c3cad6;
    --soft: #f3f6fa;
    --error: #b3261e;
    --ok: #1b7f3b;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: #fff;
}

body * {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

a {
    color: var(--blue-dark);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Header and navigation ---------- */

.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    min-height: 0;
    padding: 14px 4vw;
}

.header > a,
.header > img {
    flex: 0 0 auto;
}

.header img {
    display: block;
    max-height: 60px;
    width: auto;
}

nav.navwrapper {
    float: none;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: 600 16px "proxima-nova", Arial, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    content: "";
    position: relative;
}

.nav-toggle .bars::before {
    position: absolute;
    top: -6px;
}

.nav-toggle .bars::after {
    position: absolute;
    top: 6px;
}

.subnav-toggle {
    display: none;
}

nav.navwrapper > ul {
    margin: 0;
    padding: 0;
}

@media (min-width: 992px) {
    nav.navwrapper ul li:focus-within > ul.subnav {
        display: block;
    }

    /* Tighter than sitestyles.css so the five links fit on the same line as the logo. */
    nav.navwrapper > ul > li {
        margin: 8px 2px;
    }

    nav.navwrapper > ul > li > a {
        padding: 10px 12px;
        font-size: 17px;
    }
}

@media (max-width: 991px) {
    .nav-toggle {
        display: inline-flex;
    }

    nav.navwrapper {
        display: none;
        width: 100%;
    }

    nav.navwrapper.open {
        display: block;
    }

    nav.navwrapper > ul {
        margin: 6px 0 0;
        padding: 0;
        list-style: none;
    }

    nav.navwrapper ul li {
        display: block;
        position: relative;
        margin: 0;
        font-size: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    nav.navwrapper ul li a {
        display: block;
        padding: 14px 52px 14px 4px;
        font-size: 17px;
        background: transparent;
    }

    nav.navwrapper ul.subnav {
        position: static;
        display: none;
        height: auto;
    }

    nav.navwrapper ul li:hover > ul.subnav {
        display: none;
    }

    nav.navwrapper ul li.open > ul.subnav {
        display: block;
    }

    nav.navwrapper ul.subnav li {
        height: auto;
        min-width: 0;
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav.navwrapper ul.subnav li a {
        padding: 12px 4px 12px 22px;
        font-size: 16px;
        font-weight: 400;
    }

    .subnav-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    .subnav-toggle::after {
        content: "\25BE";
        display: inline-block;
        transition: transform 0.15s;
    }

    li.open > .subnav-toggle::after {
        transform: rotate(180deg);
    }
}

/* ---------- Page card ---------- */

.main {
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 20px 12px 0;
    width: auto;
    max-width: none;
    border: 1px solid rgba(37, 53, 81, 0.35);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.main-lt {
    padding: 22px 20px 8px;
    text-align: left;
}

.main-lt p {
    margin: 0 0 12px;
    line-height: 1.45;
}

/* On phones the form matters more than the picture, so the picture only shows on larger screens. */
.main-lt img {
    display: none;
    width: 100%;
    margin: 12px auto 0;
    object-fit: contain;
}

.main h1 {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.15;
}

.main h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
}

.main-rt {
    border-top: 1px solid rgba(37, 53, 81, 0.2);
}

@media (min-width: 992px) {
    .main {
        flex-direction: row;
        width: 100%;
        max-width: 1170px;
        margin: 50px auto 0;
        border-radius: 40px;
    }

    .main-lt,
    .main-rt {
        float: none;
        width: 50%;
    }

    .main-lt {
        padding: 35px 45px;
        text-align: center;
    }

    .main-lt p {
        text-align: left;
    }

    .main-lt img {
        display: block;
        margin-top: 30px;
    }

    .main h1 {
        font-size: 38px;
    }

    .main-rt {
        min-height: 575px;
        border-top: 0;
        border-left: 1px solid rgba(37, 53, 81, 0.5);
    }
}

/* ---------- Progress steps ---------- */

.steps {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 22px 25px 0;
    list-style: none;
}

.steps li {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #d5dbe5;
}

.steps li.done,
.steps li.current {
    background: var(--navy);
}

.step-label {
    margin: 10px 25px 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Panels, fields, buttons ---------- */

:is(#productdiv, #ownerdiv, #rmadiv, #confirmationdiv) {
    padding: 14px 25px 28px;
}

.serialnumberprompt {
    padding: 14px 25px 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
}

h2[tabindex="-1"]:focus {
    outline: none;
}

.hint {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--muted);
}

.field {
    margin: 0 0 16px;
}

.field > label,
.field-label {
    display: block;
    min-width: 0;
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

.field > label.required::after,
.field-label.required::after {
    content: " *";
    color: var(--error);
}

.field .opt {
    font-weight: 400;
    color: var(--muted);
}

.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

@media (min-width: 600px) {
    .row {
        grid-template-columns: 1fr 1fr;
    }
}

:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) select,
:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) textarea,
#dialog-form input:not([type="submit"]) {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #8a95a8;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: 400 16px/1.3 "proxima-nova", Arial, sans-serif;
}

:is(#productdiv, #ownerdiv) select {
    margin: 0;
    height: auto;
    padding-left: 10px;
}

:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) textarea {
    min-height: 140px;
    resize: vertical;
}

:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) input:focus,
:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) select:focus,
:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) textarea:focus,
#dialog-form input:focus,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input[type="file"]:focus-visible {
    outline: 3px solid rgba(73, 159, 209, 0.6);
    outline-offset: 2px;
}

:is(.serialnumberprompt, #productdiv, #ownerdiv, #rmadiv) .invalid,
#dialog-form .invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 1px var(--error);
}

#purchaseDate {
    visibility: visible;
}

.field-error {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--error);
}

.msg {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
}

.msg:empty {
    display: none;
}

.msg.error {
    color: var(--error);
    padding: 10px 12px;
    border: 1px solid #e8b4b0;
    border-radius: 8px;
    background: #fdf1f0;
}

.msg.info {
    color: var(--navy);
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--soft);
}

.msg.ok {
    color: var(--ok);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 26px;
    border: 2px solid var(--navy);
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    font: 600 16px "proxima-nova", Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover {
    background: #1a2740;
}

.btn.secondary {
    background: #fff;
    color: var(--navy);
}

.btn.secondary:hover {
    background: var(--soft);
}

#registerBtn.btn {
    margin-left: 0; /* sitestyles.css pushes this button 25% to the right */
}

.btn[hidden] {
    display: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 480px) {
    .actions .btn {
        flex: 1 1 100%;
    }

    .actions .btn.secondary {
        order: 2;
    }
}

/* ---------- Product summary, warranty, receipt ---------- */

.summary {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--soft);
}

.summary dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
}

.summary dt {
    color: var(--muted);
}

.summary dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    .summary dl {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .summary dd {
        margin: 0 0 8px;
    }
}

.callout {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 4px solid var(--blue);
    border-radius: 6px;
    background: var(--soft);
}

.callout[hidden] {
    display: none;
}

.callout strong {
    color: var(--navy);
}

input[type="file"] {
    width: 100%;
    max-width: 100%;
    font: 400 15px "proxima-nova", Arial, sans-serif;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 16px;
    border: 2px solid var(--navy);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font: 600 15px "proxima-nova", Arial, sans-serif;
    cursor: pointer;
}

.receipt-result {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.receipt-result[hidden] {
    display: none;
}

.receipt-result img {
    width: auto;
    height: 72px;
    border: 1px solid var(--line);
    border-radius: 6px;
    visibility: visible;
}

/* ---------- Address search ---------- */

#searchdiv {
    margin-bottom: 8px;
}

ul#results {
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

ul#results li {
    padding: 0;
    border: 1px solid var(--line);
    border-top-width: 0;
    background: #fff;
    text-align: left;
}

ul#results li:first-child {
    border-top-width: 1px;
    border-radius: 8px 8px 0 0;
}

ul#results li:last-child {
    border-radius: 0 0 8px 8px;
}

ul#results li a {
    display: block;
    padding: 12px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

ul#results li a:hover,
ul#results li a:focus {
    background: var(--soft);
}

.powered-by-google {
    display: block;
    height: 18px;
    width: auto;
    margin-top: 8px;
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue-dark);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- RMA reason step ---------- */

ul#reasonCBlist {
    margin: 6px 0 16px;
    padding: 0;
    list-style: none;
    column-count: auto;
    column-width: 220px;
}

ul#reasonCBlist li {
    break-inside: avoid;
    margin: 0 0 4px;
}

ul#reasonCBlist label,
.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 36px;
    padding: 6px 0;
    font-weight: 400;
    cursor: pointer;
}

.check input,
ul#reasonCBlist input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
}

#rmadiv h3 {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy);
}

/* ---------- Dialog (RMA passcode) ---------- */

.ui-dialog {
    max-width: calc(100vw - 24px);
}

#dialog-form .actions {
    margin-top: 16px;
}

/* ---------- Confirmation ---------- */

#confirmationdiv .ok-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    font-size: 24px;
}

#confirmationdiv p {
    margin: 0 0 12px;
    line-height: 1.45;
}

/* ---------- Footer ---------- */

.footer {
    margin: 48px auto 0;
    padding: 28px 20px;
}

.footer .fluid-engine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
}

.footer-img {
    width: min(300px, 70%);
}

.footer-copy {
    flex: 1 1 260px;
    width: auto;
    padding-left: 0;
}

.footer-copy p {
    margin: 0 0 8px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}