/*
 * Account details: settings column and the panels that slide in from the right.
 * Colours follow the theme (--accent, --ink, --muted, --line, --card, --soft, --radius).
 */
.cw-set,
.cw-dw,
.cw-dw-back {
	--cw-a: var(--accent, #6c4ef5);
	--cw-ink: var(--ink, #1d2327);
	--cw-muted: var(--muted, #646970);
	--cw-line: var(--line, #e2e4e7);
	--cw-card: var(--card, #fff);
	--cw-soft: var(--soft, #f2f2f5);
	--cw-r: var(--radius, 9px);
	--cw-m: var(--radius, 12px);
	--cw-s: var(--radius, 10px);
	--cw-xs: var(--radius, 8px);
}

/* Hide the security fieldsets on the form itself; JS moves them into the Security panel. */
.woocommerce-EditAccountForm > .cw-2fa-set,
.woocommerce-EditAccountForm > .cw-totp { display: none; }

/* ---------------------------------------------------------------- sidebar */
.cw-set {
	flex: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100%;
	padding: clamp(24px, 3vw, 40px) 20px;
	border: 0;
	border-radius: var(--radius);
	background: var(--cw-card);
}
.cw-set__title { margin: 0 4px 12px; color: var(--cw-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cw-set__list { margin: 0; padding: 0; list-style: none; }
.cw-set__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.cw-set__item:hover,
.cw-set__item:focus-visible { background: var(--cw-soft); outline: 0; }
.cw-set__ico {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 7px;
	background: color-mix(in srgb, var(--cw-a) 12%, transparent);
	color: var(--cw-a);
}
.cw-set__ico .cw-ico { width: 20px; height: 20px; }
.cw-set__ico--notify { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.cw-set__ico--secure { background: color-mix(in srgb, #059669 12%, transparent); color: #059669; }
.cw-set__ico--brand { background: color-mix(in srgb, #d97706 12%, transparent); color: #d97706; }
.cw-set__ico--fields { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0891b2; }
.cw-set__ico--invoices { background: color-mix(in srgb, #d97706 12%, transparent); color: #d97706; }
.cw-set__txt { display: grid; min-width: 0; }
.cw-set__txt b { overflow: hidden; color: var(--cw-ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cw-set__txt small { overflow: hidden; color: var(--cw-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cw-set__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--cw-line); }
.cw-set__go { display: grid; place-items: center; color: var(--cw-muted); }
.cw-set__go .cw-ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- overlay */
.cw-dw-back {
	position: fixed;
	z-index: 90;
	inset: calc(var(--top-h, 64px) + var(--top-y, var(--wp-admin--admin-bar--height, 0px))) 0 0;
	background: rgba(12, 10, 28, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease;
}
.cw-dw-back.is-on { opacity: 1; pointer-events: auto; }
[hidden].cw-dw-back { display: block !important; }

/* ---------------------------------------------------------------- panel */
.cw-dws { position: static; }
.cw-dw {
	position: fixed;
	z-index: 91;
	top: calc(var(--top-h, 64px) + var(--top-y, var(--wp-admin--admin-bar--height, 0px)));
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(640px, 100vw);
	/* The card colour is a faint tint in the dark theme: lay it over the solid page colour so the panel is never see-through. */
	background-color: var(--bg, #fff);
	background-image: linear-gradient(var(--cw-card), var(--cw-card));
	color: var(--cw-ink);
	box-shadow: -16px 0 40px -20px rgba(12, 10, 28, .35);
	transform: translateX(104%);
	transition: transform .28s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}
.cw-dw[data-cw-dw="project"],
.cw-dw[data-cw-dw="board"] {
	width: min(760px, 100vw);
}
.cw-dw:not(.is-on) { box-shadow: none; visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; }
.cw-dw.is-on { transform: none; pointer-events: auto; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.cw-dw__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: none;
	flex-shrink: 0;
	min-height: 64px;
	padding: 14px 14px 14px 22px;
	border-bottom: 1px solid var(--cw-line);
	background: var(--cw-card);
}
.cw-dw__title { flex: 1; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.cw-dw__x {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cw-line);
	border-radius: var(--radius);
	background: var(--cw-soft);
	color: var(--cw-ink);
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
}
.cw-dw__x:hover { background: var(--cw-soft); color: var(--cw-ink); }
.cw-dw__x .cw-ico { width: 18px; height: 18px; }
.cw-dw__body { flex: 1; min-height: 0; padding: 18px 22px 8px; overflow: auto; overflow-x: hidden; }
.cw-dw__intro { margin: 0 0 16px; color: var(--cw-muted); font-size: 14px; line-height: 1.5; }
.cw-dw__card {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--cw-line);
	border-radius: 8px;
	background: color-mix(in srgb, var(--cw-soft) 55%, transparent);
}
.cw-dw__card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.cw-dw__note { margin: 0 0 12px; color: var(--cw-muted); font-size: 13px; line-height: 1.45; }
.cw-dw__row { display: grid; gap: 6px; margin: 0 0 14px; }
.cw-dw__row:last-child { margin-bottom: 0; }
.cw-dw__row label,
.cw-dw__row legend { color: var(--cw-ink); font-size: 13px; font-weight: 600; }
.cw-dw__row select,
.cw-dw__row input[type="text"],
.cw-dw__row input[type="number"],
.cw-dw__row textarea {
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--cw-line);
	border-radius: 7px;
	background: var(--cw-card);
	color: var(--cw-ink);
	font: inherit;
	font-size: 14px;
}
.cw-dw__row textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }
.cw-dw__row select:focus,
.cw-dw__row input:focus,
.cw-dw__row textarea:focus { outline: 0; border-color: var(--cw-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cw-a) 15%, transparent); }
.cw-dw .cw-company__fields { display: grid; gap: 12px; }
.cw-dw .cw-company__frow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(132px, 170px);
	gap: 10px;
	align-items: end;
	padding: 12px;
	border: 1px solid var(--cw-line);
	border-radius: 8px;
	background: var(--cw-soft);
}
.cw-dw .cw-company__fkey {
	display: grid;
	gap: 4px;
	min-width: 0;
	margin: 0;
	color: var(--cw-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
}
.cw-dw .cw-company__frow input,
.cw-dw .cw-company__frow select {
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--cw-line);
	border-radius: 7px;
	background: var(--cw-card);
	color: var(--cw-ink);
	font: inherit;
	font-size: 14px;
}
.jx-acc__main .cw-company .cw-company__sec { border: 0; padding: 0; min-width: 0; }
.jx-acc__main .cw-company .cw-form__foot { justify-content: flex-start; padding-top: 18px; }
.cw-dw__row small { color: var(--cw-muted); font-size: 12px; }
.cw-dw__row[disabled],
.cw-dw__langs[disabled] { opacity: .65; pointer-events: none; }

.cw-dw__langs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.cw-dw__lang { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cw-line); border-radius: var(--radius); background: var(--cw-card); font-weight: 500; white-space: nowrap; cursor: pointer; }
.cw-dw__lang.is-off { opacity: .55; cursor: not-allowed; }
.cw-dw__lang input { margin: 0; flex: none; }
.cw-dw__lang small { margin-left: auto; flex: none; font-weight: 400; }

/* switches */
.cw-dw__switch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0 0 12px;
	cursor: pointer;
}
.cw-dw__switch:last-child { margin-bottom: 0; }
.cw-dw__switch span { display: grid; gap: 2px; }
.cw-dw__switch b { font-size: 14px; font-weight: 600; }
.cw-dw__switch small { color: var(--cw-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.cw-dw__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cw-dw__switch i {
	position: relative;
	display: block;
	width: 40px;
	height: 24px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cw-muted) 35%, var(--cw-line));
	transition: background .2s;
}
.cw-dw__switch i::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(12, 10, 28, .2);
	transition: transform .2s;
}
.cw-dw__switch input:checked + i { background: var(--cw-a); }
.cw-dw__switch input:checked + i::after { transform: translateX(16px); }
.cw-dw__switch input:focus-visible + i { outline: 2px solid var(--cw-a); outline-offset: 2px; }
.cw-dw__switch input:disabled + i { opacity: .5; }

/* logo */
.cw-dw__logo { display: flex; align-items: center; gap: 14px; }
.cw-dw__logo-img {
	display: grid;
	place-items: center;
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border: 1px dashed var(--cw-line);
	border-radius: 8px;
	background: var(--cw-card);
	color: var(--cw-muted);
}
.cw-dw__logo-img img { width: 100%; height: 100%; object-fit: contain; }
.cw-dw__logo-img .cw-ico { width: 22px; height: 22px; }
.cw-dw__logo-do { display: grid; gap: 8px; }
.cw-dw__file { display: inline-flex; cursor: pointer; }
.cw-dw__file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cw-dw__file span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--cw-a);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.cw-dw__check { display: flex; align-items: center; gap: 8px; color: var(--cw-muted); font-size: 13px; cursor: pointer; }

/* colour */
.cw-dw__swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cw-dw__sw { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; cursor: pointer; }
.cw-dw__sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cw-dw__sw i { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(12, 10, 28, .12); }
.cw-dw__sw input:checked + i { box-shadow: 0 0 0 2px var(--cw-card), 0 0 0 4px var(--cw-a); }
.cw-dw__sw--none i {
	background:
		linear-gradient(135deg, transparent 46%, #c43d3d 46%, #c43d3d 54%, transparent 54%),
		conic-gradient(from 180deg, #6c4ef5, #2563eb, #059669, #d97706, #6c4ef5);
}
.cw-dw__sw--own i { background: var(--cw-soft); background-image: repeating-conic-gradient(#c8c6d4 0 25%, transparent 0 50%); background-size: 8px 8px; }
.cw-dw__picker { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }

/* footer */
.cw-dw__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: none;
	padding: 14px 22px 18px;
	border-top: 1px solid var(--cw-line);
}
.cw-dw__save {
	min-height: 42px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--cw-a) !important;
	color: #fff !important;
	font-weight: 500;
	cursor: pointer;
}
.cw-dw__cancel {
	min-height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cw-muted);
	font: inherit;
	cursor: pointer;
}
.cw-dw__cancel:hover { background: var(--cw-soft); color: var(--cw-ink); }

/* security blocks once they live in the panel */
.cw-dw .cw-2fa-set,
.cw-dw .cw-totp { margin: 0 0 16px; padding: 16px; border: 1px solid var(--cw-line); border-radius: 8px; background: color-mix(in srgb, var(--cw-soft) 55%, transparent); }
.cw-dw .cw-2fa-set legend,
.cw-dw .cw-totp legend { padding: 0 6px; font-size: 14px; font-weight: 600; }
.cw-dw .cw-totp__codes { padding: 14px 16px; border-radius: 8px; background: color-mix(in srgb, #d97706 14%, var(--cw-card)); }
.cw-dw .cw-totp__on { color: #1d6b3a; font-weight: 600; }

html.is-cw-dw { overflow: hidden; }

.cw-dw form.exp-form,
.cw-dw form.po-form,
.cw-dw form.req-form,
.cw-dw form.doc-form,
.cw-dw form.iip-form,
.cw-dw form.ctp-form,
.cw-dw form.rsb-form,
.cw-dw form.slb-form,
.cw-dw form.pay-form,
.cw-dw form.stk-form,
.cw-dw form.ldg-form {
	display: grid;
	gap: 14px;
}
.cw-dw form.exp-form label,
.cw-dw form.po-form label,
.cw-dw form.req-form label,
.cw-dw form.doc-form label,
.cw-dw form.iip-form label,
.cw-dw form.ctp-form label,
.cw-dw form.rsb-form label,
.cw-dw form.slb-form label,
.cw-dw form.pay-form label,
.cw-dw form.stk-form label,
.cw-dw form.ldg-form label {
	display: grid;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}
.cw-dw form .exp-form__row,
.cw-dw form .po-form__row,
.cw-dw form .req-form__row,
.cw-dw form .doc-form__row,
.cw-dw form .iip-form__row,
.cw-dw form .ctp-form__row,
.cw-dw form .rsb-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.cw-dw form.exp-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.po-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.req-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.doc-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.iip-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.ctp-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.rsb-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.slb-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.stk-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.ldg-form input:not([type="checkbox"]):not([type="hidden"]),
.cw-dw form.exp-form select,
.cw-dw form.po-form select,
.cw-dw form.req-form select,
.cw-dw form.doc-form select,
.cw-dw form.iip-form select,
.cw-dw form.ctp-form select,
.cw-dw form.rsb-form select,
.cw-dw form.slb-form select,
.cw-dw form.stk-form select,
.cw-dw form.ldg-form select,
.cw-dw form.exp-form textarea,
.cw-dw form.po-form textarea,
.cw-dw form.req-form textarea,
.cw-dw form.doc-form textarea,
.cw-dw form.iip-form textarea,
.cw-dw form.ctp-form textarea,
.cw-dw form.rsb-form textarea,
.cw-dw form.slb-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--cw-line);
	border-radius: 7px;
	background: var(--cw-card);
	color: var(--cw-ink);
	font: inherit;
}
.cw-dw form textarea { min-height: 88px; padding: 10px 12px; }
.cw-dw .exp-acts, .cw-dw .po-acts, .cw-dw .req-acts, .cw-dw .rsb-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cw-dw .cw-btn, .cw-dw .btn { min-height: 42px; padding: 0 18px; }
.cw-dw form.slb-form label:has(input[type="checkbox"]) {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

@media (max-width: 640px) {
	.cw-dw { width: 100vw; }
	.cw-dw__lang { white-space: normal; }
	.cw-dw .cw-company__frow,
	.cw-dw form .exp-form__row,
	.cw-dw form .po-form__row,
	.cw-dw form .req-form__row,
	.cw-dw form .doc-form__row,
	.cw-dw form .iip-form__row,
	.cw-dw form .ctp-form__row,
	.cw-dw form .rsb-form__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.cw-dw,
	.cw-dw-back { transition: none; }
}

/* Account security: sessions. */
.cw-sessions__list{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.cw-sessions__list li{ display:grid; gap:2px; padding:10px 12px; border-radius:7px; background:var(--cw-soft,#f2f2f5); }
.cw-sessions__list small{ color:var(--cw-muted,#646970); }

/* Notifications: what reaches you (kinds x bell / email). */
.cw-np__table { width: 100%; margin: 0 0 8px; border-collapse: collapse; font-size: 13px; }
.cw-np__table th,
.cw-np__table td { padding: 0 6px; border-bottom: 1px solid var(--cw-line); text-align: center; }
.cw-np__table thead th { padding-bottom: 6px; color: var(--cw-muted); font-size: 12px; font-weight: 600; }
.cw-np__table tbody th { padding-left: 0; color: var(--cw-ink); font-weight: 500; text-align: left; }
.cw-np__table tr:last-child > * { border-bottom: 0; }
.cw-np__box { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; margin: 0; cursor: pointer; }
.cw-np__box input { width: 18px; height: 18px; margin: 0; accent-color: var(--cw-a); cursor: pointer; }
.cw-np__reset { min-height: 40px; padding: 0; border: 0; background: none; color: var(--cw-a); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.cw-np__hint { display: block; color: var(--cw-muted); font-size: 12px; }
.cw-np__word { display: none; } /* The column word, inside the label on phones so tapping it ticks the box. */
/* "Email me too" off: the email ticks still save, but fade so the table does not promise mail. */
.cw-dw__body:has(input[name="cw_notes_mail"]:not(:checked)) .cw-np__table :is(th, td):nth-child(3) { opacity: .45; }
@media (max-width: 600px) {
	.cw-np__table thead { display: none; }
	.cw-np__table,
	.cw-np__table tbody,
	.cw-np__table tr { display: block; }
	.cw-np__table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--cw-line); }
	.cw-np__table tr:last-child { border-bottom: 0; }
	.cw-np__table th,
	.cw-np__table td { padding: 0; border: 0; }
	.cw-np__table tbody th { flex: 1 1 100%; }
	.cw-np__table td { display: flex; align-items: center; }
	.cw-np__box { display: flex; gap: 6px; align-items: center; min-height: 40px; padding-right: 4px; }
	.cw-np__word { display: inline; color: var(--cw-muted); font-size: 12px; }
}

/* Record payment drawer: Apply and Cancel read as one footer. */
#cw-dw-pay-batch .cw-dw__foot{ padding-top:0; border-top:0; }
#cw-dw-pay-batch .cw-payform__foot{ margin-bottom:0; }