/* =============================================
   Kundeportal – Frontend CSS
   ============================================= */

:root {
    --kp-primary:       #2563eb;
    --kp-primary-hover: #1d4ed8;
    --kp-success:       #16a34a;
    --kp-warning:       #d97706;
    --kp-danger:        #dc2626;
    --kp-gray-50:       #f9fafb;
    --kp-gray-100:      #f3f4f6;
    --kp-gray-200:      #e5e7eb;
    --kp-gray-400:      #9ca3af;
    --kp-gray-600:      #4b5563;
    --kp-gray-800:      #1f2937;
    --kp-border:        #e5e7eb;
    --kp-radius:        8px;
    --kp-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --kp-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
}

/* ---- Wrap ---- */
.kundeportal-wrap {
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    max-width: 1000px;
    margin: 0 auto;
}

/* ---- Header ---- */
.kundeportal-header {
    margin-bottom: 28px;
}
.kundeportal-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--kp-gray-800);
}
.kundeportal-welcome {
    color: var(--kp-gray-600);
    margin: 0;
    font-size: 1rem;
}

/* ---- Bokser og meldinger ---- */
.kundeportal-box {
    background: var(--kp-gray-50);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 24px;
    text-align: center;
}

.kundeportal-notice {
    border-radius: var(--kp-radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: .95rem;
}
.kundeportal-notice p { margin: 0; }
.kundeportal-notice-info    { background: #eff6ff; border-left: 4px solid var(--kp-primary); color: #1e40af; }
.kundeportal-notice-warning { background: #fffbeb; border-left: 4px solid var(--kp-warning);  color: #92400e; }
.kundeportal-notice-error   { background: #fef2f2; border-left: 4px solid var(--kp-danger);   color: #991b1b; }
.kundeportal-notice-success { background: #f0fdf4; border-left: 4px solid var(--kp-success);  color: #166534; }

/* ---- Knapper ---- */
.kundeportal-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.kundeportal-btn:active { transform: scale(.98); }
.kundeportal-btn-primary {
    background: var(--kp-primary);
    color: #fff;
}
.kundeportal-btn-primary:hover {
    background: var(--kp-primary-hover);
    color: #fff;
}

/* ---- Modul ---- */
.kundeportal-module {
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.kundeportal-module-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
}
.kundeportal-module-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kp-gray-800);
}

/* ---- Kundeinfo ---- */
.kundeportal-customer-info {
    padding: 12px 24px;
    background: #eff6ff;
    border-bottom: 1px solid var(--kp-border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.kundeportal-customer-name {
    font-weight: 600;
    font-size: .95rem;
}
.kundeportal-customer-org {
    font-size: .85rem;
    color: var(--kp-gray-600);
    background: var(--kp-gray-100);
    padding: 2px 8px;
    border-radius: 4px;
}

/* ---- Tabell ---- */
.kundeportal-table-wrap {
    overflow-x: auto;
    padding: 0;
}
.kundeportal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.kundeportal-table thead th {
    background: var(--kp-gray-50);
    padding: 11px 20px;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-600);
    border-bottom: 1px solid var(--kp-border);
    white-space: nowrap;
}
.kundeportal-table tbody tr {
    border-bottom: 1px solid var(--kp-border);
    transition: background .1s;
}
.kundeportal-table tbody tr:last-child { border-bottom: none; }
.kundeportal-table tbody tr:hover { background: var(--kp-gray-50); }
.kundeportal-table td {
    padding: 13px 20px;
    vertical-align: middle;
}
.kundeportal-text-right { text-align: right; }

/* Overfalte rader */
.kundeportal-row-overdue td:first-child {
    border-left: 3px solid var(--kp-danger);
}

/* ---- Statuser / badges ---- */
.kundeportal-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}
.kundeportal-badge-paid    { background: #dcfce7; color: #166534; }
.kundeportal-badge-open    { background: #dbeafe; color: #1e40af; }
.kundeportal-badge-overdue { background: #fee2e2; color: #991b1b; }

/* ---- PDF-lenke ---- */
.kundeportal-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--kp-primary);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    padding: 5px 10px;
    border: 1px solid var(--kp-primary);
    border-radius: 5px;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.kundeportal-pdf-link:hover {
    background: var(--kp-primary);
    color: #fff;
}

/* ---- Paginasjon-note ---- */
.kundeportal-pagination-note {
    padding: 12px 24px;
    font-size: .85rem;
    color: var(--kp-gray-400);
    text-align: right;
    border-top: 1px solid var(--kp-border);
    margin: 0;
}

/* =============================================
   Responsiv – mobil
   ============================================= */
@media (max-width: 640px) {
    .kundeportal-title { font-size: 1.35rem; }

    .kundeportal-table thead { display: none; }

    .kundeportal-table,
    .kundeportal-table tbody,
    .kundeportal-table tr,
    .kundeportal-table td {
        display: block;
        width: 100%;
    }
    .kundeportal-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--kp-border);
    }
    .kundeportal-table td {
        padding: 5px 20px;
        text-align: right;
        position: relative;
    }
    .kundeportal-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 20px;
        font-weight: 600;
        font-size: .8rem;
        color: var(--kp-gray-600);
        text-transform: uppercase;
        letter-spacing: .05em;
    }
    .kundeportal-text-right { text-align: right; }
}

/* =============================================
   Support-modul (osTicket-inspirert)
   ============================================= */

/* ---- Ticket header ---- */
.kp-ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    margin-bottom: 20px;
}
.kp-ticket-header-sub { margin: 4px 0 0; font-size: .88rem; color: var(--kp-gray-600); display: flex; align-items: center; gap: 8px; }
.kp-ticket-stats { display: flex; align-items: center; gap: 16px; }
.kp-ticket-stat { text-align: center; }
.kp-ticket-stat-num { display: block; font-size: 1.5rem; font-weight: 700; color: var(--kp-gray-800); line-height: 1; }
.kp-ticket-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kp-gray-400); font-weight: 600; }

/* ---- Ticket filter bar ---- */
.kp-ticket-filter-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.kp-ticket-filter {
    padding: 6px 14px; border: 1px solid var(--kp-border); border-radius: 6px;
    background: #fff; cursor: pointer; font-size: .85rem; font-family: var(--kp-font);
    color: var(--kp-gray-600); transition: all .15s;
}
.kp-ticket-filter:hover { border-color: var(--kp-primary); color: var(--kp-primary); }
.kp-ticket-filter.active { background: var(--kp-primary); color: #fff; border-color: var(--kp-primary); }

/* ---- Ticket card ---- */
.kp-ticket {
    border: 1px solid var(--kp-border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.kp-ticket:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kp-ticket--breached { border-left: 3px solid var(--kp-danger); }

.kp-ticket-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    background: var(--kp-gray-50);
    transition: background .1s;
}
.kp-ticket-row:hover { background: var(--kp-gray-100); }

.kp-ticket-icon { font-size: 1.3rem; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--kp-border); border-radius: 8px; }
.kp-ticket-info { flex: 1; min-width: 0; }
.kp-ticket-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kp-ticket-nr { font-family: monospace; font-size: .78rem; color: var(--kp-primary); font-weight: 600; white-space: nowrap; }
.kp-ticket-title { font-weight: 600; font-size: .95rem; color: var(--kp-gray-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ticket-meta-row { display: flex; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.kp-ticket-meta { font-size: .75rem; color: var(--kp-gray-400); white-space: nowrap; }
.kp-ticket-sla-warn { font-size: .75rem; color: var(--kp-danger); font-weight: 600; }
.kp-ticket-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.kp-ticket-body {
    padding: 18px;
    border-top: 1px solid var(--kp-border);
    background: #fff;
}

/* ---- Status flow ---- */
.kp-status-flow {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--kp-gray-50);
    border-radius: 6px;
}
.kp-flow-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
}
.kp-flow-step::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--kp-gray-200);
    margin: 0 8px;
}
.kp-flow-step:last-child::after { display: none; }
.kp-flow-step--done::after { background: var(--kp-success); }
.kp-flow-step--active::after { background: var(--kp-primary); }

.kp-flow-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--kp-gray-200); flex-shrink: 0;
    border: 2px solid var(--kp-gray-200);
}
.kp-flow-step--done .kp-flow-dot { background: var(--kp-success); border-color: var(--kp-success); }
.kp-flow-step--active .kp-flow-dot { background: var(--kp-primary); border-color: var(--kp-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

.kp-flow-label { font-size: .72rem; font-weight: 600; color: var(--kp-gray-400); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.kp-flow-step--active .kp-flow-label { color: var(--kp-primary); }
.kp-flow-step--done .kp-flow-label { color: var(--kp-success); }

/* ---- FAQ section ---- */
.kp-faq-section { margin-bottom: 20px; padding: 16px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; }
.kp-faq-intro { font-size: .88rem; font-weight: 600; color: #92400e; margin: 0 0 10px; }
.kp-faq-item { margin-bottom: 6px; }
.kp-faq-q { font-size: .88rem; font-weight: 500; color: var(--kp-gray-800); cursor: pointer; padding: 6px 0; }
.kp-faq-q:hover { color: var(--kp-primary); }
.kp-faq-a { font-size: .85rem; color: var(--kp-gray-600); padding: 6px 0 6px 16px; line-height: 1.5; }

/* ---- Ny sak header ---- */
.kp-ny-sak-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

/* ---- Gjenåpne ---- */
.kp-gjenapne-wrap { padding-top: 14px; border-top: 1px solid var(--kp-border); display: flex; align-items: center; gap: 12px; }
.kp-gjenapne-wrap .kp-lukket-info { margin: 0; }

/* ---- Svar actions ---- */
.kp-svar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Responsiv support ---- */
@media (max-width: 640px) {
    .kp-ticket-header { flex-direction: column; align-items: flex-start; }
    .kp-ticket-row { flex-direction: column; align-items: flex-start; }
    .kp-ticket-badges { margin-top: 8px; }
    .kp-ticket-icon { display: none; }
    .kp-status-flow { flex-wrap: wrap; gap: 8px; }
    .kp-flow-step::after { display: none; }
    .kp-ticket-title { white-space: normal; }
}

/* ---- Generelle knapper i support ---- */
.kp-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
    color: var(--kp-gray-800);
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.kp-btn:hover { background: var(--kp-gray-100); }
.kp-btn:active { transform: scale(.98); }
.kp-btn--primary {
    background: var(--kp-primary);
    border-color: var(--kp-primary);
    color: #fff;
}
.kp-btn--primary:hover {
    background: var(--kp-primary-hover);
    border-color: var(--kp-primary-hover);
    color: #fff;
}
.kp-btn--sm { padding: 6px 12px; font-size: .85rem; }

/* ---- Seksjoner ---- */
.kp-support-wrap {
    margin-top: 32px;
}
.kp-support-section {
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    overflow: hidden;
    margin-bottom: 28px;
    padding: 24px;
}
.kp-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--kp-gray-800);
}
.kp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.kp-section-header .kp-section-title { margin-bottom: 0; }

/* ---- Skjema ---- */
.kp-support-form .kp-form-group {
    margin-bottom: 16px;
}
.kp-support-form label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
}
.kp-support-form input[type=text],
.kp-support-form select,
.kp-support-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    box-sizing: border-box;
    transition: border-color .15s;
}
.kp-support-form input[type=text]:focus,
.kp-support-form select:focus,
.kp-support-form textarea:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.kp-req { color: var(--kp-danger); }
.kp-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* ---- SLA badge i skjema ---- */
.kp-sla-badge {
    font-size: .875rem;
    color: var(--kp-gray-600);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kp-sla-pill {
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

/* ---- Sak-liste ---- */
.kp-empty {
    color: var(--kp-gray-400);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

/* ---- Enkelt sak ---- */
.kp-sak {
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.kp-sak-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--kp-gray-50);
    cursor: pointer;
    user-select: none;
    gap: 12px;
    flex-wrap: wrap;
}
.kp-sak-header:hover { background: var(--kp-gray-100); }
.kp-sak-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}
.kp-sak-id {
    font-size: .8rem;
    color: var(--kp-gray-400);
    font-family: monospace;
    white-space: nowrap;
}
.kp-sak-tittel {
    font-weight: 600;
    font-size: .95rem;
    color: var(--kp-gray-800);
}
.kp-sak-kategori {
    font-size: .78rem;
    background: var(--kp-gray-200);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--kp-gray-600);
}
.kp-sak-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kp-pill {
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.kp-sak-dato {
    font-size: .8rem;
    color: var(--kp-gray-400);
    white-space: nowrap;
}
.kp-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    color: var(--kp-gray-400);
    padding: 2px 4px;
    line-height: 1;
}

/* ---- Sak-innhold ---- */
.kp-sak-body {
    padding: 16px;
    border-top: 1px solid var(--kp-border);
    background: #fff;
}

/* ---- Meldinger / historikk ---- */
.kp-svarhistorikk h4 {
    font-size: .85rem;
    font-weight: 600;
    color: var(--kp-gray-600);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 16px 0 10px;
}
.kp-melding {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    max-width: 90%;
}
.kp-melding--kunde {
    background: #eff6ff;
    border-left: 3px solid var(--kp-primary);
    margin-left: auto;
    margin-right: 0;
}
.kp-melding--admin {
    background: var(--kp-gray-50);
    border-left: 3px solid var(--kp-gray-400);
    margin-left: 0;
}
.kp-melding-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.kp-melding-header strong { font-size: .875rem; }
.kp-melding-tag {
    font-size: .75rem;
    background: rgba(0,0,0,.07);
    padding: 1px 7px;
    border-radius: 999px;
}
.kp-melding-dato {
    font-size: .75rem;
    color: var(--kp-gray-400);
    margin-left: auto;
}
.kp-melding-tekst {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--kp-gray-800);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Svar-form ---- */
.kp-svar-form-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--kp-border);
}
.kp-svar-form-wrap h4 {
    font-size: .875rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.kp-svar-form textarea.kp-svar-tekst {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .9rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: border-color .15s;
}
.kp-svar-form textarea.kp-svar-tekst:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.kp-lukket-info {
    color: var(--kp-gray-400);
    font-size: .875rem;
    padding-top: 10px;
}

/* ---- Notices i support ---- */
.kp-notice {
    padding: 11px 14px;
    border-radius: 6px;
    font-size: .9rem;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.kp-notice--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.kp-notice--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.kp-notice--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

/* ---- Responsiv ---- */
@media (max-width: 640px) {
    .kp-sak-header { flex-direction: column; align-items: flex-start; }
    .kp-melding { max-width: 100%; }
    .kp-form-footer { flex-direction: column; align-items: stretch; }
    .kp-form-footer .kp-btn { text-align: center; }
}

/* =============================================
   Fane-navigasjon
   ============================================= */

.kp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--kp-border);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.kp-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--kp-gray-600);
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    transition: color .15s, background .15s;
    position: relative;
}

.kp-tab:hover {
    color: var(--kp-gray-800);
    background: var(--kp-gray-100);
    text-decoration: none;
}

.kp-tab--active {
    color: var(--kp-primary);
    background: #fff;
    border-color: var(--kp-border);
    border-bottom-color: #fff;
    font-weight: 600;
}

.kp-tab--active:hover {
    color: var(--kp-primary);
    background: #fff;
}

.kp-tab-icon {
    font-size: .7em;
    opacity: .6;
}

.kp-tab-content {
    /* Innholdet vises direkte under fanene */
}

@media (max-width: 480px) {
    .kp-tabs { gap: 2px; }
    .kp-tab  { padding: 9px 14px; font-size: .88rem; }
}

/* =============================================================
   Betalingsmodul – Stripe
   ============================================================= */

.kundeportal-betaling-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px;
}

.kundeportal-betaling-section h2 {
    margin-top: 0;
}

/* Lagrede kort */
.kp-saved-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.kp-card-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.kp-card-icon {
    font-size: 1.4em;
}

.kp-card-info {
    flex: 1;
    font-size: .95em;
}

.kp-card-info small {
    margin-left: 8px;
    color: #6b7280;
}

.kp-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kp-badge {
    font-size: .75em;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.kp-badge-default {
    background: #d1fae5;
    color: #065f46;
}

.kp-btn-link {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: .85em;
    text-decoration: underline;
    padding: 0;
}

.kp-btn-danger {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .82em;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.kp-btn-danger:hover {
    background: #ef4444;
    color: #fff;
}

.kp-no-cards {
    color: #6b7280;
    font-size: .9em;
    margin: 8px 0;
}

/* Stripe Card Element */
.kp-stripe-element {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
    max-width: 460px;
    transition: border-color .2s;
}

.kp-stripe-element:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.kp-stripe-errors {
    color: #dc2626;
    font-size: .88em;
    margin-top: 6px;
    min-height: 1.2em;
}

.kp-stripe-notice {
    font-size: .8em;
    color: #6b7280;
    margin-top: 10px;
}

/* Betalingstabell */
.kp-pay-table {
    width: 100%;
}

.kp-overdue-date {
    color: #dc2626;
    font-weight: 600;
}

/* Betalingsmodal */
.kp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.kp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    cursor: pointer;
}

.kp-modal-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 1;
}

.kp-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6em;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
}

.kp-modal-title {
    margin: 0 0 6px;
    font-size: 1.15em;
    color: #111827;
}

.kp-modal-amount {
    margin: 0 0 20px;
    color: #374151;
    font-size: 1em;
}

.kp-modal-amount strong {
    font-size: 1.15em;
    color: #111827;
}

.kp-pay-method-choice {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kp-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .95em;
}

/* Auto-trekk info */
.kp-autotrekk-info {
    background: #f0f9ff;
    border-left: 4px solid #0ea5e9;
    border-radius: 6px;
    padding: 14px 16px;
}

.kp-autotrekk-info h3 {
    margin: 0 0 6px;
    font-size: .95em;
    color: #0c4a6e;
}

.kp-autotrekk-info p {
    margin: 0;
    font-size: .88em;
    color: #075985;
}

/* Prevent body scroll when modal open */
body.kp-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .kp-card-item {
        flex-wrap: wrap;
    }
    .kp-modal-box {
        padding: 20px 16px;
    }
}

/* =============================================================
   Min konto-modul
   ============================================================= */

.kp-minkonto-module {
    background: #fff;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    overflow: hidden;
}

/* --- Innloggingsskjema --- */
.kp-minkonto-login-wrap {
    padding: 40px 32px;
    max-width: 480px;
    margin: 0 auto;
}

.kp-minkonto-login-header {
    text-align: center;
    margin-bottom: 28px;
}

.kp-minkonto-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.kp-minkonto-login-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--kp-gray-800);
}

.kp-minkonto-login-desc {
    color: var(--kp-gray-600);
    font-size: .92rem;
    margin: 0;
}

/* WC innloggingsskjema tilpasning */
.kp-minkonto-wc-login .woocommerce-form-login,
.kp-minkonto-wc-login .woocommerce-form {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.kp-minkonto-wc-login .woocommerce-form-login .form-row {
    padding: 0;
    margin-bottom: 16px;
}

.kp-minkonto-wc-login label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
}

.kp-minkonto-wc-login input[type="text"],
.kp-minkonto-wc-login input[type="email"],
.kp-minkonto-wc-login input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    box-sizing: border-box;
    transition: border-color .15s;
    background: #fff;
}

.kp-minkonto-wc-login input[type="text"]:focus,
.kp-minkonto-wc-login input[type="email"]:focus,
.kp-minkonto-wc-login input[type="password"]:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.kp-minkonto-wc-login .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
}

.kp-minkonto-wc-login button[type="submit"],
.kp-minkonto-wc-login .woocommerce-button {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    background: var(--kp-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
    text-align: center;
}

.kp-minkonto-wc-login button[type="submit"]:hover,
.kp-minkonto-wc-login .woocommerce-button:hover {
    background: var(--kp-primary-hover);
    color: #fff;
}

.kp-minkonto-login-fallback .login-form-row {
    margin-bottom: 14px;
}

.kp-minkonto-login-fallback label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.kp-minkonto-login-fallback input[type="text"],
.kp-minkonto-login-fallback input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    box-sizing: border-box;
    transition: border-color .15s;
}

.kp-minkonto-lost-password {
    text-align: center;
    font-size: .88rem;
    margin-top: 14px;
}

.kp-minkonto-lost-password a {
    color: var(--kp-gray-400);
    text-decoration: none;
    font-weight: 400;
}

.kp-minkonto-lost-password a:hover {
    color: var(--kp-primary);
    text-decoration: underline;
}

.kp-minkonto-register-link {
    text-align: center;
    font-size: .88rem;
    color: var(--kp-gray-600);
    margin-top: 12px;
}

.kp-minkonto-register-link a {
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 500;
}

.kp-minkonto-register-link a:hover {
    text-decoration: underline;
}

/* --- Innlogget: velkomst-hero --- */
.kp-minkonto-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border-bottom: 1px solid var(--kp-border);
    flex-wrap: wrap;
}

.kp-avatar-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    border: 3px solid #fff;
    box-shadow: var(--kp-shadow);
    flex-shrink: 0;
}

.kp-minkonto-hero-info {
    flex: 1;
    min-width: 0;
}

.kp-minkonto-greeting {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--kp-gray-800);
}

.kp-minkonto-email {
    font-size: .88rem;
    color: var(--kp-gray-600);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-minkonto-logout-btn {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--kp-gray-600);
    text-decoration: none;
    background: #fff;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.kp-minkonto-logout-btn:hover {
    background: var(--kp-gray-100);
    color: var(--kp-gray-800);
    text-decoration: none;
}

/* --- Statistikk-kort --- */
.kp-minkonto-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--kp-border);
    border-bottom: 1px solid var(--kp-border);
}

.kp-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: #fff;
    text-decoration: none;
    color: var(--kp-gray-800);
    text-align: center;
    transition: background .15s;
    gap: 4px;
}

a.kp-stat-card:hover {
    background: var(--kp-gray-50);
    text-decoration: none;
    color: var(--kp-gray-800);
}

.kp-stat-card--alert {
    background: #fef2f2;
}

a.kp-stat-card--alert:hover {
    background: #fee2e2;
}

.kp-stat-card--info {
    background: #eff6ff;
}

a.kp-stat-card--info:hover {
    background: #dbeafe;
}

.kp-stat-card--neutral {
    cursor: default;
}

.kp-stat-icon {
    font-size: 1.1rem;
    opacity: .5;
    line-height: 1;
}

.kp-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--kp-gray-800);
}

.kp-stat-value--sm {
    font-size: 1rem;
    font-weight: 600;
}

.kp-stat-label {
    font-size: .78rem;
    color: var(--kp-gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
}

/* --- Seksjoner --- */
.kp-minkonto-section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--kp-border);
}

.kp-minkonto-section:last-child {
    border-bottom: none;
}

.kp-minkonto-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kp-gray-400);
    margin: 0 0 16px;
}

/* --- Info-grid (kundeinfo) --- */
.kp-minkonto-info-grid {
    display: grid;
    gap: 0;
}

.kp-info-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--kp-gray-100);
    font-size: .92rem;
}

.kp-info-row:last-child {
    border-bottom: none;
}

.kp-info-label {
    width: 130px;
    flex-shrink: 0;
    color: var(--kp-gray-600);
    font-weight: 500;
    font-size: .875rem;
}

.kp-info-value {
    color: var(--kp-gray-800);
    font-weight: 500;
    word-break: break-word;
}

/* --- Snarveier --- */
.kp-minkonto-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.kp-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    text-decoration: none;
    color: var(--kp-gray-800);
    font-size: .9rem;
    font-weight: 500;
    text-align: center;
    transition: background .15s, border-color .15s, transform .1s;
    background: var(--kp-gray-50);
}

.kp-shortcut:hover {
    background: #eff6ff;
    border-color: var(--kp-primary);
    color: var(--kp-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

.kp-shortcut-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.kp-shortcut-label {
    font-size: .85rem;
}

/* --- Tilbake-lenke i header --- */
.kp-back-link {
    color: var(--kp-gray-400);
    text-decoration: none;
    margin-right: 8px;
    font-size: 1rem;
    transition: color .15s;
    vertical-align: middle;
}
.kp-back-link:hover {
    color: var(--kp-primary);
    text-decoration: none;
}

/* --- Under-fane-navigasjon (subnav) --- */
.kp-minkonto-subnav {
    display: flex;
    gap: 2px;
    background: var(--kp-gray-50);
    border-bottom: 1px solid var(--kp-border);
    padding: 0 20px;
    flex-wrap: wrap;
}

.kp-subnav-tab {
    display: inline-block;
    padding: 12px 18px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--kp-gray-600);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.kp-subnav-tab:hover {
    color: var(--kp-gray-800);
    text-decoration: none;
}

.kp-subnav-tab--active {
    color: var(--kp-primary);
    border-bottom-color: var(--kp-primary);
    font-weight: 600;
}

.kp-subnav-tab--active:hover {
    color: var(--kp-primary);
}

/* --- Body-wrapper for undersider --- */
.kp-minkonto-body {
    /* ingen ekstra styling – seksjoner styres av .kp-minkonto-section */
}

/* --- WC embed-seksjon --- */
.kp-wc-embed {
    padding: 0;
}

.kp-wc-embed .kundeportal-module-header {
    padding: 18px 28px;
    border-bottom: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
}

.kp-wc-embed .kundeportal-module-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--kp-gray-800);
}

.kp-wc-form-wrap {
    padding: 28px;
}

/* --- iframe for WC-sider som krever full JS (f.eks. Stripe UPE) --- */
.kp-wc-iframe-wrap {
    width: 100%;
    min-height: 400px;
}

.kp-wc-iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    display: block;
    transition: height .2s;
}

/* Fallback-lenke når WC hook mangler */
.kp-wc-notice {
    color: var(--kp-gray-600);
    font-size: .92rem;
}

.kp-wc-notice a {
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 500;
}

/* ---- Reset/override av WC-skjema-stiler inne i portalen ---- */
.kp-wc-form-wrap .woocommerce-MyAccount-content,
.kp-wc-form-wrap .woocommerce {
    /* Ingen ramme, ingen WC-standard bakgrunn */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reset alle heading-størrelser inn i WC embed – hindrer Kadence-tema fra å override */
.kp-wc-form-wrap h1,
.kp-wc-form-wrap h2,
.kp-wc-form-wrap h3,
.kp-wc-form-wrap h4,
.kp-wc-form-wrap h5,
.kp-wc-form-wrap h6 {
    font-family: var(--kp-font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin: 0 0 12px !important;
    color: var(--kp-gray-800) !important;
}

/* Felt-rader */
.kp-wc-form-wrap .form-row,
.kp-wc-form-wrap p.form-row {
    margin-bottom: 16px;
    padding: 0 !important;
}

.kp-wc-form-wrap .form-row label,
.kp-wc-form-wrap fieldset legend,
.kp-wc-form-wrap label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
    font-family: var(--kp-font);
}

.kp-wc-form-wrap input[type="text"],
.kp-wc-form-wrap input[type="email"],
.kp-wc-form-wrap input[type="password"],
.kp-wc-form-wrap input[type="tel"],
.kp-wc-form-wrap select,
.kp-wc-form-wrap textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
    appearance: auto;
}

.kp-wc-form-wrap input[type="text"]:focus,
.kp-wc-form-wrap input[type="email"]:focus,
.kp-wc-form-wrap input[type="password"]:focus,
.kp-wc-form-wrap input[type="tel"]:focus,
.kp-wc-form-wrap select:focus,
.kp-wc-form-wrap textarea:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* To-kolonners layout for adresse/konto */
.kp-wc-form-wrap .woocommerce-address-fields,
.kp-wc-form-wrap .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.kp-wc-form-wrap .woocommerce-address-fields__field-wrapper .form-row-wide,
.kp-wc-form-wrap .woocommerce-address-fields__field-wrapper .form-row:only-child {
    grid-column: 1 / -1;
}

/* WC-knapper */
.kp-wc-form-wrap button[type="submit"],
.kp-wc-form-wrap input[type="submit"],
.kp-wc-form-wrap .button,
.kp-wc-form-wrap .woocommerce-Button {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    background: var(--kp-primary);
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--kp-font);
    text-decoration: none;
    margin-top: 8px;
}

.kp-wc-form-wrap button[type="submit"]:hover,
.kp-wc-form-wrap input[type="submit"]:hover,
.kp-wc-form-wrap .button:hover,
.kp-wc-form-wrap .woocommerce-Button:hover {
    background: var(--kp-primary-hover);
    color: #fff !important;
}

/* WC notices (feil/success inni skjema) */
.kp-wc-form-wrap .woocommerce-error,
.kp-wc-form-wrap .woocommerce-message,
.kp-wc-form-wrap .woocommerce-info {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .9rem;
    list-style: none;
    border-left-width: 4px;
    border-left-style: solid;
}

.kp-wc-form-wrap .woocommerce-error {
    background: #fef2f2;
    border-left-color: var(--kp-danger);
    color: #991b1b;
}

.kp-wc-form-wrap .woocommerce-message {
    background: #f0fdf4;
    border-left-color: var(--kp-success);
    color: #166534;
}

.kp-wc-form-wrap .woocommerce-info {
    background: #eff6ff;
    border-left-color: var(--kp-primary);
    color: #1e40af;
}

/* WC payment methods-tabell */
.kp-wc-form-wrap .woocommerce-PaymentMethods,
.kp-wc-form-wrap table.woocommerce-PaymentMethods {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    margin-bottom: 20px;
}

.kp-wc-form-wrap .woocommerce-PaymentMethods thead th {
    background: var(--kp-gray-50);
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-600);
    border-bottom: 1px solid var(--kp-border);
}

.kp-wc-form-wrap .woocommerce-PaymentMethods tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kp-border);
    vertical-align: middle;
}

.kp-wc-form-wrap .woocommerce-PaymentMethods tbody tr:last-child td {
    border-bottom: none;
}

/* Handlingsknapper i betalingsmetode-rad */
.kp-wc-form-wrap .woocommerce-PaymentMethods .button,
.kp-wc-form-wrap .woocommerce-PaymentMethods a.button {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    background: var(--kp-gray-50);
    color: var(--kp-gray-800) !important;
    border: 1px solid var(--kp-border);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    margin-top: 0;
    margin-right: 6px;
}

.kp-wc-form-wrap .woocommerce-PaymentMethods .button:hover,
.kp-wc-form-wrap .woocommerce-PaymentMethods a.button:hover {
    background: var(--kp-gray-100);
    color: var(--kp-gray-800) !important;
}

/* «Slett» i betalingsmetoder */
.kp-wc-form-wrap .woocommerce-PaymentMethods .delete,
.kp-wc-form-wrap .woocommerce-PaymentMethods a.delete {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    background: transparent;
    color: var(--kp-danger) !important;
    border: 1px solid var(--kp-danger);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    margin-top: 0;
}

.kp-wc-form-wrap .woocommerce-PaymentMethods .delete:hover,
.kp-wc-form-wrap .woocommerce-PaymentMethods a.delete:hover {
    background: var(--kp-danger);
    color: #fff !important;
}

/* Tom betalingsmetode-liste */
.kp-wc-form-wrap .woocommerce-PaymentMethods + p,
.kp-wc-form-wrap .payment_methods_no_methods {
    color: var(--kp-gray-400);
    font-size: .9rem;
    font-style: italic;
    margin-bottom: 16px;
}

/* Adresse-boks-grid (visning av lagrede adresser) */
.kp-wc-form-wrap .woocommerce-Addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.kp-wc-form-wrap .woocommerce-Address {
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 20px;
    background: var(--kp-gray-50);
}

.kp-wc-form-wrap .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kp-border);
}

.kp-wc-form-wrap .woocommerce-Address-title h3 {
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--kp-gray-800) !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    /* Reset Kadence/tema heading-stiler */
    font-family: var(--kp-font) !important;
}

.kp-wc-form-wrap .woocommerce-Address-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kp-border);
    flex-wrap: nowrap;
}

.kp-wc-form-wrap .woocommerce-Address-title .edit {
    font-size: .82rem;
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.kp-wc-form-wrap .woocommerce-Address-title .edit:hover {
    text-decoration: underline;
}

.kp-wc-form-wrap address {
    font-style: normal;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--kp-gray-600);
}

/* Ingen lagret adresse */
.kp-wc-form-wrap .woocommerce-Address address em,
.kp-wc-form-wrap .woocommerce-Address p em {
    color: var(--kp-gray-400);
    font-size: .875rem;
}

/* ---- Rediger konto: passord-seksjon (fieldset) ---- */
.kp-wc-form-wrap fieldset {
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 20px 20px 12px;
    margin: 24px 0 16px;
}

.kp-wc-form-wrap fieldset legend {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kp-gray-400);
    padding: 0 8px;
    margin-bottom: 0;
}

/* Passord-styrke-meter (WC innebygd) */
.kp-wc-form-wrap .woocommerce-password-strength {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 4px;
}

.kp-wc-form-wrap .woocommerce-password-strength.strong     { background: #dcfce7; color: #166534; }
.kp-wc-form-wrap .woocommerce-password-strength.good       { background: #d1fae5; color: #065f46; }
.kp-wc-form-wrap .woocommerce-password-strength.short,
.kp-wc-form-wrap .woocommerce-password-strength.bad        { background: #fee2e2; color: #991b1b; }

.kp-wc-form-wrap .woocommerce-password-hint {
    font-size: .8rem;
    color: var(--kp-gray-400);
    display: block;
    margin-bottom: 8px;
}

/* Husk meg / checkbox-rad i innlogging og skjema */
.kp-wc-form-wrap .woocommerce-form__label-for-checkbox,
.kp-wc-form-wrap .form-row .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
}

/* WC «Lagre endringer»-seksjon (form-row-last) */
.kp-wc-form-wrap .form-row-last {
    margin-top: 8px;
}

/* Adresse-rediger-lenker (inline i adressevisning) */
.kp-wc-form-wrap .woocommerce-Address a {
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
}

.kp-wc-form-wrap .woocommerce-Address a:hover {
    text-decoration: underline;
}

/* WC «Legg til betalingsmetode»-knapp under tabellen */
.kp-wc-form-wrap .woocommerce-MyAccount-paymentMethods + p a.button,
.kp-wc-form-wrap p > a.button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 600;
    background: var(--kp-primary);
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    margin-top: 4px;
}

.kp-wc-form-wrap .woocommerce-MyAccount-paymentMethods + p a.button:hover,
.kp-wc-form-wrap p > a.button:hover {
    background: var(--kp-primary-hover);
    color: #fff !important;
}

/* Betalingsmetoder – kortikon */
.kp-wc-form-wrap .woocommerce-PaymentMethod--cc td:first-child::before,
.kp-wc-form-wrap .payment-method-brand img {
    max-height: 22px;
    vertical-align: middle;
}

/* --- Responsiv --- */
@media (max-width: 640px) {
    .kp-minkonto-login-wrap { padding: 28px 20px; }
    .kp-minkonto-hero { padding: 16px 20px; }
    .kp-minkonto-section { padding: 20px; }
    .kp-minkonto-greeting { font-size: 1.1rem; }
    .kp-avatar-img { width: 48px !important; height: 48px !important; }
    .kp-info-label { width: 100px; }
    .kp-minkonto-shortcuts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .kp-minkonto-logout-btn { margin-left: auto; }
    .kp-minkonto-subnav { padding: 0 12px; }
    .kp-subnav-tab { padding: 10px 12px; font-size: .82rem; }
    .kp-wc-form-wrap { padding: 20px; }
    .kp-wc-form-wrap .woocommerce-address-fields,
    .kp-wc-form-wrap .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
    .kp-wc-form-wrap .woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* =============================================================
   Native WC views – felles wrapper
   ============================================================= */

.kp-native-wrap {
    padding: 28px;
}

/* ---- Skjema-elementer (deles av rediger-konto og adresser) ---- */

.kp-form {
    max-width: 600px;
}

.kp-form-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.kp-form-row {
    margin-bottom: 18px;
}

.kp-form-row label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
    font-family: var(--kp-font);
}

.kp-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
}

.kp-input:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

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

.kp-field-hint {
    display: block;
    font-size: .8rem;
    color: var(--kp-gray-400);
    margin-top: 4px;
}

.kp-field-hint-inline {
    font-size: .8rem;
    color: var(--kp-gray-400);
    font-weight: 400;
    margin-left: 4px;
}

.kp-fieldset {
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 20px 20px 4px;
    margin: 24px 0 20px;
}

.kp-fieldset legend {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kp-gray-400);
    padding: 0 8px;
    font-family: var(--kp-font);
}

.kp-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--kp-border);
    flex-wrap: wrap;
}

/* WC form_field genererte felt (brukes i adresse-skjema) */
.kp-address-fields-grid .form-row,
.kp-address-fields-grid p.form-row {
    margin-bottom: 16px;
    padding: 0 !important;
}

.kp-address-fields-grid .form-row label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kp-gray-800);
    font-family: var(--kp-font);
}

.kp-address-fields-grid input[type="text"],
.kp-address-fields-grid input[type="email"],
.kp-address-fields-grid input[type="tel"],
.kp-address-fields-grid select,
.kp-address-fields-grid textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 6px;
    font-size: .92rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-800);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s;
    appearance: auto;
}

.kp-address-fields-grid input:focus,
.kp-address-fields-grid select:focus,
.kp-address-fields-grid textarea:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* To-kolonne layout for adressefelter */
.kp-address-fields-grid .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.kp-address-fields-grid .woocommerce-address-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* ---- Betalingsmetoder ---- */

.kp-pm-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kp-pm-table-wrap {
    overflow-x: auto;
}

.kp-pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.kp-pm-table thead th {
    background: var(--kp-gray-50);
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-600);
    border-bottom: 1px solid var(--kp-border);
    white-space: nowrap;
}

.kp-pm-table tbody tr {
    border-bottom: 1px solid var(--kp-border);
    transition: background .1s;
}

.kp-pm-table tbody tr:last-child {
    border-bottom: none;
}

.kp-pm-table tbody tr:hover {
    background: var(--kp-gray-50);
}

.kp-pm-table td {
    padding: 14px 16px;
    vertical-align: middle;
}

.kp-pm-row--default {
    background: #f0fdf4;
}

.kp-pm-type {
    font-weight: 500;
    color: var(--kp-gray-800);
}

.kp-pm-last4 {
    font-family: monospace;
    color: var(--kp-gray-600);
    margin-left: 6px;
    font-size: .9rem;
}

.kp-pm-expires {
    color: var(--kp-gray-600);
    font-size: .88rem;
}

.kp-pm-default-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #dcfce7;
    color: #166534;
    margin-left: 8px;
    vertical-align: middle;
}

.kp-pm-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Knapper i PM-tabell */
.kp-pm-btn {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    border: 1px solid var(--kp-border);
    background: var(--kp-gray-50);
    color: var(--kp-gray-800);
    cursor: pointer;
    white-space: nowrap;
}

.kp-pm-btn:hover {
    background: var(--kp-gray-100);
    color: var(--kp-gray-800);
    text-decoration: none;
}

/* "Slett"-knapp */
.kp-pm-btn--delete {
    background: transparent;
    border-color: var(--kp-danger);
    color: var(--kp-danger);
}

.kp-pm-btn--delete:hover {
    background: var(--kp-danger);
    color: #fff !important;
    border-color: var(--kp-danger);
}

/* "Sett som standard"-knapp */
.kp-pm-btn--default,
.kp-pm-btn--wc_stripe_set_default {
    background: transparent;
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

.kp-pm-btn--default:hover,
.kp-pm-btn--wc_stripe_set_default:hover {
    background: var(--kp-primary);
    color: #fff !important;
}

/* Tom liste */
.kp-pm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--kp-gray-400);
    font-size: .92rem;
}

.kp-pm-empty-icon {
    font-size: 2rem;
    opacity: .4;
}

.kp-pm-empty p {
    margin: 0;
}

.kp-pm-footer {
    padding: 16px 0 4px;
    border-top: 1px solid var(--kp-border);
    margin-top: 4px;
}

/* ---- Adresse-oversikt ---- */

.kp-address-intro {
    font-size: .92rem;
    color: var(--kp-gray-600);
    margin: 0 0 20px;
}

.kp-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.kp-address-card {
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 20px;
    background: var(--kp-gray-50);
}

.kp-address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kp-border);
}

.kp-address-card-title {
    font-size: .95rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--kp-gray-800) !important;
    font-family: var(--kp-font) !important;
}

.kp-address-edit-link {
    font-size: .82rem;
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.kp-address-edit-link:hover {
    text-decoration: underline;
    color: var(--kp-primary);
}

.kp-address-content {
    font-style: normal;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--kp-gray-600);
}

.kp-address-empty {
    color: var(--kp-gray-400);
    font-size: .875rem;
}

/* ---- Responsiv ---- */
@media (max-width: 640px) {
    .kp-native-wrap { padding: 20px; }
    .kp-form-row-group { grid-template-columns: 1fr; gap: 0; }
    .kp-address-grid { grid-template-columns: 1fr; }
    .kp-address-fields-grid .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .kp-pm-table thead { display: none; }
    .kp-pm-table,
    .kp-pm-table tbody,
    .kp-pm-table tr,
    .kp-pm-table td {
        display: block;
        width: 100%;
    }
    .kp-pm-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--kp-border);
    }
    .kp-pm-table td {
        padding: 6px 16px;
        text-align: right;
        position: relative;
    }
    .kp-pm-table td::before {
        content: attr(data-title);
        position: absolute;
        left: 16px;
        font-weight: 600;
        font-size: .8rem;
        color: var(--kp-gray-600);
        text-transform: uppercase;
    }
    .kp-pm-actions { justify-content: flex-end; }
    .kp-form-actions { flex-direction: column; align-items: stretch; }
    .kp-form-actions .kp-btn { text-align: center; }
}

/* =====================================================
   Abonnement-modul
   ===================================================== */

.kundeportal-abonnement {
    /* Samme wrapper som fakturaer – ingen ekstra stiler nødvendig */
}

/* ---- Vedlegg i support ---- */

.kp-vedlegg-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,.06);
}

.kp-vedlegg-thumb {
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--kp-border);
    transition: border-color .15s, transform .1s;
}

.kp-vedlegg-thumb:hover {
    border-color: var(--kp-primary);
    transform: scale(1.05);
}

.kp-vedlegg-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}

.kp-vedlegg-fil {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: var(--kp-gray-50);
    border: 1px solid var(--kp-border);
    border-radius: 4px;
    font-size: .82rem;
    color: var(--kp-gray-800);
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.kp-vedlegg-fil:hover {
    background: #eff6ff;
    border-color: var(--kp-primary);
    color: var(--kp-primary);
    text-decoration: none;
}

.kp-vedlegg-icon {
    font-size: .9em;
}

.kp-vedlegg-navn {
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-vedlegg-str {
    color: var(--kp-gray-400);
    font-size: .9em;
}

.kp-file-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px dashed var(--kp-border);
    border-radius: 6px;
    font-size: .88rem;
    font-family: var(--kp-font);
    background: var(--kp-gray-50);
    cursor: pointer;
    transition: border-color .15s;
}

.kp-file-input:hover {
    border-color: var(--kp-primary);
}

.kp-file-hint {
    display: block;
    font-size: .78rem;
    color: var(--kp-gray-400);
    margin-top: 4px;
}

.kp-svar-vedlegg-wrap {
    margin-bottom: 8px;
}

.kp-svar-file-input {
    width: 100%;
    padding: 6px;
    font-size: .82rem;
    border: 1px dashed var(--kp-border);
    border-radius: 4px;
    background: var(--kp-gray-50);
    cursor: pointer;
}

/* ---- Ordredetaljer ---- */

.kp-ordre-row {
    transition: background .15s;
}

.kp-ordre-row:hover {
    background: #eff6ff !important;
}

.kp-ordre-row--active {
    background: #eff6ff !important;
    border-bottom-color: transparent;
}

.kp-ordre-detalj-cell {
    padding: 0 !important;
    background: #fafbfd;
}

.kp-ordre-detalj-loading {
    padding: 20px 24px;
    color: var(--kp-gray-400);
    font-size: .88rem;
    font-style: italic;
}

.kp-ordre-detalj-error {
    padding: 16px 24px;
    color: var(--kp-danger);
    font-size: .88rem;
}

.kp-ordre-detalj-wrap {
    padding: 20px 24px;
    border-top: 2px solid var(--kp-primary);
}

.kp-ordre-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 24px;
    margin-bottom: 20px;
}

.kp-ordre-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kp-ordre-info-full {
    grid-column: 1 / -1;
}

.kp-ordre-info-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-400);
}

.kp-ordre-info-value {
    font-size: .9rem;
    color: var(--kp-gray-800);
    font-weight: 500;
}

.kp-ordre-linjer-wrap {
    margin-top: 4px;
}

.kp-ordre-linjer-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-400);
    margin: 0 0 10px;
}

.kp-ordre-linjer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--kp-border);
}

.kp-ordre-linjer-table thead th {
    background: var(--kp-gray-50);
    padding: 9px 14px;
    text-align: left;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kp-gray-600);
    border-bottom: 1px solid var(--kp-border);
    white-space: nowrap;
}

.kp-ordre-linjer-table tbody tr {
    border-bottom: 1px solid var(--kp-border);
}

.kp-ordre-linjer-table tbody tr:last-child {
    border-bottom: none;
}

.kp-ordre-linjer-table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.kp-ordre-linjer-table tfoot td {
    padding: 10px 14px;
    background: var(--kp-gray-50);
    border-top: 2px solid var(--kp-border);
}

.kp-ordre-total-row td {
    font-weight: 600;
}

.kp-text-center { text-align: center; }
.kp-text-right { text-align: right; }

.kp-ordre-ingen-linjer {
    color: var(--kp-gray-400);
    font-style: italic;
    font-size: .88rem;
    padding: 12px 0;
}

@media (max-width: 640px) {
    .kp-ordre-info-grid { grid-template-columns: 1fr; }

    .kp-ordre-linjer-table thead { display: none; }
    .kp-ordre-linjer-table,
    .kp-ordre-linjer-table tbody,
    .kp-ordre-linjer-table tr,
    .kp-ordre-linjer-table td {
        display: block;
        width: 100%;
    }
    .kp-ordre-linjer-table tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--kp-border);
    }
    .kp-ordre-linjer-table td {
        padding: 4px 14px;
        text-align: right;
        position: relative;
    }
    .kp-ordre-linjer-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        font-weight: 600;
        font-size: .78rem;
        color: var(--kp-gray-600);
        text-transform: uppercase;
    }
    .kp-ordre-linjer-table tfoot td {
        display: block;
        text-align: right;
    }
    .kp-vedlegg-thumb img { width: 44px; height: 44px; }
    .kp-vedlegg-navn { max-width: 120px; }
}

/* ---- Oppgaver (kunde-visning) ---- */

.kp-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kp-task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kp-gray-100);
}

.kp-task-item:last-child {
    border-bottom: none;
}

.kp-task-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.kp-task-content {
    flex: 1;
    min-width: 0;
}

.kp-task-title {
    font-weight: 600;
    font-size: .92rem;
    color: var(--kp-gray-800);
}

.kp-task-desc {
    font-size: .82rem;
    color: var(--kp-gray-400);
    margin-top: 2px;
}

.kp-task-due {
    font-size: .8rem;
    color: var(--kp-gray-400);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 2px 8px;
    background: var(--kp-gray-50);
    border-radius: 4px;
}

.kp-task-due--overdue {
    color: var(--kp-danger);
    background: #fef2f2;
    font-weight: 600;
}

/* ---- Timeføring filter-knapper ---- */

.kp-timer-filter-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--kp-border);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-family: var(--kp-font);
    color: var(--kp-gray-600);
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.kp-timer-filter-btn:hover {
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

.kp-timer-filter-btn.active {
    background: var(--kp-primary);
    color: #fff;
    border-color: var(--kp-primary);
}

@media (max-width: 640px) {
    .kp-timer-filter { flex-wrap: wrap; }
    .kp-timer-filter-btn { padding: 3px 8px; font-size: .78rem; }
}

/* Produktliste i abonnement-tabellen */
.kp-abonnement-products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-abonnement-products li {
    font-size: .875rem;
    color: var(--kp-gray-800);
    line-height: 1.5;
}

.kp-abonnement-products li + li {
    margin-top: 2px;
}