/*
 * Account-Portal (/konto/) — Brand-styled Login + Dashboard.
 * Tokens spiegeln theme/style.css des dkl-tech-lokal-Themes wider.
 */

.dkl-account {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 20px 80px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #0E0F0F;
}

.dkl-account *,
.dkl-account *::before,
.dkl-account *::after {
	box-sizing: border-box;
}

.dkl-eyebrow {
	color: #6F4B07;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.dkl-account__heading {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	line-height: 1.15;
}

.dkl-account__lede {
	color: #4A4A4A;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 32px;
}

.dkl-muted {
	color: #6B6B6B;
}

/* ---------- Login ---------- */

.dkl-account--login {
	max-width: 440px;
}

.dkl-account__card {
	background: #FFFFFF;
	border: 1px solid #E8E0CC;
	border-radius: 16px;
	box-shadow: 0 12px 32px -12px rgba(140, 94, 8, 0.15), 0 4px 12px -4px rgba(0, 0, 0, 0.05);
	padding: 36px 32px 30px;
}

.dkl-account__brand {
	text-align: center;
	margin-bottom: 18px;
}
.dkl-account__brand img {
	height: 56px;
	width: auto;
}

.dkl-account--login .dkl-account__heading {
	text-align: center;
	font-size: 26px;
	margin-bottom: 4px;
}
.dkl-account--login .dkl-account__lede {
	text-align: center;
	font-size: 14px;
	margin-bottom: 22px;
}

.dkl-account__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dkl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dkl-field__label {
	font-size: 13px;
	font-weight: 600;
	color: #2A2A2A;
}

.dkl-field input[type="email"],
.dkl-field input[type="password"],
.dkl-field input[type="text"] {
	font-family: inherit;
	font-size: 16px;
	background: #FBF6EC;
	border: 1px solid #E0D5BB;
	border-radius: 10px;
	padding: 11px 14px;
	color: #0E0F0F;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.dkl-field input:focus {
	border-color: #6F4B07;
	background: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(140, 94, 8, 0.18);
	outline: none;
}

.dkl-field--check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #2A2A2A;
	margin-top: 2px;
}
.dkl-field--check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #6F4B07;
}

.dkl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
	line-height: 1;
}

.dkl-btn--primary {
	background: #0E0F0F;
	color: #FFFFFF;
}
.dkl-btn--primary:hover,
.dkl-btn--primary:focus {
	background: #6F4B07;
	color: #FFFFFF;
}
.dkl-btn--primary:active {
	transform: translateY(1px);
}

.dkl-btn--ghost {
	background: transparent;
	color: #2A2A2A;
	border-color: #C8B98A;
}
.dkl-btn--ghost:hover,
.dkl-btn--ghost:focus {
	background: #FBF6EC;
	color: #6F4B07;
	border-color: #6F4B07;
}

.dkl-account__error {
	background: #FFF1F1;
	border: 1px solid #F5C2C2;
	color: #8B1B1B;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 14px;
}

.dkl-account__meta {
	text-align: center;
	margin: 20px 0 0;
	font-size: 14px;
}
.dkl-account__meta a {
	color: #6F4B07;
	text-decoration: none;
}
.dkl-account__meta a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dkl-account__below {
	text-align: center;
	font-size: 13px;
	color: #6B6B6B;
	margin: 24px 0 0;
	line-height: 1.5;
}

/* ---------- Dashboard ---------- */

.dkl-account--dashboard {
	max-width: 880px;
}

.dkl-account__header {
	margin-bottom: 36px;
}

.dkl-account__orders {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 36px;
}

.dkl-order-card {
	background: #FFFFFF;
	border: 1px solid #E8E0CC;
	border-radius: 14px;
	padding: 0;
	box-shadow: 0 4px 14px -8px rgba(140, 94, 8, 0.10);
	overflow: hidden;
}

/* Native <details> chevron ausblenden — wir nutzen eigenes Toggle-Element. */
.dkl-order-card > summary::-webkit-details-marker {
	display: none;
}
.dkl-order-card > summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 26px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	transition: background-color 0.12s ease;
}
.dkl-order-card > summary:hover {
	background-color: rgba(140, 94, 8, 0.03);
}
.dkl-order-card > summary:focus-visible {
	outline: 2px solid #C97E2A;
	outline-offset: -2px;
}

.dkl-order-card__summary-content {
	flex: 1;
	min-width: 0;
}

.dkl-order-card__summary-line {
	margin: 8px 0 0;
	font-size: 13px;
	color: #6B6356;
}

.dkl-order-card__upgrade-hint {
	font-size: 12px;
	font-weight: 500;
	color: #7B4FB5;
	margin-left: 6px;
}

.dkl-order-card__toggle {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F5EFE3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.18s ease, background-color 0.12s ease;
}
.dkl-order-card__toggle::before {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid #6B6356;
	border-bottom: 2px solid #6B6356;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.18s ease;
}
.dkl-order-card[open] > summary .dkl-order-card__toggle {
	transform: rotate(180deg);
	background: #E8E0CC;
}

.dkl-order-card__body {
	padding: 0 26px 24px;
	border-top: 1px solid #E8E0CC;
	padding-top: 20px;
}

.dkl-order-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	gap: 12px;
}

.dkl-tier-badge {
	display: inline-block;
	background: #F4E4C2;
	color: #6F4B07;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
}

.dkl-status-pill {
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
}
.dkl-status-pill.is-active    { background: #DFF5E3; color: #1F6B3A; }
.dkl-status-pill.is-pending   { background: #FFF5D8; color: #7A5A00; }
.dkl-status-pill.is-warn      { background: #FFE7DA; color: #8A3A05; }
.dkl-status-pill.is-canceled  { background: #ECECEC; color: #4A4A4A; }
.dkl-status-pill.is-neutral   { background: #F2F2F2; color: #4A4A4A; }

.dkl-order-card__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.dkl-order-card__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	margin: 0;
}
@media (max-width: 540px) {
	.dkl-order-card__meta { grid-template-columns: 1fr; }
}
.dkl-order-card__meta dt {
	font-size: 12px;
	color: #6B6B6B;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	margin-bottom: 2px;
}
.dkl-order-card__meta dd {
	margin: 0;
	font-size: 16px;
	color: #0E0F0F;
	font-weight: 600;
	word-break: break-word;
}
.dkl-order-card__meta dd a {
	color: #6F4B07;
	text-decoration: none;
}
.dkl-order-card__meta dd a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dkl-order-card__meta dd.dkl-not-set {
	font-style: italic;
	font-weight: 500;
}

.dkl-order-card__section {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #F0E6CC;
}
.dkl-order-card__section:first-of-type {
	margin-top: 18px;
}
.dkl-order-card__section-title {
	font-size: 12px;
	color: #6F4B07;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	margin: 0 0 12px;
}
.dkl-order-card__meta-wide {
	grid-column: 1 / -1;
}

/* ============================================================
 *  Inkludierte Einmal-Leistungen (KI-Logo etc.)
 * ============================================================ */

.dkl-entitlements {
	margin: 36px 0 24px;
}

.dkl-entitlements__h2 {
	font-size: 18px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 6px;
}

.dkl-entitlements__intro {
	margin: 0 0 16px;
	color: #6B6356;
	font-size: 14px;
	line-height: 1.5;
}

.dkl-entitlement {
	background: linear-gradient(180deg, #fdf6e8 0%, #fff 60%);
	border: 1px solid #f0d8a8;
	border-radius: 12px;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.dkl-entitlement__main {
	flex: 1;
	min-width: 240px;
}

.dkl-entitlement__title {
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 4px;
}

.dkl-entitlement__sub {
	font-size: 13px;
	color: #6B6356;
	margin: 0 0 8px;
	line-height: 1.5;
}

.dkl-entitlement__status {
	font-size: 13px;
	font-weight: 600;
	color: #7a4d12;
	margin: 0;
}

.dkl-entitlement--delivered .dkl-entitlement__status {
	color: #1f5e3a;
}

.dkl-entitlement--in_progress .dkl-entitlement__status {
	color: #7a4d12;
}

.dkl-entitlement--not_requested .dkl-entitlement__status {
	color: #6B6356;
}

.dkl-entitlement__cta {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.dkl-entitlement {
		flex-direction: column;
		align-items: stretch;
	}
	.dkl-entitlement__cta {
		text-align: center;
	}
}

.dkl-account__multi-hint {
	color: #6B6B6B;
	font-size: 13px;
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

/* Site-Lock — coming-soon Block per Order-Card */
.dkl-site-lock {
	margin-top: 22px;
	border-top: 1px solid #F0E6CC;
	padding-top: 16px;
}
.dkl-site-lock summary {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	padding: 4px 0;
}
.dkl-site-lock summary::-webkit-details-marker { display: none; }
.dkl-site-lock summary::before {
	content: "▸";
	position: absolute;
	right: 26px;
	color: #B89A52;
	font-size: 14px;
	transition: transform .15s;
}
.dkl-site-lock[open] summary::before {
	transform: rotate(90deg);
}
.dkl-site-lock summary {
	position: relative;
	padding-right: 22px;
}
.dkl-site-lock__title {
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.dkl-site-lock__sub {
	color: #6B6B6B;
	font-size: 13px;
}
.dkl-todo-pill {
	background: #FFF5D8;
	color: #7A5A00;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.dkl-site-lock__body {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #FBF6EC;
	border: 1px dashed #C8B98A;
	border-radius: 10px;
	padding: 16px;
}
.dkl-site-lock__body input[type="text"] {
	background: #FFFFFF;
	border: 1px solid #E0D5BB;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	color: #6B6B6B;
}
.dkl-site-lock__body input[disabled],
.dkl-site-lock__body .dkl-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}
.dkl-site-lock__hint {
	font-size: 12px;
	color: #6B6B6B;
	line-height: 1.5;
	margin: 4px 0 0;
}
.dkl-site-lock__hint a {
	color: #6F4B07;
}

/* ---------- Action-Cards ---------- */

.dkl-account__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 14px;
	margin-bottom: 40px;
}

.dkl-action-card {
	background: #FFFFFF;
	border: 1px solid #E8E0CC;
	border-radius: 14px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: #0E0F0F;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.dkl-action-card:hover {
	border-color: #6F4B07;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px rgba(140, 94, 8, 0.22);
}
.dkl-action-card--soon {
	background: #FBF6EC;
	border-style: dashed;
	cursor: default;
}
.dkl-action-card--soon:hover {
	transform: none;
	box-shadow: none;
	border-color: #C8B98A;
}

.dkl-action-card__icon {
	font-size: 26px;
	line-height: 1;
}
.dkl-action-card__title {
	font-size: 16px;
	font-weight: 700;
}
.dkl-action-card__sub {
	font-size: 13px;
	color: #6B6B6B;
	line-height: 1.45;
}
.dkl-action-card--soon .dkl-action-card__sub a {
	color: #6F4B07;
}

/* ---------- Footer / empty state ---------- */

.dkl-account__footer {
	border-top: 1px solid #E8E0CC;
	padding-top: 24px;
	display: flex;
	justify-content: flex-end;
}

.dkl-card.dkl-card--empty {
	background: #FFFFFF;
	border: 1px dashed #C8B98A;
	border-radius: 14px;
	padding: 28px 30px;
	margin-bottom: 36px;
	text-align: center;
}
.dkl-card.dkl-card--empty h2 {
	font-size: 18px;
	margin: 0 0 8px;
}
.dkl-card.dkl-card--empty p {
	color: #4A4A4A;
	font-size: 14px;
	margin: 0;
}

/* =========================================================================
   Tickets-Portal (/konto/aenderungen/)
   ========================================================================= */

.dkl-tickets {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: inherit;
	color: #1d2327;
}
.dkl-tickets__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin: 8px 0 24px;
	flex-wrap: wrap;
}
.dkl-tickets__title {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}
.dkl-tickets__back,
.dkl-tickets__back-top {
	margin: 24px 0 0;
	font-size: 14px;
}
.dkl-tickets__back-top {
	margin: 0 0 12px;
}
.dkl-tickets__back a,
.dkl-tickets__back-top a {
	color: #6F4B07;
	text-decoration: none;
}
.dkl-tickets__back a:hover,
.dkl-tickets__back-top a:hover {
	text-decoration: underline;
}

.dkl-tickets__flash {
	padding: 12px 16px;
	background: #fbf6ec;
	border: 1px solid #d4a647;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #6F4B07;
}

.dkl-tickets__empty {
	background: #FFFFFF;
	border: 1px dashed #C8B98A;
	border-radius: 14px;
	padding: 32px 24px;
	text-align: center;
}
.dkl-tickets__empty p {
	margin: 0 0 14px;
	color: #4A4A4A;
}
.dkl-tickets__empty p:last-child {
	margin: 0;
}

.dkl-tickets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #E8E0CC;
	border-radius: 12px;
	overflow: hidden;
	background: #FFFFFF;
}
.dkl-tickets__item {
	border-bottom: 1px solid #F0E7CE;
}
.dkl-tickets__item:last-child {
	border-bottom: none;
}
.dkl-tickets__item--unread {
	background: #fdf9ef;
}
.dkl-tickets__link {
	display: grid;
	/* 0.3.4 Layout-Fix: erste Spalte war hardcoded 130px → Multi-Word-Status-Badges
	 * (z.B. „WARTET AUF DEIN-KI-LOKAL") sprengten die Spalte und überschnitten den
	 * Titel. minmax(130px, max-content) hält 130px als Mindestbreite für
	 * Card-übergreifendes Alignment bei 1-Wort-Stati, lässt die Spalte aber
	 * mit längerem Label wachsen. */
	grid-template-columns: minmax(130px, max-content) 1fr auto auto;
	gap: 14px;
	align-items: center;
	padding: 14px 18px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s;
}
.dkl-tickets__link:hover {
	background: #F8F2E0;
}
.dkl-tickets__status {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	text-align: center;
	background: #f0f0f1;
	color: #444;
	width: max-content;
}
.dkl-tickets__status.is-open          { background: #d4eaff; color: #1d4ed8; }
.dkl-tickets__status.is-wait-us       { background: #ffe9bf; color: #8b5e00; }
.dkl-tickets__status.is-wait-customer { background: #e5e5e5; color: #555; }
.dkl-tickets__status.is-closed        { background: #e7f6e7; color: #1f7a3a; }

.dkl-tickets__subject {
	font-size: 15px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
}
.dkl-tickets__cat {
	font-size: 12px;
	color: #6B6B6B;
	background: #F4EFE2;
	padding: 2px 8px;
	border-radius: 6px;
}
.dkl-tickets__activity {
	font-size: 12px;
	color: #6B6B6B;
}

/* ---------- Detail-Thread ---------- */

.dkl-ticket__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 18px;
	flex-wrap: wrap;
}
.dkl-ticket__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	line-height: 1.25;
	flex: 1 1 280px;
}
.dkl-ticket__thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}
.dkl-thread__msg {
	padding: 16px 18px;
	border-radius: 12px;
	background: #FFFFFF;
	border: 1px solid #E8E0CC;
}
.dkl-thread__msg--admin {
	background: #fbf6ec;
	border-color: #d4a647;
}
.dkl-thread__meta {
	font-size: 12px;
	color: #6B6B6B;
	margin: 0 0 8px;
}
.dkl-thread__meta strong {
	color: #1d2327;
}
.dkl-thread__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: #1d2327;
}
.dkl-thread__files {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dkl-thread__file {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #F0EBDA;
	border-radius: 6px;
	font-size: 12px;
	color: #1d2327;
	text-decoration: none;
}
.dkl-thread__file span {
	color: #6B6B6B;
}
.dkl-thread__file:hover {
	background: #E8E0CC;
}

/* ---------- Form ---------- */

.dkl-form {
	background: #FFFFFF;
	border: 1px solid #E8E0CC;
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.dkl-form--reply {
	margin-top: 16px;
}
.dkl-form__label {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dkl-form__label-text {
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}
.dkl-form__input,
.dkl-form__file {
	font-family: inherit;
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid #C8B98A;
	border-radius: 8px;
	background: #FFF;
	color: #1d2327;
}
.dkl-form__input:focus {
	outline: none;
	border-color: #d4a647;
	box-shadow: 0 0 0 3px rgba(212, 166, 71, 0.2);
}
.dkl-form__file {
	padding: 8px;
	background: #FAF6E9;
}
.dkl-form__hint {
	font-size: 12px;
	color: #6B6B6B;
}
.dkl-form__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* File-Input mit Custom-Wrapper für deutsche Labels.
 * Native <input type="file"> zeigt browser-locale-default ("Choose Files / No file chosen").
 * Wir verstecken das native Input visuell + clickbar via <label for=…> auf Custom-Button.
 */
.dkl-form__file-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}
.dkl-form__file-wrap input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.dkl-form__file-wrap input[type="file"]:focus-visible + .dkl-form__file-btn {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}
.dkl-form__file-btn {
	display: inline-block;
	padding: 8px 14px;
	background: #F4EFE2;
	border: 1px solid #D9CFB3;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #1d2327;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}
.dkl-form__file-btn:hover {
	background: #EFE8D4;
	border-color: #C7BC9E;
}
.dkl-form__file-name {
	font-size: 13px;
	color: #6B6B6B;
}

@media (max-width: 600px) {
	.dkl-tickets__link {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.dkl-tickets__activity {
		justify-self: start;
	}
}

/* ============================================================
 *  /konto/upgrades/ — Upgrades-Page (Shortcode [dkl_upgrades])
 * ============================================================ */

.dkl-upgrades {
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.dkl-upgrades__flash {
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.5;
}
.dkl-upgrades__flash--ok   { background: #e8f5ed; color: #1b5e3a; border-left: 4px solid #2D7A4F; }
.dkl-upgrades__flash--warn { background: #fef6e7; color: #7a4d12; border-left: 4px solid #C97E2A; }
.dkl-upgrades__flash--err  { background: #fbeae8; color: #7a2b22; border-left: 4px solid #B85D54; }

.dkl-upgrades__notice {
	padding: 32px 24px;
	text-align: center;
	color: #555;
}

.dkl-upgrades__section {
	margin: 32px 0;
}

.dkl-upgrades__h2 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 6px;
	color: #1d2327;
}

.dkl-upgrades__intro {
	margin: 0 0 20px;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
}

.dkl-upgrades__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.dkl-upgrades__card {
	background: #fff;
	border: 1px solid #e3e3e5;
	border-radius: 10px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dkl-upgrades__card:hover {
	border-color: #c7c7cb;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.dkl-upgrades__card--direct {
	border-color: #c2e0d0;
	background: linear-gradient(180deg, #f3faf6 0%, #fff 60%);
}

.dkl-upgrades__card--included {
	border-color: #f0d8a8;
	background: linear-gradient(180deg, #fdf6e8 0%, #fff 60%);
}

.dkl-upgrades__card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.dkl-upgrades__card-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: #1d2327;
	line-height: 1.3;
}

.dkl-upgrades__badge {
	font-size: 10px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex-shrink: 0;
}
.dkl-upgrades__badge--direct   { background: #d4ebde; color: #1f5e3a; }
.dkl-upgrades__badge--included { background: #fbe5b8; color: #7a4d12; }
.dkl-upgrades__badge--request  { background: #e7e7eb; color: #555; }

.dkl-upgrades__card-sub {
	margin: 0;
	font-size: 13px;
	color: #555;
	line-height: 1.5;
	flex-grow: 1;
}

.dkl-upgrades__price {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1d2327;
	letter-spacing: -0.01em;
}

.dkl-upgrades__card--included .dkl-upgrades__price {
	color: #7a4d12;
}

.dkl-upgrades__card--request .dkl-upgrades__price {
	font-weight: 600;
	color: #555;
	font-size: 14px;
}

.dkl-upgrades__form {
	margin: 0;
}

.dkl-upgrades__cta {
	display: inline-block;
	width: 100%;
	text-align: center;
	margin-top: auto;
}

@media (max-width: 640px) {
	.dkl-upgrades { padding: 16px 12px 32px; }
	.dkl-upgrades__h2 { font-size: 19px; }
	.dkl-upgrades__grid { grid-template-columns: 1fr; }
}