/* ──────────────────────────────────────────────────────────────
 *  MS Select Button
 *  Prefix: .ms-select-btn
 *
 *  Brand: #ff7043 (accent), #00144a (navy), #ffffff (bg)
 * ────────────────────────────────────────────────────────────── */

:root {
    --ms-accent:           #ff7043;
    --ms-accent-hover:     #e6623a;
    --ms-navy:             #00144a;
    --ms-navy-light:       #001d66;
    --ms-red:              #d32f2f;
    --ms-red-hover:        #b71c1c;
    --ms-white:            #ffffff;
}

/* ── Base button ──────────────────────────────────────────────── */

.ms-select-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 20px 32px;
    border: 2px solid var(--ms-accent);
    border-radius: 15px;
    background: var(--ms-accent);
    color: var(--ms-white);
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.22s ease;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

.ms-select-btn:hover {
    background: var(--ms-accent-hover);
    border-color: var(--ms-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 112, 67, 0.3);
}

.ms-select-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ms-select-btn:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 3px;
}

/* ── Active state (model is in basket) ────────────────────────── */

.ms-select-btn--active {
    background: var(--ms-navy);
    border-color: var(--ms-navy);
    color: var(--ms-white);
}

.ms-select-btn--active:hover {
    background: var(--ms-navy-light);
    border-color: var(--ms-navy-light);
    box-shadow: 0 4px 12px rgba(0, 20, 74, 0.25);
}

/* ── Hover-to-remove state ────────────────────────────────────── */

.ms-select-btn--hover-remove {
    background: var(--ms-red);
    border-color: var(--ms-red);
}

.ms-select-btn--hover-remove:hover {
    background: var(--ms-red-hover);
    border-color: var(--ms-red-hover);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.25);
}

/* ── Text wrapper ─────────────────────────────────────────────── */

.ms-select-btn__text {
    pointer-events: none;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
 *  MODE 2: data-ms-model-id on any element
 *
 *  Use these classes to style your own Avada buttons/icons:
 *    .ms-model-selected  → toggled when model is in selection
 *    .ms-model-loading   → briefly applied during REST fetch
 * ══════════════════════════════════════════════════════════════ */

/* Selected state – apply to any element */
[data-ms-model-id].ms-model-selected {
    outline: 3px solid var(--ms-accent, #ff7043);
    outline-offset: 2px;
}

/* Loading state */
[data-ms-model-id].ms-model-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
 *  ICON BUTTON: [ms_model_select_icon]
 *
 *  Compact round button for Post Card grids.
 *  Cart icon → Checkmark icon when selected.
 *  Sizes: --sm (32px), --md (40px, default), --lg (48px)
 * ══════════════════════════════════════════════════════════════ */

.ms-select-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--ms-navy, #00144a);
    border-radius: 50%;
    background: var(--ms-white, #ffffff);
    color: var(--ms-navy, #00144a);
    cursor: pointer;
    transition: all 0.22s ease;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}

.ms-select-icon:hover {
    background: var(--ms-navy, #00144a);
    color: var(--ms-white, #ffffff);
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0, 20, 74, 0.25);
}

.ms-select-icon:active {
    transform: scale(0.95);
}

.ms-select-icon:focus-visible {
    outline: 2px solid var(--ms-accent, #ff7043);
    outline-offset: 3px;
}

/* ── SVG icons ────────────────────────────────────────────────── */

.ms-select-icon__svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: opacity 0.18s, transform 0.18s;
}

.ms-select-icon__svg--add {
    opacity: 1;
}

.ms-select-icon__svg--added {
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
}

/* ── Active state (in selection) ──────────────────────────────── */

.ms-select-icon--active {
    background: var(--ms-accent, #ff7043);
    border-color: var(--ms-accent, #ff7043);
    color: var(--ms-white, #ffffff);
}

.ms-select-icon--active:hover {
    background: var(--ms-accent-hover, #e6623a);
    border-color: var(--ms-accent-hover, #e6623a);
    box-shadow: 0 3px 10px rgba(255, 112, 67, 0.3);
}

.ms-select-icon--active .ms-select-icon__svg--add {
    opacity: 0;
    transform: scale(0.5);
}

.ms-select-icon--active .ms-select-icon__svg--added {
    opacity: 1;
    transform: scale(1);
}

/* ── Sizes ────────────────────────────────────────────────────── */

.ms-select-icon--sm {
    width: 32px;
    height: 32px;
}

.ms-select-icon--sm .ms-select-icon__svg {
    width: 14px;
    height: 14px;
}

.ms-select-icon--md {
    width: 40px;
    height: 40px;
}

.ms-select-icon--lg {
    width: 48px;
    height: 48px;
}

.ms-select-icon--lg .ms-select-icon__svg {
    width: 22px;
    height: 22px;
}