/* ============================================================
   DIGIPOS THEME — MIN KONTO (WooCommerce My Account override)
   ============================================================
   Selvstendig ark (samme mønster som cart.css) — avhenger av theme.css
   for tokens, men egne responsive brytpunkt følger kjernesystemet
   1024/768/480 (DESIGN-SYSTEM.md §2). Kun --color-*/--radius-*/--shadow-*
   tokens brukes, aldri hardkodet hex, unntatt statusbadgene som bevisst
   gjenbruker de samme semantiske fargene som retur-flyten (§1).
   ============================================================ */

/* ── A. SIDE-HEADER ── */
.dp-account-header { margin-bottom: var(--space-8); }
/* Spesifisitet 0-0-3-0 (tre klasser) med vilje — .dp-account-page__inner
   bærer også .dp-container, og Fashion sin body.dp-style-fashion .dp-container
   (0-0-2-1) ville ellers vunnet over en enkel .dp-account-page__inner-regel
   (0-0-1-0) og nullstilt topp/bunn-padding uansett kildeorden. */
.dp-account-page .dp-container.dp-account-page__inner { padding: var(--space-8) 0 var(--space-24); }
.dp-account-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.dp-account-header__greeting { color: var(--color-text-muted); }

/* ── B. LAYOUT ── */
.dp-account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-8);
    align-items: start;
}

.dp-account-content { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.dp-account-content__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}
.dp-account-content__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* WooCommerce skriver alltid ut .woocommerce-notices-wrapper, selv uten
   varsler å vise — tom, men tar likevel plass i dp-account-content sitt
   flex-gap og dytter innholdet ned/ut av linje med sidebaren. Skjul den
   når den faktisk er tom. */
.dp-account-content > .woocommerce-notices-wrapper:empty { display: none; }

/* ── C. NAVIGASJON ── */
.dp-account-nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}
.dp-account-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dp-account-nav__list--logout { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

.dp-account-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: var(--transition);
}
.dp-account-nav__icon { display: flex; flex-shrink: 0; color: currentColor; opacity: .75; }
.dp-account-nav__link:hover { background: var(--color-primary-subtle); color: var(--color-primary); }
.dp-account-nav__link:hover .dp-account-nav__icon { opacity: 1; }
.dp-account-nav__link.is-active { background: var(--color-primary-subtle); color: var(--color-primary); }
.dp-account-nav__link.is-active .dp-account-nav__icon { opacity: 1; }
.dp-account-nav__link--logout:hover { background: var(--color-bg-2); color: var(--color-text); }

/* ── D. KORT (generisk byggekloss for alle underssider) ── */
.dp-account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}
.dp-account-card__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-5); }
.dp-account-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dp-account-card__header .dp-account-card__title { margin-bottom: 0; }
.dp-account-card__edit { color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.dp-account-card__edit:hover { text-decoration: underline; }

.dp-empty-state--sm { padding: var(--space-8) var(--space-4); }

/* ── E. DASHBOARD ── */
.dp-account-dashboard { display: flex; flex-direction: column; gap: var(--space-6); }
.dp-account-dashboard__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.dp-account-dashboard__address { color: var(--color-text); line-height: 1.7; font-size: var(--text-sm); margin: 0; }
.dp-account-dashboard__empty { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* ── F. ORDRE-KORT (brukt i dashboard, ordreliste og bestillingsbekreftelse) ── */
.dp-account-orders { display: flex; flex-direction: column; gap: var(--space-4); }

.dp-order-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dp-order-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dp-order-card__number { font-weight: 700; margin-right: var(--space-3); }
.dp-order-card__date { color: var(--color-text-muted); font-size: var(--text-sm); }
.dp-order-card__items { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.dp-order-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.dp-order-card__total { font-weight: 700; font-size: var(--text-lg); }
.dp-order-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.dp-account-orders__pagination { display: flex; justify-content: space-between; margin-top: var(--space-2); }

/* Statusbadge — grupperer WooCommerce sine statuser i tre bøtter.
   --default bruker rene tokens; --success/--error gjenbruker de samme
   hardkodede semantiske fargene som retur-grønn/feil-rød andre steder
   i temaet (DESIGN-SYSTEM.md §1) — ingen nye farger. */
.dp-order-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}
.dp-order-badge--default { background: var(--color-primary-subtle); color: var(--color-primary); }
.dp-order-badge--success { background: rgba(5, 150, 105, .12); color: #166534; }
.dp-order-badge--error { background: rgba(220, 38, 38, .1); color: #dc2626; }

/* ── G. ORDREDETALJ ── */
.dp-order-detail__note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.dp-order-detail__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.dp-order-detail__order-again { margin: var(--space-5) 0 0; }

.dp-account-view-order__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

.dp-order-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dp-order-notes__item { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.dp-order-notes__item:last-child { padding-bottom: 0; border-bottom: none; }
.dp-order-notes__date { font-size: var(--text-xs); color: var(--color-text-subtle); margin: 0 0 var(--space-1); }
.dp-order-notes__text { font-size: var(--text-sm); color: var(--color-text); }
.dp-order-notes__text p { margin: 0; }

/* ── H. ADRESSER ── */
.dp-account-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.dp-account-address-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}
.dp-account-address-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dp-account-address-card__title { font-size: var(--text-base); font-weight: 700; margin: 0; }
.dp-account-address-card__body { font-style: normal; line-height: 1.7; font-size: var(--text-sm); color: var(--color-text); }
.dp-account-address-card__empty { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

.dp-order-detail__addresses.dp-account-addresses { margin-top: var(--space-6); }

/* ── I. SKJEMA (konto- og adresseredigering) — gjenbruker native WC
   form-row-klasser, samme mønster som .dp-checkout .form-row ── */
.dp-account-form__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4);
}
.dp-account-form .form-row { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.dp-account-form .form-row-wide,
.dp-account-form .form-row--full { grid-column: 1 / -1; }
.dp-account-form .form-row-first { grid-column: 1; }
.dp-account-form .form-row-last { grid-column: 2; }
.dp-account-form .clear { display: none; }

.dp-account-form label { font-size: var(--text-sm); font-weight: 600; }
.dp-account-form__hint { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }

.dp-account-form input,
.dp-account-form select,
.dp-account-form textarea,
.dp-account-form .select2-selection {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-2);
    font-family: inherit;
    font-size: var(--text-base);
}
.dp-account-form input:focus,
.dp-account-form select:focus,
.dp-account-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #fff;
}

.dp-account-form__submit { margin-top: var(--space-2); }

/* Native WooCommerce-knapper vi ikke kontrollerer markup på direkte
   (betalingsgateway-skjemaer, radrader) — matcher dp-btn visuelt uten
   å bytte klassenavn (JS/gateways forventer .button). */
.dp-account-content .button:not(.dp-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    border-radius: var(--radius);
    border: 2px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}
.dp-account-content .button:not(.dp-btn):hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* ── J. BETALINGSMÅTER ── */
.dp-account-payment-methods { display: flex; flex-direction: column; gap: var(--space-4); }
.dp-payment-method-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.dp-payment-method-card--default { border-color: var(--color-primary); }
.dp-payment-method-card__info { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dp-payment-method-card__title { font-weight: 600; }
.dp-payment-method-card__expires { color: var(--color-text-muted); font-size: var(--text-sm); }
.dp-payment-method-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dp-account-payment-methods__add { margin-top: var(--space-2); }

/* ── K. NEDLASTINGER ── */
.dp-download-list { display: flex; flex-direction: column; }
.dp-download-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.dp-download-row:last-child { border-bottom: none; padding-bottom: 0; }
.dp-download-row__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dp-download-row__product { font-weight: 600; }
.dp-download-row__product a { color: inherit; text-decoration: none; }
.dp-download-row__product a:hover { color: var(--color-primary); }
.dp-download-row__meta { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── L. RESPONSIV (kjernesystem 1024/768/480) ── */
@media (max-width: 1024px) {
    .dp-account-layout { grid-template-columns: 220px 1fr; gap: var(--space-6); }
}

@media (max-width: 768px) {
    .dp-account-page .dp-container.dp-account-page__inner { padding-top: var(--space-6); padding-bottom: var(--space-16); }
    .dp-account-header { margin-bottom: var(--space-5); }

    .dp-account-layout { grid-template-columns: 1fr; gap: var(--space-5); }

    /* Sidebar → horisontal fanerad, sticky under headeren, skjult scrollbar
       (samme mønster som rails MOBILE.md §8 beskriver). */
    .dp-account-nav {
        position: sticky;
        top: var(--header-height);
        z-index: 10;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        overflow-x: auto;
        padding: var(--space-2);
        scrollbar-width: none;
    }
    .dp-account-nav::-webkit-scrollbar { display: none; }
    .dp-account-nav__list,
    .dp-account-nav__list--logout { flex-direction: row; flex-shrink: 0; }
    .dp-account-nav__list--logout { margin-top: 0; padding-top: 0; border-top: none; padding-left: var(--space-2); margin-left: var(--space-1); border-left: 1px solid var(--color-border); }
    .dp-account-nav__link { white-space: nowrap; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
    .dp-account-nav__icon { opacity: 1; }

    .dp-account-dashboard__grid { grid-template-columns: 1fr; }
    .dp-account-addresses { grid-template-columns: 1fr; }
    .dp-account-form__fields { grid-template-columns: 1fr; }
    .dp-account-form .form-row-first,
    .dp-account-form .form-row-last { grid-column: 1; }

    .dp-order-card__bottom,
    .dp-payment-method-card,
    .dp-download-row { flex-direction: column; align-items: flex-start; }
    .dp-order-card__actions,
    .dp-payment-method-card__actions { width: 100%; }
    .dp-order-card__actions .dp-btn,
    .dp-payment-method-card__actions .dp-btn { flex: 1; text-align: center; }
}

@media (max-width: 480px) {
    .dp-account-card,
    .dp-account-address-card,
    .dp-order-card,
    .dp-payment-method-card { padding: var(--space-4); }
}