:root {
--jluv-bg: #f7f8fa;
--jluv-card: #ffffff;
--jluv-text: #1f2937; /* gray-800 */
--jluv-muted: #6b7280; /* gray-500 */
--jluv-border: #e5e7eb; /* gray-200 */
--jluv-shadow: 0 8px 24px rgba(31,41,55,.08);
--jluv-radius: 16px;
--jluv-accent: #ff4fa3; /* JLUV pink */
--jluv-accent-2: #a855f7; /* purple */
}

/* ===== Base ===== */
.jluv-wrap {font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: var(--jluv-text); background: var(--jluv-bg);} 


.jluv-section {background: var(--jluv-card); padding: 20px; border-radius: var(--jluv-radius); border:1px solid var(--jluv-border); box-shadow: var(--jluv-shadow);} 


.jluv-card {background: var(--jluv-card); border:1px solid var(--jluv-border); border-radius: var(--jluv-radius); box-shadow: var(--jluv-shadow); padding: 20px; transition: transform .2s ease, box-shadow .2s ease;}
.jluv-card + .jluv-card{margin-top:16px}
.jluv-card:hover{transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,41,55,.12)}


.jluv-title{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; margin:0 0 14px; color: var(--jluv-text)}
.jluv-title .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--jluv-accent),var(--jluv-accent-2))}


.jluv-grid{display:grid; gap:12px}
.jluv-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.jluv-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .jluv-grid.cols-2, .jluv-grid.cols-3{grid-template-columns:1fr} }


/* ===== Form controls ===== */
.jluv-input, .jluv-select {
width:100%; background:#fff; border:1px solid var(--jluv-border); color:var(--jluv-text);
border-radius:12px; padding:12px 14px; outline:none; transition: box-shadow .15s ease, border-color .15s ease;
}
.jluv-input::placeholder{color:#9ca3af}
.jluv-input:focus, .jluv-select:focus {border-color: var(--jluv-accent); box-shadow: 0 0 0 4px rgba(255,79,163,.25)}


.jluv-form-row{display:flex; gap:10px}
.jluv-form-row .grow{flex:1}


/* ===== Buttons ===== */
.jluv-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
background:linear-gradient(135deg,var(--jluv-accent),var(--jluv-accent-2));
color:#fff; font-weight:700; border:none; border-radius:12px; padding:12px 16px; cursor:pointer;
transition:transform .08s ease, filter .2s ease, box-shadow .2s ease; box-shadow:0 8px 20px rgba(255,79,163,.25);
}
.jluv-btn:hover{filter:brightness(1.06)}
.jluv-btn:active{transform:translateY(1px)}
.jluv-btn[disabled]{opacity:.6; cursor:not-allowed; filter:grayscale(.3)}


/* ===== Titles ===== */
.jluv-title { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    font-weight:700; 
    font-size:19px; 
    margin:0 0 16px; 
    color: var(--jluv-text); }
.jluv-title .dot { width:9px;height:9px;border-radius:999px;background:linear-gradient(135deg,var(--jluv-accent),var(--jluv-accent-2)) }

/* ===== Grid ===== */
.jluv-grid { display:grid; gap:14px }
.jluv-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.jluv-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .jluv-grid.cols-2, .jluv-grid.cols-3{grid-template-columns:1fr} }

/* ===== Inputs ===== */
.jluv-input, .jluv-select {
  width:100%; background:#fff; border:1px solid var(--jluv-border); color:var(--jluv-text);
  border-radius:12px; padding:12px 14px; outline:none; transition: box-shadow .15s ease, border-color .15s ease;
}
.jluv-input::placeholder{color:#94a3b8}
.jluv-input:focus, .jluv-select:focus {border-color: var(--jluv-accent); box-shadow: 0 0 0 3px rgba(236,72,153,.25)}

/* ===== Buttons ===== */
.jluv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--jluv-accent),var(--jluv-accent-2)); color:#fff; font-weight:600; border:none; border-radius:12px; padding:12px 18px; cursor:pointer; transition: transform .08s ease, filter .2s ease, box-shadow .2s ease; box-shadow:0 6px 16px rgba(236,72,153,.25); }
.jluv-btn:hover { filter:brightness(1.07); box-shadow:0 8px 18px rgba(236,72,153,.3); }
.jluv-btn:active { transform:translateY(1px) }

/* Search bar align */
.jluv-search { display:flex; gap:12px; align-items:stretch; }
.jluv-search input.jluv-input { flex:1; height:46px; }
.jluv-search .jluv-btn { height:46px; padding:0 20px }
@media (max-width:640px){ .jluv-search{flex-direction:column} .jluv-search .jluv-btn{width:100%} }

/* ===== Tracking cards ===== */

/* ===== Tracking ===== */
.jluv-search{display:flex; gap:10px}
.jluv-search input{flex:1}


.jluv-badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--jluv-border); background:#f9fafb; color:var(--jluv-text)}
.badge-neutral{color:#64748b}
.badge-progress{color:#1d4ed8; background:#eef2ff; border-color:#e0e7ff}
.badge-arrived{color:#b45309; background:#fffbeb; border-color:#fde68a}
.badge-ready{color:#0f766e; background:#ecfeff; border-color:#a5f3fc}
.badge-done{color:#065f46; background:#ecfdf5; border-color:#a7f3d0}


.jluv-row{display:grid; grid-template-columns:120px 1fr; gap:16px}
.jluv-thumb{width:120px; aspect-ratio:4/3; background:#fff; border:1px solid var(--jluv-border); border-radius:12px; overflow:hidden}
.jluv-thumb img{width:100%; height:100%; object-fit:cover}
.jluv-meta{display:grid; gap:6px}
.jluv-meta .k{color:var(--jluv-muted)}
.jluv-meta .v strong{color:var(--jluv-text)}


.jluv-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:#fff; border:1px dashed var(--jluv-accent); color:var(--jluv-text)}
.jluv-price{font-weight:800; font-size:18px; color:#e11d48}
.jluv-copy{font-size:12px; color:var(--jluv-accent); cursor:pointer; user-select:none}
.jluv-copy:hover{text-decoration:underline}


/* Subtle animation */
.fade-in{animation:fade .25s ease}
@keyframes fade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }


/* ===== Calculator specifics ===== */
#jluv_btn_calc.jluv-btn { font-size:14px; padding:10px 14px; border-radius:10px }
#jluv-calc-result h4 { font-size:18px; font-weight:700; margin:0 0 10px; color: var(--jluv-text) }
#jluv-calc-result { background:#fff; border:1px solid var(--jluv-border); border-radius:14px; }
#jluv-calc-result ul{ margin:0; padding-left:18px }
#jluv-calc-result li{ margin-bottom:4px }


/* ===== Search bar align fix ===== */
.jluv-search { align-items: stretch; }
.jluv-search .jluv-btn{ height:44px; padding:0 18px }
.jluv-search input.jluv-input{ height:44px }
@media (max-width:640px){
.jluv-search{flex-direction:column}
.jluv-search .jluv-btn{width:100%}
}
.jluv-row { display:grid; grid-template-columns:110px 1fr; gap:16px; }
@media (max-width:900px){ .jluv-row{grid-template-columns:1fr} }
.jluv-thumb{width:100%; aspect-ratio:4/3; background:#f9fafb; border:1px solid var(--jluv-border); border-radius:12px; overflow:hidden }
.jluv-thumb img{width:100%; height:100%; object-fit:cover }
.jluv-meta{display:grid; gap:8px }
.jluv-meta .k{color:var(--jluv-muted); font-size:14px}
.jluv-meta .v strong{color:var(--jluv-text)}

/* Pills, badges */
.jluv-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px; background:#fdf2f8; border:1px dashed var(--jluv-accent); color:var(--jluv-text); font-size:13px}
.jluv-badge{display:inline-block; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--jluv-border); background:#f9fafb; color:var(--jluv-text)}
.badge-neutral{color:#64748b}
.badge-progress{color:#1d4ed8; background:#eef2ff; border-color:#e0e7ff}
.badge-arrived{color:#b45309; background:#fffbeb; border-color:#fde68a}
.badge-ready{color:#0f766e; background:#ecfeff; border-color:#a5f3fc}
.badge-done{color:#065f46; background:#ecfdf5; border-color:#a7f3d0}

/* Price */
.jluv-price{font-weight:700; font-size:18px; color:var(--jluv-accent)}

/* ===== Notes / helper ===== */
.jluv-note{font-size:12px; color:var(--jluv-muted)}


.jluv-result{margin-top:14px; padding:14px; background:#fafafa; border:1px dashed var(--jluv-border); border-radius:12px; color:var(--jluv-text)}

/* Calculator result */
#jluv_btn_calc.jluv-btn { font-size:14px; padding:11px 16px; border-radius:12px }
#jluv-calc-result h4 { font-size:19px; font-weight:700; margin:0 0 10px; color: var(--jluv-text) }
#jluv-calc-result { background:#fff; border:1px solid var(--jluv-border); border-radius:14px; padding:16px }
#jluv-calc-result ul{ margin:0; padding-left:18px }
#jluv-calc-result li{ margin-bottom:5px }

/* Animations */
.fade-in{animation:fade .25s ease}
@keyframes fade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ===== v1.2: Readability & Positioning ===== */

/* 1) Kontras teks (muted & value) */
.jluv-meta .k,
.jluv-note { color: #475569 !important; }                /* slate-600 */
.jluv-meta .v,
.jluv-meta .v strong,
.jluv-price { color: #111827 !important; }               /* gray-900 */

/* 2) Label kecil di atas field (Tracking / Metode) biar kebaca */
.jluv-pill,
.jluv-badge {
  background: #fff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 3) Hasil kalkulator: teks & border jangan pudar */
#jluv-calc-result {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
}
#jluv-calc-result h4 { color: #111827 !important; }
#jluv-calc-result ul,
#jluv-calc-result li { color: #1f2937 !important; }

/* 4) Input kalkulator/track: teks placeholder sedikit lebih gelap */
.jluv-input::placeholder { color: #64748b !important; }  /* slate-500 */

/* 5) Tinggi & alignment item-info (biar nggak ketarik ke atas) */
.jluv-row { align-items: start; }
.jluv-thumb { align-self: start; }
.jluv-meta  { align-self: center; }

/* 6) Spasi dalam card bagian bawah (box catatan) */
.jluv-result { padding: 16px 16px !important; }

/* 7) Button “Hitung Ongkir” & “Cari” tetap menonjol di light */
.jluv-btn,
#jluv_btn_calc.jluv-btn {
  background: linear-gradient(135deg, #ff4fa3, #8b5cf6) !important;
  color:#fff !important;
  box-shadow: 0 8px 20px rgba(255,79,163,.22) !important;
}

/* 8) Grid kalkulator: jarak vertikal lebih lega */
.jluv-section .jluv-grid-inline { row-gap: 12px; }

/* 9) Tabel/angka kecil yang sempat terlalu tipis */
.jluv-meta .k, .jluv-note { font-size: 13.5px !important; }
.jluv-meta .v { font-size: 14.5px !important; }

/* ===== v1.3: Fix input, badge, text contrast ===== */

/* Input lebih soft (light) */
.jluv-input, .jluv-select {
  background: #f9fafb !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;  /* gray-300 */
}
.jluv-input::placeholder { color: #6b7280 !important; } /* slate-500 */

/* Badge/Pill style lebih modern */
.jluv-pill, .jluv-badge {
  background: #fdf2f8 !important; /* pink-50 */
  border: 1px solid #fbcfe8 !important; /* pink-200 */
  color: #be185d !important; /* pink-800 */
  font-weight: 600 !important;
}
.jluv-badge { border-radius: 999px !important; }

/* Label muted lebih kontras */
.jluv-meta .k,
.jluv-note {
  color: #475569 !important; /* slate-600 */
  font-weight: 500;
}
.jluv-meta .v strong {
  color: #111827 !important; /* gray-900 */
}

/* Kartu spacing */
.jluv-card, .jluv-section {
  padding: 24px 22px !important;
}

/* Result box lebih readable */
.jluv-result {
  background: #f9fafb !important;
  border: 1px dashed #d1d5db !important;
  color: #111827 !important;
}

/* Harga lebih menonjol */
.jluv-price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ec4899 !important;
}

/* ===== JLUV Light v1.4 – hard override for inputs & labels ===== */

/* 1) Paksa SEMUA input/select/textarea di area JLUV jadi light */
.jluv-wrap input[type="text"],
.jluv-wrap input[type="search"],
.jluv-wrap input[type="tel"],
.jluv-wrap input[type="number"],
.jluv-wrap input[type="email"],
.jluv-wrap select,
.jluv-wrap textarea,
.jluv-section input[type="text"],
.jluv-section input[type="search"],
.jluv-section input[type="tel"],
.jluv-section input[type="number"],
.jluv-section input[type="email"],
.jluv-section select,
.jluv-section textarea {
  background: #f9fafb !important;
  color: #111827 !important;            /* gray-900 */
  border: 1px solid #d1d5db !important; /* gray-300 */
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

/* 2) Placeholder & label muted lebih terbaca */
.jluv-wrap input::placeholder,
.jluv-section input::placeholder,
.jluv-wrap textarea::placeholder {
  color: #64748b !important;   /* slate-500 */
}
.jluv-meta .k,
.jluv-note,
.jluv-section small,
.jluv-section .help,
.jluv-section .description {
  color: #475569 !important;   /* slate-600 */
}

/* 3) Focus state jelas (pink JLUV) */
.jluv-wrap input:focus,
.jluv-wrap select:focus,
.jluv-wrap textarea:focus {
  border-color: #ec4899 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,.25) !important;
}

/* 4) Search bar tinggi seragam */
.jluv-search input { height: 46px !important; }
.jluv-search .jluv-btn { height: 46px !important; padding: 0 20px !important; }

/* 5) Rumus/teks kecil kalkulator jangan pudar */
.jluv-section .jluv-note,
.jluv-section .jluv-hint,
.jluv-section p.jluv-hint,
.jluv-section .calc-note {
  color: #475569 !important;
  opacity: 1 !important;
}

/* 6) Pastikan tombol tetap kontras */
.jluv-btn,
#jluv_btn_calc.jluv-btn {
  background: linear-gradient(135deg, #ff4fa3, #8b5cf6) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(255,79,163,.22) !important;
}