/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Child theme for Hello Elementor
Author: vaserlatigo
Author URI: https://example.com
Template: hello-elementor
Version: 1.0.0
*/

@import url("../hello-elementor/style.css"); /* opsional untuk editor */


/* ================= GLOBAL TWEAKS ================= */
html { -webkit-text-size-adjust: 100%; } /* cegah autoshrink teks iOS */

/* Lock root scroll; #pageScroll yang pegang scroll (anti mantul native) */
html, body{
  height: 100%;
  overflow: hidden;                 /* matikan scroll di root */
}

/* Satu-satunya area scroll seluruh halaman */
#pageScroll{
  height: 100dvh;                   /* stabil saat toolbar mobile naik/turun */
  overflow: auto;
  -webkit-overflow-scrolling: touch;/* momentum iOS */
  overscroll-behavior: contain;     /* cegah bounce ke viewport */
  scrollbar-gutter: stable both-edges;
  touch-action: pan-y;              /* fokus gestur vertikal */
}

/* Card TIDAK punya inner-scroll di semua ukuran */
.order-wrap{
  max-height: none !important;
  overflow: visible !important;
}

/* Padding kiri/kanan ringan di mobile */
@media (max-width: 768px){
  #pageScroll{
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Pastikan wrapper Elementor tidak mengunci anak-anaknya */
.site, .site-content, .elementor, .elementor-location-single{
  overflow: visible !important;
}


/* ================= CUSTOM PULL-TO-REFRESH ================= */
#ptr{
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;                        /* default: tidak terlihat */
  opacity: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: #374151;
  transition: height .2s ease, opacity .2s ease;
  border-bottom: 1px solid #e5e7eb;
}
#ptr .ptr-inner{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
#ptr .ptr-icon{
  display: inline-block;
  transition: transform .15s ease;
}
#ptr .spinner{
  width: 20px; height: 20px;
  border: 2px solid #94a3b8;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ================= SPLASH SCREEN ================= */
#splashScreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* stabil saat toolbar mobile muncul/hilang */
  background: white;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow: hidden;
}
#splashScreen.fade-out {
  opacity: 0;
  pointer-events: none;   /* jangan halangi scroll saat transparan */
}
#splashScreen img {
  width: 280px;
  height: auto;
  display: block;
}


/* ================= LOGO MENU ================= */
.logo-menu-item img {
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.logo-menu-item img:hover { transform: scale(1.05); }


/* ================= SEMBUNYIKAN LOGO KIRI (DEFAULT HELLO ELEMENTOR) ================= */
.site-header .site-branding { display: none !important; }


/* ================= LOGO MARKETPLACE ================= */
.marketplace-logos a img {
  width: 160px; /* ukuran default desktop */
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(20%);
}
.marketplace-logos a:hover img {
  transform: scale(1.08);
  filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}


/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .marketplace-logos {
    display: flex;              /* fix untuk warning */
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .marketplace-logos a img { width: 140px; }
}

/* Sembunyikan PTR di desktop (fallback) */
@media (min-width: 769px){
  #ptr { display: none !important; }
}


/* ========= POSISI LOGO SPLASH DI MOBILE: ANGKAT & GESER KIRI ========= */
:root{
  --splash-shift-x: -2vw;    /* negatif = geser ke kiri */
  --splash-shift-y: -8dvh;   /* turunkan sedikit (lebih kecil absolut = lebih turun) */
}
@supports not (height: 100dvh){
  :root{ --splash-shift-y: -8vh; }
}

@media (max-width: 768px){
  #splashScreen{
    padding:
      env(safe-area-inset-top, 0)
      env(safe-area-inset-right, 0)
      env(safe-area-inset-bottom, 0)
      env(safe-area-inset-left, 0);
  }
  #splashScreen img{
    transform: translate(var(--splash-shift-x), var(--splash-shift-y));
    will-change: transform;
  }
}

/* Perangkat layar pendek (contoh iPhone SE), angkat lebih sedikit */
@media (max-width: 375px) and (max-height: 700px){
  :root{ --splash-shift-y: -5dvh; }
}
@supports not (height: 100dvh){
  @media (max-width: 375px) and (max-height: 700px){
    :root{ --splash-shift-y: -5vh; }
  }
}

/* =========================================================
   FIX: Pastikan tombol qty (+/−) TETAP PUTIH saat ditekan
   (override style global tema yang memberi warna accent merah)
   ========================================================= */
.order-wrap .qty button,
.order-wrap .qty button:hover,
.order-wrap .qty button:focus,
.order-wrap .qty button:active,
.order-wrap .qty button:focus-visible {
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  box-shadow: none !important;
  outline: none;
}
/* Hindari efek tap highlight berwarna di mobile */
.order-wrap .qty button { -webkit-tap-highlight-color: transparent; }