/* Styling for attributt-gruppen */
.attribute-group {
    display: flex;
    flex-direction: column;
}

.attribute-name {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1rem;
}

/* Container for radio-knappene */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Skjul den originale, stygge radio-knappen */
.radio-option input[type="radio"] {
    display: none;
}

/* Styling for den klikkbare etiketten (vår nye "knapp") */
.radio-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    /* Litt padding rundt innholdet */
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    min-width: 60px;
    /* Sikrer en minimumsbredde */
    height: 40px;
    text-align: center;
}

/* Stil når musepekeren er over en tilgjengelig knapp */
.radio-option label:not(.disabled):hover {
    border-color: #333;
}

/* Stil for den VALGTE knappen */
.radio-option input[type="radio"]:checked+label {
    border-color: #222934;
    /* ENDRET farge */
    box-shadow: 0 0 5px rgba(34, 41, 52, 0.4);
    /* ENDRET skygge til å matche */
    font-weight: bold;
}

/* Stil for en DEAKTIVERT (ugyldig) knapp */
.radio-option label.disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}

/* Grå ut teksten for deaktiverte tekst-knapper */
.radio-option label.disabled .text-label {
    color: #ced4da;
}

/* Legg til en diagonal strek over deaktiverte farge-knapper for tydelighet */
.radio-option label.disabled .color-swatch::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 15px;
    width: 2px;
    height: 42px;
    background-color: #dee2e6;
    transform: rotate(45deg);
}


/* Styling for fargesirkelen */
.color-swatch {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Tynn ramme for lyse farger */
}

/* Styling for tekst-etiketten */
.text-label {
    padding: 0 12px;
    font-size: 0.9rem;
}

/* Cursor pointer for all clickable interactive elements */
a, button, .btn, .nav-link, .dropdown-item, .dropdown-toggle,
.accordion-button, .page-link, .list-group-item-action,
.btn-close, .navbar-toggler, .card-link, .breadcrumb-item a,
[role=button], [role=tab], [role=switch],
[data-bs-toggle], [data-bs-trigger],
input[type=button], input[type=submit], input[type=reset],
input[type=radio], input[type=checkbox], select, summary {
    cursor: pointer !important;
}

/* Quill content images in blog posts */
.fs-base.lh-lg img {
    border-radius: 0.5rem;
}

/* Stock status indicator */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    font-size: 0.8125rem;
}

.stock-badge--in-stock {
    background-color: #dcfce7;
    color: #16a34a;
}

.stock-badge--backorder {
    background-color: #fef3c7;
    color: #d97706;
}

.stock-badge--out-of-stock {
    background-color: #fce4ec;
    color: #dc2626;
}

.stock-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.stock-badge--in-stock .stock-indicator-dot {
    background-color: #22c55e;
    animation: stock-pulse 3s ease-in-out infinite;
}

.stock-badge--backorder .stock-indicator-dot {
    background-color: #f59e0b;
    animation: stock-pulse 3s ease-in-out infinite;
}

.stock-badge--out-of-stock .stock-indicator-dot {
    background-color: #dc2626;
}

@keyframes stock-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Disabled interactive elements — reset to default */
a.disabled, a[disabled], button.disabled, button:disabled,
.nav-link.disabled, .nav-link:disabled,
.dropdown-item.disabled, .dropdown-item:disabled,
.page-link.disabled, [disabled], .disabled {
    cursor: default !important;
}