/*
 * Dantrio Core: dashboards, forms, WhatsApp and sign-in.
 *
 * Colours come from the active theme's custom properties where they exist,
 * with sensible fallbacks so the plugin looks right under any theme.
 */
/* -------------------------------------------------------------------------
   12. WhatsApp ordering and support
   ------------------------------------------------------------------------- */

.btn--whatsapp,
.wa-order__btn {
	gap: 0.55rem;
	background: #25d366;
	border-color: #25d366;
	color: #ffffff;
	font-weight: 700;
}

.btn--whatsapp:hover,
.btn--whatsapp:focus,
.wa-order__btn:hover,
.wa-order__btn:focus {
	background: #1da851;
	border-color: #1da851;
	color: #ffffff;
}

.wa-icon { flex: none; }

/* Single product */
.wa-order {
	max-width: 420px;
	margin: var(--pc-space-4, 1rem) 0 var(--pc-space-5, 1.5rem);
}

.wa-order__btn { padding-block: 0.85rem; font-size: var(--pc-text-base, 1.0625rem); }

.wa-order__note {
	margin: 0.5rem 0 0;
	color: var(--pc-muted, #6b7b80);
	font-size: var(--pc-text-xs, 0.8125rem);
}

/* Shop cards */
.wa-loop-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	color: #1da851;
	font-size: var(--pc-text-sm, 0.9375rem);
	font-weight: 600;
	text-decoration: none;
}

.wa-loop-btn:hover { color: #178a44; text-decoration: underline; }

/* Cart */
.wa-cart--classic { margin-top: var(--pc-space-3, 0.75rem); }

.wa-cart__or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--pc-space-3, 0.75rem);
	color: var(--pc-muted, #6b7b80);
	font-size: var(--pc-text-xs, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.wa-cart__or::before,
.wa-cart__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--pc-border, #dde9e7);
}

.wa-cart--block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4, 1rem);
	margin: var(--pc-space-6, 2rem) 0;
	padding: var(--pc-space-5, 1.5rem);
	background: #effbf3;
	border: 1px solid #bfeccf;
	border-radius: var(--pc-radius, 14px);
}

.wa-cart--block .wa-cart__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	max-width: 60ch;
}

.wa-cart--block .wa-cart__text strong { color: var(--pc-ink, #12201e); }

.wa-cart--block .wa-order__btn {
	width: auto;
	display: inline-flex;
}

/* Floating support widget */
.wa-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

.has-wa-float .back-to-top { bottom: 5.5rem; }

.wa-float__btn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 60px;
	min-width: 60px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #25d366;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(18, 32, 30, 0.22);
	font-weight: 700;
	transition: gap 0.25s ease, background-color 0.18s ease, transform 0.18s ease;
}

.wa-float__btn:hover,
.wa-float__btn:focus {
	background: #1da851;
	color: #ffffff;
}

.wa-float__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.3s ease;
}

.wa-float__btn:hover .wa-float__label,
.wa-float__btn:focus-visible .wa-float__label,
.wa-float.is-intro .wa-float__label,
.wa-float.is-open .wa-float__label {
	max-width: 12rem;
}

.wa-float__btn:hover,
.wa-float__btn:focus-visible,
.wa-float.is-intro .wa-float__btn,
.wa-float.is-open .wa-float__btn {
	gap: 0.6rem;
	padding-right: 22px;
}

.wa-float:not(.is-open) .wa-float__btn::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 12px;
	height: 12px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #ef4444;
}

.wa-float__btn { position: relative; }

.wa-panel {
	width: min(360px, calc(100vw - 2.5rem));
	overflow: hidden;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(18, 32, 30, 0.25);
	animation: wa-pop 0.18s ease-out;
}

@keyframes wa-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.wa-panel__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1rem 1rem 1.1rem;
	background: #075e54;
	color: #ffffff;
}

.wa-panel__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--pc-primary, #0b7268);
}

.wa-panel__avatar svg { fill: currentColor; stroke: none; }

.wa-panel__title {
	margin: 0;
	color: #ffffff;
	font-weight: 700;
	line-height: 1.3;
}

.wa-panel__status {
	margin: 0;
	font-size: var(--pc-text-xs, 0.8125rem);
	opacity: 0.85;
}

.wa-panel__close {
	margin-left: auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.wa-panel__close:hover,
.wa-panel__close:focus { background: rgba(255, 255, 255, 0.25); transform: none; box-shadow: none; }

.wa-panel__body {
	padding: 1rem;
	background: #efeae2;
}

.wa-panel__bubble {
	position: relative;
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.6rem 0.85rem;
	background: #ffffff;
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	color: var(--pc-ink, #12201e);
	font-size: var(--pc-text-sm, 0.9375rem);
}

.wa-options {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wa-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.85rem;
	background: #ffffff;
	border: 1px solid transparent;
	border-radius: 12px;
	color: var(--pc-ink, #12201e);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wa-option:hover,
.wa-option:focus {
	border-color: #25d366;
	color: var(--pc-ink, #12201e);
	transform: translateX(2px);
}

.wa-option__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #dcf8c6;
	color: #075e54;
}

.wa-option--doctor .wa-option__icon { background: #e0f2fe; color: #0369a1; }
.wa-option--prescription .wa-option__icon { background: var(--pc-mint, #d9f0ec); color: var(--pc-primary-dark, #095049); }

.wa-option__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.wa-option__text small {
	color: var(--pc-muted, #6b7b80);
	font-size: var(--pc-text-xs, 0.8125rem);
}

.wa-option__arrow {
	margin-left: auto;
	color: #25d366;
}

.wa-panel__alt {
	margin: 0.9rem 0 0;
	font-size: var(--pc-text-xs, 0.8125rem);
	text-align: center;
}

@media (max-width: 480px) {
	.wa-float { right: 0.9rem; bottom: 0.9rem; }
	.wa-float__btn { height: 56px; min-width: 56px; }
}

@media print {
	.wa-float { display: none !important; }
}

/* -------------------------------------------------------------------------
   14. Dashboards (customer account and pharmacy desk)
   ------------------------------------------------------------------------- */

.dt-dash {
	display: grid;
	gap: var(--pc-space-6, 2rem);
	align-items: start;
	padding-block: var(--pc-space-7, 3rem);
}

@media (min-width: 900px) {
	.dt-dash--manager { grid-template-columns: 260px minmax(0, 1fr); }
}

.dt-dash--embed { padding-block: 0; }

.dt-dash__title {
	margin: 0 0 var(--pc-space-5, 1.5rem);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.dt-dash__welcome { margin-bottom: var(--pc-space-4, 1rem); }
.dt-dash__hello { margin: 0; color: var(--pc-ink, #12201e); font-family: var(--pc-font-head, serif); font-size: var(--pc-text-xl, 1.375rem); }
.dt-dash__sub { margin: 0; color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-sm, 0.9375rem); }

/*
 * Left-hand menu, shared by the account area and the desk.
 *
 * It is only pinned where it is genuinely a sidebar. On a phone it sits
 * above the content in the ordinary flow: a sticky block there stays put
 * while the page scrolls, and everything below it slides underneath.
 */
.dt-nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
	position: static;
	padding: var(--pc-space-4, 1rem);
	background: #ffffff;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius, 14px);
	box-shadow: 0 1px 2px rgba(18, 32, 30, 0.05);
}

@media (min-width: 900px) {
	.dt-nav,
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: sticky;
		top: calc(var(--pc-header-h, 76px) + 1rem);
	}
}

.dt-nav__title {
	margin: 0 0 0.6rem;
	padding-inline: 0.6rem;
	color: var(--pc-muted, #6b7b80);
	font-size: var(--pc-text-xs, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dt-nav ul,
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-nav a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem;
	border-radius: 10px;
	color: var(--pc-ink, #12201e);
	font-size: var(--pc-text-sm, 0.9375rem);
	font-weight: 600;
	text-decoration: none;
}

.dt-nav a:hover,
.dt-nav a:focus,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--pc-surface, #f4faf8);
	color: var(--pc-primary-dark, #095049);
}

.dt-nav a.is-current,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--pc-primary, #0b7268);
	color: #ffffff;
}

.dt-nav a.is-current svg { color: #ffffff; }

.dt-nav .dt-badge {
	margin-left: auto;
	min-width: 22px;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--pc-accent, #c2410c);
	color: #ffffff;
	font-size: var(--pc-text-xs, 0.8125rem);
	text-align: center;
}

.dt-nav a.is-current .dt-badge { background: #ffffff; color: var(--pc-primary-dark, #095049); }

/* WooCommerce account layout. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin-bottom: var(--pc-space-5, 1.5rem);
}

/*
 * On a phone the menu is eight items tall and pushes the dashboard itself
 * off the first screen. Two columns halves that without hiding anything.
 */
@media (max-width: 899px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul,
	.dt-nav ul {
		/* 136px so two columns still fit inside a 375px phone. */
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
		gap: 4px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
	.dt-nav a {
		padding: 0.7rem 0.6rem;
		font-size: var(--pc-text-sm, 0.9375rem);
		line-height: 1.3;
	}

	/* Log out is the one item that should not sit beside something else. */
	.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
		grid-column: 1 / -1;
	}
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { margin-bottom: 0; }

	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content { margin-top: 0; }

	.woocommerce-account .woocommerce {
		display: grid;
		gap: var(--pc-space-6, 2rem);
		grid-template-columns: 260px minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-account .woocommerce > .dt-dash__welcome { grid-column: 1 / -1; }
}

/* Panels, cards and tables. */
.dt-panel,
.dt-card {
	margin-bottom: var(--pc-space-5, 1.5rem);
	padding: var(--pc-space-5, 1.5rem);
	background: #ffffff;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius, 14px);
	box-shadow: 0 1px 2px rgba(18, 32, 30, 0.05);
}

.dt-panel h2,
.dt-card h2 { margin-top: 0; font-size: var(--pc-text-xl, 1.375rem); }
.dt-panel h3 { margin-top: var(--pc-space-5, 1.5rem); font-size: var(--pc-text-lg, 1.1875rem); }

.dt-panel__head,
.dt-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3, 0.75rem);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--pc-space-3, 0.75rem);
}

.dt-panel__head h2,
.dt-card__head h2 { margin: 0; }

.dt-panel--invite { background: linear-gradient(180deg, var(--pc-surface, #f4faf8), #ffffff); }

.dt-card.is-unread { border-left: 4px solid var(--pc-accent, #c2410c); }

.dt-note { margin: 0 0 var(--pc-space-3, 0.75rem); color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-sm, 0.9375rem); }
.dt-empty { margin: 0; padding: var(--pc-space-5, 1.5rem); background: var(--pc-surface, #f4faf8); border-radius: var(--pc-radius-sm, 7px); color: var(--pc-muted, #6b7b80); text-align: center; }
.dt-quote { margin: 0 0 var(--pc-space-3, 0.75rem); padding: var(--pc-space-3, 0.75rem) var(--pc-space-4, 1rem); background: var(--pc-surface, #f4faf8); border-radius: var(--pc-radius-sm, 7px); }

.dt-stats {
	display: grid;
	gap: var(--pc-space-4, 1rem);
	margin-bottom: var(--pc-space-5, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.dt-stat {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--pc-space-4, 1rem) var(--pc-space-5, 1.5rem);
	background: #ffffff;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius, 14px);
	color: inherit;
	text-decoration: none;
}

a.dt-stat:hover { border-color: var(--pc-primary, #0b7268); }

.dt-stat__label { color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-xs, 0.8125rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dt-stat__value { color: var(--pc-ink, #12201e); font-family: var(--pc-font-head, serif); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.dt-stat__value--accent { color: var(--pc-primary, #0b7268); }
.dt-stat__value .amount { font-size: inherit; }

.dt-table { width: 100%; margin: 0 0 var(--pc-space-3, 0.75rem); border-collapse: collapse; font-size: var(--pc-text-sm, 0.9375rem); }
.dt-table th { color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-xs, 0.8125rem); text-transform: uppercase; letter-spacing: 0.04em; }
.dt-table td, .dt-table th { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--pc-border, #dde9e7); text-align: left; }

@media (max-width: 720px) {
	.dt-table thead { display: none; }
	.dt-table tr { display: block; margin-bottom: var(--pc-space-4, 1rem); border: 1px solid var(--pc-border, #dde9e7); border-radius: var(--pc-radius-sm, 7px); }
	.dt-table td { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--pc-border, #dde9e7); }
	.dt-table td:last-child { border-bottom: 0; }
	.dt-table td::before { content: attr(data-label); color: var(--pc-muted, #6b7b80); font-weight: 600; }
}

.dt-pill {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: var(--pc-surface, #f4faf8);
	border: 1px solid var(--pc-border, #dde9e7);
	color: var(--pc-ink, #12201e);
	font-size: var(--pc-text-xs, 0.8125rem);
	font-weight: 600;
	text-transform: capitalize;
}

.dt-pill--new, .dt-pill--requested, .dt-pill--pending { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.dt-pill--review, .dt-pill--processing { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.dt-pill--ready, .dt-pill--approved { background: var(--pc-mint, #d9f0ec); border-color: #8fd3c8; color: var(--pc-primary-dark, #095049); }
.dt-pill--done, .dt-pill--paid, .dt-pill--completed { background: #dcfce7; border-color: #86efac; color: #166534; }
.dt-pill--declined, .dt-pill--rejected, .dt-pill--suspended, .dt-pill--cancelled { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

/* Forms inside the dashboards. */
.dt-form label { display: block; margin-bottom: 0.3rem; color: var(--pc-ink, #12201e); font-size: var(--pc-text-sm, 0.9375rem); font-weight: 600; }
.dt-form input[type="text"],
.dt-form input[type="url"],
.dt-form textarea {
	width: 100%;
	margin-bottom: var(--pc-space-4, 1rem);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius-sm, 7px);
	font-family: inherit;
	font-size: var(--pc-text-base, 1.0625rem);
}

.dt-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.dt-inline-form select,
.dt-rate {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius-sm, 7px);
	font-family: inherit;
}
.dt-rate { width: 90px; }

.dt-copy { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--pc-space-4, 1rem); }
.dt-copy input {
	flex: 1;
	min-width: 220px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius-sm, 7px);
	background: var(--pc-surface, #f4faf8);
	font-family: inherit;
	font-size: var(--pc-text-sm, 0.9375rem);
}

.dt-share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.dt-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.dt-files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--pc-space-3, 0.75rem); }

.dt-ticks { margin: 0 0 var(--pc-space-5, 1.5rem); padding: 0; list-style: none; }
.dt-ticks li { position: relative; margin-bottom: 0.5rem; padding-left: 1.8rem; }
.dt-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	border-radius: 50%;
	background-color: var(--pc-mint, #d9f0ec);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7268' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
	background-size: 0.75em;
	background-position: center;
	background-repeat: no-repeat;
}

.dt-links { margin: 0; padding-left: 1.1rem; }
.dt-links li { margin-bottom: 0.4rem; }

.dt-terms {
	max-height: 160px;
	margin-bottom: var(--pc-space-4, 1rem);
	padding: var(--pc-space-3, 0.75rem) var(--pc-space-4, 1rem);
	overflow-y: auto;
	background: var(--pc-surface, #f4faf8);
	border-radius: var(--pc-radius-sm, 7px);
	font-size: var(--pc-text-sm, 0.9375rem);
}

/* Social login and checkout notes. */
.dt-social-login { margin-bottom: var(--pc-space-5, 1.5rem); }
.dt-social-login__label { margin: 0 0 0.5rem; color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-sm, 0.9375rem); font-weight: 600; }
.dt-social-login__or { position: relative; margin: var(--pc-space-4, 1rem) 0 0; text-align: center; }
.dt-social-login__or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--pc-border, #dde9e7); }
.dt-social-login__or span { position: relative; padding: 0 0.75rem; background: #ffffff; color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-sm, 0.9375rem); }

.dt-pay-note { margin: var(--pc-space-3, 0.75rem) 0 0; color: var(--pc-muted, #6b7b80); font-size: var(--pc-text-sm, 0.9375rem); }

/* Dashboards use the full page width, not the article measure. */
.entry-content > .dt-dash,
.entry-content > .dt-panel,
.site-main--wide .entry-content > .dt-dash { max-width: none; }

/* The account area needs the full page width for its two columns. */
.woocommerce-account .entry-content > .woocommerce,
.woocommerce-account .entry-content > .dt-dash__welcome,
.woocommerce-account .entry-content > .woocommerce-notices-wrapper { max-width: none; }

.woocommerce-account .content-area { max-width: 1100px; margin-inline: auto; }

/* -------------------------------------------------------------------------
   Sign in, register and the header account link
   ------------------------------------------------------------------------- */

.dt-login {
	display: grid;
	gap: var(--pc-space-5, 1.5rem);
	align-items: start;
}

@media (min-width: 820px) {
	.dt-login { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dt-login .dt-panel { margin-bottom: 0; }

.dt-login label,
.dt-login .login-username label,
.dt-login .login-password label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--pc-ink, #12201e);
	font-size: var(--pc-text-sm, 0.9375rem);
	font-weight: 600;
}

.dt-login input[type="text"],
.dt-login input[type="email"],
.dt-login input[type="password"] {
	width: 100%;
	margin-bottom: var(--pc-space-4, 1rem);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--pc-border, #dde9e7);
	border-radius: var(--pc-radius-sm, 7px);
	font-family: inherit;
	font-size: var(--pc-text-base, 1.0625rem);
}

.dt-login .login-remember { margin-bottom: var(--pc-space-4, 1rem); font-size: var(--pc-text-sm, 0.9375rem); }

.dt-login .login-submit input[type="submit"] {
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: var(--pc-radius-pill, 999px);
	background: var(--pc-primary, #0b7268);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--pc-text-sm, 0.9375rem);
	font-weight: 600;
	cursor: pointer;
}

.header-account {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--pc-ink, #12201e);
	font-size: var(--pc-text-sm, 0.9375rem);
	font-weight: 600;
	text-decoration: none;
}

.header-account:hover,
.header-account:focus { color: var(--pc-primary, #0b7268); }

@media (max-width: 1023px) {
	.header-account__label { display: none; }
}

.menu-item--dantrio > a { font-weight: 600; }

/* -------------------------------------------------------------------------
   The sign-in card
   ------------------------------------------------------------------------- */

.dt-account {
	max-width: 480px;
	margin: 0 auto;
}

.dt-account--in { max-width: 640px; }

.dt-account__card {
	padding: 1.75rem;
	border: 1px solid #e7eeec;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 10px 40px rgba(18, 32, 30, 0.07);
}

/* The tabs are two radio buttons; the panels below follow their state. */
.dt-account__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dt-account__tablist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	padding: 0.3rem;
	border-radius: 14px;
	background: #f4f1ec;
}

.dt-account__tab {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: 11px;
	text-align: center;
	font-weight: 600;
	color: #46565b;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.dt-account__tab:hover { color: #12201e; }

#dt-tab-signin:checked ~ .dt-account__tablist label[for="dt-tab-signin"],
#dt-tab-signup:checked ~ .dt-account__tablist label[for="dt-tab-signup"] {
	background: #ffffff;
	color: #12201e;
	box-shadow: 0 1px 3px rgba(18, 32, 30, 0.08);
}

.dt-account__radio:focus-visible ~ .dt-account__tablist label { outline: 2px solid #0b7268; outline-offset: 2px; }

/* Only the chosen panel is shown. With no tabs (registration off) the
   sign-in panel is simply always visible. */
.dt-account__panel { display: block; }
#dt-tab-signin:checked ~ .dt-account__panel--signup,
#dt-tab-signup:checked ~ .dt-account__panel--signin { display: none; }

.dt-account__card .woocommerce-form-row,
.dt-account__card .form-row,
.dt-account__form p { margin: 0 0 1rem; padding: 0; }

.dt-account__card label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #12201e;
}

.dt-account__card .required { color: #b91c1c; text-decoration: none; border: 0; }

.dt-account__card input[type="text"],
.dt-account__card input[type="email"],
.dt-account__card input[type="tel"],
.dt-account__card input[type="password"] {
	width: 100%;
	padding: 0.8rem 0.95rem;
	border: 1px solid #dde9e7;
	border-radius: 11px;
	background: #ffffff;
	font-size: 1rem;
	color: #12201e;
}

.dt-account__card input:focus {
	outline: 0;
	border-color: #0b7268;
	box-shadow: 0 0 0 3px rgba(11, 114, 104, 0.12);
}

.dt-account__card .password-input { position: relative; display: block; }
.dt-account__card .show-password-input {
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

/* "Keep me signed in" on the left, "Forgot password?" on the right. */
.dt-account__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

/* More specific than ".dt-account__card label", which makes labels blocks. */
.dt-account__card .dt-account__remember,
.dt-account__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 400;
	font-size: 0.9375rem;
	cursor: pointer;
}

.dt-account__remember input { margin: 0; flex: none; }
.dt-account__forgot { font-size: 0.9375rem; font-weight: 600; color: #0b7268; text-decoration: none; }
.dt-account__forgot:hover { text-decoration: underline; }

.dt-account__submit,
.dt-account__card .woocommerce-form-login__submit,
.dt-account__card .woocommerce-form-register__submit {
	display: block;
	width: 100%;
	padding: 0.95rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: #0b7268;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.dt-account__submit:hover,
.dt-account__card .woocommerce-form-login__submit:hover,
.dt-account__card .woocommerce-form-register__submit:hover { background: #095049; }

.dt-account__switch {
	margin: 1.1rem 0 0;
	text-align: center;
	font-size: 0.9375rem;
	color: #46565b;
}

.dt-account__switch label {
	display: inline;
	margin: 0;
	font-weight: 600;
	color: #0b7268;
	cursor: pointer;
}

.dt-account__switch label:hover { text-decoration: underline; }

.dt-account__note {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: #6b7b80;
}

/* The honeypot: present for robots, gone for everyone else. */
.dt-account__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* WooCommerce's privacy paragraph inside the card. */
.dt-account__card .woocommerce-privacy-policy-text p {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #6b7b80;
}

/* The reassurances under the card. */
.dt-account__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: #6b7b80;
}

.dt-account__trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.dt-account__trust svg { color: #0b7268; }

.dt-account__welcome { text-align: left; }

/* The social buttons sit at the top of the sign-in panel. */
.dt-account__panel .dt-social-login { margin-bottom: 1.25rem; }
.dt-account__panel .dt-social-login__label { display: none; }
.dt-account__panel .dt-social-login__or span { background: #ffffff; }

/* -------------------------------------------------------------------------
   The install bar
   ------------------------------------------------------------------------- */

.dt-install {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 9999;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	width: calc(100% - 2rem);
	max-width: 32rem;
	padding: 1rem 1.15rem;
	border-radius: 16px;
	background: #12201e;
	color: #fff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
	animation: dt-install-in 0.3s ease both;
}

@keyframes dt-install-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.dt-install { animation: none; }
}

.dt-install__text { flex: 1 1 14rem; font-size: 0.875rem; line-height: 1.45; }
.dt-install__text strong { display: block; font-size: 1rem; }
.dt-install__text span { color: rgba(255, 255, 255, 0.7); }

.dt-install__actions { display: flex; gap: 0.5rem; margin-left: auto; }

.dt-install__go,
.dt-install__dismiss {
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.dt-install__go { background: #0b7268; color: #fff; }
.dt-install__go:hover { background: #095049; }
.dt-install__dismiss { background: transparent; color: rgba(255, 255, 255, 0.7); }
.dt-install__dismiss:hover { color: #fff; }

/* The note at the top of a policy page while it is still a draft. */
.dantrio-policy-note {
	padding: 1rem 1.15rem;
	border-left: 4px solid #0b7268;
	border-radius: 0 10px 10px 0;
	background: #f4faf8;
	font-size: 0.9375rem;
	color: #46565b;
}