/* hm_advertiser_upload — alleen gate + dashboard-lijst. Het formulier
   zelf gebruikt de `awcf-hm-register__*`-conventies van hm_user_registration
   zodat de styling automatisch consistent is met /registreren/. */

/* -------- Gate voor uitgelogde / niet-adverteerder-bezoekers -------- */

.awcf-hm-adv-upload--gate {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid rgba(16, 19, 63, 0.1);
    border-radius: 6px;
    color: var(--hm-color-navy, #10133f);
    font-family: var(--hm-font-body, "Open Sans", sans-serif);
}

.awcf-hm-adv-upload--gate p {
    margin: 0 0 16px;
}

.awcf-hm-adv-upload__gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.awcf-hm-adv-upload__submit {
    display: inline-block;
    background: var(--hm-color-gold, #9d8100);
    color: #fff;
    border: 1px solid var(--hm-color-gold, #9d8100);
    padding: 10px 22px;
    font: inherit;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--hm-font-heading, "Nunito", sans-serif);
}

.awcf-hm-adv-upload__submit:hover,
.awcf-hm-adv-upload__submit:focus {
    background: color-mix(in srgb, var(--hm-color-gold, #9d8100) 88%, #000);
    color: #fff;
    text-decoration: none;
}

.awcf-hm-adv-upload__submit--ghost {
    background: transparent;
    color: var(--hm-color-navy, #10133f);
    border-color: rgba(16, 19, 63, 0.35);
}

.awcf-hm-adv-upload__submit--ghost:hover,
.awcf-hm-adv-upload__submit--ghost:focus {
    background: rgba(16, 19, 63, 0.05);
    color: var(--hm-color-navy, #10133f);
}

/* -------- Mijn advertenties tabel (dashboard) -------- */

.awcf-hm-my-ads {
    margin: 24px 0 32px;
    font-family: var(--hm-font-body, "Open Sans", sans-serif);
    color: var(--hm-color-navy, #10133f);
}

.awcf-hm-my-ads h2 {
    font-family: var(--hm-font-heading, "Nunito", sans-serif);
    font-weight: 800;
    margin: 0 0 12px;
}

.awcf-hm-my-ads__table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid rgba(16, 19, 63, 0.1);
}

.awcf-hm-my-ads__table th,
.awcf-hm-my-ads__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(16, 19, 63, 0.08);
    font-size: 0.95em;
}

.awcf-hm-my-ads__table th {
    background: rgba(16, 19, 63, 0.04);
    font-weight: 700;
}

.awcf-hm-my-ads__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    background: #666;
}

.awcf-hm-my-ads__badge--new       { background: #2271b1; }
.awcf-hm-my-ads__badge--in_review { background: #ffb900; color: #322800; }
.awcf-hm-my-ads__badge--approved  { background: #46b450; }
.awcf-hm-my-ads__badge--placed    { background: #00a32a; }
.awcf-hm-my-ads__badge--rejected  { background: #dc3232; }

.awcf-hm-my-ads--empty {
    padding: 16px;
    background: rgba(16, 19, 63, 0.03);
    border-radius: 4px;
}

/* Cashback-varianten repeater */
.awcf-hm-adv-upload__variants {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.awcf-hm-adv-upload__variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.awcf-hm-adv-upload__variant-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    grid-template-areas:
        "label label label label action"
        "unit  min   step  max   .";
    gap: 10px 12px;
    align-items: end;
    padding: 12px;
    background: rgba(16, 19, 63, 0.03);
    border-radius: 4px;
}
.awcf-hm-adv-upload__variant-cell--label  { grid-area: label; }
.awcf-hm-adv-upload__variant-cell--unit   { grid-area: unit; }
.awcf-hm-adv-upload__variant-cell--min    { grid-area: min; }
.awcf-hm-adv-upload__variant-cell--step   { grid-area: step; }
.awcf-hm-adv-upload__variant-cell--max    { grid-area: max; }
.awcf-hm-adv-upload__variant-cell--action { grid-area: action; }
.awcf-hm-adv-upload__variant-row .awcf-hm-register__label {
    display: block;
    margin: 0 0 4px;
    font-size: 13px;
}
.awcf-hm-adv-upload__variant-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.awcf-hm-adv-upload__variant-cell--action {
    /* Geen label boven de knop — laat de action-cell exact op input-hoogte
       eindigen door alleen de bottom-lijn te alignen met de andere cellen. */
    justify-content: flex-end;
}
/* Add-button gebruikt de bestaande ghost-submit-styling; hier alleen alignment. */
.awcf-hm-adv-upload__variant-add {
    align-self: flex-start;
}
/* Remove-knop: icon-only, compact — bewust anders dan de submit-buttons.
   Hoogte matched grofweg de input-hoogte (padding 10px * 2 + border 2px +
   font-line-height ≈ 44px). Flex-centering zet het kruisje exact in het
   midden ongeacht font-metrics. */
.awcf-hm-adv-upload__variant-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    line-height: 1;
    font-size: 22px;
    border: 1px solid rgba(16, 19, 63, 0.2);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    color: var(--hm-color-navy, #10133f);
    transition: background 120ms ease, border-color 120ms ease;
}
.awcf-hm-adv-upload__variant-remove:hover,
.awcf-hm-adv-upload__variant-remove:focus {
    background: rgba(16, 19, 63, 0.05);
    border-color: rgba(16, 19, 63, 0.35);
}
@media (max-width: 640px) {
    .awcf-hm-adv-upload__variant-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "label"
            "unit"
            "min"
            "step"
            "max"
            "action";
    }
    .awcf-hm-adv-upload__variant-cell--action {
        justify-self: flex-end;
    }
}

/* KvK-widget-styling — dupliceert de rules uit hm_user_registration.css zodat
   de KvK-autocomplete op het adverteerder-registratie-formulier standalone
   werkt. De bredere .awcf-hm-register__* form-styling wordt nog steeds
   geleverd door hm_user_registration.css (zie enqueue-comment in functions.php). */
.awcf-hm-register[data-module="hm_advertiser_register"] {
    & .awcf-hm-register__feedback {
        min-height: 0;

        &:not(:empty) {
            padding: 0.75rem 1rem;
            margin-bottom: 1.25rem;
            border-radius: 6px;
            background: #fdecea;
            color: #b3261e;
            border: 1px solid #f5c6c3;
        }

        &.awcf-hm-register__feedback--success:not(:empty) {
            background: #e8f5e9;
            color: #1b5e20;
            border-color: #b9dfbb;
        }

        &.awcf-hm-register__feedback--info:not(:empty) {
            background: #e7f1fb;
            color: #0b4f83;
            border-color: #b8d5ef;
        }
    }

    & .awcf-hm-register__kvk-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        max-height: 260px;
        margin: 0;
        padding: 0.25rem 0;
        list-style: none;
        background: #fff;
        border: 1px solid var(--hm-color-line);
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        z-index: 50;

        & li {
            padding: 0.6rem 0.85rem;
            cursor: pointer;
            font-size: 0.92rem;
            line-height: 1.3;
            border-bottom: 1px solid #f1f2f5;

            &:last-child {
                border-bottom: none;
            }

            &:hover,
            &.is-active {
                background: #eef4fb;
            }

            & .awcf-hm-register__kvk-name {
                font-weight: 600;
            }

            & .awcf-hm-register__kvk-sub {
                display: block;
                font-size: 0.8rem;
                color: #6b7280;
            }

            &.awcf-hm-register__kvk-empty {
                color: #6b7280;
                cursor: default;
                font-style: italic;

                &:hover {
                    background: transparent;
                }
            }
        }
    }
}