/* ==========================================================================
   NB Natuursteen Configurator — Alpine.js rebuild
   Mobile-first. Uses theme design tokens (var(--*)).
   ========================================================================== */

/* Hide elements until Alpine has initialized to prevent FOUC */
[x-cloak] {
    display: none !important;
}

/* ─── Container ─────────────────────────────────────────────────────────── */
.nb-nsc-configurator {
    position: relative;
    margin: 0 auto var(--space-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
}

/* ─── Loading overlay ───────────────────────────────────────────────────── */
.nb-nsc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm, 8px);
    z-index: 10;
    pointer-events: none;
    border-radius: var(--radius-md, 8px);
}

.nb-nsc-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border, #e0e0e0);
    border-top-color: var(--color-primary, #1a1a1a);
    border-radius: 50%;
    animation: nb-nsc-spin 0.8s linear infinite;
}

@keyframes nb-nsc-spin {
    to { transform: rotate(360deg); }
}

.nb-nsc-overlay__label {
    color: var(--color-text, #333);
    font-size: var(--text-sm, 0.875rem);
}

/* ─── Stages ────────────────────────────────────────────────────────────── */
.nb-nsc-stage {
    padding: var(--space-md, 16px);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    background: var(--color-stage-bg, #f4f4f4);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
}

.nb-nsc-stage__header {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nb-nsc-stage__heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #333);
}

.nb-nsc-stage__description {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
}

/* ─── Material notice (multi-part / safety) ───────────────────────────── */
.nb-nsc-configurator .nb-nsc-material-notice {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    background: #e8f4fd;
    border: 1px solid #b3d9f2;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: #1a5276;
}

.nb-nsc-configurator .nb-nsc-material-notice svg {
    flex-shrink: 0;
}

/* ─── Tolerantie notice ────────────────────────────────────────────────── */
.nb-nsc-configurator .nb-nsc-tolerantie-notice {
    padding: 10px 12px 10px 36px;
    font-size: 0.8125rem;
    color: #555;
    line-height: 1.5;
    background: #ebebeb;
    border-radius: var(--radius-md, 6px);
    position: relative;
}

.nb-nsc-configurator .nb-nsc-tolerantie-notice::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 11px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='160' width='160' version='1.0'%3E%3Cg fill='%234b4b4b'%3E%3Cpath d='m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z'/%3E%3Cpath d='m57.373 18.231a9.3834 9.1153 0 1 1-18.767 0 9.3834 9.1153 0 1 1 18.767 0z' transform='matrix(1.1989 0 0 1.2342 21.214 28.75)'/%3E%3Cpath d='m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.nb-nsc-configurator .nb-nsc-tippy-link {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: help;
    color: var(--color-text, #333);
    font-weight: 500;
}

/* ─── Tippy popover styling ────────────────────────────────────────────── */
.tippy-box {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 320px;
}

.tippy-box p {
    margin: 0;
}

/* ─── Dimensions ────────────────────────────────────────────────────────── */
.nb-nsc-dimensions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm, 12px);
}

@media (min-width: 640px) {
    .nb-nsc-dimensions {
        grid-template-columns: 2fr 2fr 1fr;
    }
}

.nb-nsc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nb-nsc-field label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text, #333);
}

.nb-nsc-dimensions > .nb-nsc-field {
    gap: 4px;
}

.nb-nsc-dimensions > .nb-nsc-field .nb-nsc-input-wrap,
.nb-nsc-dimensions > .nb-nsc-field select,
.nb-nsc-dimensions > .nb-nsc-field .nb-nsc-disabled-wrap {
    margin-top: auto;
}

.nb-nsc-field__hints {
    font-size: 0.8rem;
    font-weight: 400;
    color: #ccc;
    margin: 1px 0 2px;
    line-height: 1.4;
}

.nb-nsc-field__hints-label {
    color: #999;
    font-weight: 600;
}

.nb-nsc-field__hint-value {
    color: #999;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.nb-nsc-field__hint-value:hover {
    color: #666;
}

.nb-nsc-configurator .nb-nsc-field input[type="number"],
.nb-nsc-configurator .nb-nsc-field select {
    width: 100%;
    padding: 12px;
    font-size: var(--text-base, 1rem);
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--radius-md, 6px);
    background: var(--color-surface, #fff);
    color: var(--color-text, #333);
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px; /* WCAG touch target */
    box-sizing: border-box;
    line-height: normal;
}

.nb-nsc-configurator .nb-nsc-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.nb-nsc-configurator .nb-nsc-field input[type="number"]:focus,
.nb-nsc-configurator .nb-nsc-field select:focus {
    outline: 2px solid var(--color-primary, #1a1a1a);
    outline-offset: 1px;
}

/* Hide spinner buttons on number inputs */
.nb-nsc-configurator .nb-nsc-field input[type="number"]::-webkit-outer-spin-button,
.nb-nsc-configurator .nb-nsc-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.nb-nsc-configurator .nb-nsc-field input[type="number"] {
    -moz-appearance: textfield;
}

/* ─── Neuten inputs ────────────────────────────────────────────────────── */
.nb-nsc-neuten {
    margin-top: var(--space-xs, 4px);
}

.nb-nsc-neuten__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm, 12px);
}

.nb-nsc-neuten .nb-nsc-field__subtitle {
    font-size: 0.75rem;
    color: #888;
    font-weight: 400;
}

.nb-nsc-neuten__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nb-nsc-neuten__info {
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

.nb-nsc-neuten__info:hover {
    color: var(--color-primary, #1a1a1a);
}

.nb-nsc-neuten__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--color-text, #333);
    cursor: pointer;
}

.nb-nsc-neuten__checkbox input[type="checkbox"] {
    margin: 0;
}


.nb-nsc-configurator .nb-nsc-disabled-wrap {
    margin-top: auto;
}

.nb-nsc-configurator .nb-nsc-input--disabled {
    width: 100%;
    padding: 12px;
    font-size: var(--text-base, 1rem);
    line-height: normal;
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-md, 6px);
    background: #e8e8e8;
    color: var(--color-text-muted, #555);
    min-height: 44px;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* ─── Errors ────────────────────────────────────────────────────────────── */
.nb-nsc-errors {
    padding: 10px 12px 10px 36px;
    background: var(--color-danger-bg, #fee);
    border: 1px solid var(--color-danger, #c33);
    border-radius: var(--radius-md, 6px);
    color: var(--color-danger, #c33);
    font-size: 0.8125rem;
    position: relative;
}

.nb-nsc-errors::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 16px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg width='94' height='79' viewBox='0 0 94 79' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.2466 78.4881H11.5276C7.26203 78.4881 3.49643 76.2537 1.44163 72.5193C-0.609174 68.781-0.464573 64.406 1.82835 60.8083L37.1873 5.3203C39.3084 1.9883 42.9373 0 46.8865 0C50.8357 0 54.4646 1.9883 56.5857 5.3203L91.9447 60.8083C94.2338 64.4021 94.3822 68.781 92.3315 72.5193C90.2807 76.2576 86.5112 78.4881 82.2455 78.4881H82.2466ZM46.8876 6.2501C45.0595 6.2501 43.4423 7.13682 42.4579 8.6798L7.09893 64.1678C6.05203 65.8084 5.98953 67.8045 6.92315 69.5116C7.86065 71.2186 9.57935 72.2382 11.5247 72.2382H82.2477C84.193 72.2382 85.9157 71.2187 86.8493 69.5116C87.7868 67.8046 87.7204 65.8085 86.6736 64.1678L51.3186 8.6798C50.3342 7.1368 48.7209 6.2501 46.8889 6.2501H46.8876Z' fill='%23c33'/%3E%3Cpath d='M46.8876 54.3481C45.161 54.3481 43.7626 52.9497 43.7626 51.2231V25.9221C43.7626 24.1955 45.161 22.7971 46.8876 22.7971C48.6142 22.7971 50.0126 24.1955 50.0126 25.9221V51.2231C50.0126 52.9497 48.6142 54.3481 46.8876 54.3481Z' fill='%23c33'/%3E%3Cpath d='M50.0126 59.6172C50.0126 63.7852 43.7626 63.7852 43.7626 59.6172C43.7626 55.4531 50.0126 55.4531 50.0126 59.6172Z' fill='%23c33'/%3E%3C/svg%3E") no-repeat center / contain;
}

.nb-nsc-errors ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.nb-nsc-errors li + li {
    margin-top: 4px;
}

/* ─── Option cards (cutting + finishing) ───────────────────────────────── */
.nb-nsc-configurator .nb-nsc-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm, 12px);
}

@media (min-width: 640px) {
    .nb-nsc-configurator .nb-nsc-options {
        grid-template-columns: repeat(3, 1fr);
    }

    .nb-nsc-configurator .nb-nsc-stage--finishing .nb-nsc-options,
    .nb-nsc-configurator .nb-nsc-stage--waterhol .nb-nsc-options {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.nb-nsc-configurator .nb-nsc-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-md, 16px) var(--space-sm, 12px);
    background: #fff;
    border: 2px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    min-height: 100px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #333);
}

.nb-nsc-configurator .nb-nsc-option-card:hover {
    border-color: var(--color-primary, #1a1a1a);
}

.nb-nsc-configurator .nb-nsc-option-card:focus-visible {
    outline: 2px solid var(--color-primary, #1a1a1a);
    outline-offset: 2px;
}

.nb-nsc-configurator .nb-nsc-option-card.is-selected {
    border-color: var(--color-primary, #1a1a1a);
}

.nb-nsc-configurator .nb-nsc-option-card:active {
    transform: scale(0.98);
}

.nb-nsc-configurator .nb-nsc-option-card .nb-nsc-option-card__thumb {
    max-width: 140px;
    height: auto;
    display: block;
}

.nb-nsc-configurator .nb-nsc-option-card .nb-nsc-option-card__label {
    display: block;
    width: 100%;
    font-weight: 600;
    color: var(--color-text, #333);
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: visible;
    line-height: 1.3;
}

.nb-nsc-configurator .nb-nsc-option-card .nb-nsc-option-card__description {
    display: block;
    width: 100%;
    color: var(--color-text-muted, #666);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.3;
    white-space: normal;
    text-align: center;
}

/* ─── Corner fields ─────────────────────────────────────────────────────── */
.nb-nsc-corner-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm, 12px);
}

@media (min-width: 640px) {
    .nb-nsc-corner-fields {
        grid-template-columns: repeat(4, 1fr);
    }
}

.nb-nsc-configurator .nb-nsc-field--corner label {
    letter-spacing: 0.05em;
    font-weight: 600;
    display: block;
}

/* ─── Input wrap with checkmark ─────────────────────────────────────────── */
.nb-nsc-configurator .nb-nsc-input-wrap,
.nb-nsc-configurator .nb-nsc-corner-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nb-nsc-configurator .nb-nsc-input-wrap input,
.nb-nsc-configurator .nb-nsc-corner-input-wrap input {
    width: 100%;
    padding-right: 36px;
}

.nb-nsc-configurator .nb-nsc-input-check,
.nb-nsc-configurator .nb-nsc-corner-check {
    position: absolute;
    right: 10px;
    pointer-events: none;
    flex-shrink: 0;
}

.nb-nsc-configurator .nb-nsc-field.is-invalid input,
.nb-nsc-configurator .nb-nsc-field--corner.is-invalid input {
    border-color: var(--color-danger, #c33);
}

/* No green border on valid — just the checkmark */

.nb-nsc-configurator .nb-nsc-corner-notice {
    margin-top: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 12px);
    background: var(--color-danger-bg, #fee);
    border: 1px solid var(--color-danger, #c33);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    color: var(--color-danger, #c33);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.4;
}

/* ─── Pricing summary ───────────────────────────────────────────────────── */
.nb-nsc-summary {
    padding: var(--space-md, 16px);
    background: var(--color-stage-bg, #f4f4f4);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
}

.nb-nsc-summary__product-name {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-text, #333);
}

.nb-nsc-summary__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nb-nsc-badge {
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    padding: 2px 8px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text, #333);
    white-space: nowrap;
}

.nb-nsc-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--space-sm, 8px);
    border-top: 1px solid var(--color-border, #e0e0e0);
    font-size: var(--text-lg, 1.25rem);
    font-weight: 700;
}

.nb-nsc-summary__vat {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 400;
    color: var(--color-text-muted, #666);
    margin-left: 4px;
}

/* ─── Price build-up (admin sanity check) ───────────────────────────────── */
.nb-nsc-build-up {
    border: 1px dashed var(--color-border, #c0c0c0);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-sm, 12px);
    background: #fafbfc;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #333);
}

.nb-nsc-build-up__heading {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-muted, #555);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs, 0.75rem);
    padding: 4px 0;
}

.nb-nsc-build-up__user-type {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #666);
    margin: var(--space-sm, 8px) 0;
}

.nb-nsc-build-up__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-variant-numeric: tabular-nums;
}

.nb-nsc-build-up__table th,
.nb-nsc-build-up__table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #eaeaea);
    vertical-align: top;
}

.nb-nsc-build-up__table thead th {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #666);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--color-border, #d0d0d0);
}

.nb-nsc-build-up__col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nb-nsc-build-up__row-label {
    font-weight: 600;
    color: var(--color-text, #333);
}

.nb-nsc-build-up__col-net {
    font-weight: 700;
    color: var(--color-primary, #1a1a1a);
}

.nb-nsc-build-up__lines {
    list-style: none;
    margin: 4px 0 0 0;
    padding: 0;
    font-weight: 400;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #666);
}

.nb-nsc-build-up__lines li + li {
    margin-top: 2px;
}

.nb-nsc-build-up__line-price {
    color: var(--color-text-muted, #888);
    font-style: italic;
}

.nb-nsc-build-up__table tfoot th,
.nb-nsc-build-up__table tfoot td {
    border-top: 2px solid var(--color-border, #d0d0d0);
    border-bottom: none;
    font-weight: 700;
    padding-top: 10px;
}

@media (max-width: 640px) {
    .nb-nsc-build-up {
        overflow-x: auto;
    }
    .nb-nsc-build-up__table {
        min-width: 560px;
    }
}