/**
 * Home Page Styles
 * 
 * Custom styles for the home page
 * Located in: /assets/home/style.css
 * 
 * @package EduBlink_Child
 */

/* ============================================
   Home Page Styles
   ============================================ */

.home-page-greeting {
	color: red;
}

/* Hero section typography overrides (home page) */
.hero-wrapper .main-title {
    color: #FFF;
    text-align: right;
    font-family: "Graphik Arabic";
    font-size: 59px;
    font-style: normal;
    font-weight: 500;
}

.hero-wrapper .description {
    color: #FFF;
    text-align: right;
    font-family: "Graphik Arabic";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
}

.hero-wrapper .check-text {
    color: #FFF;
    font-family: "Graphik Arabic";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Hero badge overrides (text font family and ensure container styling) */
.hero-wrapper .badge-text {
    font-family: "Graphik Arabic";
    color: var(--primary, #4077F4); /* keep global color */
}

.hero-wrapper .badge {
    /* background / border styles come from global but ensure specificity if needed */
    display: flex;
    padding: 6px 16px;
    align-items: center;
    gap: 4px;
    border-radius: 50000px;
    border: 1px solid #4077F3;
}

/* Blue card title inside hero */
.hero-wrapper .blue-card-content .card-title {
    color: #FFF;
    text-align: right;
    font-family: "Graphik Arabic";
    font-size: 58px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* Certificate section title styling (home page) */
.learnsimply-certificate-title {
    color: #FFF;
    text-align: right;
    font-family: "Graphik Arabic";
    font-size: 56px;
    font-style: normal;
    font-weight: 500;
}


/* ============================================
   Course Info Icons Fix
   ============================================ */

/* Ensure icons display correctly - override if needed */
.learnsimply-featured-courses-section .course-info .info-item:first-child .info-icon,
.learnsimply-featured-courses-section .course-info .info-item.level .info-icon {
	display: none !important;
}

.learnsimply-featured-courses-section .course-info .info-item:first-child::before,
.learnsimply-featured-courses-section .course-info .info-item.level::before {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	margin-bottom: 6px !important;
}

.learnsimply-featured-courses-section .course-info .info-item:first-child::before {
	background-image: url("../img/Inbox Line.png") !important;
}

.learnsimply-featured-courses-section .course-info .info-item.level::before {
	background-image: url("../img/levele.png") !important;
}

/* ============================================
   Book Info Icons Fix
   ============================================ */

/* Replace SVG page icon with PNG image for book cards */
/* Hide SVG icon for pages */
.learnsimply-books-section .book-info .info-item svg.info-icon {
	display: none !important;
}

/* Show PNG icon using ::before pseudo-element on the info-item that contains SVG */
/* Method 1: Target info-item that comes after info-divider (this is the pages item when stock exists) */
.learnsimply-books-section .book-info .info-divider + .info-item::before {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	margin-bottom: 6px !important;
	background-image: url("../img/page.png") !important;
}

/* Method 2: If no divider exists, target the info-item that contains SVG (last child without img) */
/* This handles the case when stock_quantity is not available */
.learnsimply-books-section .book-info .info-item:last-child:not(:has(img.info-icon))::before {
	content: "" !important;
	display: inline-block !important;
	width: 24px !important;
	height: 24px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	margin-bottom: 6px !important;
	background-image: url("../img/page.png") !important;
}

/* ============================================
   Shop Search Box Styles
   ============================================ */

/* Remove all outlines from search elements */
.shop-search-box *,
.shop-search-box *:focus,
.shop-search-box *:active,
.shop-search-box *:focus-visible {
	outline: none !important;
}

.shop-search-box {
	margin-bottom: 40px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.shop-search-form {
	width: 100%;
}

.search-input-wrapper {
	display: flex;
	align-items: center;
	background: rgba(20, 25, 36, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(64, 119, 243, 0.15);
	border-radius: 20px;
	padding: 6px 8px;
	gap: 10px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
				inset 0 1px 0 rgba(255, 255, 255, 0.03);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	outline: none !important;
}

.search-input-wrapper:focus,
.search-input-wrapper:focus-within {
	outline: none !important;
	border-color: rgba(64, 119, 243, 0.5);
	background: rgba(20, 25, 36, 0.8);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
				0 0 0 4px rgba(64, 119, 243, 0.08),
				inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transform: translateY(-2px);
}

.search-icon {
	width: 22px;
	height: 22px;
	color: rgba(64, 119, 243, 0.7);
	margin-right: 12px;
	margin-left: 4px;
	flex-shrink: 0;
	transition: color 0.3s ease;
}

.search-input-wrapper:focus-within .search-icon {
	color: rgba(64, 119, 243, 1);
}

.search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none !important;
	color: #fff;
	font-size: 16px;
	font-family: "Graphik Arabic", sans-serif;
	padding: 14px 8px;
	direction: rtl;
	min-width: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.search-input:focus,
.search-input:active,
.search-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 400;
}

.search-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.4);
	transition: all 0.2s ease;
	flex-shrink: 0;
	cursor: pointer;
}

.search-clear:hover {
	background: rgba(248, 113, 113, 0.15);
	color: #f87171;
	transform: scale(1.05);
}

.search-clear svg {
	width: 16px;
	height: 16px;
}

.search-button {
	background: linear-gradient(135deg, #4077F3, #3461d9);
	color: #fff;
	border: none;
	outline: none !important;
	padding: 14px 32px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	font-family: "Graphik Arabic", sans-serif;
	box-shadow: 0 4px 14px rgba(64, 119, 243, 0.25);
}

.search-button:hover {
	background: linear-gradient(135deg, #5086f5, #4077F3);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(64, 119, 243, 0.4);
}

.search-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(64, 119, 243, 0.3);
}

.search-button:focus {
	outline: none !important;
	box-shadow: 0 4px 14px rgba(64, 119, 243, 0.4),
				0 0 0 4px rgba(64, 119, 243, 0.1);
}

.search-results-info {
	margin-top: 20px;
	text-align: center;
	color: rgba(64, 119, 243, 0.8);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 20px;
	background: rgba(64, 119, 243, 0.08);
	border-radius: 12px;
	border: 1px solid rgba(64, 119, 243, 0.15);
}

/* override learning card heading to white (single course page) */
.learning-card .section-title {
    color: #fff !important;
}

/* ============================================
   Shop Pagination Styles
   ============================================ */

.shop-pagination {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.pagination-container {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, rgba(30, 33, 48, 0.95), rgba(20, 22, 35, 0.98));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pagination-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

.pagination-btn svg {
	width: 16px;
	height: 16px;
}

.pagination-btn:hover:not(.disabled) {
	background: rgba(160, 100, 255, 0.15);
	border-color: rgba(160, 100, 255, 0.3);
	color: #fff;
}

.pagination-btn.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.pagination-numbers {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
}

.pagination-number {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}

.pagination-number:hover:not(.current) {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.pagination-number.current {
	background: linear-gradient(135deg, #a064ff, #8b5cf6);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 15px rgba(160, 100, 255, 0.4);
}

.pagination-ellipsis {
	color: rgba(255, 255, 255, 0.4);
	padding: 0 4px;
	font-size: 14px;
}

.pagination-info {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

/* Responsive Pagination */
@media (max-width: 640px) {
	.pagination-container {
		flex-wrap: wrap;
		justify-content: center;
		padding: 12px;
		gap: 8px;
	}
	
	.pagination-btn span {
		display: none;
	}
	
	.pagination-btn {
		padding: 10px 14px;
	}
	
	.pagination-numbers {
		order: -1;
		width: 100%;
		justify-content: center;
		padding: 0;
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		margin-bottom: 4px;
	}
	
	.pagination-number {
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}
	
	.shop-search-box {
		padding: 0 20px;
		margin-bottom: 32px;
	}
	
	.search-input-wrapper {
		flex-wrap: wrap;
		padding: 8px;
		gap: 8px;
	}

	.search-input {
		font-size: 15px;
		padding: 12px 6px;
		min-width: 200px;
	}
	
	.search-button {
		padding: 12px 24px;
		font-size: 14px;
	}

	.search-icon {
		width: 20px;
		height: 20px;
	}
}