/* Frame selector — theme-native.
   The modal is built from the theme's own UIkit components (uk-modal, uk-card, uk-button,
   uk-grid), so it inherits the storefront's look. Only the bits UIkit can't express are
   defined here: the fixed-ratio thumbnail box and the selected-card state. */

.frameselector-card {
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
    border: 1px solid transparent;
}

/* Selected frame: a ring in the theme's primary colour (falls back if the var is absent). */
.frameselector-card.frameselector-selected {
    border-color: var(--frameselector-accent, #1e87f0);
    box-shadow: 0 0 0 1px var(--frameselector-accent, #1e87f0);
}

/* Square-ish thumbnail box so cards line up regardless of image dimensions. */
.frameselector-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
}
.frameselector-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.frameselector-thumb-placeholder {
    opacity: .4;
}

/* Give the chosen-frame summary line room in the footer. */
.frameselector-selected-label {
    min-height: 1em;
}

/* Card price: total prominent, delta secondary underneath. */
.frameselector-card-total {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}
.frameselector-card-delta {
    margin-top: 2px;
}

/* Size in the header should not read as fine print. */
.frameselector-size {
    font-size: 0.95rem;
}

/* Trigger button: black label (readable on the theme's primary button colour). */
.frameselector-trigger-wrap .frameselector-open-btn,
.frameselector-trigger-wrap .frameselector-open-btn:hover,
.frameselector-trigger-wrap .frameselector-open-btn:focus {
    color: #000;
}