/* Museum Configurator Swatches — Premium Museum Style */

/* ===== Variables ===== */
.mc-swatches,
.mc-tooltip {
    --mc-gold: var(--gold, #c8a96b);
    --mc-gold-hover: var(--gold-hover, #f4e4b8);
    --mc-bg: var(--bg, #111111);
    --mc-text: var(--text, #d9d9d9);
    --mc-radius: var(--radius, 10px);
    --mc-border: rgba(200, 169, 107, .28);
    --mc-border-strong: rgba(244, 228, 184, .58);
    --mc-muted: rgba(217, 217, 217, .68);
    --mc-glow: 0 0 18px rgba(200, 169, 107, .28);
    --mc-transition: 220ms ease;
}

/* ===== Layout ===== */
.mc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}

.mc-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 42%),
        rgba(17, 17, 17, .74);
    color: var(--mc-text);
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    transition: border-color var(--mc-transition), background var(--mc-transition), box-shadow var(--mc-transition), transform var(--mc-transition), opacity var(--mc-transition);
}
.mc-swatch.mc-button--active {
    border-color: var(--mc-gold-hover);
    background: var(--mc-gold);
    color: var(--bg);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.mc-swatch.mc-button--active:hover{
    background: var(--mc-gold-hover);
}
.mc-swatch.mc-button--active .mc-swatch__btn{
    color: var(--bg) !important;
}
.mc-swatch:hover {
    /*transform: translateY(-1px);*/
    border-color: var(--mc-border-strong);
    background: rgba(200, 169, 107, .09);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.mc-swatch input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* ===== Swatch parts ===== */
.mc-swatch--radio .mc-swatch__dot,
.mc-swatch--color .mc-swatch__color,
.mc-swatch--image .mc-swatch__img {
    display: inline-block;
}

.mc-swatch--radio {
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    width: 100%;
    justify-content: flex-start;
}

.mc-swatch--radio .mc-swatch__dot {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(244, 228, 184, .42);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    opacity: 1;
    transition: background var(--mc-transition), border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.mc-swatch--color .mc-swatch__color {
    border: 1px solid rgba(244, 228, 184, .35);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28);
}

.mc-swatch--color .mc-swatch__color--transparent {
    background-color: transparent !important;
    background-image:
        linear-gradient(45deg, rgba(217, 217, 217, .28) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(217, 217, 217, .28) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(217, 217, 217, .28) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(217, 217, 217, .28) 75%) !important;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0 !important;
    background-size: 12px 12px !important;
}

.mc-swatches--radio{
    flex-direction: column;
    align-items: flex-start;
}

.mc-swatches--color[data-swatch-shape="circle"] .mc-swatch__color,
.mc-swatches--image[data-swatch-shape="circle"] .mc-swatch__img,
.mc-swatches--image[data-swatch-shape="circle"] .mc-swatch__placeholder {
    border-radius: 50%;
}

.mc-swatches--color[data-swatch-shape="square"] .mc-swatch__color,
.mc-swatches--image[data-swatch-shape="square"] .mc-swatch__img,
.mc-swatches--image[data-swatch-shape="square"] .mc-swatch__placeholder {
    border-radius: 0;
}

.mc-swatches--color[data-swatch-shape="rounded"] .mc-swatch__color,
.mc-swatches--image[data-swatch-shape="rounded"] .mc-swatch__img,
.mc-swatches--image[data-swatch-shape="rounded"] .mc-swatch__placeholder {
    border-radius: calc(var(--mc-radius) - -2px);
}

.mc-swatches--image[data-swatch-shape="circle"] .mc-swatch--image {
    border-radius: 50%;
}

.mc-swatches--image[data-swatch-shape="square"] .mc-swatch--image {
    border-radius: 0;
}

.mc-swatches--image[data-swatch-shape="rounded"] .mc-swatch--image {
    border-radius: var(--mc-radius);
}

.mc-swatch__img {
    border: 1px solid rgba(244, 228, 184, .24);
    border-radius: calc(var(--mc-radius) - 2px);
    object-fit: cover;
}

.mc-swatch__placeholder {
    display: inline-block;
    border: 1px dashed rgba(244, 228, 184, .34);
    border-radius: calc(var(--mc-radius) - 2px);
    background: rgba(255, 255, 255, .045);
}

.mc-swatch__label {
    display: block;
    color: var(--mc-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    /*white-space: nowrap;*/
}

.mc-swatch--button .mc-swatch__btn {
    display: inline-block;
    padding: 3px 9px;
    /*border: 1px solid var(--mc-border);*/
    border-radius:var(--mc-radius);
    /*background: rgba(255, 255, 255, .035);*/
    color: var(--mc-text);
    font-size: 13px;
    transition: border-color var(--mc-transition), background var(--mc-transition), box-shadow var(--mc-transition), color var(--mc-transition);
}

/* Button shape follows the same component-level contract as image/color swatches. */
.mc-swatches--button[data-swatch-shape="circle"] .mc-swatch--button {
    border-radius: 999px;
}

.mc-swatches--button[data-swatch-shape="square"] .mc-swatch--button {
    border-radius: 0;
}

.mc-swatches--button[data-swatch-shape="rounded"] .mc-swatch--button {
    border-radius: var(--mc-radius);
}

.mc-swatches--button .mc-swatch--button {
    min-width: var(--mc-swatch-size, 32px);
    min-height: var(--mc-swatch-size, 32px);
    padding-right: max(10px, calc(var(--mc-swatch-size, 32px) * .42));
    padding-left: max(10px, calc(var(--mc-swatch-size, 32px) * .42));
}

.mc-swatches--radio:not(.mc-swatches--plaque-cards) .mc-swatch__dot {
    width: clamp(16px, calc(var(--mc-swatch-size, 32px) * .55), 30px);
    height: clamp(16px, calc(var(--mc-swatch-size, 32px) * .55), 30px);
}

.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="circle"] .mc-swatch--radio,
.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="circle"] .mc-swatch__dot {
    border-radius: 999px;
}

.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="square"] .mc-swatch--radio,
.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="square"] .mc-swatch__dot {
    border-radius: 0;
}

.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="rounded"] .mc-swatch--radio,
.mc-swatches--radio:not(.mc-swatches--plaque-cards)[data-swatch-shape="rounded"] .mc-swatch__dot {
    border-radius: var(--mc-radius);
}

/* ===== Active / Focus ===== */
.mc-swatch input + img{
    /*filter: grayscale(1);*/
}
.mc-swatch input:checked + .mc-swatch__dot,
.mc-swatch input:checked + .mc-swatch__color,
/*.mc-swatch input:checked + img,*/
.mc-swatch input:checked + .mc-swatch__placeholder,
.mc-swatch.selected,
.mc-swatch input:checked + span {
    border-color: var(--mc-gold-hover);
    filter: grayscale(0);
    /*box-shadow: 0 0 0 2px var(--mc-bg), 0 0 0 4px var(--mc-gold), var(--mc-glow);*/
    opacity: 1;
}

.mc-swatch--radio input:checked + .mc-swatch__dot {
    background: radial-gradient(circle at center, var(--mc-gold-hover) 0 38%, rgba(200, 169, 107, .2) 42% 100%);
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ===== Selected state for radio swatch ===== */
.mc-swatch--radio:has(input:checked) {
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Fallback for older browsers - requires JS to add 'selected' class */
.mc-swatch--radio.selected {
    border-color: var(--mc-border-strong);
    box-shadow: var(--mc-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.mc-swatch--button input:checked + .mc-swatch__btn {
    border-color: var(--mc-gold-hover);
    background: linear-gradient(180deg, rgba(210, 156, 8, 0.72), rgba(255, 170, 0, 0.47));
    color: var(--mc-gold-hover);
    box-shadow: var(--mc-glow);
}

.mc-swatch input:focus-visible + span,
.mc-swatch input:focus-visible + img,
.mc-swatch input:focus-visible + .mc-swatch__placeholder {
    outline: 2px solid var(--mc-gold-hover);
    outline-offset: 3px;
}

/* ===== Disabled / Loading ===== */
.mc-swatch.disabled {
    cursor: not-allowed;
    opacity: .58;
    filter: saturate(.7);
}

.mc-swatch.disabled:hover {
    transform: none;
    border-color: rgba(200, 169, 107, .14);
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
}

.mc-swatches.loading {
    pointer-events: none;
    opacity: .62;
}

/* ===== Tooltip ===== */
.mc-tooltip {
    position: relative;
    display: inline-block;
}

.mc-swatch .mc-tooltip__content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 10;
    visibility: hidden;
    padding: 8px 12px;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background: rgba(17, 17, 17, .96);
    color: var(--mc-text);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    transform: translateX(-50%);
    transition: opacity var(--mc-transition), border-color var(--mc-transition);
}

.mc-swatch:hover .mc-tooltip__content,
.mc-swatch:focus .mc-tooltip__content,
.mc-swatch:focus-within .mc-tooltip__content {
    visibility: visible;
    border-color: var(--mc-border-strong);
    opacity: 1;
}

/*
 * MC_COMPONENT_PRICE_VISIBILITY_V1
 *
 * Price presentation for Museum Configurator swatches.
 * Existing typography/color is inherited from the configurator.
 */

/*
 * IMAGE
 *
 * Keep the existing swatch/image dimensions unchanged.
 * The price is positioned ABOVE the image, outside the swatch box,
 * so an existing selected border continues to surround the image
 * swatch rather than the price.
 */
.mc-swatches--image{
    justify-content: space-between;
}
.mc-component[data-mc-show-price="1"]
.mc-swatches--image[data-mc-has-price="1"] {
    padding-top: 1.7em;
}

.mc-component[data-mc-show-price="1"]
.mc-swatch--image.mc-swatch--has-price {
    position: relative;
    overflow: visible;
}

.mc-component[data-mc-show-price="1"]
.mc-swatch--image
.mc-swatch__price--image {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .35em);
    display: block;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .85em;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}


/*
 * COLOR
 *
 * Price of the currently selected color appears immediately
 * below the complete .mc-swatches--color block.
 */
.mc-component-option-price--color {
    margin-top: 1.35em;
    font-size: .9em;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.mc-component-option-price--color[hidden] {
    display: none !important;
}

/* MC_PHYSICAL_OPTION_SPECS_V1
 * Customer-facing price and physical dimensions use the same calculated
 * option data as pricing and the SVG Composition Engine. */
.mc-component__physical-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
    margin: 4px 5px 8px;
    padding: 9px 11px;
    border: 1px solid rgba(200, 169, 107, .24);
    border-radius: 8px;
    background: rgba(200, 169, 107, .07);
    font-size: 13px;
    line-height: 1.35;
}

.mc-component__physical-summary-scope {
    color: var(--mc-muted, rgba(217, 217, 217, .68));
}

.mc-component__physical-summary-value {
    color: var(--mc-text, #d9d9d9);
    font-weight: 600;
}

/* MC_FRAME_LINEAR_PHYSICAL_SUMMARY_V2 */
.mc-component__physical-summary--frame {
    display: block;
}

.mc-component__physical-summary--frame .mc-component__physical-summary-scope,
.mc-component__physical-summary--frame .mc-component__physical-summary-value {
    display: block;
}

.mc-component__physical-summary--frame .mc-component__physical-summary-scope {
    margin-bottom: 3px;
}

.mc-component__physical-summary--frame .mc-component__physical-summary-value {
    white-space: pre-line;
    line-height: 1.5;
}

.mc-swatch__physical-meta {
    display: block;
    width: 100%;
    color: var(--mc-text, #d9d9d9);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    text-align: center;
    white-space: normal;
}

.mc-swatches--plaque-cards .mc-swatch__physical-meta {
    grid-column: 2;
    width: auto;
    color: var(--mc-gold-hover, #f4e4b8);
    text-align: left;
}

.mc-swatches--plaque-cards
.mc-swatch--plaque-card:has(.mc-swatch__physical-meta)
.mc-swatch__dot {
    grid-row: 1 / span 3;
}

/* MC_PLAQUE_VARIANTS_V1: product-specific museum plaque option cards. */
.mc-swatches.mc-swatches--plaque-cards {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
}

.mc-swatches--plaque-cards .mc-swatch.mc-swatch--plaque-card {
    width: 100%;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    /*grid-template-columns: 18px minmax(0, 1fr);*/
    /*align-items: start;*/
    justify-content: stretch;
    column-gap: 10px;
    row-gap: 5px;
    padding: 12px 14px;
    box-sizing: border-box;
    border-radius: var(--mc-radius);
}

.mc-swatches--plaque-cards .mc-swatch--plaque-card .mc-swatch__dot {
    grid-row: 1 / span 2;
    margin-top: 2px;
    display:none;
}

.mc-swatches--plaque-cards .mc-swatch--plaque-card .mc-swatch__label {
    display: block;
    line-height: 1.35;
}

.mc-swatches--plaque-cards .mc-plaque-card__text {
    display: block;
    min-width: 0;
    white-space: normal;
    line-height: 1.45;
    font-size: 0.92em;
    text-align:center;
}

.mc-swatches--plaque-cards .mc-plaque-card__text--empty {
    font-style: italic;
    opacity: 0.72;
}

.mc-swatches--plaque-cards .mc-swatch--plaque-card.selected,
.mc-swatches--plaque-cards .mc-swatch--plaque-card:has(input[type="radio"]:checked) {
    border-color: var(--mc-gold-hover);
    background: rgba(200, 169, 107, .09);
    box-shadow: var(--mc-glow), inset 0 0 0 1px var(--mc-gold);
}

/* Finish System material preview. Only rendered for components explicitly
 * participating in finish resolution, so legacy swatches keep their layout. */
.mc-configurator .mc-swatch__finish-preview {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    /*border: 1px solid rgba(0, 0, 0, 0.18);*/
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    box-sizing: border-box;
}

.mc-configurator .mc-swatch--button .mc-swatch__finish-preview {
    margin-right: 7px;
}

.mc-configurator .mc-swatch--radio .mc-swatch__finish-preview {
    margin: 0 7px 0 4px;
}