/* =============================================================
 * min-konto.css — Complete Min konto restyle
 *
 * Covers every WooCommerce myaccount endpoint:
 *   /min-konto/                  Kontrollpanel (dashboard)
 *   /min-konto/orders/           Ordre (list)
 *   /min-konto/view-order/N/     Enkeltordre (single)
 *   /min-konto/edit-address/     Adresser (list)
 *   /min-konto/edit-address/X/   Rediger adresse (form)
 *   /min-konto/edit-account/     Kontodetaljer (form + danger zone)
 *
 * Plus logged-out views (login, register, lost-password) at the
 * bottom of this file.
 *
 * Layout: page header → horizontal tabs → content. No sidebar.
 * Enqueue on is_account_page().
 * ============================================================= */


/* ============ TOKENS (local fallbacks; remove if your global
 *              tokens.css already defines these) ============ */
:root {
  --n3d-ink:        oklch(0.18 0.01 260);
  --n3d-ink-2:      oklch(0.25 0.01 260);
  --n3d-ink-3:      oklch(0.35 0.01 250);
  --n3d-mute:       oklch(0.5 0.01 250);
  --n3d-mute-2:     oklch(0.6 0.01 250);
  --n3d-line:       oklch(0.92 0.005 250);
  --n3d-line-2:     oklch(0.88 0.005 250);
  --n3d-bg:         oklch(0.99 0.003 80);
  --n3d-bg-soft:    oklch(0.97 0.005 250);
  --n3d-accent:     #2F80ED;
  --n3d-danger:     oklch(0.55 0.18 25);
  --n3d-danger-bg:  oklch(0.98 0.015 25);
  --n3d-danger-bd:  oklch(0.86 0.08 25);
  --n3d-success:    oklch(0.5 0.55 145);
  --f-display: 'Geist', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
}


/* ============ HIDE GLOBAL SITE HEADER ON ACCOUNT PAGES ============
 * The account header (slim brand strip) replaces it. Remove this rule
 * if you prefer to keep the global header — but the design omits it.
 * ================================================================== */
.woocommerce-account .site-header,
.woocommerce-account #masthead { display: none !important; }


/* ============ ACCOUNT PAGE SHELL ============ */
.woocommerce-account {
  background: var(--n3d-bg);
  color: var(--n3d-ink);
  font-family: var(--f-body);
  font-weight: 300;
  min-height: 100vh;
}


/* ============ ACCOUNT PAGE HEADER (above tabs) ============ */
.n3d-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 56px;
  border-bottom: 1px solid var(--n3d-line);
  background: var(--n3d-bg);
}
.n3d-account-header__left {
  display: flex; align-items: center; gap: 24px;
}
.n3d-account-header__logo {
  display: block;
  height: 22px; width: auto;
}
.n3d-account-header__step {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--n3d-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.n3d-account-header__right {
  font-size: 13px;
  color: var(--n3d-ink-2);
}
.n3d-account-header__right a {
  color: var(--n3d-ink-3);
  text-decoration: none;
}
.n3d-account-header__right a:hover { color: var(--n3d-ink); }

@media (max-width: 768px) {
  .n3d-account-header {
    padding: 16px 20px;
  }
}


/* ============ HORIZONTAL TAB BAR ============ */
.n3d-account-tabs {
  display: flex;
  gap: 32px;
  padding: 0 56px;
  border-bottom: 1px solid var(--n3d-line);
  max-width: 1280px;
  margin: 0 auto;
  /* overflow handling for mobile */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.n3d-account-tab {
  font-size: 14px;
  color: var(--n3d-mute);
  text-decoration: none;
  padding: 18px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* sit on top of the parent border */
  font-family: var(--f-body);
}
.n3d-account-tab:hover { color: var(--n3d-ink); }
.n3d-account-tab.is-active {
  color: var(--n3d-ink);
  font-weight: 500;
  border-bottom-color: var(--n3d-ink);
}

/* HIDE the default vertical sidebar — our horizontal tabs replace it */
.woocommerce-MyAccount-navigation {
  display: none !important;
}


/* ============ MAIN CONTENT WRAPPER ============ */
.woocommerce-account .woocommerce {
  /* Woo wraps everything in a single .woocommerce div */
  background: var(--n3d-bg);
}
.woocommerce-MyAccount-content {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 40px 56px 96px !important;
  float: none !important;
}
@media (max-width: 768px) {
  .woocommerce-MyAccount-content {
    padding: 28px 20px 60px !important;
  }
  .n3d-account-tabs {
    padding: 0 20px;
    gap: 24px;
  }
}


/* ============ PAGE HEAD (h1 + lede + optional CTA on right) ============ */
.woocommerce-MyAccount-content > h1,
.woocommerce-MyAccount-content > h2:first-of-type {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  line-height: 1.05;
  color: var(--n3d-ink);
}

/* Default Woo greeting paragraph */
.woocommerce-MyAccount-content > p:first-of-type {
  font-size: 14px;
  color: var(--n3d-ink-3);
  margin: 0 0 48px 0;
}

/* Section eyebrow utility (mono uppercase 11px) */
.n3d-eyebrow,
.woocommerce-MyAccount-content .eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--n3d-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin: 0 0 18px 0;
}
.n3d-eyebrow--danger { color: var(--n3d-danger); }


/* ============ DASHBOARD (Kontrollpanel) ============ */
.n3d-dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  gap: 24px;
}
.n3d-dash-head__cta {
  font-size: 14px;
  color: var(--n3d-ink);
  text-decoration: none;
  white-space: nowrap;
}
.n3d-dash-head__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

.n3d-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.n3d-quick-card {
  padding: 20px 22px;
  border: 1px solid var(--n3d-line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s;
}
.n3d-quick-card:hover { border-color: var(--n3d-line-2); }
.n3d-quick-card__h {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--n3d-ink);
  margin: 0 0 6px;
}
.n3d-quick-card__p {
  font-size: 13px;
  color: var(--n3d-ink-3);
  margin: 0;
}
@media (max-width: 768px) {
  .n3d-quick { grid-template-columns: 1fr; }
  .n3d-dash-head { flex-direction: column; align-items: flex-start; }
}


/* ============ ORDERS LIST (Ordre) ============
 * Restyles Woo's default <table.woocommerce-orders-table>. */
.woocommerce-MyAccount-content .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table thead {
  display: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tbody tr {
  display: grid;
  grid-template-columns: 180px 140px 100px 1fr 120px 24px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--n3d-line);
}
.woocommerce-MyAccount-content .woocommerce-orders-table tbody td {
  padding: 0 !important;
  border: none !important;
  font-size: 13px;
  background: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--n3d-ink);
  text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
  font-size: 13px;
  color: var(--n3d-mute);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  background: var(--n3d-bg-soft);
  color: var(--n3d-ink-3);
  justify-self: start;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tr.order-processing .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table tr.order-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table tr.order-on-hold .woocommerce-orders-table__cell-order-status {
  background: oklch(0.92 0.05 240);
  color: var(--n3d-accent);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number::before,
.woocommerce-MyAccount-content .woocommerce-orders-table tbody td::before {
  display: none !important;
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  color: var(--n3d-ink);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions {
  display: none;
}

/* Make the whole row clickable, not just the order# / arrow.
   The order-number cell already wraps the order # in an <a> on both
   our dashboard mini-list and Woo's default orders.php; stretch that
   anchor's ::after pseudo across the row. The anchor itself stays
   position:static so the pseudo uses <tr> (position:relative) as
   its offset parent. */
.woocommerce-MyAccount-content .woocommerce-orders-table tbody tr {
  position: relative;
  cursor: pointer;
  transition: background-color .12s;
}
.woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:hover {
  background: var(--n3d-bg-soft);
}
.woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Any sibling anchor in the row (e.g. dashboard's trailing → link)
   needs to sit above the overlay so its own click target still works. */
.woocommerce-MyAccount-content .woocommerce-orders-table tbody td:not(.woocommerce-orders-table__cell-order-number) a {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id     status"
      "date   total";
    padding: 16px 18px;
    border: 1px solid var(--n3d-line);
    border-radius: 10px;
    margin-bottom: 12px;
  }
  .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-number { grid-area: id; }
  .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { grid-area: status; justify-self: end; }
  .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-date   { grid-area: date; }
  .woocommerce-MyAccount-content .woocommerce-orders-table .woocommerce-orders-table__cell-order-total  { grid-area: total; }
}


/* ============ VIEW ORDER (Enkeltordre) ============
 * Markup comes from our view-order.php override. */
.n3d-order-back {
  display: inline-block;
  margin: 4px 0 12px;
  font-size: 13px;
  color: var(--n3d-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.n3d-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 0 0 8px 0;
}
.n3d-order-head__tracking {
  font-size: 13px;
  color: var(--n3d-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.n3d-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 40px;
  padding-top: 24px;
  border-top: 1px solid var(--n3d-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.n3d-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.n3d-step + .n3d-step::before {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--n3d-line-2);
  margin: 0 8px;
}
.n3d-step__n {
  font-family: var(--f-mono);
  font-size: 11px;
}
.n3d-step__t {
  font-size: 12px;
}
.n3d-step.is-done .n3d-step__n,
.n3d-step.is-done .n3d-step__t  { color: var(--n3d-success); }
.n3d-step.is-active .n3d-step__n { color: var(--n3d-ink); }
.n3d-step.is-active .n3d-step__t { color: var(--n3d-ink); font-weight: 500; }
.n3d-step.is-future .n3d-step__n,
.n3d-step.is-future .n3d-step__t { color: var(--n3d-mute-2); }

.n3d-order-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
}
.n3d-order-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.n3d-order-card {
  padding: 22px;
  border: 1px solid var(--n3d-line);
  border-radius: 10px;
  background: var(--n3d-bg);
}
.n3d-order-card p {
  font-size: 14px;
  color: var(--n3d-ink-2);
  line-height: 1.6;
  margin: 0;
}
.n3d-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--n3d-ink-3);
}
.n3d-sum-row__v {
  font-family: var(--f-mono);
  font-size: 13px;
}
.n3d-sum-divider {
  height: 1px;
  background: var(--n3d-line-2);
  margin: 12px 0;
}
.n3d-sum-total {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--f-display);
  color: var(--n3d-ink);
}
.n3d-sum-mva {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--n3d-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  margin-top: 4px;
}

/* Style Woo's stock order-items table inside view-order */
.woocommerce-MyAccount-content .woocommerce-order-details table.order_details,
.woocommerce-MyAccount-content .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin: 0;
}
.woocommerce-MyAccount-content .order_details thead { display: none; }
.woocommerce-MyAccount-content .order_details tbody tr {
  border-bottom: 1px solid var(--n3d-line);
}
.woocommerce-MyAccount-content .order_details tbody td {
  padding: 14px 0;
  font-size: 14px;
  border: none;
  background: none;
}
.woocommerce-MyAccount-content .order_details .product-name {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--n3d-ink);
}
.woocommerce-MyAccount-content .order_details .product-name .wc-item-meta {
  font-size: 12px;
  color: var(--n3d-mute);
  font-family: var(--f-mono);
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-MyAccount-content .order_details .product-total {
  text-align: right;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--n3d-ink);
}

@media (max-width: 768px) {
  .n3d-order-grid { grid-template-columns: 1fr; gap: 24px; }
  .n3d-steps { flex-wrap: wrap; gap: 12px 8px; }
  .n3d-step + .n3d-step::before { display: none; }
  .n3d-order-head { flex-direction: column; align-items: flex-start; }
}


/* ============ ADDRESSES LIST ============ */
.woocommerce-MyAccount-content .u-columns,
.woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
/* WC's legacy frontend.css floats .col-1/.col-2 at width:48% and
   adds a clearfix pseudo-element; both collide with our grid and
   produce a 2x2 / skewed layout. Neutralize them inside the grid. */
.woocommerce-MyAccount-content .u-columns > .u-column1,
.woocommerce-MyAccount-content .u-columns > .u-column2,
.woocommerce-MyAccount-content .u-columns > .col-1,
.woocommerce-MyAccount-content .u-columns > .col-2,
.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .u-column2,
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses > .col-2 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.woocommerce-MyAccount-content .u-columns::before,
.woocommerce-MyAccount-content .u-columns::after,
.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after {
  content: none !important;
  display: none !important;
}
.woocommerce-MyAccount-content .woocommerce-Address {
  padding: 22px;
  border: 1px solid var(--n3d-line);
  border-radius: 10px;
  background: var(--n3d-bg);
}
.woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n3d-mute);
  font-weight: 400;
  margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  font-size: 13px;
  color: var(--n3d-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-MyAccount-content .woocommerce-Address address {
  font-size: 14px;
  color: var(--n3d-ink-2);
  line-height: 1.6;
  font-style: normal;
}

@media (max-width: 768px) {
  .woocommerce-MyAccount-content .u-columns,
  .woocommerce-MyAccount-content .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}


/* ============ EDIT ADDRESS / EDIT ACCOUNT FORMS ============ */
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm {
  max-width: 640px;
}

/* Two-col rows (Fornavn/Etternavn, Postnummer/Sted) */
.woocommerce-MyAccount-content form .form-row {
  margin: 0 0 16px 0;
  padding: 0;
}
.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}
.woocommerce-MyAccount-content form .form-row-first { margin-right: 3%; }
.woocommerce-MyAccount-content form .form-row-wide { width: 100%; clear: both; }

/* Labels — mono uppercase */
.woocommerce-MyAccount-content form .form-row label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n3d-mute);
  margin-bottom: 6px;
}
.woocommerce-MyAccount-content form .form-row label .required,
.woocommerce-MyAccount-content form .form-row abbr.required {
  color: var(--n3d-danger);
  text-decoration: none;
  border: none;
  font-weight: 400;
}

/* Inputs */
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--f-body);
  background: white;
  border: 1px solid var(--n3d-line-2);
  border-radius: 6px;
  color: var(--n3d-ink);
  outline: none;
  box-sizing: border-box;
  box-shadow: none;
}
.woocommerce-MyAccount-content form textarea {
  height: auto;
  min-height: 100px;
  padding: 10px 14px;
  line-height: 1.5;
}
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
  border-color: var(--n3d-ink);
  box-shadow: 0 0 0 3px oklch(0.92 0.02 260);
}

/* Help text under field */
.woocommerce-MyAccount-content form .description,
.woocommerce-MyAccount-content form span.description,
.woocommerce-MyAccount-content form em {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--n3d-mute);
  margin: 4px 0 0;
}

/* Password fieldset */
.woocommerce-MyAccount-content form fieldset {
  border: 1px solid var(--n3d-line-2);
  border-radius: 8px;
  padding: 12px 18px 4px;
  margin: 18px 0;
}
.woocommerce-MyAccount-content form fieldset legend {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n3d-mute);
  padding: 0 6px;
}

/* Submit button — dark pill */
.woocommerce-MyAccount-content form button.button,
.woocommerce-MyAccount-content form button[name="save_account_details"],
.woocommerce-MyAccount-content form button[name="save_address"] {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  background: var(--n3d-ink);
  color: white;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-body);
  margin-top: 8px;
}
.woocommerce-MyAccount-content form button.button:hover {
  background: oklch(0.10 0.01 260);
}

/* Secondary "Avbryt" link */
.n3d-btn-ghost {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  background: none;
  color: var(--n3d-ink-2);
  border: 1px solid var(--n3d-line-2);
  border-radius: 999px;
  font-family: var(--f-body);
  text-decoration: none;
  margin-left: 8px;
}
.n3d-btn-ghost:hover { border-color: var(--n3d-mute); color: var(--n3d-ink); }


/* ============ DANGER ZONE ============ */
.n3d-danger-zone {
  margin-top: 64px;
  max-width: 640px;
}
.n3d-danger-card {
  padding: 20px 22px;
  margin-top: 8px;
  border: 1px solid var(--n3d-danger-bd);
  background: var(--n3d-danger-bg);
  border-radius: 10px;
}
.n3d-danger-card__h {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: oklch(0.25 0.12 25);
  margin: 0 0 8px;
}
.n3d-danger-card__p {
  font-size: 14px;
  color: oklch(0.32 0.04 25);
  margin: 0 0 14px;
  line-height: 1.6;
}
.n3d-btn-danger {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  background: var(--n3d-danger);
  color: white;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--f-body);
}
.n3d-btn-danger:hover { background: oklch(0.50 0.20 25); color: white; }


/* ============ DELETE-ACCOUNT MODAL ============ */
.n3d-modal {
  border: 0;
  padding: 36px;
  max-width: 480px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 64px oklch(0 0 0 / 0.2);
  background: var(--n3d-bg);
}
.n3d-modal::backdrop {
  background: oklch(0.1 0.005 260 / 0.5);
}
.n3d-modal h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 8px 0 12px;
}
.n3d-modal p {
  font-size: 14px;
  color: var(--n3d-ink-3);
  line-height: 1.6;
  margin: 0 0 16px;
}
.n3d-modal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.n3d-modal-list li {
  font-size: 13px;
  color: var(--n3d-ink-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--n3d-line);
}
.n3d-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}


/* =============================================================
 * LOGGED-OUT VIEWS — login, register, lost-password
 * Centered narrow card; no tabs, no sidebar.
 * =============================================================
 *
 * If the Vipps + Google + Facebook social-login delivery is
 * already deployed, those styles take precedence over these.
 */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: flex;
  justify-content: center;
  padding: 72px 56px;
}
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register,
.woocommerce-account:not(.logged-in) .lost_reset_password {
  width: 460px;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.woocommerce-account:not(.logged-in) .n3d-account-tabs { display: none; }
.woocommerce-account:not(.logged-in) form.woocommerce-form-login button,
.woocommerce-account:not(.logged-in) form.woocommerce-form-register button {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 999px;
  margin-top: 24px;
}

@media (max-width: 768px) {
  .woocommerce-account:not(.logged-in) .woocommerce {
    padding: 40px 20px;
  }
}
/* ============================================================
 * view-order.css — single order detail page
 * Append to assets/css/min-konto.css (or load alongside).
 * Targets the new view-order.php override.
 * ============================================================ */

/* Eyebrow utility — view-order template uses .f3d-eye for every
   section header (Ordre %s · Produkter · Summering · Levering ·
   Betaling · Fakturaadresse). Only .f3d-eye--danger was defined
   before; this is the base styling. */
.woocommerce-MyAccount-content .f3d-eye {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--n3d-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin: 0 0 18px 0;
}

/* Back link */
.f3d-back-link {
  display: inline-block;
  margin: 12px 0 16px;
  font-size: 13px;
  color: oklch(0.4 0.01 250);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Page head */
.f3d-order-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 8px;
}
.f3d-order-head__text { min-width: 0; }
.f3d-order-head h1 {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.025em;
  margin: 4px 0 8px;
  line-height: 1.05;
}
.f3d-order-head p {
  font-size: 14px;
  color: oklch(0.4 0.01 250);
  margin: 0;
}
.f3d-link-arrow {
  font-size: 13px;
  color: oklch(0.2 0.01 260);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Step indicator */
.f3d-steps {
  list-style: none;
  padding: 20px 0 0;
  margin: 16px 0 40px;
  border-top: 1px solid oklch(0.92 0.005 250);
  display: flex;
  align-items: center;
  gap: 10px;
}
.f3d-step { display: flex; align-items: center; gap: 8px; }
.f3d-step + .f3d-step::before {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: oklch(0.88 0.005 250);
  margin-right: 8px;
}
.f3d-step__n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.f3d-step__t { font-size: 12px; }
.f3d-step.is-done .f3d-step__n,
.f3d-step.is-done .f3d-step__t { color: oklch(0.5 0.55 145); }
.f3d-step.is-active .f3d-step__n { color: oklch(0.2 0.01 260); }
.f3d-step.is-active .f3d-step__t { color: oklch(0.2 0.01 260); font-weight: 500; }
.f3d-step.is-future .f3d-step__n,
.f3d-step.is-future .f3d-step__t { color: oklch(0.7 0.01 250); }

/* Main grid */
.f3d-order-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
}
.f3d-order-main { min-width: 0; }
.f3d-order-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cards */
.f3d-order-card {
  padding: 22px;
  border: 1px solid oklch(0.92 0.005 250);
  border-radius: 10px;
  background: oklch(0.99 0.003 80);
}
.f3d-order-card--inline { margin-top: 32px; }
.f3d-order-card address {
  font-size: 14px;
  color: oklch(0.25 0.01 260);
  line-height: 1.6;
  font-style: normal;
  margin: 0;
}
.f3d-order-card p {
  font-size: 14px;
  color: oklch(0.25 0.01 260);
  line-height: 1.6;
  margin: 0;
}
.f3d-order-card__meta {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed oklch(0.92 0.005 250);
  font-size: 12px !important;
  color: oklch(0.5 0.01 250) !important;
}

/* Product lines (replaces default Woo shop_table) */
.f3d-order-lines {
  list-style: none;
  padding: 0;
  margin: 0;
}
.f3d-order-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid oklch(0.94 0.005 250);
  align-items: center;
}
.f3d-order-line__thumb {
  width: 72px;
  height: 72px;
  border: 1px solid oklch(0.92 0.005 250);
  border-radius: 6px;
  overflow: hidden;
  background: oklch(0.96 0.005 250);
}
.f3d-order-line__thumb img,
.f3d-order-line__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.f3d-order-line__cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(0.5 0.01 250);
  margin-bottom: 4px;
}
.f3d-order-line__name {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: oklch(0.2 0.01 260);
  margin-bottom: 4px;
}
.f3d-order-line__meta {
  font-size: 12px;
  color: oklch(0.5 0.01 250);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.f3d-order-line__meta .wc-item-meta-label {
  display: inline-block;
}
.f3d-order-line__price {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: oklch(0.2 0.01 260);
  white-space: nowrap;
}

/* Summary rows */
.f3d-sum-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: oklch(0.3 0.01 260);
  gap: 16px;
}
.f3d-sum-row > :last-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
.f3d-sum-row:last-of-type {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid oklch(0.88 0.005 250);
  font-size: 18px;
  font-weight: 500;
  color: oklch(0.18 0.01 260);
  font-family: 'Geist', 'Inter', sans-serif;
}
.f3d-sum-row:last-of-type > :last-child {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}
.f3d-sum-mva {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: oklch(0.5 0.01 250);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  margin-top: 6px;
}

/* Kill any default Woo table styles that leak through */
.woocommerce-order-details,
.woocommerce-customer-details {
  /* The new template doesn't use these wrappers, but if anything bleeds in… */
  margin: 0;
}
.woocommerce-MyAccount-content .woocommerce-order-details .shop_table,
.woocommerce-MyAccount-content .woocommerce-customer-details .shop_table {
  display: none; /* template renders its own markup */
}
.woocommerce-MyAccount-content .woocommerce-customer-details address {
  /* If the default address blocks render anywhere */
  font-size: 14px;
  line-height: 1.6;
  font-style: normal;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .f3d-order-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .f3d-order-head h1 { font-size: 28px; }
  .f3d-steps {
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 16px 0 28px;
  }
  .f3d-step + .f3d-step::before {
    min-width: 12px;
  }
  .f3d-order-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .f3d-order-line {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "thumb body"
      "thumb price";
    column-gap: 14px;
    row-gap: 4px;
  }
  .f3d-order-line__thumb { grid-area: thumb; width: 60px; height: 60px; }
  .f3d-order-line__body  { grid-area: body; }
  .f3d-order-line__price { grid-area: price; text-align: left; }
}
