/**
 * Horrenstunter Stoffen Engine — Frontend styling
 *
 * Kleuren via CSS variabelen zodat het thema ze kan overschrijven.
 * Override voorbeeld in je thema CSS:
 *   .hs-stof-container { --hs-accent: #yourcolor; }
 */

/* ================================
   CSS VARIABELEN (theme-overridable)
   ================================ */

.hs-stof-container {
    --hs-accent: var(--theme-primary, var(--wp--preset--color--primary, var(--gf-ctrl-btn-bg-color-primary, #0073aa)));
    --hs-accent-hover: var(--theme-primary-dark, color-mix(in srgb, var(--hs-accent), black 15%));
    --hs-accent-light: color-mix(in srgb, var(--hs-accent), transparent 75%);
    --hs-surcharge: var(--theme-surcharge, #e67e22);
    --hs-border: var(--theme-border, #e5e5e5);
    --hs-border-hover: var(--theme-border-hover, #aaa);
    --hs-bg: var(--theme-bg, #fff);
    --hs-bg-muted: var(--theme-bg-muted, #f0f0f0);
    --hs-text: var(--theme-text, inherit);
    --hs-text-muted: var(--theme-text-muted, #666);
    --hs-error: var(--gf-ctrl-border-color-error, #c02b0a);
    margin: 0;
    padding: 0;
}

/* ================================
   TYPE SELECTOR — Icon card grid
   ================================ */

.hs-stof-type-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* overschreven per veld via inline style */
    gap: 10px;
    margin-bottom: 16px;
}

.hs-stof-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--hs-bg);
    border: 2px solid var(--hs-border);
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    overflow: hidden;
    text-align: center;
}

.hs-stof-type-card:hover {
    border-color: var(--hs-border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.hs-stof-type-card-active {
    border-color: var(--hs-accent);
    box-shadow: 0 0 0 2px var(--hs-accent-light);
}

.hs-stof-type-card-active:hover {
    border-color: var(--hs-accent);
}

.hs-stof-type-icon {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 6px 6px 0 0;
}

.hs-stof-type-label {
    display: block;
    width: 100%;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hs-text);
    line-height: 1.3;
}

.hs-stof-type-card-active .hs-stof-type-label {
    color: var(--hs-accent);
    font-weight: 600;
}

/* Zonder icoon: extra padding */
.hs-stof-type-card--no-icon {
    justify-content: center;
    min-height: 60px;
}

/* ================================
   DISCLAIMER
   ================================ */

.hs-stof-disclaimer {
    margin: 0 0 12px 0;
    padding: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--hs-text-muted);
    line-height: 1.5;
}

/* ================================
   GROEPSBESCHRIJVING
   ================================ */

.hs-stof-group-desc {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: var(--hs-bg-muted);
    border-left: 3px solid var(--hs-accent);
    color: var(--hs-text-muted);
    font-size: 13px;
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
}

/* ================================
   PANELEN
   ================================ */

.hs-stof-panel {
    padding-top: 0;
}

/* ================================
   STOFFEN GRID
   ================================ */

.hs-stof-list {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr); /* default, overschreven per veld via inline style */
    gap: 10px;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individuele stof keuze */
.hs-stof-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid var(--hs-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    background: var(--hs-bg);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.hs-stof-choice:hover {
    border-color: var(--hs-border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Geselecteerde stof */
.hs-stof-choice:has(input:checked) {
    border-color: var(--hs-accent);
    box-shadow: 0 0 0 2px var(--hs-accent-light);
}

/* Verberg de radio bullet */
.hs-stof-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Stof afbeelding */
.hs-stof-image-label {
    display: block;
    width: 100%;
    cursor: pointer;
    margin: 0 !important;
}

.hs-stof-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
}

/* Stof label tekst */
.hs-stof-label {
    display: block;
    width: 100%;
    text-align: center;
    padding: 6px 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--hs-text);
    cursor: pointer;
    margin: 0 !important;
    word-break: break-word;
}

/* Meerprijs per stof item */
.hs-stof-surcharge {
    display: block;
    font-size: 11px;
    color: var(--hs-surcharge);
    font-weight: 600;
    margin-top: 1px;
}

/* Legacy class (backwards compat) */
.hs-stof-price {
    display: block;
    font-size: 11px;
    color: var(--hs-surcharge);
    font-weight: 600;
    margin-top: 2px;
}

/* Lege state */
.hs-stof-empty {
    padding: 20px;
    text-align: center;
    color: var(--hs-text-muted);
    font-style: italic;
    background: var(--hs-bg-muted);
    border-radius: 4px;
}

/* Check indicator bij selectie */
.hs-stof-choice:has(input:checked)::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--hs-accent);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================================
   BADGE — overlay op thumbnail
   ================================ */

.hs-stof-badge {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
    padding: 3px 6px;
    text-align: center;
    pointer-events: none;
}

/* ================================
   ZOOM KNOP + LIGHTBOX
   ================================ */

.hs-stof-zoom {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--hs-text);
    padding: 0;
    z-index: 2;
}

.hs-stof-choice:hover .hs-stof-zoom {
    opacity: 1;
}

.hs-stof-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-stof-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.hs-stof-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.hs-stof-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.hs-stof-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hs-stof-lightbox-label {
    color: #fff;
    margin-top: 8px;
    font-size: 14px;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 600px) {
    .hs-stof-type-selector {
        gap: 8px;
    }

    .hs-stof-type-label {
        font-size: 12px;
        padding: 6px 2px;
    }

    .hs-stof-list {
        gap: 8px;
        /* kolommen worden per-veld overschreven via inline style */
    }

    .hs-stof-label {
        font-size: 11px;
        padding: 4px 2px;
    }

    .hs-stof-badge {
        font-size: 9px;
        bottom: 28px;
    }
}

/* ================================
   GF VALIDATION
   ================================ */

.gfield_error .hs-stof-container .hs-stof-choice {
    border-color: var(--hs-error);
}

.gfield_error .hs-stof-container .hs-stof-choice:has(input:checked) {
    border-color: var(--hs-accent);
}

/* ================================
   EDITOR PREVIEW
   ================================ */

.hs-stof-editor-preview {
    pointer-events: none;
}