.webafrooz-persian-calendar {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;

	direction: rtl;
	font-family: inherit;
}

.webafrooz-persian-calendar * {
	box-sizing: border-box;
}


/* ---------------------------------------------
   Header
--------------------------------------------- */

.webafpc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 10px;
	margin-bottom: 15px;
}

.webafpc-title {
	flex: 1;

	text-align: center;

	font-size: 18px;
	font-weight: 700;
}


/* ---------------------------------------------
   Navigation
--------------------------------------------- */

.webafpc-nav {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	border-radius: var(--webafpc-radius);

	background: var(--webafpc-nav-bg) !important;
	color: var(--webafpc-nav-text) !important;

	text-decoration: none !important;

	font-size: 24px;

	transition: .2s ease;
}

.webafpc-nav:hover {
	background: var(--webafpc-primary) !important;
	color: #fff !important;

	transform: translateY(-2px);
}


/* ---------------------------------------------
   Month / Year Selectors
--------------------------------------------- */

.webafrooz-persian-calendar .webafpc-selectors {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;

	width: 100% !important;

	margin: 0 0 15px 0 !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;
}


/* ---------------------------------------------
   Select
--------------------------------------------- */

.webafrooz-persian-calendar .webafpc-selectors select {
	flex: 1 1 auto !important;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;

	height: 40px !important;

	margin: 0 !important;
	padding: 0 12px !important;

	border: 1px solid var(--webafpc-select-border) !important;
	border-radius: var(--webafpc-select-radius) !important;

	background-color: var(--webafpc-select-bg) !important;
	background-image: none !important;

	color: var(--webafpc-select-text) !important;

	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 40px !important;

	box-shadow: none !important;

	outline: none !important;

	cursor: pointer !important;

	appearance: auto !important;
	-webkit-appearance: auto !important;

	transition:
		border-color .2s ease,
		box-shadow .2s ease !important;
}


/* Select Hover */

.webafrooz-persian-calendar .webafpc-selectors select:hover {
	border-color: var(--webafpc-select-focus) !important;
}


/* Select Focus */

.webafrooz-persian-calendar .webafpc-selectors select:focus {
	border-color: var(--webafpc-select-focus) !important;

	box-shadow:
		0 0 0 2px
		color-mix(
			in srgb,
			var(--webafpc-select-focus) 15%,
			transparent
		) !important;

	outline: none !important;
}


/* ---------------------------------------------
   Table
--------------------------------------------- */

.webafpc-table {
	width: 100% !important;

	margin: 0 !important;

	border: 0 !important;

	border-collapse: separate !important;
	border-spacing: 4px !important;

	table-layout: fixed;
}


/* Weekdays */

.webafpc-table th {
	height: 34px;

	padding: 0;

	border: 0;

	background: transparent;

	text-align: center;

	color: #818286;

	font-size: 12px;
	font-weight: 600;
}


/* Calendar Days */

.webafpc-table td {
	position: relative;

	height: 42px;

	padding: 0;

	border: 0;

	border-radius: var(--webafpc-radius);

	background: var(--webafpc-day-bg);

	color: var(--webafpc-text);

	text-align: center;
	vertical-align: middle;

	font-size: var(--webafpc-font-size);
}


/* Empty Days */

.webafpc-empty {
	background: transparent !important;
}


/* ---------------------------------------------
   Days With Posts
--------------------------------------------- */

.webafpc-day a {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	border-radius: var(--webafpc-radius);

	color: var(--webafpc-post) !important;

	text-decoration: none !important;

	font-weight: 700;
}

.webafpc-day a:hover {
	background: var(--webafpc-primary);

	color: #fff !important;
}


/* ---------------------------------------------
   Today
--------------------------------------------- */

.webafpc-today {
	background: var(--webafpc-today) !important;
	color: #fff !important;
	font-weight: 700;
}

.webafpc-today a {
	color: #fff !important;
}


/* ---------------------------------------------
   Submit Button
--------------------------------------------- */

.webafrooz-persian-calendar .webafpc-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	flex: 0 0 auto !important;

	width: auto !important;
	min-width: 75px !important;
	height: 40px !important;

	margin: 0 !important;
	padding: 0 18px !important;

	border: 0 !important;
	border-radius: var(--webafpc-button-radius) !important;

	background: var(--webafpc-button-bg) !important;

	color: var(--webafpc-button-text) !important;

	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 40px !important;

	text-align: center !important;
	text-decoration: none !important;

	box-shadow: none !important;

	cursor: pointer !important;

	transition:
		background-color .2s ease,
		transform .2s ease,
		opacity .2s ease !important;
}


/* Submit Hover */

.webafrooz-persian-calendar .webafpc-submit:hover {
	background: var(--webafpc-button-hover) !important;

	color: var(--webafpc-button-text) !important;

	transform: translateY(-1px);

	opacity: 1 !important;
}


/* Submit Focus */

.webafrooz-persian-calendar .webafpc-submit:focus {
	outline: none !important;

	color: var(--webafpc-button-text) !important;

	box-shadow:
		0 0 0 3px
		color-mix(
			in srgb,
			var(--webafpc-button-bg) 20%,
			transparent
		) !important;
}


/* ---------------------------------------------
   Mobile
--------------------------------------------- */

@media (max-width: 480px) {

	.webafrooz-persian-calendar {
		max-width: 100%;
	}

	.webafpc-title {
		font-size: 16px;
	}

	.webafpc-nav {
		width: 32px;
		height: 32px;

		font-size: 21px;
	}

	.webafpc-table {
		border-spacing: 3px !important;
	}

	.webafpc-table td {
		height: 38px;
		font-size: 12px;
	}

	.webafpc-selectors {
		gap: 5px !important;
	}

	.webafpc-selectors select {
		min-width: 0;
		padding: 0 5px !important;
	}

	.webafpc-submit {
		padding: 0 12px !important;
	}

}