/*
 * The v2 checkout — No Zebra's basket, Figma "D - Basket/With Product" (461:8634), empty (449:7445)
 * and mobile (449:7600) — plus the receipt and the pay-for-order page in the same parts.
 *
 * On top of room-v2.css (tokens, reset, buttons, header, room cards, footer). WooCommerce's own
 * stylesheets are not loaded on v2 pages, so the form controls start from nothing here.
 *
 * Colour follows the design manual (CVI) where it and the Figma differ: Spicy Paprika only for the
 * pay button and for errors, never for radios, links or icons — those are brass or the text colour;
 * no Soft Peach surface (the summary is Evergreen); amounts in Fraunces.
 */

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

.rh-co-hero {
    padding: 160px var(--rh-edge) 72px;
    background: var(--rh-obsidian);
    color: var(--rh-pergament);
}

.rh-co-title {
    font: 400 64px/1.1 var(--rh-serif);
}

.rh-co {
    padding: 64px var(--rh-edge) 136px;
    background: var(--rh-pergament);
}

.rh-co .woocommerce-notices-wrapper:empty,
.rh-co .rh-notices:empty {
    display: none;
}

.rh-co .woocommerce-error,
.rh-co .woocommerce-message,
.rh-co .woocommerce-info {
    margin: 0 0 24px;
    padding: 16px 24px;
    border-left: 4px solid var(--rh-brass);
    border-radius: 8px;
    background: var(--rh-pergament-tint);
    list-style: none;
}

.rh-co .woocommerce-error {
    border-left-color: var(--rh-paprika);
}

.rh-co .woocommerce-error li + li {
    margin-top: 6px;
}

.rh-co .woocommerce-message a,
.rh-co .woocommerce-info a,
.rh-co .woocommerce-error a {
    font-weight: 600;
    text-decoration-color: var(--rh-brass);
}

/* Links on the light surfaces: the text colour, underlined in brass. */
.rh-co-card a:not(.rh-btn),
.rh-co-privacy a {
    text-decoration-color: var(--rh-brass);
    text-underline-offset: 3px;
}

.rh-co :focus-visible {
    outline: 2px solid var(--rh-brass);
    outline-offset: 2px;
}

/* ---- Layout: the form on the left, the summary on the right ----------------------------------- */

.rh-co-form {
    margin: 0;
}

.rh-co-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 32px;
    align-items: start;
}

.rh-co-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

/* Smart Coupons' message box, printed empty when there is no message. */
.rh-co-main > .wc_coupon_message_wrap:has(.no_wc_coupon_message:empty) {
    display: none;
}

/* WooCommerce puts the errors of a placed order at the top of the form. */
.rh-co-form > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
}

/* An error's link (#billing_first_name: the input itself) lands the field mid-screen, not under the
   top edge. */
.rh-co-form :is(input, select, textarea) {
    scroll-margin-top: 40vh;
}

/* WooCommerce's "please wait" cover (blockUI) comes as a white box, set in inline style — hence the
   !important. Here it only stops the clicks; the page stays as it is. */
.rh-co .blockUI.blockOverlay {
    background: transparent !important;
}

/* ---- Cards: an Evergreen band with the title, the light body rising into it -------------------- */

.rh-co-card {
    border-radius: 8px;
    background: var(--rh-evergreen);
    overflow: hidden;
}

.rh-co-card-head {
    margin: 0;
    padding: 28px 64px 36px;
    font: 400 32px/1.2 var(--rh-serif);
    color: var(--rh-pergament);
}

.rh-co-card-body {
    position: relative;
    margin: -8px 0 0;
    padding: 40px 64px 48px;
    border-radius: 8px 8px 0 0;
    background: var(--rh-pergament-tint);
}

/* ---- Lines (basket, receipt, pay-for-order) --------------------------------------------------- */

.rh-co-lines {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
}

ul.rh-co-lines:not(.rh-co-card-body) {
    margin: 0;
    padding: 0;
}

.rh-co-line {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) auto;
    gap: 24px;
    padding: 24px;
    border-radius: 8px;
    background: var(--rh-pergament);
}

.rh-co-line:not(:has(.rh-co-line-img)) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.rh-co-line-img {
    width: 240px;
    height: 144px;
    border-radius: 4px;
    object-fit: cover;
}

.rh-co-line-name {
    margin-bottom: 12px;
    font: 400 32px/1.15 var(--rh-serif);
}

.rh-co-line-media {
    display: block;
}

.rh-co-line-name a {
    color: inherit;
    text-decoration: none;
}

.rh-co-line-name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--rh-brass);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* "Book flere tider" under the lines. Outlined in the text colour: paprika is the pay button's. */
.rh-co-more {
    margin-top: 24px;
    border-color: var(--rh-obsidian);
}

.rh-co-more:hover {
    background: var(--rh-obsidian);
}

.rh-co-line-meta {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

.rh-co-line-meta div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
}

.rh-co-line-meta dd {
    margin: 0;
    font-weight: 700;
}

.rh-co-line-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.rh-co-amount {
    font: 700 20px/1.2 var(--rh-display);
    white-space: nowrap;
}

.rh-co-remove {
    display: inline-flex;
    padding: 8px;
    margin: -8px;
    border-radius: 4px;
    color: var(--rh-obsidian);
    opacity: .65;
    transition: opacity .15s;
}

.rh-co-remove:hover {
    opacity: 1;
}

/* ---- Form controls ---------------------------------------------------------------------------- */

.rh-co-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.rh-co-form .form-row[hidden] {
    display: none;
}

.rh-co-form .form-row > label {
    font: 600 14px/1.3 var(--rh-sans);
}

.rh-co-form abbr.required,
.rh-co-form label .required {
    border: 0;
    text-decoration: none;
    color: inherit;
}

.rh-co-form .optional {
    font-weight: 400;
    font-size: 12px;
}

.rh-co-form .woocommerce-input-wrapper {
    display: block;
}

.rh-co-input,
.rh-co-form .input-text,
.rh-co-form textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--rh-pergament);
    font: 400 16px/1.3 var(--rh-sans);
    color: var(--rh-obsidian);
}

.rh-co-input::placeholder,
.rh-co-form .input-text::placeholder,
.rh-co-form textarea::placeholder {
    color: rgba(15, 19, 24, .45);
}

.rh-co-form .input-text:focus,
.rh-co-form textarea:focus,
.rh-co-input:focus {
    outline: 2px solid var(--rh-brass);
    outline-offset: 0;
}

.rh-co-form .woocommerce-invalid .input-text,
.rh-co-form .woocommerce-invalid textarea {
    border-color: var(--rh-paprika);
}

.rh-co-form .checkout-inline-error-message {
    margin: 0;
    font-size: 13px;
    color: #a93d1b;
}

/* Radios and the terms checkbox: brass, not paprika (design manual). */
.rh-co-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.rh-co-radio input[type="radio"],
.rh-co-form input[type="checkbox"] {
    flex: 0 0 auto;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--rh-brass);
    border-radius: 50%;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.rh-co-radio input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rh-brass);
    transform: scale(0);
    transition: transform .12s;
}

.rh-co-radio input[type="radio"]:checked::before {
    transform: scale(1);
}

.rh-co-form input[type="checkbox"] {
    border-radius: 4px;
}

.rh-co-form input[type="checkbox"]:checked {
    background: var(--rh-brass);
}

.rh-co-form input[type="checkbox"]:checked::before {
    content: "";
    width: 5px;
    height: 10px;
    margin-top: -2px;
    border: solid var(--rh-obsidian);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Personal details ------------------------------------------------------------------------- */

.rh-co-types {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

/* WooCommerce's order attribution: a custom element holding hidden inputs, not a grid cell. */
.rh-co-details > wc-order-attribution-inputs {
    display: none;
}

.rh-co-details {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px 24px;
}

.rh-co-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 24px;
    align-content: start;
}

/* The design's order — e-mail and phone first — whatever order the field editor keeps them in. */
.rh-co-fields > * {
    order: 10;
}

#billing_email_field {
    order: 1;
}

#billing_phone_field {
    order: 2;
}

#billing_first_name_field {
    order: 3;
}

#billing_last_name_field {
    order: 4;
}

#billing_organisation_field {
    grid-column: 1 / -1;
}

/* Optional in the field editor, required by the booking plugin for a company type — the only time
   they are shown. */
#billing_organisation_field .optional,
#billing_cvr_field .optional,
#billing_ean_nummer_field .optional,
#billing_ean_attn_field .optional {
    display: none;
}

#billing_organisation_field > label::after,
#billing_cvr_field > label::after,
#billing_ean_nummer_field > label::after,
#billing_ean_attn_field > label::after {
    content: "*";
}

.rh-co-notes,
.rh-co-notes .form-row,
.rh-co-notes .woocommerce-input-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.rh-co-notes textarea {
    flex: 1 1 auto;
    min-height: 120px;
    resize: none;
}

/* ---- Payment methods -------------------------------------------------------------------------- */

.rh-co-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-co-method-label {
    flex-wrap: wrap;
    font-weight: 700;
}

.rh-co-method-icon img {
    display: inline-block;
    height: 24px;
    width: auto;
    margin-right: 4px;
    vertical-align: middle;
}

/* OnPay's own stylesheet is not loaded on v2 pages; without it its card logos fill the column. */
.rh-co-method-box .onpay_card_logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.rh-co-method-box .onpay_card_logos > img {
    width: auto;
    height: 24px;
}

.rh-co-method-box {
    margin: 8px 0 0 30px;
    font-size: 14px;
    line-height: 1.4;
}

.rh-co-method-box p {
    margin: 0;
}

.rh-co-privacy {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.45;
}

.rh-co-privacy p {
    margin: 0;
}

/* ---- The summary: Evergreen, sticky beside the form ------------------------------------------- */

.rh-co-summary {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: 8px;
    background: var(--rh-evergreen);
    color: var(--rh-pergament);
}

.rh-co-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rh-co-summary-title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rh-brass);
    font: 400 32px/1.2 var(--rh-serif);
}

.rh-co-summary a:not(.rh-btn) {
    color: inherit;
    text-decoration-color: var(--rh-brass);
    text-underline-offset: 3px;
}

.rh-co-totals,
.rh-co-totals dl {
    margin: 0;
}

.rh-co-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
}

.rh-co-total-row dd {
    margin: 0;
    font: 700 16px/1.3 var(--rh-display);
    text-align: right;
}

.rh-co-total-row--total {
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rh-brass);
}

.rh-co-total-row--total dt {
    font-weight: 700;
    font-size: 18px;
}

.rh-co-total-row--total dd {
    font-size: 26px;
}

/* "(inkluderer 190,00 kr. Moms)" under the total. */
.rh-co-total-row .includes_tax,
.rh-co-total-row small {
    display: block;
    margin-top: 4px;
    font: 400 13px/1.3 var(--rh-sans);
    opacity: .85;
}

.rh-co-total-row .woocommerce-remove-coupon {
    margin-left: 8px;
    font: 400 13px/1.3 var(--rh-sans);
}

.rh-co-totals--light {
    margin-top: 24px;
}

/* The gift card: a quiet link, the field only when asked for. */
.rh-co-gift-toggle {
    padding: 0;
    border: 0;
    background: none;
    font: 400 15px/1.3 var(--rh-sans);
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--rh-brass);
    text-underline-offset: 3px;
    cursor: pointer;
}

.rh-co-gift-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.rh-co-gift-row .rh-co-input {
    flex: 1 1 auto;
    min-width: 0;
}

.rh-co-gift-row .rh-btn {
    padding: 10px 16px;
    border-color: var(--rh-pergament);
    cursor: pointer;
}

.rh-co-gift.is-busy {
    opacity: .6;
    pointer-events: none;
}

.rh-co-gift-error {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rh-paprika-light);
}

.rh-co-place {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 13px;
    line-height: 1.45;
}

.rh-co-place .woocommerce-terms-and-conditions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rh-co-place .form-row > .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}

/* The box is required either way; WooCommerce says so when it is not ticked. */
.rh-co-place .woocommerce-form__label-for-checkbox .required {
    display: none;
}

/* "Venligst læs og accepter betingelser…" sits on Evergreen, where the form's dark red is unreadable
   and full Paprika is only 3:1 — the light Paprika reads (6:1). */
.rh-co-form .rh-co-place .checkout-inline-error-message {
    color: var(--rh-paprika-light);
}

.rh-co-place .woocommerce-terms-and-conditions {
    max-height: 240px;
    padding: 12px;
    overflow: auto;
    border-radius: 4px;
    background: rgba(15, 19, 24, .25);
}

.rh-co-pay {
    width: 100%;
    padding: 14px 24px;
    cursor: pointer;
}

.rh-co-summary .woocommerce-checkout-review-order-table.processing,
.rh-co-summary.processing {
    opacity: .7;
}

/* ---- Empty basket ----------------------------------------------------------------------------- */

.rh-co-empty {
    max-width: calc(100% - 368px);
}

.rh-co-empty .rh-co-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* ---- Receipt ---------------------------------------------------------------------------------- */

.rh-co-receipt {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 880px;
}

.rh-co-receipt .rh-co-summary {
    position: relative;
    top: auto;
}

/* The brand's frame lines (design manual, "supergrafik"): a brass line into the logo in the corner,
   and down from it. */
.rh-co-frame {
    padding: 48px 120px 48px 48px;
    background: var(--rh-evergreen) url("img/logo.svg") no-repeat right 32px top 32px / 40px 40px;
}

.rh-co-frame::before,
.rh-co-frame::after {
    content: "";
    position: absolute;
    background: var(--rh-brass);
}

.rh-co-frame::before {
    top: 52px;
    right: 88px;
    width: min(30%, 200px);
    height: 1.5px;
}

.rh-co-frame::after {
    top: 88px;
    right: 52px;
    bottom: 48px;
    width: 1.5px;
}

.rh-co-frame .rh-co-summary-title {
    border-bottom: 0;
    padding-bottom: 0;
}

.rh-co-receipt-text {
    max-width: 52ch;
    font-size: 18px;
    line-height: 1.4;
}

.rh-co-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 0;
}

.rh-co-overview dt {
    font-size: 13px;
    opacity: .85;
}

.rh-co-overview dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rh-co-overview-total dd {
    font: 700 24px/1.2 var(--rh-display);
}

.rh-co-receipt-instructions:empty {
    display: none;
}

.rh-co-receipt-instructions {
    font-size: 16px;
    line-height: 1.5;
}

.rh-co-receipt-instructions p {
    margin: 0 0 12px;
}

.rh-co-actions {
    margin-top: 24px;
}

/* ---- Narrower screens ------------------------------------------------------------------------- */

@media (max-width: 1099px) {
    /* One column, and the summary split around the form (Baymard): the totals under the basket, so
       the price is known before the details are typed; the terms and the button last. The two
       columns step aside (display: contents) so their parts can be ordered as one list. */
    .rh-co-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .rh-co-grid > .rh-co-main,
    .rh-co-grid > .rh-co-summary {
        display: contents;
    }

    .rh-co-main > * {
        order: 3;
    }

    .rh-co-main > .rh-co-card:first-child {
        order: 1;
    }

    .rh-co-grid .rh-co-summary-totals {
        order: 2;
    }

    .rh-co-grid .rh-co-place {
        order: 4;
    }

    .rh-co-grid .rh-co-summary-totals,
    .rh-co-grid .rh-co-place {
        padding: 32px;
        border-radius: 8px;
        background: var(--rh-evergreen);
        color: var(--rh-pergament);
    }

    .rh-co-empty {
        max-width: none;
    }

    .rh-co-card-head {
        padding: 24px 32px 32px;
    }

    .rh-co-card-body {
        padding: 32px;
    }
}

@media (max-width: 767px) {
    .rh-co-hero {
        padding: 120px var(--rh-edge) 56px;
    }

    .rh-co-title {
        font-size: 48px;
    }

    .rh-co {
        padding: 32px var(--rh-edge) 96px;
    }

    .rh-co-main {
        gap: 24px;
    }

    .rh-co-card-head {
        padding: 20px 16px 28px;
        font-size: 28px;
    }

    .rh-co-card-body {
        padding: 24px 16px;
    }

    .rh-co-line {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .rh-co-line-img {
        width: 100%;
        height: 180px;
    }

    .rh-co-line-name {
        font-size: 28px;
    }

    .rh-co-line-meta {
        font-size: 16px;
    }

    .rh-co-line-side {
        flex-direction: row;
        align-items: center;
    }

    .rh-co-types {
        flex-direction: column;
    }

    .rh-co-details,
    .rh-co-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .rh-co-grid {
        gap: 24px;
    }

    .rh-co-summary,
    .rh-co-grid .rh-co-summary-totals,
    .rh-co-grid .rh-co-place {
        padding: 24px 16px;
    }

    .rh-co-frame {
        padding: 32px 72px 32px 16px;
        background-position: right 16px top 24px;
        background-size: 32px 32px;
    }

    .rh-co-frame::before {
        top: 40px;
        right: 60px;
    }

    .rh-co-frame::after {
        top: 68px;
        right: 32px;
    }

    .rh-co-overview {
        grid-template-columns: minmax(0, 1fr);
    }
}