.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent !important;
    transition: box-shadow 0.4s ease;
}

.main-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--brand-primary);
    z-index: -1;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header.is-scrolled::before {
    height: 100%;
}

.main-header.is-scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* BATAS KODE */

.detail-single-container {
	padding-bottom: 50px;
}

/* DETAIL HERO / SLIDER UTAMA */

.detail-single-hero {
	background: var(--brand-primary); 
	position: relative; 
	overflow: hidden
}

.mainSlider {
    height: 300px;
    width: 100%;
    position: relative;
}

.mainSlider .swiper-slide img:not(.detail-single-placeholder img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	image-orientation: from-image;
}

@media (max-width: 480px) {
    .mainSlider {
        height: 100vw;
    }
}

.custom-fraction.swiper-pagination-fraction {
    width: auto !important;
    left: auto !important;
    right: 15px !important;
    bottom: 15px !important;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
}

.detail-single-placeholder {
	width: 100%; 
	height: 100%;
	display: flex; 
	align-items: center; 
	justify-content: center; 
}

.detail-single-placeholder img {
    width: auto; 
    height: auto; 
    max-width: 160px;
    object-fit: contain;
    opacity: 0.2;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}


/* DETAIL BADGE */

.detail-single-badge {
    position: absolute; 
    left: 0; 
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    padding: 0 5px;
    font-size: x-small; 
    color: #fff; 
    letter-spacing: 5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: flex; 
    align-items: center; 
    gap: 10px; 
    writing-mode: vertical-rl;
    z-index: 10;
    white-space: nowrap;
}

.detail-single-badge  .material-icons-outlined {
	font-size: large;
}

/* HARGA UTAMA */

.single-price-full {
	background: #0D9488;
}

.detail-single-price {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	align-items: baseline;
	gap: 5px;
	position: relative;
	padding: 15px;
	color: #fff;
}

.detail-single-price .price-label {
	font-size: small;
}

.detail-single-price .price-value {
	font-size: large;
	font-weight: bold;
}

.detail-single-price .material-icons-outlined {
	position: absolute;
	right: 15px;
	font-size: xx-large;
	color: #36BBA7;
}

/* DETAIL PROMO REGULER */

.promo-banner-reguler {
	background: #1e73be; 
	position: relative; 
}

.promo-reguler-left {
	display: flex; 
	align-items: center; 
	gap: 15px;
}

.promo-reguler-persen span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	height: 50px;
	background: rgba(255,255,255,0.2); 
	color: #fff; 
	padding: 0 10px; 
	border-radius: 8px; 
	border: 1px solid rgba(255,255,255,0.4);
	font-size: large; 
	font-weight: bold;
	line-height: 1;
}

.promo-reguler-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #fff;
}

.promo-reguler-title h4 {
	font-size: large; 
	text-transform: capitalize; 
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-reguler-title p {
	text-transform: capitalize;
	font-size: small;
	line-height: 1.3; 
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-reguler-right .material-icons-outlined {
	color: #fff; 
	opacity: 0.5; 
	font-size: xx-large;
	vertical-align: middle;
}

/* DETAIL PROMO FLASH SALE */

.promo-banner-flashsale {
	background: linear-gradient(45deg, #cc0000 0%, #FF0000 100%);
	width: 100vw; 
	position: relative; 
	left: 50%; 
	right: 50%; 
	margin-left: -50vw; 
	margin-right: -50vw; 
}

.promo-banner-content {
	max-width: 600px; 
	margin: 0 auto; 
	padding: 10px 15px; 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 10px;
	line-height: 1;
}

.promo-flashsale-left {
	display: flex; 
	align-items: center; 
	gap: 15px;
}

.promo-flashsale-persen span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 60px;
	height: 50px;
	background: #fff; 
	color: #d63638; 
	padding: 0 10px; 
	border-radius: 8px; 
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	font-size: large;
	font-weight: bold;
	line-height: 1;
}

.promo-flashsale-title {
	display: flex;
	flex-direction: column;
	gap: 5px;
	color: #fff;
}

.promo-flashsale-title h4 {
	margin: 0; 
	font-size: x-large; 
	text-transform: capitalize; 
}

.promo-flashsale-title p {
	text-transform: capitalize;
	font-size: small;
	line-height: 1.3; 
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-flashsale-right {
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: center; 
	color: #fff;
}

.promo-flashsale-right small {
	display: block; 
	font-size: x-small; 
	font-weight: bold; 
	text-transform: uppercase; 
}

.promo-flashsale-right #fs-timer {
	font-size: large; 
	font-weight: bold;
	letter-spacing: 1px;
}

/* DETAIL BODY */

.detail-single-body {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 600px; 
	margin: 0 auto; 
	padding: 25px 15px;
}

.detail-single-header {
	display: flex;
	flex-direction: column;
}

/* ---------- JAM BUKA ---------- */

.status-operasional-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: small;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.status-operasional-badge.is-buka {
    color: #2AA63E;
}

.status-operasional-badge.is-tutup {
    color: #E7180B;
}


/* ---------- JUDUL ---------- */

.detail-single-header h1 {
	font-size: large; 
	line-height: 1.3;
}

.detail-single-meta-wrapper {
	display: flex; 
	align-items: center; 
	flex-wrap: wrap; 
	position: relative;
	gap: 5px; 
	padding: 15px 0;
	border-bottom: 1px solid #eee;
	line-height: 1;
}

.detail-single-author {
	display: flex; 
	align-items: center; 
	gap: 5px; 
	padding: 5px 10px; 
	border-radius: 6px;
	background: #DFF2FE;
	border: 1px solid #BEDBFF;
	font-size: small;
	text-transform: capitalize;
	font-weight: bold;
	color: #10598A;
}

.detail-single-author .material-icons-outlined {
	font-size: large;
}

.detail-single-rating-badge {
	text-decoration: none; 
	display: flex; 
	align-items: center; 
	gap: 5px; 
	background: #FEFCE8; 
	padding: 5px 10px; 
	border-radius: 6px; 
	border: 1px solid #FFF085;
}

.detail-single-rating-badge .material-icons-outlined {
	color: #fbbf24; 
	font-size: large;
}

.detail-single-rating-badge .detail-single-rating-avg {
	font-size: small; 
	color: #92400e;
}

.detail-single-rating-badge .detail-single-rating-count {
	color: #b45309; 
	font-size: x-small;
}

/* DETAIL LOKASI */

.detail-single-location {
	display: flex; 
	align-items: center; 
	gap: 10px; 
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

.detail-single-location .detail-single-location-text {
	font-size: small; 
	line-height: 1.3;
}

/* TOMBOL SHARE */

.btn-share-native {
	display: flex;
	align-items: center;
	gap: 5px;
	position: absolute;
	right: 0;
	font-size: small;
	background: none;
	padding: 5px 10px;
	border: 1px solid #eee;
	border-radius: 6px;
	cursor: pointer;
}

.btn-share-native .material-icons-outlined {
	font-size: large;
}

/* BADGE COD BAYAR DI TEMPAT */

.badge-cod {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: small;
	color: #b8860b;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

/* ONGKIR */

.ongkir-info {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	font-size: small;
}

/* DETAIL DESKRIPSI */

.detail-single-description h3 {
	font-size: small; 
	display: flex; 
	align-items: center; 
	gap: 10px; 
	line-height: 1;
}

.detail-single-content {
	max-height: 120px;
	overflow: hidden;
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	padding-left: 34px;
	line-height: 1.5; 
	font-size: 15px;
}

.detail-single-content p {
	margin: revert;
}

.desc-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px; 
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.5) 40%, 
        rgba(255, 255, 255, 0.8) 70%, 
        rgba(255, 255, 255, 1) 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.btn-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 10px 0;
    background: #fff;
    border: none;
    color: #999;
    font-size: small;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

/* State saat terbuka */
.detail-single-content.is-open {
    max-height: 2000px;
}

/* Putar icon saat terbuka */
.detail-single-content.is-open + .desc-overlay + .btn-read-more span.material-icons-outlined {
    transform: rotate(180deg);
}

/* DETAIL MAPS / PETA */

.detail-single-map h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: initial; 
	margin-bottom: 12px;
}

.detail-single-map-iframe {
	width: 100%; 
	height: 200px; 
	border-radius: 10px;
	overflow: hidden; 
}

/* DETAIL REVIEW */

.detail-single-reviews-section h3 {
	font-size: initial; 
	margin-bottom: 20px; 
}

.detail-single-review-item {
	padding-bottom: 15px; 
	margin-bottom: 15px; 
	border-bottom: 1px solid #f1f5f9; 
}

.detail-single-review-item:last-child {
	border-bottom: none; 
}

.detail-single-review-header {
	display: flex; 
	justify-content: space-between; 
	align-items: center;
	line-height: 1;
}

.detail-single-review-author {
	display: flex; 
	align-items: center; 
	gap: 10px;
}

.detail-single-review-avatar {
	width: 32px; 
	height: 32px; 
	border-radius: 50%; 
	overflow: hidden; 
	background: #eee; 
	border: 1px solid #e2e8f0;
}

.detail-single-review-meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.detail-single-review-name {
	text-transform: capitalize;
	display: block; 
	font-size: small; 
	font-weight: bold;
}

.detail-single-review-date {
	color: #999; 
	font-size: x-small;
}

.detail-single-review-stars {
	color: #fbbf24; 
	display: flex; 
	gap: 2px;
}

.detail-single-review-stars .material-icons-outlined {
	font-size: small;
}

.detail-single-review-text {
	margin: 10px 0 0; 
	padding-left: 40px;
	font-size: 14px; 
	color: #475569; 
	line-height: 1.5;
}

.detail-single-review-empty {
	text-align: center; 
	padding: 30px; 
	background: #f8fafc; 
	border-radius: 15px; 
	border: 2px dashed #e2e8f0;
}

.detail-single-review-empty .material-icons-outlined {
	font-size: 40px;
	color: #cbd5e1;
}

.detail-single-review-empty p {
	color: #94a3b8; 
	font-size: 14px; 
	margin-top: 10px;
}

/* BATAS KODE */

.detail-single-review-form-card {
	margin-top: 25px; 
	background: #f1f5f9; 
	padding: 20px; 
	border-radius: 15px;
}

.detail-single-review-form-card-notice {
	text-align: center; 
	padding: 25px; 
	background: #ffffff; 
	border: 2px solid #e2e8f0; 
	border-radius: 15px; 
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.detail-single-review-form-card-notice .material-icons-outlined {
	font-size: 35px; 
	color: #1e73be; 
	margin-bottom: 12px;
}

.detail-single-review-form-card-notice p {
	font-size: small; 
	color: #334155; 
	line-height: 1.6; 
	margin: 0 auto;
}

/* BATAS KODE */

.detail-single-review-form-card-msg {
	text-align: center; 
	padding: 20px; 
	background: #ecfdf5; 
	border: 1px solid #10b981; 
	border-radius: 12px;
}

.detail-single-review-form-card-msg .material-icons-outlined {
	color: #059669; 
	font-size: 30px;
}

.detail-single-review-form-card-msg p {
	margin: 5px 0 0; 
	font-size: 14px; 
	color: #065f46; 
	font-weight: 600;
}

/* BATAS KODE */

.detail-single-review-form-card-title {
	margin: 0 0 15px; 
	font-size: 15px; 
	color: #1e293b; 
	font-weight: bold;
}

.detail-single-review-form-card-log {
	text-align: center; 
	padding: 10px;
}

.detail-single-review-form-card-log .material-icons-outlined {
	font-size: 30px; 
	color: #94a3b8; 
	margin-bottom: 10px;
}

.detail-single-review-form-card-log p {
	font-size: 14px; 
	color: #475569; 
	margin-bottom: 15px;
}
.detail-single-review-form-card-log a {
	display: inline-block; 
	background: #1e73be; 
	color: white; 
	padding: 12px 25px; 
	border-radius: 10px; 
	text-decoration: none; 
	font-size: 14px; 
	font-weight: bold; 
	width: 100%;
}

/* ---------- 1. STICKY FOOTER (AREA BAWAH) ---------- */
.detail-single-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    padding: 10px 15px;
    z-index: 10000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.btn-wa-glidik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: small;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-wa-glidik.owner-mode {
	background: #1e73be;
}

.btn-wa-glidik:active {
    transform: scale(0.97);
}

.wa-btn-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-text-main {
    letter-spacing: 0.2px;
}

/* RELATED */

.related-pekerja-section {
	max-width: 1200px;
	margin: 0 auto 100px;
	padding: 0 10px;
}

h3.title-related {
	font-size: initial;
	text-transform: capitalize;
	margin-bottom: 15px;
}