/*======================================
= 01. Homepage Layout
======================================*/

.pth-homepage {
    max-width: 1280px;
    margin: 0 auto;
    padding: 15px;
}

.pth-delivery-methods {
    margin-top: 30px;
}

/*======================================
= 03. Delivery Methods
======================================*/

.pth-delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 70px;
}

.pth-delivery-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px;
    background: #fff;
    border: 2px solid #E7ECF3;
    border-radius: 24px;
    cursor: pointer;
    overflow: hidden;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

/*======================================
= Delivery Method Icon
======================================*/

.pth-delivery-icon{
	width:64px;
	height:64px;
	border-radius:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.65);
	backdrop-filter:blur(8px);
	box-shadow:
		0 8px 24px rgba(0,0,0,.08);
	flex-shrink:0;

}

.pth-delivery-icon img{
	width:30px;
	height:30px;

	display:block;
	transition:transform .35s ease;

}

.pth-delivery-card:hover .pth-delivery-icon img{
	transform:scale(1.08);

}

.pth-delivery-card.is-active .pth-delivery-icon{
	background:rgba(255,255,255,.9);
	transform:scale(1.12);
	box-shadow:
		0 12px 28px rgba(0,0,0,.12);

}

.pth-delivery-card .pth-delivery-icon{

	transition:.35s;

}

.pth-delivery-card:hover .pth-delivery-icon{
	transform:translateY(-4px) scale(1.08);

}

.pth-delivery-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.pth-delivery-badge {
    background: var(--pth-accent-light);
    color: var(--pth-accent);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
}

.pth-delivery-body {
    flex: 1;
}

.pth-delivery-body h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #12263F;
}

.pth-delivery-body p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: #5C6C80;
}

.pth-delivery-arrow {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pth-accent-light);
    color: var(--pth-accent);
    font-size: 22px;
    transition: .3s;
}

.pth-delivery-card:hover .pth-delivery-arrow {
    transform: translateX(6px);
    transition:.35s;
}

.pth-delivery-card.is-active .pth-delivery-arrow{
	background:var(--pth-accent);
	color:#fff;

}
.pth-delivery-card:hover{

	transform:
		translateY(-6px);

	box-shadow:
		0 15px 35px rgba(0,0,0,.10);

}

/*======================================
= Active Delivery Card
======================================*/

.pth-delivery-card{

	position:relative;

	overflow:hidden;

	transition:
		transform .45s cubic-bezier(.22,1,.36,1),
		box-shadow .45s ease,
		border-color .45s ease,
		opacity .35s ease;

}

.pth-delivery-card:not(.is-active){

	opacity:.72;

	transform:scale(.96);

}

.pth-delivery-card.is-active{

	transform:
		scale(1.04)
		translateY(-10px);

	border-color:var(--pth-accent);

	box-shadow:
		0 18px 50px rgba(0,0,0,.14);

	opacity:1;

	z-index:5;

}

/*======================================
= 04. Delivery Themes
======================================*/

:root {
    --pth-accent: #10B981;
    --pth-accent-light: #ECFDF5;
}

body.pth-theme-online {
    --pth-accent: #10B981;
    --pth-accent-light: #ECFDF5;
}

body.pth-theme-face-to-face {
    --pth-accent: #7C3AED;
    --pth-accent-light: #F5F3FF;
}

body.pth-theme-blended {
    --pth-accent: #F59E0B;
    --pth-accent-light: #FFF7ED;
}


/*======================================
= Loading Skeleton
======================================*/

.pth-category-skeleton{

	height:240px;

	border-radius:18px;

	background:linear-gradient(
		90deg,
		#f5f7fa 25%,
		#eceff4 37%,
		#f5f7fa 63%
	);

	background-size:400% 100%;

	animation:pthLoading 1.3s infinite;

}

@keyframes pthLoading{

	0%{

		background-position:100% 0;

	}

	100%{

		background-position:-100% 0;

	}

}

/*======================================
= 05. Category Cards
======================================*/

.pth-category-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

	gap:24px;

	margin-top:40px;

}

.pth-category-card{

	display:flex;

	flex-direction:column;

	padding:24px;

	min-height:240px;

	background:#fff;

	border:1px solid #E8EEF5;

	border-radius:18px;

	text-decoration:none;

	transition:.3s ease;

	box-shadow:0 8px 24px rgba(15,23,42,.05);

}

.pth-category-card:hover{
	transform:translateY(-8px);
	border-color:var(--pth-accent);
	box-shadow:
		0 20px 40px rgba(15,23,42,.10),
		0 0 0 4px var(--pth-accent-light);

}

.pth-category-icon{

	width:56px;
	height:56px;

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

	border-radius:16px;

	background:var(--pth-accent-light);

	margin-bottom:18px;

	color:var(--pth-accent);

	box-shadow:0 8px 18px rgba(0,0,0,.06);

	transition:.35s;

}

.pth-category-icon img{

	width:28px;
	height:28px;

	display:block;

}

.pth-category-content{
	display:flex;
	flex-direction:column;
	flex:1;

}

.pth-category-title{
	font-size:24px;
	font-weight:700;
	line-height:1.3;
	color:#102A43;
	transition:.3s;
	margin:0 0 14px;

}

.pth-category-description{
	flex:1;
	margin:0;
	font-size:15px;
	line-height:1.7;
	color:#5B6B7A;
		display:-webkit-box;

	-webkit-line-clamp:3;

	-webkit-box-orient:vertical;

	overflow:hidden;

}

.pth-category-footer{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-top:22px;

	padding-top:18px;

	border-top:1px solid #EEF2F7;

}

.pth-course-count{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 14px;
	border-radius:50px;
	background:var(--pth-accent-light);
	color:var(--pth-accent);
	font-size:14px;
	font-weight:700;

}

.pth-category-arrow{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:15px;
	font-weight:600;
	color:var(--pth-accent);

}

.pth-category-arrow::after{
	content:"→";
	transition:.3s;

}

.pth-category-card:hover .pth-category-arrow{
	transform:translateX(6px);

}

.pth-category-card:hover .pth-category-icon{
	transform:translateY(-4px) scale(1.08);
	box-shadow:
		0 16px 28px rgba(0,0,0,.12);

}

/*======================================
= Empty State
======================================*/

.pth-empty-state{

	padding:80px 40px;

	text-align:center;

	border:2px dashed #E5E7EB;

	border-radius:20px;

	background:#FAFBFC;

}

.pth-empty-icon{

	font-size:54px;

	margin-bottom:20px;

}

.pth-empty-state h3{

	margin:0 0 12px;

	font-size:28px;

	font-weight:700;

	color:#12263F;

}

.pth-empty-state p{

	margin:0;

	font-size:16px;

	color:#64748B;

	line-height:1.7;

}

/*======================================
= Delivery Fold
======================================*/

.pth-delivery-fold{

	position:absolute;

	top:0;

	right:0;

	width:64px;

	height:64px;

	overflow:visible;

	pointer-events:none;

	z-index:30;

}

.pth-delivery-fold svg{

	width:100%;

	height:100%;

	transform:
		translate(100%,-100%)
		rotate(15deg);

	transform-origin:top right;

	transition:
		transform .55s cubic-bezier(.22,1,.36,1);

}

.pth-delivery-card.is-active .pth-delivery-fold svg{

	transform:
		translate(0,0)
		rotate(0deg);

}

.pth-fold-bg{

	fill:var(--pth-accent);

}

.pth-fold-shadow{

	fill:rgba(255,255,255,.25);

}

.pth-fold-check{

	fill:none;

	stroke:#fff;

	stroke-width:4;

	stroke-linecap:round;

	stroke-linejoin:round;

	vector-effect:non-scaling-stroke;

	stroke-dasharray:40;

	stroke-dashoffset:40;

	transition:
		stroke-dashoffset .3s ease .25s;

}

.pth-delivery-card.is-active .pth-fold-check{

	stroke-dashoffset:0;

}

/*======================================
= Load More
======================================*/

.pth-hidden-category{

	display:none;

}

.pth-load-more-wrap{

	margin-top:40px;

	text-align:center;

}

.pth-load-more{

	padding:14px 30px;

	border:none;

	border-radius:999px;

	background:var(--pth-accent);

	color:#fff;

	font-size:15px;

	font-weight:700;

	cursor:pointer;

	transition:.3s;

}

.pth-load-more:hover{

	transform:translateY(-3px);

	box-shadow:0 12px 30px rgba(0,0,0,.15);

}

/*======================================
= 06. Responsive
======================================*/

@media(max-width:1024px) {
    .pth-delivery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:768px) {
    .pth-delivery-grid {
        grid-template-columns: 1fr;
    }
}