/* Request page (request.php): the product page layout, reused. product-page.css supplies the
 * tokens, the two-column layout, option cards, chips, the summary card and the process steps.
 * This file adds only what a form needs: text fields, a select, and the matching-piece cards. */

.request-page {
    --product-bar-height: 0px;
    --site-header-offset: 80px;
    padding-bottom: 56px;
}

.request-page .product-layout {
    margin-top: 8px;
}

.request-page .request-image-stage .hero-image {
    padding: 28px;
}

.request-page .request-back {
    margin: 14px 0 0;
    font-size: var(--text-ui);
    text-align: center;
}

.request-page .request-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.request-page .request-kicker {
    margin: 0 0 6px;
    color: var(--blue-dark);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.request-page .request-lead {
    max-width: 62ch;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: var(--text-body);
}

/* Bold inline titles for the text fields, matching the fieldset legends above them. */
.request-page .request-field-title label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 12px;
    font-size: var(--text-heading);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.request-page .request-field-help {
    margin: -6px 0 12px;
    color: var(--ink-soft);
    font-size: var(--text-ui);
}

.request-page :is(select, textarea, input[type="text"]) {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: var(--text-body);
}

.request-page textarea {
    min-height: 140px;
    line-height: 1.6;
    resize: vertical;
}

.request-page select {
    max-width: 320px;
    padding-inline-end: 40px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.request-page :is(select, textarea, input[type="text"]):focus-visible {
    outline: 3px solid var(--blue-dark);
    outline-offset: 2px;
}

.request-page :is(select, textarea, input)[aria-invalid="true"] {
    border-color: #9c5a4a;
}

.request-page .fieldError {
    margin: 0 0 10px;
    color: #66392e;
    font-size: var(--text-ui);
    font-weight: 600;
}

.request-page .request-size .size-help {
    margin-top: 14px;
}

.request-page .request-chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.5em), 1fr));
}

.request-page .request-stone-grid .metal-content {
    min-height: 56px;
}

.request-page .request-two-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr));
    gap: 20px 24px;
    margin-top: 24px;
}

.request-page .request-two-fields select {
    max-width: none;
}

/* Matching pieces: checkbox cards with a small photograph. */
.request-page .request-matching-grid {
    display: grid;
    gap: 10px;
}

.request-page .request-matching-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
}

.request-page .request-matching-content img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
}

.request-page .request-matching-content > span:not(.selection-mark) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.request-page .request-matching-content small {
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.request-page .request-summary {
    margin-top: 34px;
}

.request-page .request-summary .primary-button {
    width: 100%;
    margin-top: 18px;
}

.request-page .request-next {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: var(--text-ui);
    text-align: center;
}

.request-page .request-process {
    margin-top: 56px;
}

@media (max-width: 800px) {
    .request-page .request-image-stage .hero-image { padding: 16px; }
    .request-page .request-process { margin-top: 40px; }
}

@media (forced-colors: active) {
    .request-page :is(select, textarea, input[type="text"]) { border-color: CanvasText; }
}

/* Breadcrumbs wrap at large text sizes, as on the product page (which scopes these rules to
 * its own body class). */
body:has(.request-page) #breadcrumbs > nav.grid > ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    min-width: 0;
    max-width: 100%;
}

body:has(.request-page) #breadcrumbs > nav.grid > ol > li {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

body:has(.request-page) #breadcrumbs > nav.grid > ol > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

body:has(.request-page) #breadcrumbs > nav.grid > ol > li > a > span {
    min-width: 0;
}

/* The inherited footer needs real wrapping opportunities at narrow widths. */
@media (max-width: 480px) {
    body:has(.request-page) #FooterContent > .footer__sandBar > .grid > p:first-child {
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* Same footer fixes as the product page, for the request page. */
@media (max-width: 800px) {
    /* The legacy shortcut link has a fixed width smaller than enlarged text. */
    body:has(.request-page) #FooterContent > .grid:first-of-type > ul {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 7em), 1fr));
        gap: 16px;
    }

    body:has(.request-page) #FooterContent > .grid:first-of-type > ul > li {
        width: 100%;
        min-width: 0;
    }

    body:has(.request-page) #FooterContent > .grid:first-of-type > ul > li > a {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: calc(56px + 1.31979rem);
        padding-block: 10px;
    }

    body:has(.request-page) #FooterContent > .grid:first-of-type > ul > li > a > span {
        overflow-wrap: anywhere;
    }
}