/* ==========================================
   LearnPop Marketplace Layout
========================================== */

.learnpop-marketplace {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.learnpop-main {
    min-width: 0;
}

/* ==========================================
   Sidebar
========================================== */

.learnpop-sidebar {
    position: sticky;
    top: 30px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    box-sizing: border-box;
}

.learnpop-search-wrap label {
    display: block;
    margin-bottom: 7px;
    color: #333333;
    font-size: 14px;
    font-weight: 700;
}

.learnpop-filter-input {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d7dfdf;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 15px;
}

.learnpop-filter-input:focus {
    border-color: #96d1cf;
    outline: 3px solid rgba(150, 209, 207, 0.25);
}

/* ==========================================
   Filter Dropdowns
========================================== */

.learnpop-filter-dropdown {
    position: relative;
    margin-top: 12px;
}

.learnpop-filter-dropdown summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 42px 10px 14px;
    background: #ffffff;
    border: 1px solid #d7dfdf;
    border-radius: 10px;
    box-sizing: border-box;
    color: #333333;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.learnpop-filter-dropdown summary::-webkit-details-marker {
    display: none;
}

.learnpop-filter-dropdown summary:hover {
    background: #f7fbfb;
    border-color: #96d1cf;
}

.learnpop-filter-dropdown[open] summary {
    background: #f7fbfb;
    border-color: #96d1cf;
    box-shadow: 0 0 0 3px rgba(150, 209, 207, 0.18);
}

.learnpop-filter-dropdown summary::after {
    content: "⌄";
    position: absolute;
    top: 50%;
    right: 15px;
    color: #456967;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.learnpop-filter-dropdown[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.learnpop-filter-options {
    max-height: 240px;
    margin-top: 7px;
    padding: 12px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d7dfdf;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(36, 66, 65, 0.1);
}

.learnpop-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 8px 7px;
    border-radius: 7px;
    cursor: pointer;
    line-height: 1.35;
}

.learnpop-checkbox-label:hover {
    background: #f1f8f8;
}

.learnpop-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: #79c4c1;
    flex-shrink: 0;
}

.learnpop-checkbox-label span {
    color: #424242;
    font-size: 14px;
}

/* ==========================================
   Clear Filters Button
========================================== */

.learnpop-clear-button {
    width: 100%;
    margin-top: 18px;
    padding: 11px 14px;
    background: #96d1cf !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-sizing: border-box;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.learnpop-clear-button:hover,
.learnpop-clear-button:focus {
    background: #79c4c1 !important;
    color: #ffffff !important;
}

/* ==========================================
   Results
========================================== */

.learnpop-results-summary {
    margin-bottom: 20px;
    font-weight: 600;
}

.learnpop-no-results {
    display: none;
    padding: 40px 20px;
    color: #666666;
    font-size: 1.1rem;
    text-align: center;
}

/* ==========================================
   Resource Grid
========================================== */

.learnpop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* ==========================================
   Resource Card
========================================== */

.learnpop-resource-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8e8;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(35, 65, 64, 0.07);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.learnpop-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(35, 65, 64, 0.12);
}

/* ==========================================
   Resource Image
========================================== */

.learnpop-image {
    position: relative;
    width: 100%;
    height: 210px;
    padding: 10px;
    overflow: hidden;
    background: #f5f7f7;
    box-sizing: border-box;
}

.learnpop-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.learnpop-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Do not enlarge the image when hovering */
.learnpop-resource-card:hover .learnpop-image img {
    transform: none;
}

/* ==========================================
   Resource Content
========================================== */

.learnpop-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
}

.learnpop-card-top {
    margin-bottom: 2px;
}

.learnpop-title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.learnpop-title a {
    color: #222222;
    text-decoration: none;
}

.learnpop-title a:hover {
    color: #579895;
}

/* ==========================================
   Reviews
========================================== */

.learnpop-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: #707070;
    font-size: 13px;
}

.learnpop-stars {
    color: #d39b20;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1;
}

.learnpop-review-text {
    line-height: 1.3;
}

/* ==========================================
   Resource Badges
========================================== */

.learnpop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
}

.learnpop-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.learnpop-year-badge {
    background: #eaf7f6;
    color: #376f6c;
}

.learnpop-subject-badge {
    background: #f2effa;
    color: #635481;
}

.learnpop-learning-badge {
    background: #fff3df;
    color: #805f2c;
}
.learnpop-resource-type-badge {
    background: #eaf7f6;
    color: #376f6c;
}

/* ==========================================
   Description and Price
========================================== */

.learnpop-description {
    display: -webkit-box;
    flex: 1;
    margin: 16px 0 18px;
    overflow: hidden;
    color: #555555;
    font-size: 15px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.learnpop-card-bottom {
    margin-top: auto;
}

.learnpop-price {
    margin: 0 0 13px;
    color: #222222;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

/* ==========================================
   Resource Card Buttons
========================================== */

.learnpop-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-top: auto;
}

.learnpop-footer > * {
    min-width: 0;
}

.learnpop-view-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: #96d1cf !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-sizing: border-box;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.learnpop-view-button:hover,
.learnpop-view-button:focus {
    background: #79c4c1 !important;
    color: #ffffff !important;
}

.learnpop-purchase-wrap {
    display: flex;
    width: 100%;
    min-width: 0;
}

.learnpop-purchase-wrap .edd_purchase_submit_wrapper {
    width: 100%;
    margin: 0;
}

/*
 * Do not force display:flex here.
 * EDD needs to control when this button is shown or hidden.
 */


/* ==========================================
   Tablet & Mobile
========================================== */

@media screen and (max-width: 1024px) {

    .learnpop-marketplace {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .learnpop-sidebar {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .learnpop-main {
        width: 100% !important;
    }

    .learnpop-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

}
/* ==========================================
   LearnPop custom cart button
========================================== */

.learnpop-purchase-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

/*
 * Keep EDD's real button in the page so its secure
 * JavaScript and cart handling continue to work.
 * It is visually hidden from customers.
 */
.learnpop-native-purchase {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.learnpop-native-purchase .edd_go_to_checkout,
.learnpop-native-purchase .edd-cart-ajax-alert {
    display: none !important;
}

.learnpop-custom-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    background: #96d1cf !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-shadow: none !important;
    cursor: pointer;
}

.learnpop-custom-cart-button:hover,
.learnpop-custom-cart-button:focus {
    background: #79c4c1 !important;
    color: #ffffff !important;
}

.learnpop-custom-cart-button.is-loading {
    cursor: wait;
    opacity: 0.8;
}

.learnpop-custom-cart-button.is-in-cart {
    background: #579895 !important;
    color: #ffffff !important;
    cursor: default;
    opacity: 1;
}

@media (max-width: 620px) {

    .learnpop-custom-cart-button {
        min-height: 46px !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
}
/* ==========================================
   Mobile
========================================== */

@media (max-width: 620px) {

    .learnpop-sidebar {
        padding: 14px;
    }

    .learnpop-grid {
        grid-template-columns: 1fr;
    }

    .learnpop-content {
        padding: 16px;
    }

    .learnpop-title {
        font-size: 18px;
    }

    .learnpop-description {
        margin: 14px 0 16px;
        font-size: 14px;
    }

    .learnpop-price {
        font-size: 21px;
    }

    .learnpop-footer {
        gap: 8px;
    }

    .learnpop-view-button,
    .learnpop-purchase-wrap button.edd-add-to-cart,
    .learnpop-purchase-wrap .edd-cart-added-alert {
        min-height: 46px !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
}
/* Permanent cart confirmation */

.learnpop-cart-status {
    grid-column: 1 / -1;
    margin-top: 9px;
    padding: 8px 10px;
    background: #eaf7f6;
    border-radius: 8px;
    color: #376f6c;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.learnpop-cart-status[hidden] {
    display: none !important;
}
/* ==========================================
   Marketplace tablet and mobile correction
========================================== */

@media screen and (max-width: 1024px) {

    .learnpop-marketplace {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .learnpop-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .learnpop-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .learnpop-results-summary {
        width: 100% !important;
        margin: 0 0 16px !important;
    }

    .learnpop-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media screen and (max-width: 620px) {

    .learnpop-grid {
        grid-template-columns: 1fr !important;
    }

    .learnpop-sidebar {
        padding: 14px !important;
    }

    .learnpop-content {
        padding: 16px !important;
    }

    .learnpop-footer {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}
/* ==========================================
   Marketplace card refinements
========================================== */

.learnpop-title {
    font-size: 23px;
    line-height: 1.25;
}

.learnpop-format-badge {
    background: #edf3fb;
    color: #486381;
}

.learnpop-price.is-free {
    color: #222222;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.learnpop-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 25px;
    color: #788181;
    font-size: 14px;
    text-align: center;
}

.learnpop-view-button,
.learnpop-custom-cart-button {
    min-height: 54px !important;
    padding: 12px 14px !important;
}

@media screen and (max-width: 620px) {

    .learnpop-title {
        font-size: 21px;
    }

    .learnpop-view-button,
    .learnpop-custom-cart-button {
        min-height: 52px !important;
        padding: 11px 9px !important;
        font-size: 13px !important;
    }
}
/* ==========================================
   STUDENT HEADER TITLE
========================================== */

.learnpop-student-header-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-width: 250px;
	padding: 11px 26px;

	background:
		linear-gradient(
			135deg,
			#eaf6f5 0%,
			#dff2f1 55%,
			#eef9f8 100%
		);

	border: 2px solid #96d1cf;
	border-radius: 20px;

	box-shadow:
		0 4px 0 #96d1cf,
		0 8px 18px rgba(47, 56, 56, 0.10);

	color: #2f3838;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.015em;

	white-space: nowrap;

	transform: translateY(-1px);
}

.learnpop-student-header-title::before {
	content: "✦";
	color: #0097cb;
	font-size: 18px;
	transform: rotate(-12deg);
}

.learnpop-student-header-title::after {
	content: "✦";
	color: #0097cb;
	font-size: 18px;
	transform: rotate(12deg);
}
/* ==========================================

   STUDENT HEADER TITLE - MOBILE

========================================== */

@media (max-width: 700px) {

	.learnpop-student-header-title {
		min-width: 0;
		max-width: 170px;
		padding: 6px 10px;
		gap: 6px;
		border-width: 1px;
		border-radius: 13px;
		box-shadow:
			0 2px 0 #96d1cf,
			0 4px 8px rgba(47, 56, 56, 0.08);
		font-size: 14px;
		line-height: 1.1;
		white-space: nowrap;
		transform: none;
	}
	.learnpop-student-header-title::before,
	.learnpop-student-header-title::after {
		font-size: 10px;
	}

}
/* ==========================================
   STUDENT HEADER
========================================== */

.learnpop-student-user
.wp-block-social-links {
	display: none !important;
}
/* ==========================================
   STUDENT FOOTER
========================================== */

.learnpop-student-user
.wp-container-core-group-is-layout-de3cf941 {
	display: none !important;
}
/* ==========================================
   STUDENT NAVIGATION
========================================== */

.learnpop-student-user
.learnpop-header-navigation {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 6px;

	background: #eaf6f5;
	border: 1px solid #d9e8e7;
	border-radius: 14px;
}

.learnpop-student-user
.learnpop-header-navigation a {
	margin: 0;
	padding: 7px 14px;

	border-radius: 9px;

	color: #2f3838;
	font-size: 15px;
	font-weight: 700;

	text-decoration: none;
}

.learnpop-student-user
.learnpop-header-navigation a:hover {
	background: #ffffff;
}