@import "frontend/variables";
@import "frontend/framework";
@import "frontend/widget_docs";
@import "frontend/single-docs_widget";

/** === Doc search form result === **/
.doc_banner_text .banner_search_form {
	transition: all 0.4s;
}

.doc_banner_text .banner_search_form {
	margin-top: 45px;
}

.doc_banner_text .banner_search_form {
	position: relative;
}

.eazydocs-breadcrumb-root-title li.breadcrumb-item {
	color: rgb(119 122 175) !important;
	background: rgb(245 245 250);
	width: 100%;
	padding: 5px 15px !important;
}

ol.eazydocs-search-wrapper .breadcrumb .breadcrumb-item:first-child {
	display: none;
}

.has_drop #ezd_searchInput {
	+.spinner {
		right: 130px;
	}

	&::-webkit-search-cancel-button {
		right: 130px;
		position: absolute;
	}
}

.elementor-widget-ezd_search_form {
	.header_search_form_info.search_form_wrap .search_submit_btn>i {
		color: #fff;
	}

	input#ezd_searchInput {
		padding-left: 25px;
		border-radius: 5px;
		color: var(--black_800);

		@media (min-width: 991px) {
			min-width: 450px;
		}

		&::placeholder {
			color: var(--black_400);
		}

		~.spinner {
			right: 60px;
		}

		&::-webkit-search-cancel-button {
			padding-right: 80px;
		}
	}

	.ezd-left {
		input#ezd_searchInput {
			~.spinner {
				right: 20px;
			}

			&::-webkit-search-cancel-button {
				padding-right: 40px;
			}
		}

		.search_submit_btn {
			left: 0;
			right: auto;
		}
	}

	.ezd_search_keywords {
		text-align: left;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-weight: 500;
		justify-content: center;
		margin-top: 10px;

		span {
			font-size: 14px;
			color: #fff;
			margin-right: 10px;
		}

		ul {
			margin-bottom: 0;
			margin-left: 0;

			li {
				display: inline-block;
				margin-right: 7px;
			}
		}
	}
}

.header_search_form_info {
	input[type="search"] {
		padding-right: 0 !important;
		margin: 0;
	}
}

/** Search Form End **/

/*============== recommended_topic_area css  ===========*/
.recommended_topic_inner {
	position: relative;
	z-index: 1;
	padding: 100px 0;

	.recommended_item {
		a {
			text-decoration: none !important;

			&:hover {
				color: var(--ezd_brand_color);
			}
		}
	}
}

.doc_shap_one,
.doc_round {
	position: absolute;
	z-index: -1;
}

.doc_round {
	border-radius: 50%;

	&.one {
		width: 260px;
		height: 260px;
		background: #f9bf44;
		bottom: 120px;
		left: 120px;
	}

	&.two {
		background: #5e44ff;
		width: 100px;
		height: 100px;
		top: 160px;
		right: 70px;
	}
}

.doc_shap_one {
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}

.doc_title {
	margin-bottom: 76px;

	h2 {
		font-size: 34px;
		font-weight: 700;
		color: var(--black_800);
		margin-bottom: 15px;
		margin-top: 0;
	}

	p {
		font-size: 16px;
		line-height: 26px;
		margin-bottom: 0;
	}
}

.recommended_item {
	border-radius: 20px;
	box-shadow: 0 30px 50px 0 rgba(2, 2, 48, 0.06);
	padding: 40px 25px 35px 35px;
	margin-bottom: 30px;
	background: #fff;

	img {
		margin-bottom: 15px;
		max-width: 44px;
		border-radius: 5px;
	}

	.ct-heading-text {
		font-size: 18px;
		color: var(--black_700);
		font-weight: 700;
		line-height: 26px;
		margin: 0 0 5px;
		transition: color 0.2s linear;
		padding: 0;

		&:hover {
			color: var(--ezd_brand_color);
		}
	}

	ul.article-list {
		margin-left: 0;
		margin-bottom: 0;
		margin-top: 25px;
		padding-left: 0;

		li {
			padding-left: 20px;
			margin-left: 0;
			position: relative;
			font-size: 15px;
			line-height: 18px;

			&:before {
				content: "\35";
				font-family: eleganticons;
				position: absolute;
				left: -5px;
				width: auto;
				font-size: 18px;
				color: var(--ezd_brand_color);
				top: -2px;
			}

			a {
				color: var(--p_color);
				text-decoration: none !important;
				transition: color 0.2s linear;

				&:hover {
					color: var(--ezd_brand_color);
				}
			}

			&+li {
				margin-top: 20px;
			}
		}
	}
}

.question_text {
	font-size: 16px;
	line-height: 24px;
	color: var(--ezd_brand_color);
	font-weight: 500;
	margin-top: 35px;
	display: inline-block;

	&:hover {
		color: var(--ezd_brand_color);
	}
}

/* Topic List Area css
  ============================================================================================ */
.topic_list_item {
	border-radius: 10px;
	margin-bottom: 30px;
	padding: 36px 36px 38px;
	border: 1px solid #e5eff5;
	transition: all 300ms linear 0s;
	box-shadow: 0 2px 3px rgba(3, 27, 78, 0.05);

	img {
		padding-right: 15px;
		max-width: 45px;
		height: auto;
		max-height: max-content;
		border-radius: 4px;
	}

	.topic-title {
		display: flex;
		justify-content: space-between;
		text-decoration: none !important;
		gap: 10px;

		.ct-heading-text {
			font-size: 20px;
			display: flex;
			width: 100%;
			margin-top: 0;
			color: var(--black_700);
			padding: 5px 0 0;
		}
	}

	.count {
		color: var(--p_color);
		font-size: 14px;
		font-weight: 400;
		word-break: break-all;
	}

	ul {
		li {
			margin-bottom: 10px;

			a {
				color: var(--p_color);
				font-size: 16px;
				text-decoration: none !important;

				i {
					padding-right: 12px;
				}

				&:hover {
					color: var(--ezd_brand_color);
				}
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.text_btn {
		margin-top: 0;
		display: inline-block;
		font-size: 16px;
		gap: 5px;
		align-items: center;
		color: #1d2746;
	}

	&:hover {
		box-shadow: 0 16px 40px 0 rgba(10, 50, 102, 0.1);
		border-color: #fff;
	}
}

.h_content_items {
	&.box-item.collapse-wrap {
		display: none;
	}

	a {
		text-decoration: none !important;
	}
}

.h_item {
	background: #fff;
	padding: 30px 20px 22px;
	box-sizing: border-box;
	margin-bottom: 30px;
	box-shadow: 0 1px 3px rgba(29, 56, 70, 0.16);
	border-radius: 5px;
	text-align: center;

	img {
		max-width: 38px;
		margin: auto;
		margin-bottom: 19.48px;
	}

	svg {
		display: block;
		margin: 0 auto;
		width: 100%;
	}

	h4 {
		font-style: normal;
		font-size: 17px;
		line-height: 20px;
		font-weight: bold;
		text-align: center;
		text-transform: capitalize;
		margin-bottom: 13px;
		margin-top: 0;
		color: var(--black_700);

		&:hover {
			color: var(--ezd_brand_color);
		}
	}

	p {
		font-size: 16px;
		font-style: normal;
		font-weight: normal;
		line-height: 1.375;
		text-align: center;
		padding: 0 22.5px;
		text-transform: capitalize;
		margin-bottom: 0;
		color: var(--black_500);
	}

	&:hover {
		box-shadow: 0 14px 25px rgba(29, 56, 70, 0.06);
	}
}

.more {
	margin-top: 30px;

	a {
		background: #fff;
		box-shadow: 0 1px 1px rgba(29, 56, 70, 0.16);
		border-radius: 5px;
		color: #1d3846;
		font-style: normal;
		font-weight: 500;
		text-transform: capitalize;
		text-align: center;
		line-height: 50px;
		margin: 0 auto;
		display: inline-block;
		font-size: 16px;
		padding: 0 51px;
		width: 220px;

		ion-icon {
			position: relative;
			top: 4.8px;
			margin-right: 13px;
			font-size: 20px;
		}

		span {
			display: inline-block;

			&+span {
				display: none;
			}
		}

		&.active {
			span {
				display: none;

				&+span {
					display: inline-block;
				}
			}
		}

		&:hover {
			background: rgb(76 76 241 / 20%);
		}
	}
}

.docs-single-5-wrap {
	.section5-section-title {
		h6 {
			margin-top: 15px;
		}
	}

	.section5-article {
		.docs-single5-nav-wrap {
			margin: 0 0 15px;

			&:last-child {
				margin: 0 0 0;
			}

			li {
				margin: 0;
			}
		}
	}
}

.ezd-masonry-columns {
	display: flex;
	box-sizing: border-box;
	gap: 25px;

	>* {
		flex: 1;
	}
}

.ezd-mobile-column {
	@media (max-width: 881px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ezd-mobile-column {
	@media (max-width: 540px) {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* ============================================================
   EazyDocs Card Grid skin (docs-7) — BEM: .ezd-docs-card
   ============================================================ */

// Grid wrapper: equal column and row gap by default.
.ezd-card-grid-7 {
	gap: 25px;
}

.ezd-docs-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
	padding: 28px 24px 24px;
	transition: box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;

	// Required for .private indicator absolute positioning (same as .categories_guide_item).
	position: relative;

	&:hover {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	}

	// ── Private / protected indicator — matches other layouts ──
	.private {
		position: absolute;
		right: 12px;
		top: 12px;
		z-index: 2;

		i.icon_lock {
			font-size: 24px;
			color: var(--black_500, #6a737c);
		}

		svg {
			width: 22px;
			height: 22px;
			fill: var(--black_500, #6a737c);
		}
	}

	// ── Header ──────────────────────────────────────
	&__head {
		display: flex;
		align-items: flex-start;
		gap: 14px;
	}

	// ── Icon: comes from doc featured image only ────
	// Rendered only when a featured image exists; no letter fallback.
	&__icon {
		width: 52px;
		height: 52px;
		border-radius: 12px;
		flex-shrink: 0;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	&__info {
		flex: 1;
		min-width: 0;
	}

	&__title {
		font-size: 17px;
		font-weight: 700;
		color: var(--black_800, #242729);
		margin: 0 0 4px;
		line-height: 1.35;

		a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: var(--ezd_brand_color, #0870ff);
			}
		}
	}

	// ── Meta: avg read time only (count shown as ezd-badge) ──
	&__meta {
		margin-top: 4px;
	}

	&__readtime {
		font-size: 12px;
		color: var(--black_400, #848d95);
		line-height: 1.4;
	}

	// ── Separator ───────────────────────────────────
	&__sep {
		border: none;
		border-top: 1px dashed #dde1e7;
		margin: 16px 0;
	}

	// ── Article list ────────────────────────────────
	&__articles {
		padding: 0;
		margin: 0;
		flex: 1;

		li {
			border-bottom: 1px dashed #eef0f4;
			padding: 0;

			&:last-child {
				border-bottom: none;
			}

			a {
				display: flex;
				align-items: center;
				gap: 8px;
				color: var(--p_color, #425466);
				font-size: 14px;
				text-decoration: none !important;
				padding: 8px 0;
				line-height: 1.4;
				transition: color 0.15s ease;

				&::before {
					content: "›";
					font-size: 18px;
					color: var(--black_300, #9fa6ad);
					flex-shrink: 0;
					line-height: 1;
				}

				&:hover {
					color: var(--ezd_brand_color, #0870ff);

					&::before {
						color: var(--ezd_brand_color, #0870ff);
					}
				}
			}
		}
	}

	// ── Browse-all button ───────────────────────────
	// Uses the existing Elegant Icons font-library arrow (arrow_right / arrow_left).
	&__browse {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--ezd_brand_color, #0870ff);
		font-size: 14px;
		font-weight: 600;
		text-decoration: none !important;
		background: none;
		border: none;
		padding: 0;
		margin-top: auto;
		transition: gap 0.15s ease, color 0.15s ease;

		i {
			font-size: 16px;
			line-height: 1;
			transition: transform 0.15s ease;
		}

		&:hover {
			gap: 10px;
			color: var(--ezd_brand_color, #0870ff);

			i {
				transform: translateX(2px);
			}
		}
	}
}

/* ===================================================================
   Restricted doc indicators (private / password-protected)
   Mirrors the [eazydocs] shortcode card design so every doc skin &
   preset reads consistently: a filled card (amber = private,
   dark = password-protected), a straddling corner lock overlay and an
   inline status badge. Keep in sync with the editor copy in
   eazydocs-pro/src/eazy-docs/editor.scss
   =================================================================== */
:root {
	--ezd-doc-private: #b45309;
	--ezd-doc-private-bg: rgba(245, 158, 11, 0.12);
	--ezd-doc-protected: #4f46e5;
	--ezd-doc-protected-bg: rgba(79, 70, 229, 0.3);

	// Filled-card colours — match the shortcode bg-warning / bg-dark.
	// All four are overridable from Settings → Restricted Docs → Card Design.
	--ezd-doc-private-fill: #ffe69c;
	--ezd-doc-protected-fill: #212529;
	--ezd-doc-protected-text: #ffffff;
}

// Filled card + corner lock — shared by every skin (shortcode, docs-1…7).
.ezd-doc-private,
.ezd-doc-protected {
	position: relative; // Anchor the absolutely-positioned corner lock.

	// Corner lock overlay (rendered by ezd_render_doc_indicators()).
	> .private {
		position: absolute;
		right: -4px;
		top: -16px;
		z-index: 2;
		line-height: 1;

		i.icon_lock {
			font-size: 38px;
		}

		svg {
			width: 34px;
			height: 34px;
			display: block;
		}
	}
}

.ezd-doc-private {
	background: var(--ezd-doc-private-fill) !important;

	> .private {
		i.icon_lock {
			color: #7a5c00;
		}

		svg {
			fill: #7a5c00;
		}
	}
}

.ezd-doc-protected {
	background: var(--ezd-doc-protected-fill) !important;

	// Lift every bit of copy for contrast on the dark fill. All text is derived
	// from --ezd-doc-protected-text so a single admin colour stays cohesive.
	.title,
	.ct-heading-text,
	.ezd_item_title,
	.doc_tag_title .title,
	.doc4-section-title h4,
	h4,
	h5,
	h6 {
		color: var(--ezd-doc-protected-text, #fff) !important;
	}

	a,
	p,
	.ezd_item_content,
	.chapter_counter,
	.article_list a,
	.tag_list a,
	.navbar-nav a,
	.section5-article a {
		color: color-mix(in srgb, var(--ezd-doc-protected-text, #fff) 84%, transparent) !important;
	}

	a:hover,
	.article_list a:hover,
	.tag_list a:hover,
	.navbar-nav a:hover {
		color: var(--ezd-doc-protected-text, #fff) !important;
	}

	.ezd-badge {
		background: rgba(255, 255, 255, 0.12);
		color: var(--ezd-doc-protected-text, #fff);
	}

	.line {
		background: rgba(255, 255, 255, 0.18) !important;
	}

	// Buttons: keep them legible against the dark fill.
	.doc_border_btn {
		color: var(--ezd-doc-protected-text, #fff);
		border-color: rgba(255, 255, 255, 0.35);
		background: rgba(255, 255, 255, 0.06);
	}

	.learn_btn,
	.text_btn {
		color: var(--ezd-doc-protected-text, #fff) !important;
	}

	> .private {
		i.icon_lock {
			color: color-mix(in srgb, var(--ezd-doc-protected-text, #fff) 80%, transparent);
		}

		svg {
			fill: color-mix(in srgb, var(--ezd-doc-protected-text, #fff) 80%, transparent);
		}
	}
}

// ── "Outline" style (Settings → Restricted Docs → Card Design) ──
// Drops the solid fill in favour of a thin accent outline, letting the
// theme's normal typography show through. Applied via a <body> class so it
// covers shortcodes, blocks and Elementor widgets at once.
body.ezd-restricted--outline {
	.ezd-doc-private,
	.ezd-doc-protected {
		background: transparent !important;
		outline: 2px solid;
		outline-offset: -2px;
	}

	.ezd-doc-private {
		outline-color: var(--ezd-doc-private);
	}

	.ezd-doc-protected {
		outline-color: var(--ezd-doc-protected);

		// No dark fill any more — return text to the theme defaults.
		.title,
		.ezd_item_title,
		.doc_tag_title .title,
		.doc4-section-title h4,
		h4,
		h5,
		h6,
		a,
		p,
		.ezd_item_content,
		.chapter_counter,
		.article_list a,
		.tag_list a,
		.navbar-nav a,
		.section5-article a,
		.doc_border_btn,
		.learn_btn,
		.text_btn {
			color: inherit !important;
		}
	}
}

// ── Dark mode (Docy `body.body_dark`) ──
// Lives here, not in frontend_dark-mode.scss, because restricted cards render
// on listing surfaces (shortcode / blocks / Elementor home & archive pages)
// where the single-doc dark stylesheet is never enqueued — this widgets sheet
// always is. The bright amber/cream private fill glares against the dark canvas
// and the protected fill disappears into it, so re-skin both as warm/cool dark
// surfaces with a subtle accent ring; the private & protected identity (lock +
// badge) survives while the cards sit naturally in dark mode. Inner copy keeps
// the theme's dark-mode light palette. Skipped for the Outline style, which is
// already transparent.
body.body_dark:not(.ezd-restricted--outline) {
	.ezd-doc-private {
		background: #231d13 !important;
		outline: 1px solid rgba(245, 158, 11, 0.32);
		outline-offset: -1px;

		// Brighten the amber lock & badge so they read on the dark card.
		> .private {
			i.icon_lock {
				color: #f59e0b;
			}

			svg {
				fill: #f59e0b;
			}
		}

		.ezd-doc-flag--private {
			color: #fbbf24;
			background: rgba(245, 158, 11, 0.14);
			border-color: rgba(245, 158, 11, 0.3);
			margin: 0;
		}
	}

	// Protected cards already use a dark fill; lift the surface just above the
	// near-black canvas and add a faint indigo edge so the card stays distinct.
	.ezd-doc-protected {
		background: #1b1c21 !important;
		outline: 1px solid rgba(129, 140, 248, 0.28);
		outline-offset: -1px;

		.ezd-doc-flag--protected {
			color: #a5b4fc;
			background: rgba(129, 140, 248, 0.16);
			border-color: rgba(129, 140, 248, 0.3);
		}
	}
}

// List-style skins (docs-2 tags, docs-3 media) carry no card padding until
// they are filled — give them a comfortable card box and rounded corners so
// the content never sits flush against the coloured edge.
.doc_tag_item,
.documentation_item {
	&.ezd-doc-private,
	&.ezd-doc-protected {
		padding: 30px 28px;
		border-radius: 8px;
	}
}

.ezd-doc-flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	margin: 2px 0 14px;
	padding: 4px 11px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;

	svg {
		width: 12px;
		height: 12px;
		display: block;
		flex-shrink: 0;
	}

	&.ezd-doc-flag--private {
		color: var(--ezd-doc-private);
		background: var(--ezd-doc-private-bg);
		border-color: rgba(180, 83, 9, 0.18);
		margin: 0;
	}

	&.ezd-doc-flag--protected {
		color: #bbb7ff;
		background: var(--ezd-doc-protected-bg);
		border-color: rgba(79, 70, 229, 0.18);
		margin: 0;
	}
}

// Compact inline lock icon for restricted docs in list/title contexts (blocks).
.ezd-doc-lock-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 6px;

	svg {
		width: 13px;
		height: 13px;
		display: block;
	}

	&--private {
		color: var(--ezd-doc-private);
	}

	&--protected {
		color: var(--ezd-doc-protected);
	}
}