/* ===============================================
 FONTS
=============================================== */

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Regular.woff2") format("woff2"),
		url("../fonts/Satoshi-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Bold.woff2") format("woff2"),
		url("../fonts/Satoshi-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Light.woff2") format("woff2"),
		url("../fonts/Satoshi-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
}

/* ===============================================
 VARIABLES
=============================================== */
:root {
	--color-white: #fff;
	--color-backdrop: #1f153580;
	--color-grey-5: #f8f8f8;
	--color-grey-10: #f1f1f1;
	--color-grey-20: #e4e4e4;
	--color-grey-40: #cacaca;
	--color-grey-60: #afafaf;
	--color-grey-80: #969696;
	--color-grey-100: #7c7c7c;
	--color-grey-100-rgb: 124 124 124;
	--color-grey-120: #646464;
	--color-grey-140: #4b4b4b;
	--color-grey-160: #343434;
	--color-grey-180: #1e1e1e;
	--color-grey-200: #131313;
	--color-purple-5: #f8f6ff;
	--color-purple-10: #f2ecff;
	--color-purple-20: #e5d9ff;
	--color-purple-40: #cbb5ff;
	--color-purple-60: #b191ff;
	--color-purple-80: #996fff;
	--color-purple-100: #864dff;
	--color-purple-120: #673fcc;
	--color-purple-140: #4e3198;
	--color-purple-160: #362365;
	--color-purple-180: #1f1535;
	--color-purple-200: #14101f;
	--color-red-5: #fef6f6;
	--color-red-10: #fdefed;
	--color-red-20: #ffe2e1;
	--color-red-40: #ffc4c0;
	--color-red-60: #ffa5a1;
	--color-red-80: #fc877e;
	--color-red-100: #fe695d;
	--color-red-120: #cc5950;
	--color-red-140: #96413b;
	--color-red-160: #68302d;
	--color-red-180: #331918;
	--color-red-200: #1d1210;
	--color-orange-5: #fefbf2;
	--color-orange-10: #fdf6e5;
	--color-orange-20: #fff0d2;
	--color-orange-40: #ffe1a6;
	--color-orange-60: #ffcf7b;
	--color-orange-80: #ffbf3e;
	--color-orange-100: #ffb017;
	--color-orange-120: #c98b00;
	--color-orange-140: #996a00;
	--color-orange-160: #684704;
	--color-orange-180: #32260a;
	--color-orange-200: #191305;
	--color-green-5: #dff7f0;
	--color-green-10: #dff7f0;
	--color-green-20: #c9f4e9;
	--color-green-40: #8fe5d5;
	--color-green-60: #5bd8b7;
	--color-green-80: #3fc9a2;
	--color-green-100: #00bc8f;
	--color-green-120: #1a9673;
	--color-green-140: #167258;
	--color-green-160: #054939;
	--color-green-180: #03261a;
	--color-green-200: #021613;
	--color-blue-5: #f7fdfe;
	--color-blue-10: #effcfd;
	--color-blue-20: #e0f9fb;
	--color-blue-40: #c3f2f6;
	--color-blue-60: #a7ecf2;
	--color-blue-80: #8de6ed;
	--color-blue-100: #57e1e9;
	--color-blue-120: #5fb1b8;
	--color-blue-140: #478489;
	--color-blue-160: #31585b;
	--color-blue-180: #1c2f31;
	--color-blue-200: #121b1d;
	--color-error-5: #fbf1f1;
	--color-error-10: #f7e5e5;
	--color-error-20: #efcbca;
	--color-error-40: #e09897;
	--color-error-60: #d46765;
	--color-error-80: #c83834;
	--color-error-100: #ce0505;
	--color-error-120: #960b00;
	--color-error-140: #710a00;
	--color-error-160: #4b0800;
	--color-error-180: #280402;
	--color-error-200: #180404;
	--color-category-1: #f9f4a8;
	--color-category-2: #f3aab1;
	--color-category-3: #cfb9ff;
	--color-category-4: #f7e0ff;
	--color-category-5: #cdf5b7;
	--color-category-6: #98d8f9;
	--color-category-7: #ffe29b;
	--color-category-8: #eafeff;
	--color-category-9: #cbd67b;
	--color-category-10: #ffccca;
	--font-size-title-1: 2rem;
	--font-size-title-2: 1.25rem;
	--font-size-title-3: 1rem;
	--font-size-title-4: 0.875rem;
	--font-size-subtitle: 0.875rem;
	--font-size-paragraph: 0.875rem;
	--font-size-placeholder: 0.875rem;
	--font-size-secondary-text: 0.75rem;
	--font-size-label-sm: 0.75rem;
	--font-size-label-md: 0.875rem;
	--font-weight-thin: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	--font-family: "Satoshi", "sans-serif";
	--size-xs: 1.5rem;
	--size-sm: 2rem;
	--size-md: 2.5rem;
	--size-lg: 3rem;
	--size--xxl: 15rem;
	--space-01: 0.25rem;
	--space-02: 0.5rem;
	--space-03: 1rem;
	--space-04: 1.5rem;
	--space-05: 2rem;
	--space-06: 2.5rem;
	--space-07: 3rem;
	--space-08: 4rem;
	--space-09: 5rem;
	--space-10: 6rem;
	--width-prose: 65ch;
	--radius-component: 0.5rem;
	--radius-container: 0.875rem;
	--radius-full: 9999px;
	--shadow: 0px 0px 8px 0px #1f153554;
	--transition-colors: color, background-color, border-color, outline-color, text-decoration-color,
		fill, stroke, box-shadow;
	--transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-duration: 150ms;
	--transition-duration-lg: 300ms;
	--transition-delay: 50ms;
	--app-page-content-y-padding: var(--space-04);
	--container-el-margin: var(--space-05);
	--container-el-padding: var(--space-03);
}

/* ===============================================
 TYPOGRAPHY
=============================================== */

#wpbody-content h1 {
	font-size: var(--font-size-title-1);
	line-height: 1.2;
}

.df-page-content h2 {
	font-size: var(--font-size-title-2);
}

.df-page-content h3 {
	font-size: var(--font-size-title-3);
}

.text-right {
	text-align: right;
}

.df-link {
	color: var(--color-purple-100);
	text-decoration: underline;
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
	word-break: break-word;
	user-select: none;
}

.df-link:hover {
	color: var(--color-purple-120);
}

.df-button {
	--button-margin: 2px;
	--button-border-size: 0px;
	--button-border-color: #0000;
	border-width: var(--button-border-size);
	border-color: var(--button-border-color);
	border-style: solid;
	align-items: center;
	border-radius: var(--radius-component);
	color: var(--color-purple-200);
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-label-md);
	font-style: normal;
	font-weight: var(--font-weight-bold);
	gap: var(--space-02);
	justify-content: center;
	line-height: var(--font-size-label-md);
	max-width: 100%;
	outline: none;
	padding-inline: var(--space-03);
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
	background-color: var(--color-purple-100);
	color: var(--color-white);
	text-decoration: none;
	height: var(--size-md);
	line-height: var(--size-md);
	cursor: pointer;
}

.df-button:hover {
	background-color: var(--color-purple-120);
	color: var(--color-white);
}

.df-button.df-button-danger {
	background-color: var(--color-red-100);
	color: var(--color-white);
}

.df-button.df-button-danger:hover {
	background-color: var(--color-red-120);
}

.df-settings-button {
	margin-top: var(--space-05);
	text-align: right;
}

.df-button.df-button--secondary {
	--button-border-size: 1px;
	--button-border-color: var(--color-grey-20);
	background-color: var(--color-white);
	color: var(--color-purple-200);
}

.df-button.df-button--secondary:hover {
	background-color: var(--color-grey-10);
}

.df-button.df-button--ghost {
	background-color: transparent;
	color: var(--color-purple-200);
}

.df-button.df-button--ghost:hover {
	background-color: var(--color-grey-10);
}

.df-button.df-button--xs {
	padding-left: var(--space-01);
	padding-right: var(--space-01);
	height: var(--size-xs);
	line-height: var(--size-xs);
	font-size: var(--font-size-label-sm);
}

/* ===============================================
 LOGO
=============================================== */

.df-admin-header {
    clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
    padding: 25px 25px 0 25px;
    margin-bottom: -20px;
}

.df-admin-logo {
	display: block;
}

/* ===============================================
 LAYOUT
=============================================== */

body.wp-admin {
	background-color: var(--color-purple-5);
}

.striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate {
	background-color: var(--color-purple-5);
}

a,
.wp-core-ui .button-link {
    color: var(--color-purple-120);
}

a:hover,
.wp-core-ui .button-link:hover {
    color: var(--color-purple-140);
}

.widefat th.sortable, 
.widefat th.sorted,
.widefat thead td.check-column, 
.widefat tfoot td.check-column,
.widefat thead tr th, 
.widefat thead tr td, 
.widefat tfoot tr th, 
.widefat tfoot tr td {
    background-color: var(--color-purple-20);
}

.wp-core-ui .button {
    border: none;
    --button-margin: 2px;
    --button-border-size: 0px;
    --button-border-color: #0000;
    align-items: center;
    border-radius: var(--radius-component);
    box-shadow: 0 0 0 var(--button-border-size) var(--button-border-color);
    color: var(--color-purple-200);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-label-md);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    gap: var(--space-02);
    justify-content: center;
    line-height: var(--font-size-label-md);
    margin: var(--button-margin);
    max-width: 100%;
    outline: none;
    padding-inline: var(--space-03);
    transition-duration: var(--transition-duration);
    transition-property: var(--transition-colors);
    transition-timing-function: var(--transition-timing-function);
}

.wp-core-ui .button-primary {
    background-color: var(--color-purple-100);
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
}

.wp-core-ui .button-secondary,
.wp-core-ui .button:not(.button-primary) {
    --button-border-size: 1px;
    --button-border-color: var(--color-grey-20);
    background-color: var(--color-white);
    color: var(--color-purple-200);
}


.wp-core-ui .button-secondary:hover {
    background-color: var(--color-purple-120);
    color: var(--color-white);
}

.wp-core-ui .button-secondary,
.wp-core-ui .button:not(.button-secondary):hover {
    --button-border-color: var(--color-grey-10);
    background-color: var(--color-grey-10);
    color: var(--color-purple-200);
}

#wpbody-content .notice {
	margin-bottom: var(--space-05);
}

#wpcontent {
	font-family: var(--font-family);
	font-size: 1rem;
}

#wpbody-content .wrap {
    margin-top: 0;
	padding: var(--space-05) var(--app-page-content-y-padding);
}

.df-admin-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#wpcontent p {
	margin: 0;
	font-size: 1rem;
}

.df-logo {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

.df-page-content {
	background-color: var(--color-white);
	border-radius: var(--radius-container);
}

.df-page-content-inner {
	padding: var(--container-el-padding) var(--space-05);
}

.ml-auto {
	margin-left: auto;
}

.mt-02 {
	margin-top: var(--space-02);
}

.mt-04 {
	margin-top: var(--space-04);
}

#wpcontent .df-mb-02 {
	margin-bottom: var(--space-02);
}

/* ===============================================
 GRID
=============================================== */

.df-flex {
	display: flex;
	gap: var(--space-03);
}

.df-flex-wrap {
	flex-wrap: wrap;
}

.df-align-center {
	align-items: center;
}

.df-justify-end {
	justify-content: flex-end;
}

.df-grid-2,
.df-grid-3,
.df-grid-3-2,
.df-grid-4 {
	display: grid;
	align-items: start;
	grid-gap: var(--space-03);
}

.df-grow {
	flex-grow: 1;
}

.df-justify-between {
	justify-content: space-between;
}

.df-align-self-end {
	align-self: end;
}

@media (min-width: 768px) {
	.df-grid-2 {
		grid-template-columns: 1fr 1fr;
	}
	.df-grid-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.df-grid-3-2 {
		grid-template-columns: 2fr 1fr;
	}
	.df-grid-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.df-span-2 {
		grid-column: span 2;
	}
}

@media (max-width: 767px) {
	.df-flex {
		flex-direction: column;
	}
}

/* ===============================================
 UPLOAD
=============================================== */

.df-upload-image {
	display: flex;
	align-items: center;
	gap: var(--space-03);
}

.df-upload-image-preview {
	position: relative;
	width: 76px;
	height: 76px;
	border-radius: var(--radius-component);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(222, 207, 255);
	color: var(--color-purple-120);
}

.df-upload-image-preview img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.df-upload-image-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-02);
	font-size: 0.75rem;
	font-weight: 900;
	color: var(--color-purple-200);
}

.df-upload-image-label small {
	display: block;
	color: var(--color-grey-100);
	font-size: 0.75rem;
	font-weight: 700;
}

.df-upload-image :is(.df-media-upload, .df-media-remove) {
	border: 1px solid var(--color-grey-20);
	border-radius: var(--radius-component);
	background-color: var(--color-white);
	height: var(--size-sm);
	font-size: 0.8rem;
	white-space: nowrap;
	color: var(--color-purple-200);
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
}

.df-upload-image :is(.df-media-upload, .df-media-remove):hover {
	border-color: var(--color-grey-10);
	background-color: var(--color-grey-10);
	color: var(--color-purple-200);
}

.df-upload-image :is(.df-media-upload, .df-media-remove):active,
.df-upload-image :is(.df-media-upload, .df-media-remove):focus {
	border-color: var(--color-grey-40);
	background-color: var(--color-grey-40);
	color: var(--color-purple-200);
}

.df-upload-image :is(.df-media-upload, .df-media-remove) svg {
	display: block;
}

/* ===============================================
 ALERT
=============================================== */

.df-alert {
	margin: var(--space-02) 0;
    align-items: flex-start;
	background-color: var(--alert-background-color);
	border: 2px solid var(--alert-border-color);
	border-radius: var(--radius-container);
	display: flex;
	gap: var(--space-03);
	font-size: var(--font-size-title-4);
	font-weight: var(--font-weight-bold);
	min-height: 3rem;
	padding: var(--space-02);
	position: relative;
}

.df-alert--success {
	--alert-background-color: var(--color-green-5);
	--alert-active-background-color: var(--color-green-20);
	--alert-border-color: var(--color-green-100);
}

.df-alert--alert {    
    --alert-background-color: var(--color-orange-5);
    --alert-active-background-color: var(--color-orange-20);
    --alert-border-color: var(--color-orange-100);
}

.df-alert--error {
	--alert-background-color: var(--color-error-5);
	--alert-active-background-color: var(--color-error-20);
	--alert-border-color: var(--color-error-100);
}

.df-state-indicator__icon {
    margin-top: -6px;
    color: var(--state-indicator-color);
    height: var(--size-md);
    width: var(--size-md);
}

.df-state-indicator--alert {
    --state-indicator-color: var(--color-orange-100);
    --state-indicator-background: var(--color-orange-5);
}

.state-indicator {
	align-items: center;
	display: inline-flex;
	height: var(--state-indicator-size);
	justify-content: center;
	width: var(--state-indicator-size);
	color: var(--state-indicator-color);
}

.state-indicator--md {
	--state-indicator-size: var(--size-md);
}

.state-indicator--success {
	--state-indicator-color: var(--color-green-100);
	--state-indicator-background: var(--color-green-5);
}

.state-indicator--error {
	--state-indicator-color: var(--color-error-100);
	--state-indicator-background: var(--color-error-5);
}

.df-close-button {
    margin-top: -20px;
}

/* ===============================================
 DIVIDER
=============================================== */

.df-divider {
	border-top: 1px solid var(--color-grey-20);
	color: var(--color-grey-20);
	margin-block: var(--space-05);
}

/* ===============================================
 SMALL TAG
=============================================== */

.df-small-tag {
	display: flex;
	align-items: center;
	gap: var(--space-01);
	margin-right: var(--space-01);
	padding: 0 var(--space-01);
	border-radius: var(--radius-full);
	border: 1px solid var(--color-grey-20);
	background-color: var(--color-grey-10);
	transition: border-color var(--transition-duration);
	font-size: 12px;
}

.df-small-tag svg {
	position: relative;
}

.df-small-tag:hover {
	border-color: var(--color-purple-100);
}

/* ===============================================
 CONTENT SWITCHER
=============================================== */

.df-content-switcher__wrapper {
	margin-bottom: var(--space-03);
	overflow-x: auto;
}

.df-content-switcher {
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-20);
	border-radius: calc(var(--radius-component) + 1px);
	column-gap: 2px;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}
.df-content-switcher .df-button--ghost.active {
	background-color: var(--color-purple-20);
}
.df-content-switcher .df-button--ghost:active,
.df-content-switcher .df-button--ghost:focus {
	box-shadow: none;
}

/* ===============================================
 NAV
=============================================== */

.df-nav {
	align-items: stretch;
	display: flex;
	overflow-x: auto;
}

.df-nav-link {
	align-items: center;
	background-color: var(--color-purple-10);
	border: 2px solid #0000;
	display: flex;
	flex-shrink: 0;
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-bold);
	line-height: normal;
	outline: none;
	padding-block-end: 0.25rem;
	padding-inline: var(--space-03);
	position: relative;
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
	color: var(--color-purple-200);
	text-decoration: none;
	line-height: 2rem;
}

.df-nav-link:hover,
.df-nav-link.active:hover {
	background-color: var(--color-purple-20);
	color: var(--color-purple-200);
}

.df-nav-link.active {
	background-color: var(--color-white);
}

.df-nav-link.active::after {
	background-color: var(--color-purple-100);
	border-radius: var(--radius-full);
	bottom: 0;
	content: "";
	height: 0.25rem;
	left: 50%;
	position: absolute;
	transition-duration: var(--transition-duration);
	transition-property: width;
	transition-timing-function: var(--transition-timing-function);
	translate: -50% 0;
	width: min(3rem, 75%);
}

.df-nav-link:hover::after {
	width: 100%;
}

.df-nav-link:first-child {
	border-top-left-radius: var(--radius-component);
}

.df-nav-link:last-child {
	border-top-right-radius: var(--radius-component);
}

/* ===============================================
 NUMBER
=============================================== */

.df-number {
	padding: 0.25rem 0.5rem;
	background-color: var(--color-purple-100);
	color: var(--color-white);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-label-sm);
	line-height: var(--font-size-label-sm);
}

/* ===============================================
 FORM
=============================================== */

.df-page-content
	input:is(
		[type="text"],
		[type="password"],
		[type="email"],
		[type="number"],
		[type="tel"],
		[type="url"],
		[type="search"],
		[type="date"],
		[type="time"],
		[type="datetime-local"],
		[type="month"],
		[type="week"],
		[type="color"],
		[type="textarea"],

	) {
	height: var(--size-md);
	width: 100%;
	align-items: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-20);
	border-radius: var(--radius-component);
	color: var(--color-purple-200);
	display: flex;
	margin: 1px;
	outline: 1px solid #0000;
	padding: var(--radius-component) var(--space-02);
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
}

.df-page-content
	input:is(
		[type="text"],
		[type="password"],
		[type="email"],
		[type="number"],
		[type="tel"],
		[type="url"],
		[type="search"],
		[type="date"],
		[type="time"],
		[type="datetime-local"],
		[type="month"],
		[type="week"],
		[type="color"],
		[type="textarea"],

	):hover {
	border-color: var(--color-grey-100);
}

.df-page-content
	input:is(
		[type="text"],
		[type="password"],
		[type="email"],
		[type="number"],
		[type="tel"],
		[type="url"],
		[type="search"],
		[type="date"],
		[type="time"],
		[type="datetime-local"],
		[type="month"],
		[type="week"],
		[type="color"],
		[type="textarea"],

	):focus {
	border-color: var(--color-purple-100);
	outline-color: var(--color-purple-100);
}

.df-page-content
	input:is(
		[type="text"],
		[type="password"],
		[type="email"],
		[type="number"],
		[type="tel"],
		[type="url"],
		[type="search"],
		[type="date"],
		[type="time"],
		[type="datetime-local"],
		[type="month"],
		[type="week"],
		[type="color"],
		[type="textarea"],

	):disabled {
	background-color: var(--color-grey-10);
	cursor: not-allowed;
}

.df-page-content 
	select {
        display: block;
        width: 100%;
        max-width: 100%;
		appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M5 14L24 34L43 14' stroke='%2314101f' stroke-width='4' stroke-linecap='round' fill='none'/></svg>");    
        align-items: center;
        background-color: var(--color-white);
        border: 1px solid var(--color-grey-20);
        border-radius: var(--radius-component);
        color: var(--color-purple-200);
        display: flex;
        margin: 1px;
        outline: 1px solid #0000;
        padding: var(--radius-component) var(--space-02);
}

.df-page-content 
	select:hover {
        border-color: var(--color-grey-100);
        color: var(--color-purple-200);
}

.df-page-content 
	select:focus-within {
		border-color: var(--color-purple-100);
		outline-color: var(--color-purple-100);
        color: var(--color-purple-200);
}

.df-textarea {
	align-items: center;
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-20);
	border-radius: var(--radius-component);
	color: var(--color-purple-200);
	display: flex;
	margin: 1px;
	width: 100%;
	outline: 1px solid #0000;
	padding: var(--radius-component) var(--space-02);
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
}

.df-colorpicker {
	position: relative;
}

.df-colorpicker-preview {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-02);
	box-sizing: border-box;
	border-radius: var(--radius-component);
}

.df-colorpicker input[type="color"] {
	opacity: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
    cursor: pointer;
}

.df-label {
	color: var(--color-grey-100);
	font-family: var(--font-family);
	font-size: var(--font-size-label-md);
	font-weight: var(--font-weight-bold);
	line-height: normal;
}

.df-toggle {
	position: relative;
}

.df-toggle-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.df-toggle-label {
	position: relative;
	width: fit-content;
	padding: var(--space-01) var(--space-02);
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--space-02);
	margin: 2px;
	outline: none;
	border-radius: var(--radius-component);
	transition: all 0.2s ease-in-out;
}

.df-toggle-label:hover {
	background-color: var(--color-grey-10);
}

.df-toggle-label:before {
	content: "";
	display: block;
	background-color: var(--color-white);
	border: 2px solid var(--color-grey-40);
	height: 28px;
	min-width: 44px;
	width: 44px;
	border-radius: var(--radius-full);
}

.df-toggle-label:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 14px;
	height: 22px;
	width: 22px;
	transform: translateY(-50%);
	background: var(--color-grey-100);
	border-radius: var(--radius-full);
	transition: left 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.df-toggle-input:not(:checked)
	+ .df-toggle-label:has(span:nth-child(2):last-child)
	span:last-child {
	display: none;
}

.df-toggle-input:checked + .df-toggle-label:has(span:nth-child(2):last-child) span:first-child {
	display: none;
}

.df-toggle-input:checked + .df-toggle-label:before {
	background-color: var(--color-purple-100);
	border-color: var(--color-purple-100);
}

.df-toggle-input:checked + .df-toggle-label:after {
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='transparent' stroke='%23864dff' stroke-linecap='round' stroke-width='4' d='m15 22 9 10 14-18'/%3E%3C/svg%3E")
		var(--color-white) center center no-repeat;
	background-size: 20px;
	left: 30px;
}


/* ===============================================
 SLUGs IDENTIFIERS
=============================================== */

.url-identifiers-wrapper {
    position: relative;
}

.url-identifiers-wrapper input.digiforma-input-error,
.url-identifiers-wrapper input.digiforma-input-error:focus {
    border: 2px solid #b32d2e;
}

.url-identifiers-wrapper #digiforma_url_identifiers_error {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #b32d2e;
    color: var(--color-white);
    padding: var(--space-01);
    border-radius: var(--radius-component);
    font-size: var(--font-size-label-sm);
    font-weight: var(--font-weight-regular);
    line-height: normal;
    z-index: 1;
    text-wrap: balance;
    text-align: center;
    width: 300px;
}

.url-identifiers-wrapper #digiforma_url_identifiers_error:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 80px;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: #b32d2e transparent transparent transparent;
}

/* ===============================================
 CHECKBOX
=============================================== */

.df-checkbox {
	--container-border-size: 0px;
	height: var(--size-lg);
	padding: var(--space-02) var(--space-03);
	align-items: center;
	border-radius: var(--radius-component);
	box-shadow: 0 0 0 var(--container-border-size) var(--container-border-color);
	cursor: pointer;
	display: flex;
	gap: var(--space-02);
	margin: 2px;
	outline: none;
	transition-duration: var(--transition-duration);
	transition-property: var(--transition-colors);
	transition-timing-function: var(--transition-timing-function);
}

.df-checkbox:hover {
	background-color: var(--color-grey-10);
}

.df-checkbox:focus,
.df-checkbox:active,
.df-checkbox:has(input:focus),
.df-checkbox:has(input:active) {
	--container-border-size: 2px;
	--container-border-color: var(--color-purple-100);
	box-shadow: 0 0 0 var(--container-border-size) var(--container-border-color);
	background-color: var(--color-grey-20);
	transition-delay: var(--transition-delay);
}

.df-checkbox input {
	--checkbox-size: 22px;
	align-items: center;
	appearance: none;
	background-color: var(--color-white);
	background-position: 50%;
	background-size: var(--checkbox-size);
	border: 2px solid var(--color-grey-40);
	border-radius: 4px;
	display: flex;
	flex-shrink: 0;
	height: var(--checkbox-size);
	justify-content: center;
	outline: none;
	padding: var(--space-01);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	width: var(--checkbox-size);
}

.df-checkbox input:focus {
	border: 2px solid var(--color-purple-100);
	outline: none;
}

.df-checkbox input:checked,
.df-checkbox input:indeterminate {
	position: relative;
	z-index: 2;
	background-color: var(--color-purple-100);
	border-color: var(--color-purple-100);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11.25 15.9 7.2 11.25c-.25-.3-.25-.8.05-1.05s.8-.25 1.05.05l2.95 3.35 5.45-6.35c.25-.3.75-.35 1.05-.1.3.25.35.75.1 1.05l-6.6 7.7Z'/%3E%3C/svg%3E");
	background-position: 50%;
	background-size: var(--checkbox-size);
}

.df-checkbox input {
	appearance: none;
}

.df-checkbox:checked::before {
	display: none;
}

.df-checkbox-visible {
	display: flex;
	align-items: center;
	gap: var(--space-02);
	user-select: none;
	color: var(--color-purple-120);
	cursor: pointer;
}

.df-checkbox-visible input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.df-checkbox-visible:has(input[type="checkbox"]:checked) .icon-unchecked {
	display: none;
}

.df-checkbox-visible:has(input[type="checkbox"]:not(:checked)) .icon-checked {
	display: none;
}

/* ===============================================
 MODAL
=============================================== */

.df-modal {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-backdrop);
	z-index: 1000;
}

.df-modal[hidden] {
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, pointer-events 0.3s ease-in-out;
}

.df-modal-content {
	position: relative;
	margin-bottom: 5vh;
	background-color: var(--color-white);
	border-radius: var(--radius-container);
	padding: var(--space-05) var(--container-el-padding) var(--container-el-padding)
		var(--container-el-padding);
	max-width: 40rem;
	margin: auto;
}

/* ===============================================
 PAGE REGLAGES
=============================================== */

.digiforma-formation-count {
	margin: var(--space-02) 0 0;
	display: flex;
	align-items: center;
	gap: var(--space-01);
}

/* ===============================================
 BOTTOM BAR
=============================================== */

.df-bottom-bar {
	position: sticky;
	bottom: 0;
	padding: var(--container-el-padding) 0;
	background-color: var(--color-white);
	margin-top: var(--space-05);
}

/* ===============================================
 ITEM LIST
=============================================== */

.df-item-list {
	margin-top: var(--space-02);
	display: grid;
	gap: var(--space-04);
	padding: var(--space-02);
	background-color: var(--color-purple-5);
	border-radius: var(--radius-container);
}

.df-item-list-item {
	padding: var(--space-03);
	background-color: var(--color-white);
	border-radius: var(--radius-container);
}

/* ===============================================
CONTENT SWITCHER
=============================================== */

.content-switcher__wrapper {
    display: grid;
    overflow-x: auto;
    padding: var(--space-01);
}

.content-switcher {
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-20);
    border-radius: calc(var(--radius-component) + 1px);
    column-gap: 2px;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

.content-switcher {
    user-select: none;
}

.content-switcher__wrapper .button--ghost {
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

input[type="checkbox"]:not(:checked) + .content-switcher__wrapper .content-switcher__button:first-child {
    --button-border-color: var(--color-purple-100);
    background-color: var(--color-purple-20);
}

input[type="checkbox"]:checked + .content-switcher__wrapper .content-switcher__button:last-child {
    --button-border-color: var(--color-purple-100);
    background-color: var(--color-purple-20);
}

/* ===============================================
 ACCORDION
=============================================== */

.df-accordion__item {
	border-radius: var(--radius-container);
	background-color: var(--color-white);
}

.df-accordion__item[open] .df-accordion__icon {
	transform: rotate(180deg);
}

.df-accordion__header {
	position: relative;
	display: flex;
	gap: var(--space-02);
	justify-content: space-between;
	align-items: center;
	padding-left: 45px;
	border-radius: var(--radius-container) var(--radius-container) 0 0;
	padding: var(--container-el-padding);
	cursor: pointer;
}

.df-accordion__item[open] .df-accordion__header,
.df-accordion__header:hover {
	background-color: var(--color-grey-10);
}

.df-accordion__header .df-item-list-links {
	margin-left: auto;
	white-space: nowrap;
}

.df-accordion__icon {
	margin-left: var(--space-03);
	min-width: 32px;
}

.df-accordion__body {
	padding: var(--container-el-padding);
}

.df-item-list-links {
	display: flex;
	gap: var(--space-02);
}

/* ===============================================
 PROGRAM
=============================================== */

.df-program-status {
	display: flex;
	align-items: center;
	gap: var(--space-01);
	margin-bottom: var(--space-01);
	line-height: var(--font-size-text-xs);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-label-sm);
}

.df-program-status:has(.icon-checked) {
	color: var(--color-purple-120);
}

.program-title {
	margin: var(--space-02) 0 0 0;
}

.df-price-edit {
	flex-shrink: 9999;
}

.admin-price-edit {
	align-self: center;
}
.df-has-intra:has(.df-toggle-input:not(:checked)) + .df-intra-price {
	opacity: 0.5;
	pointer-events: none;
}

.session-title-text {
	display: flex;
	gap: var(--space-01);
}

.session-title-text svg {
	margin-top: var(--space-01);
	min-width: 20px;
}

.session-title-text:has(.icon-checked) {
	color: var(--color-purple-120);
}

.session-price-edit {
	white-space: nowrap;
}

.df-has-financing:has(input[type="checkbox"]:checked) + .df-link-financing {
	display: block;
}

.df-has-financing:has(input[type="checkbox"]:not(:checked)) + .df-link-financing {
	display: none;
}


/* ===============================================
 CATEGORIES
=============================================== */

.taxonomy-digiforma_category #col-left,
.page-title-action,
.wp-heading-inline + .page-title-action,
.row-actions .delete,
.row-actions .trash {
    display: none !important;
}


.taxonomy-digiforma_category #col-right {
    width: 100%;
    float: none;
}


/* ===============================================
 LINKS MENU
=============================================== */

#adminmenu li.menu-top.current a.toplevel_page_digiforma-settings,
#adminmenu li.toplevel_page_digiforma-settings.wp-has-current-submenu a.wp-menu-open {
	background-color: var(--color-purple-140);
	color: var(--color-white);
}

#adminmenu li.toplevel_page_digiforma-settings.wp-has-current-submenu a:hover {
	border-color: var(--color-purple-40);
	color: var(--color-purple-40);
}

/* ===============================================
 TYPO
=============================================== */

.df-page-content a,
.df-link {
	color: var(--color-purple-100);
}

/* ===============================================
 EDIT TAG
=============================================== */

#edittag {
    max-width: 100%;
}

/* ===============================================
 ADMIN COLOR PREVIEW
=============================================== */

.df-colors {
    max-width: 35%;
}

.digiforma-brand-theme {
    position: relative;
    margin-top: 12px;
    border: 1px solid var(--color-grey-20);
    border-radius: var(--radius-container);
    padding: 24px var(--space-03) var(--space-03) var(--space-03);
}

.digiforma-brand-theme.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-03);
}

.digiforma-brand-theme h3 {
    margin: 0;
    padding: 6px;
    position: absolute;
    top: -8px;
    left: 8px;
    background-color: var(--color-white);
    width: fit-content;
}

.digiforma-brand-theme .df-label {
    display: block;
    margin: 6px 0;
}

.df-color-previews-wrapper h3 {
    margin-bottom: 0;
}

.df-colorpicker-preview {
    border: 1px solid var(--color-grey-20) !important;
    border-radius: var(--radius-container);
}

.df-admin-color-preview__wrapper {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--color-grey-20);
	border-radius: 4px;
	background: var(--color-grey-5);
}

.df-admin-color-preview__svg {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}


.df-color-preview-wrapper > div {
    display: none;
}
.df-admin-color-preview {
    border: 1px solid var(--color-grey-20);
}

#digiforma_color_preview_toggle {
    opacity: 0;
    height: 0;
}

#digiforma_color_preview_toggle:checked + .content-switcher__wrapper + .df-color-preview-wrapper > div:last-child {
    display: flex;
}

#digiforma_color_preview_toggle:not(:checked) + .content-switcher__wrapper + .df-color-preview-wrapper > div:first-child {
    display: flex;
}

/* ===============================================
 FOR DEBUG
=============================================== */
#reset-content-btn {
    display: none !important;
}