/* V1 settings area: payments, plans, your details, password, API keys. Everything scoped under .dk-settings. */

.dk-settings { display: flex; flex-direction: column; gap: var(--dk-6); max-inline-size: 920px; }
.dk-settings h1 { font-size: var(--dk-fs-xl); margin: 0; }
@media (min-width: 768px) { .dk-settings h1 { font-size: var(--dk-fs-2xl); } }
.dk-settings-head p { margin: var(--dk-1) 0 0; color: var(--dk-ink-2); }
.dk-settings-muted { color: var(--dk-muted); font-size: var(--dk-fs-xs); }

/* sub-page tabs */
.dk-settings-tabs { display: flex; gap: var(--dk-2); border-block-end: 1px solid var(--dk-line); margin-block-start: calc(-1 * var(--dk-2)); }
.dk-settings-tabs a {
  display: inline-flex; align-items: center; min-height: var(--dk-tap); padding-inline: var(--dk-3);
  color: var(--dk-ink-2); text-decoration: none; font-weight: 600; border-block-end: 3px solid transparent; margin-block-end: -1px;
}
.dk-settings-tabs a:hover { color: var(--dk-ink); }
.dk-settings-tabs a[aria-current="page"] { color: var(--dk-brand-ink); border-block-end-color: var(--dk-brand); }

/* renewal explainer */
.dk-settings-renew { background: var(--dk-page); border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); padding: var(--dk-4); }
@media (min-width: 768px) { .dk-settings-renew { padding: var(--dk-6); } }
.dk-settings-renew h2 { font-size: var(--dk-fs-md); margin: 0 0 var(--dk-1); }
.dk-settings-renew p { margin: 0; color: var(--dk-ink-2); font-size: var(--dk-fs-sm); max-inline-size: 70ch; }
.dk-settings-renew > .dk-btn { margin-block-start: var(--dk-2); margin-inline-start: calc(-1 * var(--dk-3)); }
.dk-settings-renew__list { list-style: none; margin: var(--dk-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--dk-2); }
.dk-settings-renew__list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--dk-3); flex-wrap: wrap;
  border-block-start: 1px solid var(--dk-line); padding-block-start: var(--dk-3);
}
.dk-settings-renew__list li > div { display: flex; flex-direction: column; min-inline-size: 0; }

/* filters */
.dk-settings-filters { display: flex; flex-direction: column; gap: var(--dk-3); }
.dk-settings-filter { display: flex; flex-direction: column; gap: var(--dk-1); min-inline-size: 0; }
.dk-settings-filter__label { font-size: var(--dk-fs-xs); font-weight: 600; color: var(--dk-ink-2); }
.dk a.dk-settings-chip { display: inline-flex; align-items: center; text-decoration: none; }
.dk a.dk-settings-chip[aria-pressed="true"] { color: #fff; }

/* payments list */
.dk-settings-inv { border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); background: var(--dk-page); overflow: hidden; }
.dk-settings-inv__head { display: none; }
.dk-settings-inv__row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--dk-1) var(--dk-3); padding: var(--dk-4);
  border-block-start: 1px solid var(--dk-line);
}
.dk-settings-inv__row:first-of-type { border-block-start: 0; }
.dk-settings-inv__site { grid-column: 1 / -1; display: flex; flex-direction: column; min-inline-size: 0; }
.dk-settings-inv__site strong { overflow-wrap: anywhere; }
.dk-settings-ref { font-size: var(--dk-fs-xs); color: var(--dk-muted); align-self: flex-start; }
.dk-settings-inv__date { color: var(--dk-ink-2); font-size: var(--dk-fs-sm); align-self: center; }
.dk-settings-inv__amount { font-weight: 700; text-align: end; align-self: center; white-space: nowrap; }
.dk-settings-inv__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--dk-2); align-items: center; margin-block-start: var(--dk-2); }
.dk-settings-inv__actions svg { flex: none; }
@media (min-width: 900px) {
  .dk-settings-inv__head, .dk-settings-inv__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; align-items: center; gap: var(--dk-4); padding: var(--dk-3) var(--dk-6); }
  .dk-settings-inv__head { font-size: var(--dk-fs-xs); font-weight: 700; color: var(--dk-ink-2); border-block-end: 1px solid var(--dk-line); background: var(--dk-surface); }
  .dk-settings-inv__row:first-of-type { border-block-start: 0; }
  .dk-settings-inv__site, .dk-settings-inv__actions { grid-column: auto; }
  .dk-settings-inv__amount { text-align: start; }
  .dk-settings-inv__actions { margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
}
.dk-settings-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--dk-3); flex-wrap: wrap; }
.dk-settings-export { margin: 0; }
.dk-settings-export .dk-btn { padding-inline: 0; }

/* empty state */
.dk-settings-empty { display: flex; flex-direction: column; align-items: center; gap: var(--dk-2); text-align: center; padding: var(--dk-12) var(--dk-4); border: 1px dashed var(--dk-line-2); border-radius: var(--dk-r-lg); background: var(--dk-page); }
.dk-settings-empty svg { inline-size: 40px; block-size: 40px; color: var(--dk-brand); }
.dk-settings-empty h2 { font-size: var(--dk-fs-md); margin: 0; }
.dk-settings-empty p { margin: 0; color: var(--dk-ink-2); }

/* plans */
.dk-settings-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dk-4); }
.dk-settings-plan { background: var(--dk-page); border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg); padding: var(--dk-4); display: flex; flex-direction: column; gap: var(--dk-4); }
@media (min-width: 768px) { .dk-settings-plan { padding: var(--dk-6); } }
.dk-settings-plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dk-3); }
.dk-settings-plan__top > div { display: flex; flex-direction: column; min-inline-size: 0; }
.dk-settings-plan h2 { font-size: var(--dk-fs-lg); margin: 0; overflow-wrap: anywhere; }
.dk-settings-plan__facts { display: grid; gap: var(--dk-3); margin: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dk-settings-plan__facts dt { font-size: var(--dk-fs-xs); color: var(--dk-muted); font-weight: 600; }
.dk-settings-plan__facts dd { margin: 2px 0 0; font-weight: 600; }
.dk-settings-plan__go .dk-btn { inline-size: 100%; }
@media (min-width: 600px) { .dk-settings-plan__go .dk-btn { inline-size: auto; } }

/* our own small toast (copy link, wrong photo type) */
.dk-settings-toast {
  position: fixed; z-index: 90; inset-inline: var(--dk-4); inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-inline-size: 420px; background: var(--dk-page); color: var(--dk-ink); border: 1px solid var(--dk-line-2);
  border-radius: var(--dk-r-md); box-shadow: var(--dk-shadow-md); padding: var(--dk-3) var(--dk-4); font-weight: 600; text-align: center;
}
.dk-settings-toast[hidden] { display: none; }
@media (min-width: 900px) { .dk-settings-toast { inset-block-end: var(--dk-8); } }

/* ---------- embedded Livewire / Filament forms (profile, password, API) ---------- */
.dk-settings-formcard { padding: var(--dk-4); }
@media (min-width: 768px) { .dk-settings-formcard { padding: var(--dk-8); } }
.dk-settings-photo-label { margin: 0 0 var(--dk-3); font-weight: 600; }

.dk-settings-lw [x-cloak], .dk-settings-no [x-cloak] { display: none !important; }
.dk-settings-lw .hidden, .dk-settings-lw .sr-only, .dk-settings-no .sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dk-settings-lw .hidden { display: none !important; }
.dk-settings-lw svg, .dk-settings-no svg { inline-size: 20px; block-size: 20px; flex: none; }

/* the old settings chrome inside the component: side menu and title block */
.dk-settings-lw aside,
.dk-settings-lw .border-b.flex-wrap { display: none !important; }
.dk-settings-lw section { padding: 0; margin: 0; }
.dk-settings-lw hr { border: 0; border-block-start: 1px solid var(--dk-line); margin: var(--dk-8) 0 var(--dk-4); }

/* fields */
.dk-settings-lw .fi-fo-component-ctn { display: grid; gap: var(--dk-4); }
.dk-settings-lw .fi-fo-field-wrp > div { display: grid; gap: var(--dk-1); }
.dk-settings-lw label.fi-fo-field-wrp-label { display: inline-flex; font-weight: 600; color: var(--dk-ink); }
.dk-settings-lw label.fi-fo-field-wrp-label > span { font-size: 0; line-height: 1.5; }
.dk-settings-lw label.fi-fo-field-wrp-label > span::before { font-size: var(--dk-fs-sm); }
.dk-settings-lw label.fi-fo-field-wrp-label sup { font-size: var(--dk-fs-xs); color: var(--dk-danger); margin-inline-start: 2px; vertical-align: super; }
.dk-settings-lw label[for=""] { margin-block-end: var(--dk-3); }
.dk-settings-lw label[for=""] > span::before { font-size: var(--dk-fs-md) !important; font-weight: 700; }
.dk-settings-lw .fi-input-wrp {
  display: flex; align-items: stretch; min-height: var(--dk-tap); border: 1px solid var(--dk-line-2);
  border-radius: var(--dk-r-sm); background: var(--dk-page); overflow: hidden;
}
.dk-settings-lw .fi-input-wrp:focus-within { border-color: var(--dk-brand); outline: 1px solid var(--dk-brand); }
.dk-settings-lw .fi-fo-field-wrp:has([data-validation-error]) .fi-input-wrp { border-color: var(--dk-danger); }
.dk-settings-lw .fi-input-wrp-input { flex: 1; min-inline-size: 0; }
.dk-settings-lw .fi-input-wrp input,
.dk-settings-lw .fi-input-wrp textarea {
  display: block; inline-size: 100%; border: 0; outline: 0; background: transparent; color: var(--dk-ink);
  font: inherit; font-size: 16px; padding: var(--dk-2) var(--dk-3); min-height: 42px;
}
.dk-settings-lw .fi-input-wrp textarea { min-height: 110px; resize: vertical; }
.dk-settings-lw .fi-fo-textarea .fi-input-wrp-input > div { height: auto !important; }
.dk-settings-lw .fi-input-wrp-suffix { display: flex; align-items: center; border-inline-start: 1px solid var(--dk-line); padding-inline: 2px; }
.dk-settings-lw .fi-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 42px; block-size: 42px;
  border: 0; background: transparent; color: var(--dk-ink-2); cursor: pointer; border-radius: var(--dk-r-sm);
}
.dk-settings-lw .fi-icon-btn:hover { color: var(--dk-ink); }
.dk-settings-lw .fi-fo-field-wrp-error-message, .dk-settings-lw [data-validation-error] { color: var(--dk-danger); font-size: var(--dk-fs-xs); margin: 0; }

/* save button (wording swapped with CSS in the page) */
.dk-settings-lw .text-right { display: flex; justify-content: flex-end; padding-block-start: var(--dk-6); }
.dk-settings-lw .text-right > button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dk-2); min-height: var(--dk-tap);
  padding-inline: var(--dk-8); border: 1px solid transparent; border-radius: var(--dk-r-sm);
  background: var(--dk-orange) !important; color: var(--dk-ink); font: inherit; font-size: 0; font-weight: 600; cursor: pointer;
}
.dk-settings-lw .text-right > button[type="submit"]:hover { background: #EC8A26 !important; }
.dk-settings-lw .text-right > button[type="submit"]::after { font-size: var(--dk-fs-sm); }
.dk-settings-lw .text-right > button[type="submit"][disabled] { opacity: .6; }
.dk-settings-lw .text-right > button[type="submit"] svg { inline-size: 18px; block-size: 18px; }
@media (max-width: 599px) { .dk-settings-lw .text-right > button[type="submit"] { inline-size: 100%; } }

/* profile: photo */
.dk-settings-lw--profile form > div { display: flex; flex-direction: column; gap: var(--dk-6); }
@media (min-width: 768px) { .dk-settings-lw--profile form > div { flex-direction: row; align-items: flex-start; } }
.dk-settings-lw--profile form > div > div:last-child { flex: 1; min-inline-size: 0; }
.dk-settings-lw--profile .group { position: relative; inline-size: 128px; block-size: 128px; flex: none; cursor: pointer; }
.dk-settings-lw--profile #preview { inline-size: 128px; block-size: 128px; border-radius: 50%; object-fit: cover; border: 1px solid var(--dk-line); display: block; }
.dk-settings-lw--profile .group > div { position: absolute; inset: 0; }
.dk-settings-lw--profile #upload { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.dk-settings-lw--profile .group button {
  position: absolute; z-index: 1; inset-block-end: 4px; inset-inline-end: 4px; inline-size: 40px; block-size: 40px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #fff;
  background: var(--dk-brand); color: #fff;
}
.dk-settings-lw--profile .group:focus-within #preview { outline: 2px solid var(--dk-brand); outline-offset: 2px; }

/* modal (photo crop, API key details) */
.dk-settings-lw .fi-modal .fixed { position: fixed; inset: 0; z-index: 70; }
.dk-settings-lw .fi-modal-close-overlay { background: rgba(0, 0, 0, .45); }
.dk-settings-lw .fi-modal .fixed.overflow-y-auto { overflow-y: auto; }
.dk-settings-lw .fi-modal [x-ref="modalContainer"] { display: grid; min-height: 100%; place-items: center; padding: var(--dk-4); }
.dk-settings-lw .fi-modal-window {
  inline-size: 100%; max-inline-size: 420px; background: var(--dk-page); border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-shadow-md); cursor: default; display: flex; flex-direction: column;
}
.dk-settings-lw .fi-modal-slide-over-window { position: fixed; inset-block: 0; inset-inline-end: 0; max-inline-size: 440px; border-radius: 0; overflow-y: auto; }
.dk-settings-lw .fi-modal-header, .dk-settings-lw .fi-modal-content, .dk-settings-lw .fi-modal-footer { padding: var(--dk-4) var(--dk-6); }
.dk-settings-lw .fi-modal-heading { font-size: var(--dk-fs-lg); margin: 0; }
.dk-settings-lw .fi-modal-close-btn { position: absolute; inset-block-start: var(--dk-3); inset-inline-end: var(--dk-3); }
.dk-settings-lw .fi-modal-footer-actions { display: flex; flex-wrap: wrap; gap: var(--dk-2); }
.dk-settings-lw #modal-headline { font-size: 0; margin: 0 0 var(--dk-4); text-align: center; }
.dk-settings-lw #modal-headline::after { font-size: var(--dk-fs-md); font-weight: 700; }
.dk-settings-lw #upload-crop-container { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.dk-settings-lw #uploadLoading svg { animation: dk-settings-spin 1s linear infinite; color: var(--dk-muted); }
@keyframes dk-settings-spin { to { transform: rotate(360deg); } }
.dk-settings-lw .fi-modal span.flex { display: flex; gap: var(--dk-2); margin-block-start: var(--dk-4); }
.dk-settings-lw .fi-modal span.flex > button {
  flex: 1; min-height: var(--dk-tap); border-radius: var(--dk-r-sm); border: 1px solid var(--dk-line-2);
  background: var(--dk-page) !important; color: var(--dk-ink); font: inherit; font-size: 0; font-weight: 600; cursor: pointer;
}
.dk-settings-lw .fi-modal span.flex > button::after { font-size: var(--dk-fs-sm); }
.dk-settings-lw .fi-modal span.flex > #apply-crop { background: var(--dk-brand) !important; border-color: var(--dk-brand); color: #fff; }

/* Filament buttons (API key actions) */
.dk-settings-lw .fi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dk-2); min-height: var(--dk-tap);
  padding-inline: var(--dk-4); border: 1px solid var(--dk-line-2); border-radius: var(--dk-r-sm);
  background: var(--dk-page); color: var(--dk-ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.dk-settings-lw .fi-btn.fi-color-primary { background: var(--dk-orange); border-color: var(--dk-orange); color: var(--dk-ink); font-weight: 700; }
.dk-settings-lw .fi-btn.fi-color-danger { background: var(--dk-danger); border-color: var(--dk-danger); color: #fff; }
.dk-settings-lw .fi-link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--dk-tap); color: var(--dk-brand-ink); font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; text-decoration: none; }
.dk-settings-lw .fi-link.fi-color-danger { color: var(--dk-danger); }

/* Filament table (API keys) */
.dk-settings-lw .fi-ta-ctn { border: 1px solid var(--dk-line); border-radius: var(--dk-r-md); overflow: hidden; }
.dk-settings-lw .fi-ta-content { overflow-x: auto; }
.dk-settings-lw .fi-ta-table { inline-size: 100%; border-collapse: collapse; }
.dk-settings-lw .fi-ta-table th, .dk-settings-lw .fi-ta-table td { padding: var(--dk-3) var(--dk-4); text-align: start; border-block-end: 1px solid var(--dk-line); font-size: var(--dk-fs-sm); }
.dk-settings-lw .fi-ta-table th { font-size: var(--dk-fs-xs); color: var(--dk-ink-2); background: var(--dk-surface); }
.dk-settings-lw .fi-ta-header-cell-sort-btn, .dk-settings-lw .fi-ta-header-cell button { background: none; border: 0; font: inherit; font-weight: 700; color: inherit; display: inline-flex; gap: 4px; align-items: center; }
.dk-settings-lw .fi-ta-actions { display: flex; gap: var(--dk-3); justify-content: flex-end; }
.dk-settings-lw .fi-ta-empty-state { padding: var(--dk-8) var(--dk-4); text-align: center; color: var(--dk-ink-2); }
.dk-settings-lw .fi-ta-empty-state-icon-ctn { display: none; }
.dk-settings-lw .fi-ta-empty-state-heading { font-size: 0; font-weight: 600; margin: 0; }
.dk-settings-lw .fi-ta-empty-state-heading::after { font-size: var(--dk-fs-sm); }
.dk-settings-lw #data\.email { direction: ltr; text-align: start; }
[dir="rtl"] .dk-settings-lw #data\.email { text-align: right; }
.dk-settings-lw .fi-pagination { padding: var(--dk-3) var(--dk-4); }
.dk-settings-lw .fi-ta-header-ctn:empty { display: none; }

/* Filament success toast (wording swapped with CSS in the page) */
.dk-settings-no .fi-no {
  position: fixed; z-index: 90; inset-inline: var(--dk-4); inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--dk-2); pointer-events: none;
}
@media (min-width: 900px) { .dk-settings-no .fi-no { inset-block-end: var(--dk-8); } }
.dk-settings-no .fi-no-notification {
  pointer-events: auto; inline-size: 100%; max-inline-size: 420px; display: flex; align-items: center; gap: var(--dk-3);
  background: var(--dk-page); border: 1px solid var(--dk-line-2); border-radius: var(--dk-r-md); box-shadow: var(--dk-shadow-md); padding: var(--dk-3) var(--dk-4);
}
.dk-settings-no .fi-no-notification-icon { color: var(--dk-success); inline-size: 24px; block-size: 24px; }
.dk-settings-no .fi-no-notification > div, .dk-settings-no .fi-no-notification .grid { flex: 1; min-inline-size: 0; }
.dk-settings-no .fi-no-notification-title { font-size: 0; font-weight: 600; color: var(--dk-ink); }
.dk-settings-no .fi-no-notification-title::after { font-size: var(--dk-fs-sm); }
.dk-settings-no .fi-no-notification-close-btn, .dk-settings-no .fi-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border: 0; background: transparent; color: var(--dk-ink-2); cursor: pointer;
}

/* Wide screens: settings and billing use more of the width (operator, 26 Oct). */
@media (min-width: 1500px) { .dk-settings { max-inline-size: 1240px; } }