/* Every colour here defers to the theme's own token and only falls back when the theme has
   none, so the configurator and the booking panel never drift from the shop around them. */
:root {
    --pc-gap: 16px;
    --pc-radius: var(--card-radius-md, 8px);
    --pc-border: var(--border, #e0e0e0);
    --pc-surface: var(--bg-secondary, #f6f8fa);
    --pc-surface-strong: var(--white, #ffffff);
    --pc-text: var(--text-primary, #1c1c1c);
    --pc-text-muted: var(--text-secondary, #6b7280);
    --pc-accent: var(--primary, #2f6f4e);
    --pc-accent-contrast: var(--white, #ffffff);
    --pc-danger: var(--error, #b3261e);
    --pc-field-height: 44px;
}

.pc-configurator {
    color: var(--pc-text);
    background: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: var(--pc-gap);
}

.pc-step {
    margin-bottom: var(--pc-gap);
}

.pc-step__title {
    font-weight: 600;
    margin-bottom: 8px;
}

.pc-step__subtitle {
    color: var(--pc-text-muted);
    margin-bottom: 12px;
}

/* The step strip speaks the same language as the buttons: square, uppercase, Manrope, the
   theme's own two greys. The rule under each step fills as you reach it, so the strip reads as
   progress rather than as a row of tabs. */
.pc-steps-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: var(--pc-gap);
}

.pc-steps-nav__item {
    position: relative;
    flex: 1 1 auto;
    padding: 12px 18px 14px;
    line-height: 1.2;
    font-family: var(--font-body, inherit);
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: start;
    color: var(--text-primary, #1a1a1a);
    background: var(--button-secondary-bg, #ece9e3);
    border: none;
    outline: none;
    cursor: pointer;
    transition: color .35s ease, background-color .35s ease;
}

.pc-steps-nav__item::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--button-primary-bg, #1a1a1a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s ease;
}

.pc-steps-nav__item:hover,
.pc-steps-nav__item:focus-visible {
    color: var(--primary, #1a1a1a);
    background: var(--button-secondary-bg, #ece9e3);
}

.pc-steps-nav__item.is-active {
    color: var(--white, #fff);
    background: var(--button-primary-bg, #1a1a1a);
}

.pc-steps-nav__item.is-active::after,
.pc-steps-nav__item.is-complete::after {
    transform: scaleX(1);
}

.pc-steps-nav__index {
    opacity: .55;
}

.pc-steps-nav__item.is-active .pc-steps-nav__index {
    opacity: .7;
}

@media (max-width: 575.98px) {
    .pc-steps-nav__item {
        flex: 1 1 100%;
    }
}

.pc-fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--pc-gap);
}

.pc-field {
    grid-column: span 12;
}

.pc-field--half {
    grid-column: span 6;
}

.pc-field--third {
    grid-column: span 4;
}

.pc-field__label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
}

.pc-field__required {
    color: var(--pc-danger);
    margin-inline-start: 2px;
}

.pc-field__help {
    color: var(--pc-text-muted);
    font-size: 0.875em;
    margin-top: 4px;
}

.pc-field__error {
    color: var(--pc-danger);
    font-size: 0.875em;
    margin-top: 4px;
}

.pc-input-group {
    display: flex;
    align-items: stretch;
}

.pc-input-group input {
    flex: 1 1 auto;
    height: var(--pc-field-height);
    border: 1px solid var(--pc-border);
    border-radius: 0;
    border-start-start-radius: var(--pc-radius);
    border-end-start-radius: var(--pc-radius);
    padding: 0 12px;
    min-width: 0;
}

.pc-input-group__unit {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--pc-border);
    border-inline-start: 0;
    border-radius: 0;
    border-start-end-radius: var(--pc-radius);
    border-end-end-radius: var(--pc-radius);
    background: var(--pc-surface);
    color: var(--pc-text-muted);
    white-space: nowrap;
}

.pc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pc-swatch {
    width: 44px;
    height: 44px;
    border-radius: var(--pc-radius);
    border: 2px solid var(--pc-border);
    cursor: pointer;
    background-size: cover;
    background-position: center;
}

.pc-swatch.is-selected {
    border-color: var(--pc-accent);
}

.pc-summary {
    background: var(--pc-surface-strong);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 12px 14px;
    margin-top: var(--pc-gap);
}

.pc-breakdown {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--pc-border);
}

.pc-breakdown:empty {
    border-bottom: 0;
    padding-bottom: 0;
}

.pc-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.pc-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: var(--pc-gap);
}

.pc-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.pc-captcha {
    margin-block: 12px;
}

.pc-captcha:empty {
    margin-block: 0;
}

.quote-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: #6c757d;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.quote-status.offered {
    background-color: #4b7bbf;
}

.quote-status.accepted,
.quote-status.ordercreated {
    background-color: #4a7c59;
}

.quote-status.rejected,
.quote-status.expired,
.quote-status.cancelled {
    background-color: #bf4b4b;
}

.quote-config {
    color: var(--pc-text-muted);
    font-size: .9em;
    white-space: pre-line;
}

.pc-total__value {
    font-size: 24px;
    font-weight: 700;
}

.pc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--pc-gap);
}

.pc-is-busy {
    opacity: 0.6;
    pointer-events: none;
}

.pc-hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .pc-field--half,
    .pc-field--third {
        grid-column: span 12;
    }
}

.pc-rate-tables {
    margin-top: var(--pc-gap);
}

.pc-rate-table__name {
    font-weight: 700;
    margin-bottom: 8px;
}

/* a wide grid scrolls inside itself rather than pushing the product page sideways */
.pc-rate-table__scroll {
    overflow-x: auto;
}

.pc-rate-table table {
    width: 100%;
    border-collapse: collapse;
}

.pc-rate-table th,
.pc-rate-table td {
    padding: 6px 10px;
    border: 1px solid var(--pc-border);
    text-align: center;
    white-space: nowrap;
}

.pc-rate-table thead th,
.pc-rate-table tbody th {
    background-color: rgba(0, 0, 0, .03);
    font-weight: 600;
}

.pc-leadtime {
    margin-top: 8px;
    color: var(--pc-text-muted);
    font-size: .9em;
}

.pc-appointment {
    margin-top: var(--pc-gap);
    padding: 16px;
    background: var(--pc-surface);
    color: var(--pc-text);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
}

.pc-appointment__title {
    margin: 0 0 12px;
}

.pc-appointment__field {
    margin-bottom: 12px;
}

.pc-appointment__field label {
    display: block;
    margin-bottom: 4px;
}

.pc-appointment__field input,
.pc-appointment__field select,
.pc-appointment__field textarea {
    width: 100%;
    background: var(--pc-surface-strong);
    color: var(--pc-text);
    border: 1px solid var(--pc-border);
}

.pc-appointment__zone {
    margin-bottom: 10px;
    color: var(--pc-text-muted);
    font-size: .9em;
}

.pc-week {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 14px;
}

/* the theme paints bare buttons on its own terms, so every state is stated here instead of
   inherited - a selected slot that borrows the theme's focus colour goes invisible */
.pc-week__step,
.pc-day,
.pc-slot {
    background: var(--pc-surface-strong);
    color: var(--pc-text);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pc-week__step:hover:not([disabled]),
.pc-day:hover:not([disabled]),
.pc-slot:hover {
    border-color: var(--pc-accent);
    color: var(--pc-text);
}

.pc-week__step {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 1.2em;
    line-height: 1;
}

.pc-week__step[disabled] {
    opacity: .35;
    cursor: default;
}

.pc-week__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.pc-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
}

.pc-day__name {
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pc-text-muted);
}

.pc-day__number {
    font-weight: 600;
}

.pc-day--closed,
.pc-day--closed:hover {
    opacity: .4;
    cursor: default;
    border-color: var(--pc-border);
}

.pc-day--selected,
.pc-day--selected:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-accent-contrast);
}

.pc-day--selected .pc-day__name {
    color: var(--pc-accent-contrast);
    opacity: .75;
}

.pc-slot-part {
    margin-bottom: 12px;
}

.pc-slot-part__name {
    margin-bottom: 6px;
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pc-text-muted);
}

.pc-slot-part__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pc-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 12px;
}

.pc-slot__meta {
    font-size: .75em;
    color: var(--pc-text-muted);
}

.pc-slot__meta--left {
    color: var(--pc-danger);
}

.pc-slot--selected,
.pc-slot--selected:hover {
    background: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-accent-contrast);
    font-weight: 600;
}

/* on the accent the muted greys would vanish, so both captions ride the contrast colour */
.pc-slot--selected .pc-slot__meta,
.pc-slot--selected .pc-slot__meta--left {
    color: var(--pc-accent-contrast);
    opacity: .8;
}

.pc-appointment__picker[aria-busy="true"] {
    opacity: .5;
}

.pc-appointment__error,
.pc-appointment__notice {
    margin: 8px 0;
    color: var(--pc-danger);
}

.pc-appointment__empty {
    color: var(--pc-text-muted);
}

.pc-appointment-panels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pc-gap);
}

.pc-appointment-panel {
    flex: 1 1 240px;
    min-width: 0;
}

.pc-appointment-page .info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pc-appointment-message {
    color: var(--pc-text-muted);
}

.pc-appointment__form {
    margin-bottom: var(--pc-gap);
}

.pc-appointment-answers__label {
    display: inline-block;
    min-width: 140px;
    color: var(--pc-text-muted);
}

.pc-appointment-answers .info li,
.pc-appointment-notes .info li {
    margin-bottom: 4px;
}

.pc-appointment-notes__date {
    display: inline-block;
    min-width: 140px;
    color: var(--pc-text-muted);
}

/* the theme packs the order grid tight; a booking row needs room before its button */
.html-appointment-list-page .order-item .buttons {
    margin-top: 12px;
}

.pc-appointment-page .quote-status,
.html-appointment-list-page .quote-status {
    display: inline-block;
    padding: 2px 8px;
    background: var(--pc-text-muted);
    color: var(--pc-accent-contrast);
    border-radius: var(--pc-radius);
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pc-appointment-page .quote-status.confirmed,
.html-appointment-list-page .quote-status.confirmed {
    background: var(--success, #4a7c59);
}

.pc-appointment-page .quote-status.cancelled,
.pc-appointment-page .quote-status.noshow,
.html-appointment-list-page .quote-status.cancelled,
.html-appointment-list-page .quote-status.noshow {
    background: var(--pc-danger);
}

.pc-configurable-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pc-quantity {
    margin-top: 4px;
    color: var(--pc-text-muted);
    font-size: .9em;
    text-align: end;
}

/* --- Buttons -------------------------------------------------------------
   Lifted from NopFurniture's own product-box add-to-cart button so every
   configurator button matches the shop's: uppercase 13px Manrope at 0.08em,
   14px/32px, and a panel that wipes up from the bottom on hover while the
   label crossfades. The theme's tokens drive it, with its literal values as
   fallbacks so the same design holds on a theme that does not define them.

   pc-button and pc-button--secondary are alternatives, never used together. */
.pc-button,
.pc-button--secondary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-block;
    padding: 14px 32px;
    line-height: 1.2;
    font-family: var(--font-body, inherit);
    font-size: 13px;
    font-weight: var(--fw-semibold, 600);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-base, 0);
    outline: none;
    cursor: pointer;
    transition: color .35s ease, background-color 0s;
}

.pc-button {
    color: var(--white, #fff);
    background-color: var(--button-primary-bg, #1a1a1a);
}

.pc-button--secondary {
    color: var(--text-primary, #1a1a1a);
    background-color: var(--button-secondary-bg, #ece9e3);
}

.pc-button::before,
.pc-button--secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    transform: translateY(100%);
    transition: transform .4s ease;
}

.pc-button::before {
    background-color: var(--button-secondary-bg, #ece9e3);
}

.pc-button--secondary::before {
    background-color: var(--primary, #1a1a1a);
}

.pc-button:hover,
.pc-button:focus-visible {
    color: var(--primary, #1a1a1a);
    background-color: var(--button-secondary-bg, #ece9e3);
    transition: color .35s ease, background-color 0s linear .4s;
}

.pc-button--secondary:hover,
.pc-button--secondary:focus-visible {
    color: var(--white, #fff);
    background-color: var(--primary, #1a1a1a);
    transition: color .35s ease, background-color 0s linear .4s;
}

.pc-button:hover::before,
.pc-button:focus-visible::before,
.pc-button--secondary:hover::before,
.pc-button--secondary:focus-visible::before {
    transform: translateY(0);
}

.pc-button[disabled],
.pc-button--secondary[disabled] {
    opacity: .5;
    pointer-events: none;
}

/* The catalogue tile runs a smaller variant of the same button - NopFurniture overrides the
   page padding and size for it, and so do we, with the theme's own numbers. Carried on the
   plugin's class rather than left to the theme's `.item-box .product-item .buttons` chain, so
   the tile looks right wherever the widget zone puts it. */
.pc-button--compact {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    padding: 9px 20px;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .pc-button,
    .pc-button--secondary,
    .pc-button::before,
    .pc-button--secondary::before {
        transition: none;
    }
}

[dir="rtl"] .pc-steps-nav__item::after {
    transform-origin: right center;
}

.pc-configurator [hidden],
.pc-appointment [hidden],
.pc-enquiry [hidden] {
    display: none !important;
}

.pc-launcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-launcher__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.pc-launcher__label {
    color: var(--pc-text-muted);
}

.pc-launcher__total {
    font-size: 20px;
    font-weight: 700;
}

.pc-configurator--popup.pc-is-busy {
    opacity: 1;
    pointer-events: auto;
}

.pc-configurator--popup.pc-is-busy .pc-summary,
.pc-configurator--popup.pc-is-busy .pc-launcher__summary {
    opacity: .6;
}

.pc-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

.pc-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    background: var(--pc-surface-strong);
    color: var(--pc-text);
    border-radius: var(--pc-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.pc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pc-border);
}

.pc-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.pc-modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--pc-border);
    border-radius: 50%;
    background: var(--pc-surface-strong);
    color: var(--pc-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pc-modal__close:hover,
.pc-modal__close:focus-visible {
    background: var(--pc-danger);
    border-color: var(--pc-danger);
    color: var(--pc-accent-contrast);
}

.pc-modal__body {
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pc-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--pc-border);
}

.pc-modal--page {
    padding: 0;
}

.pc-modal--page .pc-modal__panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

.pc-modal--page .pc-modal__body {
    flex: 1 1 auto;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}

html.pc-modal-open,
html.pc-modal-open body {
    overflow: hidden;
}

@media (max-width: 768px) {
    .pc-modal {
        padding: 0;
    }

    .pc-modal__panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

.pc-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-upload__file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--pc-surface-strong);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
}

.pc-upload__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-upload__remove {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pc-danger);
    text-decoration: underline;
    cursor: pointer;
}

.pc-upload__status {
    color: var(--pc-text-muted);
    font-size: .875em;
}

.pc-upload--busy {
    opacity: .6;
    pointer-events: none;
}

.pc-field__warning {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: .875em;
    color: var(--pc-text);
    background: var(--warning-bg, #fff4e5);
    border-inline-start: 3px solid var(--warning, #c77700);
    border-radius: var(--pc-radius);
}

.pc-repeater,
.pc-repeater__rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-repeater__row {
    padding: 12px;
    background: var(--pc-surface-strong);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
}

.pc-repeater__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pc-repeater__title {
    font-weight: 600;
}

.pc-repeater__remove {
    padding: 0;
    background: none;
    border: 0;
    color: var(--pc-danger);
    text-decoration: underline;
    cursor: pointer;
}

.pc-repeater__remove[disabled] {
    opacity: .4;
    cursor: default;
}

.pc-repeater__add {
    align-self: flex-start;
}

.pc-enquiry {
    max-width: 880px;
    margin-inline: auto;
}

.pc-enquiry__intro {
    color: var(--pc-text-muted);
    margin-bottom: var(--pc-gap);
}

.pc-enquiry__contact {
    margin-bottom: var(--pc-gap);
}

.pc-enquiry__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--pc-gap);
}

.pc-enquiry__error {
    margin: 8px 0;
    color: var(--pc-danger);
}

.pc-rate-table__layer {
    margin-top: 12px;
}

.pc-rate-table__layer-name {
    margin-bottom: 6px;
    color: var(--pc-text-muted);
    font-size: .9em;
}