.custom-badge {
    display: inline-block;
    border: none;
    line-height: 1;
    padding: 9.5px 14px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-transform: capitalize;
    color: var(--white-color);
    background-color: var(--title-color);
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}
/*
a.custom-badge:hover {
    color: var(--white-color);
    background-color: var(--theme-color2); 
    text-decoration: none;
    cursor: pointer;
}
*/

.custom-badge[href]:hover {
    color: var(--white-color); /* Warna teks saat hover */
    background-color: var(--theme-color2); /* Warna latar saat hover */
    text-decoration: none; /* Hilangkan garis bawah */
    cursor: pointer; /* Ubah kursor menjadi pointer */
}

.custom-badge:not([href]) {
    pointer-events: none; /* Nonaktifkan hover untuk elemen tanpa href */
    opacity: 0.7; /* Buat elemen terlihat tidak aktif */
}

/*
<a href="donzi-profile.html" class="custom-badge">Donzi Antonio</a>
<span class="custom-badge">John Doe</span>
*/


/* OVERLAY BACKGROUND GRADIENT */
.img-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}
.img-overlay:hover::after {
    opacity: 1;
}

/* OVERLAY CONTENT CENTERED */
.img-overlay .overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}
.img-overlay:hover .overlay-content {
    opacity: 1;
    pointer-events: auto;
}

/* PLAY ICON */
.play-icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 14px;
    transition: color 0.3s ease;
}

/* CTA LINK */
.overlay-text {
    font-size: 1rem;
    background-color: rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-top: 4px;
}
.overlay-text:hover {
    background-color: rgba(255,255,255,0.4);
    color: #fff;
}



/* OVERWRITE STYLE */

.main-menu a {
    font-weight: 500; !important;
    font-size: 15px; !important;
    color: var(--title-color);
    text-transform: uppercase
}

.main-menu a:hover {
    color: var(--theme-color)
}

.main-menu ul.sub-menu a,
.main-menu ul.mega-menu a {
    font-size: 14px; !important;
	font-weight: 500; !important;
    line-height: 30px
}

.main-menu ul.sub-menu {
    padding: 18px 20px;
    left: -27px !important;
}

.main-menu ul.sub-menu li a:before {
    /*content: "\f02d";*/
    content: "" !important;
    position: absolute;
    top: 8px;
    left: 0;
    font-family: var(--icon-font);
    width: 11px;
    height: 11px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    color: var(--theme-color);
    font-weight: 500
}


.category-menu a:before {
    content: "\f07c";
    position: absolute;
    top: 4px;
    left: 0;
    font-family: var(--icon-font);
    width: 11px;
    height: 11px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    color: var(--theme-color);
    font-weight: 400
}

.text-justify {
  text-align: justify;
}
/* Untuk div atau placeholder kotak */
.shimmer-box {
    position: relative;
    overflow: hidden;
    background-color: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: 4px;
    min-height: 120px;
}
img.lazyload.shimmer {
    background-color: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 1.5s linear infinite;
    display: block;
}

img.lazyloaded.shimmer {
    animation: none;
    background: none;
}

img.lazyloaded.shimmer::after {
    content: none;
}
img.lazyload {
    width: 100%;
    height: auto;
    display: block;
}


/* Efek shimmer */
.shimmer {
    position: relative;
    overflow: hidden;
    background-color: #f6f7f8;
    background-image: linear-gradient(
        to right,
        #f6f7f8 0%,
        #edeef1 20%,
        #f6f7f8 40%,
        #f6f7f8 100%
    );
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 1.5s linear infinite;
    border-radius: 4px; /* lebih smooth di sudut */
    min-height: 120px; /* opsional default ukuran shimmer box */
}

/* Keyframe yang lebih lembut */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}


.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
}


/*TAMBAHAN EFEK*/
img.lazyload.blur {
    filter: blur(20px);
    transition: filter 0.5s ease;
}
img.lazyloaded.blur {
    filter: blur(0);
}

/* FIXED IMAGE DIMENSION */
/* ==== DASAR ==== */
.img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==== PROPORSI UMUM ==== */
.img-square { /* 1:1 */
    aspect-ratio: 1 / 1;
}

.img-portrait { /* 3:4 */
    aspect-ratio: 3 / 4;
}

.img-landscape { /* 4:3 */
    aspect-ratio: 4 / 3;
}

.img-wide { /* 16:9 */
    aspect-ratio: 16 / 9;
}

.img-banner { /* 21:9 */
    aspect-ratio: 21 / 9;
}

/* ==== DIMENSI KHUSUS ==== */
.thumb-sm {
    width: 80px;
    height: 80px;
}

.thumb-md {
    width: 150px;
    height: 150px;
}

.thumb-lg {
    width: 250px;
    height: 250px;
}

.img-h-100 {
    height: 100%;
    object-fit: cover;
}

.img-w-100 {
    width: 100%;
    object-fit: cover;
}

/* ==== WRAPPER UNTUK FIXED CONTAINER ==== */
.thumb-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.thumb-wrapper img {
    width: 100%;
	/*
    height: 100%;
	*/
    object-fit: cover;
    display: block;

}

.jadwal-misa ul li span {
	font-family: var(--body-font);
}
.jadwal-misa ul li .badge {
  display: inline-block;
  font-weight: 500; 
  background-color: var(--theme-color2); 
  color: var(--white-color);
  border-radius: 4px;
  font-size: 13px !important;
  padding: 3px;
}
.border-dotted {
  border-bottom: 1px dotted #4a3e5f;
}


/* ALERT + COUNTDOWN */
.custom-alert-box {
	display: flex;
	align-items: flex-start;
	background-color: #fff3cd;
	border-left: 6px solid #ffa000;
	padding: 20px;
	border-radius: 8px;
	margin: 1rem 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	animation: fadeInAlert 1s ease-in-out;
	font-size: 1rem;
	color: #856404;
	position: relative;
}

.custom-alert-box .alert-icon {
	font-size: 40px;
	margin-right: 15px;
	flex-shrink: 0;
	color: #ffa000;
}

@keyframes fadeInAlert {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

.custom-alert-box strong,
.custom-alert-box .text-title {
	font-weight: 600;
	color: #c47f00;
}

.countdown-timer {
	margin-top: 10px;
	font-weight: bold;
	font-size: 0.95rem;
	color: #a46300;
}


@media (max-width: 600px) {
	.custom-alert-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.custom-alert-box .alert-icon {
		margin: 0 0 10px 0;
	}
}