/* Biar grid rapi */
.shop-product-wrap .product .image-action .image{
  display:block;
  width:100%;
  aspect-ratio: 1 / 1;     /* kotak; bisa ganti 4/5 atau 3/4 */
  overflow:hidden;
  position:relative;
  background:#f3f3f3;
}

/* thumbnail dipaksa memenuhi kotak */
.shop-product-wrap .product .image-action .image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;         /* ini kuncinya */
  object-position:center;
}

/* CTA utama produk */
/* ===== PRIMARY CTA: ADD TO CART (BLUE) ===== */
.action-cart-cta{
  background:#0071E3;
  border-color:#0A66C2;
  box-shadow:0 6px 18px rgba(10,102,194,.25);

  font-size:14px;          /* <<< DIPERKECIL */
  font-weight:700;
  letter-spacing:.1px;

  padding:10px 18px;       /* <<< DIPIPIH */
  border-radius:10px;      /* <<< NGGAK BALON */

  box-shadow:none;         /* <<< HILANGIN SHADOW BESAR */
  transition:background .15s ease, transform .1s ease;
}

.action-cart-cta:hover{
  background:#005FCC;           /* blue-700 */
  border-color:#1D4ED8;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,99,235,.35);
}

.action-cart-cta:active{
  background:#1E40AF;           /* blue-800 */
  border-color:#1E40AF;
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}




/* Pricing */

.price-box{ margin-top:10px; }

.price-main{
  display:flex;
  align-items:flex-end;
  gap:6px;
  line-height:1;
}

.price-currency{
  font-size:16px;
  font-weight:700;
  opacity:.7;
  transform: translateY(-4px);
}

.price-amount{
  font-size:34px;     /* besar tapi nggak norak */
  font-weight:800;
  letter-spacing:-0.02em;
}

.price-badge{
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  margin-left:8px;
  transform: translateY(-6px);
}

.price-sub{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.price-old{
  font-size:14px;
  opacity:.55;
  text-decoration: line-through;
}

.price-save{
  font-size:13px;
  font-weight:700;
  padding:4px 8px;
  border-radius:8px;
  background: rgba(16,185,129,.12); /* hijau soft */
  color:#0f766e;
}

.stock-status{
  margin-top:8px;
  display:inline-flex;
  align-items:center;

  padding:4px 10px;      /* <<< DIPERKURUS */
  border-radius:999px;

  background:#FEF3C7;
  color:#92400E;

  font-size:12px;        /* <<< LEBIH KECIL */
  font-weight:600;
  line-height:1.2;
}



.price-sep{
  margin:16px 0 20px;
  margin-top:15px;
  height:1px;
  width:100%;
  background:#e5e7eb;   /* abu halus */
  border-radius:0;
  background:#f1f5f9;
}


/* tombol modal: kotak & proporsional */
/* Base tombol */
.action-cart-btn{
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Secondary: Lihat keranjang */
.action-cart-btn.btn-secondary{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.action-cart-btn.btn-secondary:hover{
  background: #f3f4f6;
}


/* Primary: Checkout (calm green) */
.action-checkout{
  background:#0071E3;
  border-color:#0A66C2;
  box-shadow:0 6px 18px rgba(10,102,194,.25);
}

.action-checkout:hover{
  background:#005FCC;           /* blue-700 */
  border-color:#1D4ED8;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,99,235,.35);
}

.action-checkout:active{
  background: #153380;
}

/* Primary: Checkout (calm green) */
.canvas-checkout-btn{
  background:#0A66C2;
  border-color:#0A66C2;
  box-shadow:0 6px 18px rgba(10,102,194,.25);
}

.canvas-checkout-btn:hover{
  background:#1D4ED8;           /* blue-700 */
  border-color:#1D4ED8;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,99,235,.35);
}

.canvas-checkout-btn:active{
  background: #153380;
}


/* ===== CHECKOUT PAY BUTTON (CLEAN & COMPACT) ===== */
.place-order-btn{
  width:100%;
  max-width:480px;     /* <<< INI KUNCI */
  margin:0 auto;       /* center */

  font-size:14px;          /* lebih kecil */
  font-weight:700;
  letter-spacing:.2px;

  padding:10px 16px;       /* <<< INI KUNCI: bikin pendek */
  border-radius:12px;      /* masih halus tapi nggak balon */

  background:#0071E3;      /* biru konsisten */
  border-color:#2563EB;
  color:#fff;

  box-shadow:none;         /* hilangin shadow gede */
  transition:background .15s ease;
}

/* Hover */
.place-order-btn:hover:not(:disabled){
  background:#005FCC;
  border-color:#1D4ED8;
}

/* Disabled state (penting!) */
.place-order-btn:disabled{
  background:#E5E7EB;
  border-color:#E5E7EB;
  color:#9CA3AF;
  cursor:not-allowed;
}


.stock-hint{
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}


.margin-top-15{
  margin-top: 15px;
}

.margin-top-35{
  margin-top: 35px;
}

/* Biar tombol disabled gak "hilang" */
#btnPay:disabled{
  opacity: 1 !important;
  background: #e5e7eb !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
}

.order-status-alert {
  display:flex; gap:14px;
  padding:18px 20px;
  border-radius:10px;
  margin-bottom:20px;
  align-items:center;
  font-size:15px;
}
.order-status-alert .icon{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;
}
.order-status-alert strong{ font-size:17px; }
.order-status-alert span{ display:block;margin-top:4px;opacity:.9; }

.alert-success{ background:#e9f8ef;border:1px solid #b9ebcc;color:#1e7e34; }
.alert-success .icon{ background:#1e7e34;color:#fff; }

.alert-warning{ background:#fff7e6;border:1px solid #ffe0a3;color:#8a6d1d; }
.alert-warning .icon{ background:#f0ad4e;color:#fff; }

.alert-danger{ background:#fdecea;border:1px solid #f5c2c7;color:#842029; }
.alert-danger .icon{ background:#dc3545;color:#fff; }


 .cart-summary-button .btn{
    display:inline-block;
    padding: 12px 30px;
    line-height: 1.4;
  }
  .cart-summary-button button.btn{
    border: none;
  }

.remember-wrap{
  margin: 10px 0 18px;
}

.remember-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.remember-label input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #111; /* modern browser */
}

.remember-text{
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.remember-wrap label,
.remember-wrap span{
  text-transform: none !important;
}

/* Logout khusus */
.myaccount-tab-menu .logout-link{
  color: #b42318;              /* merah lembut */
  background: #fff5f5;         /* pink sangat soft */
  border-left: 4px solid transparent;
  font-weight: 600;
}

.myaccount-tab-menu .logout-link i{
  color: #b42318;
}

/* hover */
.myaccount-tab-menu .logout-link:hover{
  background: #fee4e2;         /* sedikit lebih kuat */
  color: #7a271a;
  border-left-color: #b42318;
}

/* active state (kalau suatu saat kepake) */
.myaccount-tab-menu .logout-link.active{
  background: #fda29b;
  color: #7a271a;
}


.margin-top-min-50{
  margin-top: -50px;
}

/* --- reset khusus checkbox default alamat --- */
.addr-default .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.addr-default__input {
  /* paksa balik jadi checkbox normal */
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 1px solid #cfd6df !important;
  border-radius: 3px !important;

  display: inline-block !important;
  position: static !important;

  box-shadow: none !important;
}

.addr-default__input:checked {
  background: initial !important;
}

.addr-default__label {
  margin: 0 !important;
  cursor: pointer;
}


.addr-default-badge{
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1e60d4;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 10px;
}

/* Search input text (yang diketik user) */
.widget-search input[type="search"] {
  color: #111 !important;   /* hitam tegas */
  font-weight: 500;
}

/* Placeholder tetap lebih soft */
.widget-search input[type="search"]::placeholder {
  color: #aaa;
  font-weight: 400;
}

/* Saat focus, lebih jelas */
.widget-search input[type="search"]:focus {
  color: #000;
  border-color: #000;
}


/* paksa checkbox gak ikut gaya input text template */
.form-check-input[type="checkbox"]{
  width: 1em !important;
  height: 1em !important;
  border-radius: .25em !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.form-check-input[type="checkbox"]:focus{
  box-shadow: none !important;
}

.form-check{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.offcanvas-cart-item .cart-item-remove{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.offcanvas-cart-item .cart-item-remove i{
  pointer-events: none;
}

.offcanvas-cart-item{
  position: relative;
}
.offcanvas-cart-item .cart-item-remove{
  position: absolute;
  top: 10px;
  right: 10px;
}

.main-menu .sub-menu li a.apple-brand,
.main-menu .sub-menu li a {
  text-transform: none !important;
}

/* Related products - thumbnail konsisten */
.related-thumb{
  display:block;
  width:100%;
  height:220px;          /* atur tinggi thumbnail */
  overflow:hidden;
  border-radius:10px;    /* opsional */
  background:#f3f4f6;    /* placeholder */
}

.related-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;       /* crop rapi, tidak gepeng */
  object-position:center;
}

@media (max-width: 991.98px) {
  .widget-products {
    display: none !important;
  }
}

/* Thumbnail kanan: seragam */
.sp-thumbs-right{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sp-thumb-item{
  width:110px;       /* lebar thumbnail */
  height:90px;       /* tinggi thumbnail */
  overflow:hidden;
  border-radius:10px;
  background:#f3f4f6;
}

.sp-thumb-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;        /* crop rapi, ukuran sama semua */
  object-position:center;
}

/* ===== MAIN PRODUCT IMAGE ===== */

.single-product-image{
  width:100%;
  background:#f3f4f6;
  border-radius:12px;
  overflow:hidden;

  /* PENTING: biarin tinggi ngikut gambar */
  display:block;
}

.single-product-image img#mainProductImage{
  width:100%;
  height:auto;            /* KUNCI UTAMA */
  display:block;

  object-fit:unset;      /* JANGAN contain / cover */
  max-width:100%;

  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}



/* ===== TITLE & PRICE ===== */

/* ===== Title & price tokped-ish ===== */
.price-main,
.price-currency,
.price-amount{
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.price-main{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.price-currency{
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:#111;
  opacity:.7;
}

.price-amount{
  font-size:34px;
  font-weight:900;
  line-height:1.05;           /* ini yang bikin nggak “gembrot” */
  letter-spacing:-0.6px;      /* biar angka rapet kayak Tokped */
  color:#111;
}

.price-main{
  margin-top: 15px;
}

/* HOMEPAGE */

.banner-overlay {
  position: relative;
  overflow: hidden;
}

.banner-overlay img {
  width: 100%;
  display: block;
}

.banner-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

.banner-overlay a {
  display: block;
  position: relative;
}

/* === CENTER ABSOLUTE === */
.banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal */
  text-align: center;
  z-index: 2;
}

.banner-text h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

/* product page title */
.single-product-content .product-title{
  font-size: 28px;        /* samakan dengan ukuran h2 kamu sebelumnya */
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 12px 0;
}

/* H2 section (Description, dll) */
.single-product-content .section-title{
  font-size: 20px;        /* kecil & rapi */
  line-height: 1.4;
  font-weight: 600;
  margin: 24px 0 8px;
}



/* ====== CONSISTENT IMAGE FRAME FOR PRODUCT MASONRY ====== */
.masonry-wrap .product-2 .image-action .image{
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

/* item kecil (col-lg-3): kotak */
.masonry-wrap .masonry-item.col-lg-3 .product-2 .image-action .image{
  aspect-ratio: 1 / 1;
}

/* item besar (col-lg-6): landscape */
.masonry-wrap .masonry-item.col-lg-6 .product-2 .image-action .image{
  aspect-ratio: 16 / 9;   /* kalau mau lebih “tinggi”, ganti 4/3 */
}

/* gambar selalu ngisi frame */
.masonry-wrap .product-2 .image-action .image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* FRAME */
.masonry-wrap .product-2 .image-action .image.img-frame{
  position: relative;
  display: block;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

/* ukuran frame konsisten */
.masonry-wrap .masonry-item.col-lg-3 .product-2 .image-action .image.img-frame{
  aspect-ratio: 1 / 1;     /* kecil: kotak */
}
.masonry-wrap .masonry-item.col-lg-6 .product-2 .image-action .image.img-frame{
  aspect-ratio: 16 / 9;    /* besar: landscape */
}

/* background blur (mengisi frame) */
.masonry-wrap .product-2 .image-action .image.img-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.12);
  opacity: .25;
}

/* gambar utama: tampil utuh (tidak kepotong) */
.masonry-wrap .product-2 .image-action .image.img-frame img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* ini kuncinya: tidak kepotong */
  object-position: center;
}



.product-2 .image-action.image-with-title{
  position: relative !important;
  overflow: hidden;           /* biar title ga keluar radius */
  border-radius: 12px;        /* samakan dengan card kamu */
}

.product-2 .image-action.image-with-title .image-title{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 3;
}

.product-2 .image-action.image-with-title .image-title h3{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:12px; /* ganti margin-left */
  flex-wrap:wrap; /* aman kalau layar kecil */
}

/* ============ FIX: produk terbaru biar rapi ============ */

/* 1) Kunci kontainer gambar (bukan hanya img) */
.product-2 .image-action.image-with-title{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #f3f4f6;
}

/* 2) Paksa link gambar full, hilangkan padding/margin bawaan template */
.product-2 .image-action.image-with-title a.image{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 3) Tinggi frame: besar vs kecil (set di CONTAINER image-action) */
.masonry-item.col-lg-6 .product-2 .image-action.image-with-title{
  height: 360px !important;
}
.masonry-item.col-lg-3 .product-2 .image-action.image-with-title{
  height: 240px !important;
}

/* 4) Paksa img ngisi frame */
.product-2 .image-action.image-with-title a.image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* 5) Title overlay biar full bawah & rapi */
.product-2 .image-action.image-with-title .image-title{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 2;
}
.product-2 .image-action.image-with-title .image-title h3{
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* 6) Label & wishlist biar gak ikut kegeser */
.product-2 .image-action.image-with-title .labels,
.product-2 .image-action.image-with-title .wishlist-btn{
  z-index: 3;
}

/* Wrapper banner */
.banner{
  position: relative;
  overflow: hidden;
  border-radius: 24px; /* samain sama aesthetic kamu */
}

/* edge shadow super tipis */
.banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  box-shadow:
          inset 0 0 0 1px rgba(0,0,0,0.03),
          inset 0 0 24px rgba(0,0,0,0.04);

  border-radius: inherit;
}

.banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
          linear-gradient(to bottom, rgba(0,0,0,0.04), rgba(0,0,0,0) 20%),
          linear-gradient(to top, rgba(0,0,0,0.04), rgba(0,0,0,0) 20%),
          linear-gradient(to right, rgba(0,0,0,0.04), rgba(0,0,0,0) 20%),
          linear-gradient(to left, rgba(0,0,0,0.04), rgba(0,0,0,0) 20%);

  border-radius: inherit;
}

.margin-bottom-30 {
  margin-bottom: 30px;
}

.margin-bottom-100 {
  margin-bottom: 100px;
}


.subscribe-section{
  position: relative;
  overflow: hidden;
}

/* layer wash-out halus */
.subscribe-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  /* putih halus, sama kayak hero */
  background: rgba(255,255,255,0.75);
}

/* pastikan konten tetap di atas */
.subscribe-section .subscribe-content{
  position: relative;
  z-index:2;
}

.subscribe-section{
  background-position: 40% center !important;
  background-size: cover !important;
}




/* HERO SLIDER TEKS BIAR GAK NABRAK GAMBAR*/
@media (max-width: 980px){
  .hero-item{
    position: relative;
    overflow: hidden;
  }

  /* bikin area kiri (tempat teks) lebih terang halus */
  .hero-item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(90deg,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.45) 100%,
    rgba(255,255,255,0) 75%
    );
    pointer-events:none;
  }

  .hero-content{ position:relative; z-index:2; }

  /* geser fokus gambar biar objek gak “nabrak” teks */
  .hero-item{
    background-position: 75% center !important;
    background-size: cover !important;
  }

}

@media (max-width: 576px){
  .hide-mobile{ display:none !important; }
}


/* Wajib: parent punya konteks posisi */
.product .image-action{
  position: relative;
}

/* Tombol overlay di atas gambar */
.product .image-action .action{
  position: absolute;
  z-index: 20;
  pointer-events: auto;
}

/* Link gambar jangan lebih tinggi dari tombol */
.product .image-action > a.image{
  position: relative;
  z-index: 5;
}

/* Pastikan tiap tombol bisa diklik */
.product .image-action .action a{
  position: relative;
  z-index: 25;
  pointer-events: auto;
}

/* Kalau theme bikin overlay hover pakai ::before/::after, jangan nangkep tap */
.product .image-action::before,
.product .image-action::after,
.product .image-action .image::before,
.product .image-action .image::after{
  pointer-events: none;
}

.product .image-action .action::before,
.product .image-action .action::after{
  pointer-events: none;
}

/* resend verification text-link */
.resend-verify-text{
  font-size: 13px;
  color: #6b7280; /* abu-abu lembut */
}

.resend-verify-text .resend-link{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #2563eb; /* biru link */
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.resend-verify-text .resend-link:hover{
  color: #1d4ed8;
}



/* MOBILE CART */

/* Biar konten gak ketutup bottom bar */
.cart-page { padding-bottom: 96px; }

/* Mobile cart card */
.cart-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px;
  background:#fff;
  display:flex;
  gap:12px;
  margin-bottom:12px;
}
.cart-thumb{
  width:72px;height:72px;border-radius:12px;overflow:hidden;flex:0 0 72px;
  background:#f6f6f6;
}
.cart-thumb img{ width:100%;height:100%;object-fit:cover;display:block; }
.cart-meta{ flex:1; min-width:0; }
.cart-title{
  font-weight:700; line-height:1.2; margin:0 0 6px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cart-sub{ font-size:13px; color:#6c757d; margin:0; }
.cart-price{ font-weight:800; margin-top:6px; }
.cart-actions{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between;
  gap:8px; flex:0 0 auto;
}
.cart-pill{
  font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f3f5; color:#495057;
  white-space:nowrap;
}
.cart-remove{
  width:34px;height:34px;border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.08); color:#dc3545;
}

/* Bottom checkout bar */
.checkout-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040; /* di atas footer */
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
}

.checkout-bar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.checkout-total small{ display:block; color:#6c757d; line-height:1; }
.checkout-total strong{ font-size:18px; }
.checkout-btn{
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  min-width:150px;
}

/* Desktop: bottom bar boleh disembunyikan kalau kamu mau */
@media (min-width: 992px){
  .checkout-bar { display:none; }
  .cart-page { padding-bottom: 0; }
}

/* Inactive look */
.cart-card.inactive{ opacity:.55; }
.cart-card.inactive .cart-thumb img{ filter:grayscale(100%); }

/* tinggi kira-kira floating bar */
:root { --checkout-bar-h: 88px; }

body.has-checkout-bar {
  padding-bottom: var(--checkout-bar-h);
}

/* optional: supaya footer nggak ketutup kalau ada layout aneh */
body.has-checkout-bar footer {
  padding-bottom: 0; /* biarin body yg ngasih space */
}

/* default: desktop = tidak floating */
.checkout-floatbar { display: none; }

/* tombol di card summary (desktop) ya biasa aja */
.cart-summary-button .btn { width: 100%; }

/* MOBILE ONLY: baru floating */
@media (max-width: 767.98px){
  body.has-checkout-floatbar{
    padding-bottom: 92px; /* ruang untuk bar */
  }

  .checkout-floatbar{
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .checkout-floatbar .inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;
    padding: 12px 14px;
  }
  .checkout-floatbar .total{
    font-weight: 700;
    line-height: 1.1;
  }
  .checkout-floatbar .btn{
    border-radius: 999px;
    padding: 12px 18px;
    min-width: 160px;
  }

}
.checkout-total small{
  display:block;
  font-size: 12px;
  opacity: .7;
}
.checkout-total strong{
  display:block;
  font-size: 16px;
}

/* tombol */
.checkout-btn{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
}

/* kasih ruang bawah saat bar aktif */
body.has-checkout-bar{
  padding-bottom: 78px; /* kira-kira tinggi bar */
}

/* safety: kalau desktop, pastikan gak ada efek padding */
@media (min-width: 992px){
  body.has-checkout-bar{
    padding-bottom: 0 !important;
  }
}

/* ==== MOBILE FLOATING CHECKOUT BAR ==== */
.checkout-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* biar konten nggak ketutup bar saat mobile */
.has-checkout-bar .cart-page{
  padding-bottom: 96px; /* sesuaikan tinggi bar */
}

/* ==== HARD-KILL di DESKTOP ==== */
@media (min-width: 992px){
  .checkout-bar{ display: none !important; }
  .has-checkout-bar .cart-page{ padding-bottom: 0 !important; }
}

.margin-bottom-50{
  margin-bottom: 50px;
}

.page-pagination ul li.active a,
.page-pagination ul li.active {
  background: #0271e3;
  color: #fff;
}

.page-pagination ul li.active a {
  pointer-events: none;
}

.link-see-all {
  font-size: 14px;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  letter-spacing: .2px;
}

.link-see-all:hover {
  text-decoration: underline;
  color: #000;
}

.badge-courier{
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;

  background: #e5e7eb;  /* gray-200 */
  color: #000;        /* teks gelap */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;      /* pill */
}

.orders-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.orders-head h3{ margin:0; }
.orders-sub{
  margin-top:6px;
  color:#6b7280;
  font-size:13px;
}
.orders-filter{
  min-width: 260px;
}

.table-orders{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  background:#fff;
}
.table-orders table{ margin:0; }
.table-orders thead th{
  background:#f8fafc;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
}
.table-orders td{
  vertical-align:middle;
  border-color: rgba(0,0,0,.06) !important;
}
.order-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  text-decoration: none;
}
.order-code:hover{ text-decoration: underline; }

.td-right{ text-align:right; }
.td-center{ text-align:center; }

.badge-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.10);
  background:#f3f4f6;
  color:#111827;
  white-space:nowrap;
}
.badge-status::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#9ca3af;
}

/* status colors (soft but readable) */
.st-pending, .st-unpaid { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.st-pending::before, .st-unpaid::before{ background:#fb923c; }

.st-paid { background:#ecfeff; border-color:#a5f3fc; color:#155e75; }
.st-paid::before{ background:#06b6d4; }

.st-packing { background:#eef2ff; border-color:#c7d2fe; color:#3730a3; }
.st-packing::before{ background:#6366f1; }

.st-shipped { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.st-shipped::before{ background:#3b82f6; }

.st-delivered, .st-done { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.st-delivered::before, .st-done::before{ background:#22c55e; }

.st-cancelled { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.st-cancelled::before{ background:#ef4444; }

.btn-mini{
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
}

.empty-state{
  padding:28px 18px;
  text-align:center;
  color:#6b7280;
}
.empty-state b{ color:#111827; }

/* wrapper */
.table-orders{ border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff; }
.table-orders table{ margin:0; }

/* desktop-only / mobile-only */
.only-desktop{ display:block; }
.only-mobile{ display:none; }

/* mobile cards */
.order-cards{ display:grid; gap:12px; }
.order-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.order-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.order-card-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:13px;
  text-decoration:none;
}
.order-card-code:hover{ text-decoration:underline; }
.order-card-meta{ margin-top:10px; display:grid; gap:6px; color:#374151; font-size:13px; }
.order-card-row{ display:flex; justify-content:space-between; gap:10px; }
.order-card-row b{ color:#111827; font-weight:700; }
.order-card-actions{ margin-top:12px; display:flex; justify-content:flex-end; }

/* badge status (punyamu tetap kepakai) */
.badge-status{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid rgba(0,0,0,.10); background:#f3f4f6; color:#111827; white-space:nowrap; }
.badge-status::before{ content:""; width:8px;height:8px;border-radius:50%; background:#9ca3af; }

/* status colors (soft) */
.st-pending,.st-unpaid{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.st-pending::before,.st-unpaid::before{ background:#fb923c; }
.st-paid{ background:#ecfeff; border-color:#a5f3fc; color:#155e75; }
.st-paid::before{ background:#06b6d4; }
.st-packing{ background:#eef2ff; border-color:#c7d2fe; color:#3730a3; }
.st-packing::before{ background:#6366f1; }
.st-shipped{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.st-shipped::before{ background:#3b82f6; }
.st-delivered,.st-done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.st-delivered::before,.st-done::before{ background:#22c55e; }
.st-cancelled{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.st-cancelled::before{ background:#ef4444; }

.btn-mini{ padding:8px 14px; border-radius:999px; font-weight:700; }

/* responsive switch */
@media (max-width: 768px){
  .only-desktop{ display:none; }
  .only-mobile{ display:block; }

  /* biar filter & header gak sempit */
  .orders-head{ flex-direction:column; align-items:stretch; }
  .orders-filter{ min-width:0; width:100%; }
}

/* SweetAlert – KurasiApple */
.ka-swal {
  border-radius: 16px !important;
  padding: 22px 22px 18px !important;
}

.ka-swal__title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
  color: #111827 !important;
}

.ka-swal__text {
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.55 !important;
  margin-top: 8px !important;
}

.ka-swal__actions {
  gap: 10px !important;
  margin-top: 18px !important;
}

/* Button base */
.ka-btn {
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  min-width: 110px;
  transition: 0.15s ease-in-out;
}

/* Primary danger (hapus) */
.ka-btn--danger {
  background: #dc2626; /* merah dewasa */
  color: #fff;
  border-color: #dc2626;
}

.ka-btn--danger:hover {
  filter: brightness(0.95);
}

/* Ghost cancel */
.ka-btn--ghost {
  background: #fff;
  color: #111827;
  border-color: #e5e7eb;
}

.ka-btn--ghost:hover {
  background: #f9fafb;
}

/* Icon lebih soft */
.swal2-icon.swal2-question {
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}

.forgot-link {
  font-size: 13px;
  color: #6b7280; /* abu-abu tenang */
  text-decoration: none;
  transition: color 0.15s ease;
}

.forgot-link:hover {
  color: #0b5ed7; /* biru brand, subtle */
  text-decoration: underline;
}