.containermelpa {
   border-radius: 15px 15px 0 0;
   -webkit-border-radius: 15px 15px 0 0;
   -moz-border-radius: 15px 15px 0 0;
   -ms-border-radius: 15px 15px 0 0;
   -o-border-radius: 15px 15px 0 0;
}

.melpazoom {
   transition: transform 0.3s ease;
   transition-duration: 0.2s;
   -webkit-transition: transform 0.3s ease;
   -moz-transition: transform 0.3s ease;
   -ms-transition: transform 0.3s ease;
   -o-transition: transform 0.3s ease;
}

.melpazoom:hover {
   transform: scale(1.02) translateZ(0px);
   transition-duration: 0.2s;
   -webkit-transform: scale(1.02) translateZ(0px);
   -moz-transform: scale(1.02) translateZ(0px);
   -ms-transform: scale(1.02) translateZ(0px);
   -o-transform: scale(1.02) translateZ(0px);
}

.melpazoom:active {
   transform: scale(0.9) translateZ(0px);
   transition-duration: 0.2s;
   -webkit-transform: scale(0.9) translateZ(0px);
   -moz-transform: scale(0.9) translateZ(0px);
   -ms-transform: scale(0.9) translateZ(0px);
   -o-transform: scale(0.9) translateZ(0px);
}

.disabled-message-cover {
   display: none;
   position: absolute;
   -webkit-box-pack: end;
   justify-content: flex-end;
   -webkit-box-align: center;
   align-items: center;
   color: #4f46e5;
   /* abu terang biar kebaca */
   font-weight: 500;
   /* Overlay background */
   background: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.2) 0%,
         /* atas sedikit terang */
         rgba(0, 0, 0, 0.65) 100%
         /* bawah lebih gelap */
      );
   backdrop-filter: blur(2px);
   /* efek frosted optional */
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 2;
   font-size: 10px;
   padding: 8px;
   text-align: right;
   cursor: not-allowed;
   border-radius: .75rem;
   -webkit-border-radius: .75rem;
   -moz-border-radius: .75rem;
   -ms-border-radius: .75rem;
   -o-border-radius: .75rem;
}

/* Badge-style blocks */
.melpaaaaa,
.melpaaaaaa,
.melpaaaaaa3 {
   display: inline-block;
   width: auto;
   padding: 5px 10px;
   margin-bottom: 5px;
   border-radius: 50px;
   background: var(--color-tertiary);
}

/* Tinggi berbeda untuk tiap variasi */
.melpaaaaa {
   height: 35px;
}

.melpaaaaaa {
   height: 90px;
}

.melpaaaaaa3 {
   height: 95px;
}

/* Skeleton Loader container */
.skeleton-loader {
   display: grid;
   gap: 1rem;
}

/* Skeleton Loader items */
.skeleton-loader .ph-item {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin-bottom: -5px;
   border-radius: 15px;
   background: var(--color-tertiary);
}

/* Placeholder item global */
.ph-item {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   padding: 30px 15px 15px;
   margin-bottom: 2px;
   border: 1px solid var(--color-tertiary);
   border-radius: 2px;
   background-color: var(--color-tertiary);
   direction: ltr;
   overflow: hidden;
}

/* Skeleton picture */
.skeleton-loader .ph-picture {
   width: 100%;
   height: 42px;
   border-radius: 4px;
   background: var(--color-tertiary);
}

/* Skeleton text row */
.skeleton-loader .ph-row {
   margin-top: 10px;
}

/* Skeleton text column */
.skeleton-loader .ph-col-12 {
   width: 100%;
   height: 20px;
   margin-bottom: 10px;
   border-radius: 4px;
   background: var(--color-tertiary);
}

.fire-icon {
   font-size: 14px;
   line-height: 1;
   color: #fff;
   position: relative;
   top: -0.5px;
}

.flash-sale-badge {
   background-image: linear-gradient(89.92deg, #ff16aa 0.07%, #5b42ff 99.93%);

}

/* shimmer overlay */
.flash-sale-badge::before {
   content: "";
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(135deg, #fff0 40%, #ffffff55, #fff0 60%);
   background-size: 300%;
   animation: shimmer 2.5s linear infinite alternate;
   mix-blend-mode: overlay;
   pointer-events: none;
}

/* shimmer animation (re-use dari .tag-service) */
@keyframes shimmer {
   0% {
      background-position: 0% 0%;
   }

   100% {
      background-position: 100% 0%;
   }
}


.popular-tag-content .tag-service {
   position: absolute;
   left: 0;
   top: -10px;
   display: flex;
   align-items: center;
   padding: 0px 6px;
   font-size: 13px;
   font-weight: 600;
   line-height: 120%;
   border-radius: 12px 12px 12px 0;
   color: #f6f5fc;
   overflow: hidden;

   /* fallback gradient */
   --tw-gradient-from: #ff16aa;
   --tw-gradient-to: #5b42ff;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

   background-image: linear-gradient(89.92deg, var(--tw-gradient-stops));
}

/* ltr */
.popular-tag-content .tag-service:where([dir="ltr"], [dir="ltr"] *) {
   --tw-gradient-from: #ff16aa var(--tw-gradient-from-position);
   --tw-gradient-to: #5b42ff var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* rtl */
.popular-tag-content .tag-service:where([dir="rtl"], [dir="rtl"] *) {
   --tw-gradient-from: #5b42ff var(--tw-gradient-from-position);
   --tw-gradient-to: #ff16aa var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* shimmer */
.popular-tag-content .tag-service::before {
   content: "";
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(135deg, #fff0 40%, #fff6, #fff0 60%);
   background-size: 300%;
   animation: shimmer 2.5s linear infinite alternate;
   mix-blend-mode: overlay;
   pointer-events: none;
}

@keyframes shimmer {
   0% {
      background-position: 0 0;
   }

   100% {
      background-position: 100% 100%;
   }
}

.payment-icon-container {
   width: 50px;
   min-width: 50px;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
   margin-top: 5px;
}

.payment-icon-container img {
   width: 100%;
   max-height: 20px;
   background-color: #fff;
   border-radius: 5px;
}

.fa-star,
.fa-star-o {
   color: #FFD700;
   cursor: pointer;
   font-size: 24px !important;
   margin-right: 5px;
}

.fa-star-o:hover {
   color: #FFA500;
}

[x-cloak] {
   display: none !important;
}

.load {
   background: rgba(31, 33, 46, .5);
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 10000;
   background-repeat: no-repeat;
   background-size: 40px;
   background-position: center;
   display: none
}

.load.show {
   display: block;
   background-image: url(/assets/image/loading-order.gif)
}

[data-modal-backdrop] {
   background-color: rgba(0, 0, 0, 0.2) !important;
   /* lebih terang */
}

.order-sticky {
   position: sticky;
   bottom: 0;
   z-index: 40;
   box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
   transition: all 0.3s ease-in-out;
}

.order-floating {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

.scale-on-interact {
   transform: scale(1.06);
   -webkit-transform: scale(1.06);
   -moz-transform: scale(1.06);
   -ms-transform: scale(1.06);
   -o-transform: scale(1.06);
}

.break-all {
   word-break: break-all;
   overflow-wrap: break-word;
}

.break-words {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: normal;
}

.swal2-icon.no-border {
   border: none !important;
}