/* ============================================================
   EDD – Custom UIkit/Joomill styling
   Kleurenschema en herbruikbare tokens
   ============================================================ */

:root {
    --edd-brand:          #6d1794;
    --edd-brand-dark:     #4e0f6b;
    --edd-brand-light:    #faf5fd;
    --edd-brand-muted:    #f0e6f7;
    --edd-brand-border:   rgba(109, 25, 148, 0.25);
    --edd-brand-shadow:   rgba(109, 25, 148, 0.06);
    --edd-blue:           #1e87f0;
    --edd-blue-dark:      #0f7ae5;
    --edd-danger:         #f0506e;
    --edd-success:        #32d296;
    --edd-border:         #e5e5e5;
    --edd-border-alt:     #e5e7eb;
    --edd-bg:             #f8f8f8;
    --edd-text:           #333;
    --edd-text-muted:     #666;
    --edd-text-subtle:    #999;
    --edd-radius:         4px;
    --edd-radius-lg:      12px;
}


/* ============================================================
   GEDEELDE COMPONENTEN
   Herbruikbare patronen: badges, licentie-keys, tabel-layouts
   ============================================================ */

/* Status badge (gebruikt op receipt, manage licenses en subscriptions) */
.edd_receipt_payment_status.complete,
.edd_subscription_status,
.edd-blocks-orders__order-status.complete {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edd_receipt_payment_status.complete,
.edd_subscription_status {
    background: rgba(109, 25, 148, 0.1);
    color: var(--edd-brand);
    border: 1px solid var(--edd-brand-border);
}

.edd-blocks-orders__order-status.complete {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Licentie-key weergave (gebruikt op receipt én manage licenses) */
.edd_sl_license_key {
    font-family: monospace;
    font-size: 0.82rem;
    background: #f3e8fc;
    color: var(--edd-brand-dark);
    border: 1px solid #d8b4f8;
    border-radius: 6px;
    padding: 4px 10px;
    word-break: break-all;
}

/* Gedeelde tabel-basis (orders, subscriptions, licenses, sites) */
#edd_subscription_receipt,
#edd_sl_license_keys,
#edd_sl_license_sites {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--edd-border-alt);
    border-radius: var(--edd-radius-lg);
    overflow: hidden;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px var(--edd-brand-shadow);
}

#edd_subscription_receipt thead tr,
#edd_sl_license_keys thead tr,
#edd_sl_license_sites thead tr {
    background: var(--edd-brand);
    color: #fff;
}

#edd_subscription_receipt thead th,
#edd_sl_license_keys thead th,
#edd_sl_license_sites thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#edd_subscription_receipt tbody tr,
#edd_sl_license_keys tbody tr,
#edd_sl_license_sites tbody tr {
    border-bottom: 1px solid var(--edd-brand-muted);
}

#edd_sl_license_keys tbody tr:hover,
#edd_sl_license_sites tbody tr:hover {
    background: var(--edd-brand-light);
}

#edd_subscription_receipt tbody td,
#edd_sl_license_keys tbody td,
#edd_sl_license_sites tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    color: #374151;
}

/* Links in licentie- en sitestabellen */
#edd_sl_license_keys tbody td a,
#edd_sl_license_sites tbody td a {
    color: var(--edd-brand);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

#edd_sl_license_keys tbody td a:hover,
#edd_sl_license_sites tbody td a:hover {
    color: var(--edd-brand-dark);
    text-decoration: underline;
}


/* ============================================================
   CHECKOUT – Formulierlayout en velden
   ============================================================ */

.edd-blocks__checkout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 960px) {
    .edd-blocks__checkout.edd-checkout__layout--full {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Ingelogd-melding en losse <p>'s altijd over volledige breedte */
.edd-blocks__checkout > .edd-blocks__logged-in,
.edd-blocks__checkout > p {
    grid-column: 1 / -1;
}

/* Fieldsets */
.edd-blocks-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.edd-blocks-form legend {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--edd-border);
    color: var(--edd-text);
}

/* Form groups en labels */
.edd-blocks-form__group {
    margin-bottom: 20px;
}

.edd-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.875rem;
    color: var(--edd-text);
    font-weight: 500;
}

.edd-required-indicator {
    color: var(--edd-danger);
    margin-left: 2px;
}

/* Tekstvelden */
.edd-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    height: 40px;
    background: #fff;
    color: var(--edd-text-muted);
    border: 1px solid var(--edd-border);
    border-radius: var(--edd-radius);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease-in-out;
    -webkit-appearance: none;
}

.edd-input:focus {
    outline: none;
    border-color: var(--edd-blue);
    color: var(--edd-text);
}

.edd-input::placeholder {
    color: #bbb;
}

/* Selectboxen */
.edd-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    height: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--edd-text-muted);
    border: 1px solid var(--edd-border);
    border-radius: var(--edd-radius);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease-in-out;
}

.edd-select:focus {
    outline: none;
    border-color: var(--edd-blue);
    color: var(--edd-text);
}

/* Beschrijving onder velden */
.edd-description {
    margin: 5px 0 0;
    font-size: 0.8125rem;
    color: var(--edd-text-subtle);
}

/* Ingelogd-melding */
.edd-blocks__logged-in {
    margin-bottom: 0;
    padding: 10px 15px;
    background: var(--edd-bg);
    border-radius: var(--edd-radius);
    font-size: 0.875rem;
    color: var(--edd-text-muted);
}

/* Kortingscode */
#edd-discount-code-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#edd-discount-code-wrap .edd-input {
    flex: 1;
}

/* Submit-knop */
.edd-submit,
#edd_purchase_submit input[type="submit"],
#edd_purchase_submit button[type="submit"] {
    display: inline-block;
    width: 100%;
    padding: 0 30px;
    height: 40px;
    background: var(--edd-blue);
    color: #fff;
    border: none;
    border-radius: var(--edd-radius);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    -webkit-appearance: none;
}

.edd-submit:hover,
#edd_purchase_submit input[type="submit"]:hover,
#edd_purchase_submit button[type="submit"]:hover {
    background: var(--edd-blue-dark);
    color: #fff;
}

/* Fieldset rondom submit zonder visuele opmaak */
#edd_purchase_submit {
    border: none;
    padding: 0;
    margin: 0;
}

/* Meldingen (errors/success) */
.edd-alert {
    padding: 15px;
    border-radius: var(--edd-radius);
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.edd-alert-error {
    background: #fef5f7;
    color: var(--edd-danger);
    border: 1px solid rgba(240, 80, 110, 0.3);
}

.edd-alert-success {
    background: #edfbf3;
    color: var(--edd-success);
    border: 1px solid rgba(50, 210, 150, 0.3);
}

.edd_errors {
    padding: 0;
    list-style: none;
    margin: 0;
}

.edd_error {
    margin: 0;
}

/* BTW-veld */
.edd-vat-checkbox-wrap label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
}

.edd-vat-check-button {
    height: 40px;
    padding: 0 20px;
    background: var(--edd-bg);
    border: 1px solid var(--edd-border);
    border-radius: var(--edd-radius);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s;
}

.edd-vat-check-button:hover {
    background: #eee;
}

.edd-vat-number-wrap {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.edd-vat-number-wrap .edd-input {
    flex: 1;
}

/* Betaalgegevens sectie */
.edd-blocks__payment-details {
    margin-top: 20px;
}


/* ============================================================
   CART – Winkelwagen in checkout
   ============================================================ */

.edd-blocks__cart {
    background: var(--edd-bg);
    border-radius: var(--edd-radius);
    padding: 20px;
}

.edd-blocks-cart {
    width: 100%;
}

.edd-blocks-cart__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--edd-border);
    gap: 15px;
}

.edd-blocks-cart__row:last-child {
    border-bottom: none;
}

.edd-blocks-cart__row-header {
    font-weight: bold;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--edd-text-subtle);
    border-bottom: 2px solid var(--edd-border);
}

.edd-blocks-cart__row-item .edd_cart_item_name {
    flex: 1;
}

.edd-blocks-cart__row-item .edd_cart_item_price {
    text-align: right;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--edd-text-muted);
}

.edd_checkout_cart_item_title {
    font-weight: 500;
}

/* Cart footer totaalregels */
.edd-blocks-cart__row-footer {
    font-size: 0.875rem;
    color: var(--edd-text-muted);
}

.edd_cart_subtotal,
.edd_cart_tax,
.edd_cart_discount,
.edd_cart_total {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.edd_cart_footer_row:last-child .edd_cart_total {
    font-weight: bold;
    font-size: 1rem;
    color: var(--edd-text);
}

/* Verwijder-knop per cart-item */
.edd-blocks-cart__action-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    color: var(--edd-text-subtle);
    text-decoration: none;
    font-size: 0;
}

.edd-blocks-cart__action-remove::before {
    content: "✕";
    font-size: 12px;
    color: var(--edd-text-subtle);
    transition: color 0.15s;
}

.edd-blocks-cart__action-remove:hover::before {
    color: var(--edd-danger);
}


/* ============================================================
   SOFTWARE LICENSING – Verlenging in checkout
   ============================================================ */

/* Verloopdatum-info per cart-item */
.edd-sl-details {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--edd-text-subtle);
}

.edd-sl-label {
    font-weight: 500;
    margin-right: 3px;
}

/* Vernieuwingsformulier in checkout */
#edd_sl_renewal_form {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--edd-border);
}

#edd_sl_show_renewal_form {
    display: inline-block;
    padding: 0 20px;
    height: 36px;
    background: transparent;
    color: var(--edd-blue);
    border: 1px solid var(--edd-blue);
    border-radius: var(--edd-radius);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    -webkit-appearance: none;
}

#edd_sl_show_renewal_form:hover {
    background: var(--edd-blue);
    color: #fff;
}

.edd-sl-renewal-form-fields {
    margin-top: 15px;
}

.edd-form-group__label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.875rem;
    color: var(--edd-text);
}

.edd-form-group__control {
    display: flex;
    gap: 10px;
}

.edd-form-group__input {
    flex: 1;
}

.edd-sl-renewal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

#edd-add-license-renewal {
    height: 40px;
    padding: 0 20px;
    background: var(--edd-blue);
    color: #fff;
    border: none;
    border-radius: var(--edd-radius);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.1s;
    -webkit-appearance: none;
}

#edd-add-license-renewal:hover {
    background: var(--edd-blue-dark);
}

#edd-add-license-renewal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#edd-cancel-license-renewal {
    background: none;
    border: none;
    color: var(--edd-text-subtle);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

#edd-cancel-license-renewal:hover {
    color: var(--edd-text);
}


/* ============================================================
   ORDER HISTORY – Bestellingenoverzicht (kaartenweergave)
   ============================================================ */

.edd-blocks__orders {
    margin-top: 20px;
}

.edd-blocks__orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.edd-blocks-orders__order {
    border: 1px solid var(--edd-border-alt);
    border-radius: var(--edd-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px var(--edd-brand-shadow);
    transition: box-shadow 0.2s ease;
}

.edd-blocks-orders__order:hover {
    box-shadow: 0 4px 16px rgba(109, 25, 148, 0.14);
}

/* Koptekst van elke bestelkaart */
.edd-blocks-orders__order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--edd-brand);
    color: #fff;
}

.edd-blocks-orders__order-id {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* Datum en bedrag */
.edd-blocks-orders__order-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--edd-brand-muted);
    background: var(--edd-brand-light);
}

.edd-blocks-orders__order-date {
    color: #6b7280;
    font-size: 0.875rem;
}

.edd-blocks-orders__order-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--edd-brand);
}

/* Acties onderaan de kaart */
.edd-blocks-orders__order-details {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edd-blocks-orders__order-details a,
.edd-blocks-orders__order-details .edd_invoice_link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--edd-brand);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.edd-blocks-orders__order-details a:hover,
.edd-blocks-orders__order-details .edd_invoice_link:hover {
    color: var(--edd-brand-dark);
    text-decoration: underline;
}

/* Downloads-knop als prominente CTA */
.edd-blocks-orders__order-downloads-link a {
    background: var(--edd-brand);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.edd-blocks-orders__order-downloads-link a:hover {
    background: var(--edd-brand-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}


/* ============================================================
   RECEIPT – Betalingsbewijs na aankoop
   ============================================================ */

/* Gedeelde kaart-stijl voor totalen en producten */
.edd-blocks-receipt__totals,
.edd-blocks-receipt__items {
    border: 1px solid var(--edd-border-alt);
    border-radius: var(--edd-radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px var(--edd-brand-shadow);
    margin-bottom: 32px;
}

/* Rijen binnen het totalen-blok */
.edd-blocks__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 20px;
    border-bottom: 1px solid var(--edd-brand-muted);
    font-size: 0.9rem;
}

.edd-blocks__row:last-child {
    border-bottom: none;
}

/* Koptekstrij (paarse balk) */
.edd-blocks__row-header.edd-blocks-receipt__row-header {
    background: var(--edd-brand);
    color: #fff;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 1rem;
}

.edd-blocks__row-header .edd-blocks__row-label,
.edd-blocks__row-header .edd-blocks__row-value {
    color: #fff;
}

.edd-blocks__row-label {
    color: #6b7280;
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 16px;
}

.edd-blocks__row-value {
    color: #111827;
    font-weight: 500;
    text-align: right;
}

/* Licentie-key rij */
.edd-blocks-receipt__row-item--license-key {
    background: var(--edd-brand-light);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.edd-blocks__row-sublabel {
    color: #6b7280;
    font-size: 0.8rem;
}

/* Links in het totalen-blok */
.edd-blocks-receipt__totals a,
.edd-blocks-receipt__totals .edd_invoice_link {
    color: var(--edd-brand);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

.edd-blocks-receipt__totals a:hover,
.edd-blocks-receipt__totals .edd_invoice_link:hover {
    color: var(--edd-brand-dark);
    text-decoration: underline;
}

/*
 * EDD gooit soms een losse <tr> buiten een <table> als flexbox-context.
 * Dit corrigeert de weergave zonder de structuur te breken.
 */
.edd-blocks-receipt__totals .edd-blocks-receipt__row-item tr,
.edd-blocks-receipt__totals .edd-blocks-receipt__row-item td,
.edd-blocks-receipt__totals .edd-blocks-receipt__row-item div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
}

/* Verberg het eerste div-kind (EDD-artefact, zie hack hierboven) */
.edd-blocks-receipt__row-item tr div:first-child {
    display: none;
}

/* Sectie-koppen binnen receipt */
.edd-blocks__receipt h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--edd-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 32px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--edd-brand-muted);
}

/* Product-item rij */
.edd-blocks-receipt__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    gap: 16px;
}

.edd-blocks-receipt__item-details .edd-blocks__row-label {
    color: #111827;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

/* Downloadlinks bij product */
.edd_purchase_receipt_files {
    list-style: none;
    margin: 0;
    padding: 0;
}

.edd_purchase_receipt_files .edd_download_file_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--edd-brand);
    text-decoration: none;
    font-weight: 500;
    background: #f3e8fc;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #d8b4f8;
    transition: background 0.15s ease;
}

.edd_purchase_receipt_files .edd_download_file_link:hover {
    background: #e9d5f9;
    color: var(--edd-brand-dark);
}

.edd-blocks-receipt__item-price {
    font-weight: 700;
    color: var(--edd-brand);
    font-size: 1rem;
    white-space: nowrap;
}

/* Factuurlink als prominente knop */
.edd_invoice_link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--edd-brand);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease;
    margin-top: 4px;
}

.edd_invoice_link:hover {
    background: var(--edd-brand-dark);
}

/* Rij met factuurlink: geen border en lichte achtergrond */
.edd-blocks-receipt__row-item:has(.edd_invoice_link) {
    border-bottom: none;
    padding: 16px 20px;
    background: var(--edd-brand-light);
}

/* Subscription-tabel specifieke stijlen */
.edd_subscription_name {
    font-weight: 600;
    color: #111827;
}

.edd_subscription_billing_cycle {
    font-size: 0.8rem;
    color: #6b7280;
}

@media (max-width: 640px) {
    #edd_subscription_receipt {
        display: block;
        overflow-x: auto;
    }

    .edd-blocks-receipt__item {
        flex-direction: column;
    }
}


/* ============================================================
   SOFTWARE LICENSING – Licentiebeheer (overzichtspagina)
   ============================================================ */

/* Terug-knop bovenaan de pagina */
.edd-manage-license-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--edd-brand) !important;
    border: 2px solid var(--edd-brand);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: 24px;
}

.edd-manage-license-back:hover {
    background: var(--edd-brand);
    color: #fff !important;
}

/* Terug-knop rechts uitlijnen via de omliggende <p> */
p:has(.edd-manage-license-back) {
    text-align: right;
}

/* Sleutel tonen: icoon + verborgen input */
.view-key-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-key-wrapper img {
    width: 20px;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.view-key-wrapper img:hover {
    opacity: 1;
}

/* Licentie-key input in de tabel (overschrijft breedte uit gedeeld blok) */
#edd_sl_license_keys .edd_sl_license_key {
    width: 240px;
    margin-top: 6px;
    display: block;
}

/* Status-kleuren in licentietabel */
.edd_sl_license_status {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.edd-sl-active   { color: #166534; }
.edd-sl-inactive { color: #9a3412; }
.edd-sl-expired  { color: #7c3aed; }

/* Activatieteller */
.edd_sl_limit_used { font-weight: 700; color: var(--edd-brand); }
.edd_sl_limit_sep  { color: #9ca3af; margin: 0 2px; }
.edd_sl_limit_max  { color: #6b7280; }

/* Geen upgrades beschikbaar */
.edd_sl_no_upgrades {
    color: #9ca3af;
    font-size: 0.8rem;
    font-style: italic;
}

@media (max-width: 768px) {
    #edd_sl_license_keys {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   SOFTWARE LICENSING – Sitebeheer (per licentie)
   ============================================================ */

/* Sectie-kop boven licentie-info */
.edd-sl-manage-license-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--edd-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--edd-brand-muted);
}

/* Licentie-detailsblok boven de sitestabel */
.edd-sl-manage-license-details {
    background: var(--edd-brand-light);
    border: 1px solid var(--edd-border-alt);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
}

.edd-sl-manage-license-key,
.edd-sl-manage-license-product {
    display: block;
}

.edd-sl-manage-license-key code {
    font-family: monospace;
    font-size: 0.82rem;
    background: #f3e8fc;
    color: var(--edd-brand-dark);
    border: 1px solid #d8b4f8;
    border-radius: 5px;
    padding: 2px 8px;
}

.edd-sl-manage-license-product span {
    font-weight: 600;
    color: #111827;
}

/* Inhoud sitestabel (basis gedefinieerd in gedeelde tabelstijlen) */
#edd_sl_license_sites tbody td {
    color: #6b7280;
    font-style: italic;
}

#edd_sl_license_sites tbody td a {
    font-style: normal;
}

/* Formulier: nieuwe site toevoegen */
#edd_sl_license_add_site_form {
    background: #fff;
    border: 1px solid var(--edd-border-alt);
    border-radius: var(--edd-radius-lg);
    padding: 20px;
    box-shadow: 0 2px 8px var(--edd-brand-shadow);
}

#edd_sl_license_add_site_form > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

#edd_sl_license_add_site_form span {
    width: 100%;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 4px;
}

#edd_sl_license_add_site_form .edd-input {
    flex: 1;
    min-width: 200px;
    padding: 9px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: auto;
}

#edd_sl_license_add_site_form .edd-input:focus {
    border-color: var(--edd-brand);
    box-shadow: 0 0 0 3px rgba(109, 25, 148, 0.12);
}

#edd_sl_license_add_site_form input[type="submit"] {
    background: var(--edd-brand);
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

#edd_sl_license_add_site_form input[type="submit"]:hover {
    background: var(--edd-brand-dark);
}

@media (max-width: 640px) {
    #edd_sl_license_sites {
        display: block;
        overflow-x: auto;
    }

    #edd_sl_license_add_site_form > div {
        flex-direction: column;
        align-items: stretch;
    }

    #edd_sl_license_add_site_form input[type="submit"] {
        width: 100%;
        text-align: center;
    }
}


/* ============================================================
   FACTUUR – Losse factuurpagina (body.complete)
   ============================================================ */

body.complete {
    margin: 0;
    padding: 24px;
    background: #f5f3f7;
    font-family: inherit;
    color: #374151;
}

.invoice {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(109, 25, 148, 0.10);
    overflow: hidden;
}

/* Factuur-header */
.invoice-header {
    background: var(--edd-brand);
    padding: 28px 36px;
    color: #fff;
}

.order-number {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.order-number h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.payment-status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payment-complete {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.invoice-header .date {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Factuur-inhoud */
.invoice-main {
    padding: 32px 36px;
}

/* Verzender en klant naast elkaar */
.contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.storefront,
.customer {
    background: var(--edd-brand-light);
    border: 1px solid var(--edd-border-alt);
    border-radius: 10px;
    overflow: hidden;
}

.storefront header,
.customer header {
    background: var(--edd-brand-muted);
    color: var(--edd-brand);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
    border-bottom: 1px solid var(--edd-border-alt);
}

.storefront article,
.customer article {
    padding: 16px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
    position: relative;
}

.invoice-label {
    font-weight: 600;
    color: #111827;
}

.storefront__registration,
.storefront__vat,
.storefront__email {
    margin-top: 6px;
    font-size: 0.85rem;
}

.storefront__email a {
    color: var(--edd-brand);
    text-decoration: none;
}

.storefront__email a:hover {
    text-decoration: underline;
}

/* Factuurgegevens bijwerken-knop (verborgen bij printen) */
.customer .button.hide-on-print {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--edd-brand);
    border: 1px solid var(--edd-brand);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.customer .button.hide-on-print:hover {
    background: var(--edd-brand);
    color: #fff;
}

/* Regelitems */
.items header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--edd-brand);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--edd-brand-muted);
}

.items table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.items table tbody tr {
    border-bottom: 1px solid var(--edd-brand-muted);
}

.items table tbody tr:hover {
    background: var(--edd-brand-light);
}

.items table tbody td {
    padding: 12px 16px;
    color: #374151;
}

.items table tfoot tr {
    border-top: 1px solid var(--edd-border-alt);
}

.items table tfoot td {
    padding: 10px 16px;
    font-size: 0.875rem;
    color: #6b7280;
}

.items table tfoot tr:last-child td {
    font-weight: 700;
    font-size: 1rem;
    color: var(--edd-brand);
    border-top: 2px solid var(--edd-brand-muted);
}

.items table .price {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}

.items table tfoot .name {
    color: #6b7280;
}

/* Factuur-footer met actieknoppen */
.invoice-footer {
    padding: 20px 36px;
    background: var(--edd-brand-light);
    border-top: 1px solid var(--edd-border-alt);
}

.invoice-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.invoice-actions .button {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.invoice-actions .button.back {
    background: transparent;
    color: var(--edd-brand);
    border: 2px solid var(--edd-brand);
}

.invoice-actions .button.back:hover {
    background: var(--edd-brand);
    color: #fff;
}

.invoice-actions .button.print,
.invoice-actions .button.pdf {
    background: var(--edd-brand);
    color: #fff;
}

.invoice-actions .button.print:hover,
.invoice-actions .button.pdf:hover {
    background: var(--edd-brand-dark);
}

/* Afdrukstijlen */
@media print {
    body.complete {
        background: #fff;
        padding: 0;
    }

    .invoice {
        box-shadow: none;
        border-radius: 0;
    }

    .hide-on-print,
    .invoice-footer {
        display: none !important;
    }
}

@media (max-width: 580px) {
    .contacts {
        grid-template-columns: 1fr;
    }

    .invoice-header,
    .invoice-main,
    .invoice-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .invoice-actions {
        flex-direction: column;
    }

    .invoice-actions .button {
        width: 100%;
        text-align: center;
    }
}