/* ==========================================================================
   PADI Los Angeles - RestoPick (pickup, tip, Square)
   WAJIB di-load SESUDAH padi-global.css.

   RestoPick menyuntikkan CSS inline lewat <style id="restopick-*-inline-css">
   dengan paletnya sendiri: kartu putih, aksen biru #1976d2, latar aktif #e8f1fb,
   tombol tip abu #e5e5e5. Semua itu bertabrakan dengan palet PADI.

   File ini menimpanya. Inline style milik plugin ada di <head> dan file ini
   dimuat sesudahnya, jadi pada spesifisitas yang sama file ini menang. Beberapa
   aturan sengaja dinaikkan spesifisitasnya agar tidak bergantung pada urutan.
   ========================================================================== */

/* ---------- 1. JUDUL SECTION -------------------------------------------- */
/*
   padi-global.css menyetel h1-h6 ke margin 0, karena di file design jarak antar
   elemen selalu diatur per container. RestoPick memberi jarak sendiri untuk
   judul Tip (.restopick-tip-section h3), tapi tidak untuk judul Pickup details,
   sehingga judulnya menempel ke kartu mode di bawahnya.
*/
.restopick-pickup-fields > h3{
  margin: 0 0 16px;
}

/* ---------- 2. PILIHAN MODE PICKUP -------------------------------------- */
/* Dua kartu "ASAP" dan "Schedule for later". Bawaan plugin: kotak putih,
   aktif jadi biru muda dengan centang biru. */
.restopick-pickup-mode{
  gap: 8px;
  margin: 0 0 18px;
}
.restopick-pickup-mode .restopick-mode-card{
  padding: 13px 16px;
  border: 1px solid var(--padi-line-30);
  border-radius: var(--padi-radius);
  background: var(--padi-green-surface);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: border-color .25s, background-color .25s, color .25s;
}
.restopick-pickup-mode .restopick-mode-card:hover{
  border-color: var(--padi-gold);
}
.restopick-pickup-mode .restopick-mode-card__title{
  color: inherit;
}

/* Terpilih: emas, sejalan dengan hover tombol di seluruh site */
.restopick-pickup-mode .restopick-mode-card--active{
  background: var(--padi-gold);
  border-color: var(--padi-gold);
  color: var(--padi-green);
}
.restopick-pickup-mode .restopick-mode-card--active .restopick-mode-card__check{
  color: var(--padi-green);
}

/* Tidak tersedia (mis. di luar jam buka): redup tapi tetap terbaca, bukan
   putih transparan yang menyala di atas hijau */
.restopick-pickup-mode .restopick-mode-card--disabled,
.restopick-pickup-mode .restopick-mode-card--disabled:hover{
  background: transparent;
  border-color: var(--padi-line-14);
  color: var(--padi-cream);
  opacity: .45;
}

/* ---------- 3. FIELD JADWAL PICKUP -------------------------------------- */
.restopick-pickup-fields{
  margin-bottom: 28px;
}
.restopick-pickup-fields__field-wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}
.restopick-pickup-fields__field-wrapper > .form-row{
  flex: 1 1 200px;
  margin: 0 0 14px;
  padding: 0;
  float: none;
  width: auto;
}

/* Input tanggal & waktu ikut gaya field checkout, bukan putih bawaan */
.restopick-pickup-date input.input-text,
.restopick-pickup-time input.input-text,
.restopick-pickup-time select,
#restopick_pickup_date,
#restopick_pickup_time{
  width: 100%;
  box-sizing: border-box;
  background: var(--padi-green-surface);
  border: 1px solid var(--padi-line-35);
  border-radius: var(--padi-radius);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 14px;
  padding: 13px 14px;
}
#restopick_pickup_date:focus,
#restopick_pickup_time:focus{
  border-color: var(--padi-gold);
  outline: 0;
  box-shadow: none;
}
.restopick-pickup-fields ::placeholder{
  color: rgba(241, 234, 217, .55);
}

/* ---------- 4. NOTICE --------------------------------------------------- */
/* Bawaan plugin memakai hijau/merah Bootstrap yang menyala di atas palet ini */
.restopick-pickup-shortcode-notice{
  border-left-width: 2px;
  border-radius: var(--padi-radius);
  font-family: var(--padi-font-body);
  font-size: 13.5px;
}
.restopick-pickup-shortcode-notice.restopick-success{
  background: var(--padi-green-surface);
  border-left-color: var(--padi-gold);
  color: var(--padi-cream);
}
.restopick-pickup-shortcode-notice.restopick-error{
  background: var(--padi-green-surface);
  border-left-color: var(--padi-amber);
  color: var(--padi-cream);
}

/* ---------- 5. TIP ------------------------------------------------------ */
.restopick-tip-section{
  margin: 28px 0 0;
}
.restopick-tip-options{
  gap: 10px;
}
.restopick-tip-section .restopick-tip-btn{
  padding: 14px 8px;
  background: transparent;
  border: 1px solid var(--padi-line-45);
  border-radius: var(--padi-radius);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s;
}
.restopick-tip-section .restopick-tip-btn:hover{
  background: var(--padi-gold);
  border-color: var(--padi-gold);
  color: var(--padi-green);
}
.restopick-tip-section .restopick-tip-btn.is-active{
  background: var(--padi-gold);
  border-color: var(--padi-gold);
  color: var(--padi-green);
}
.restopick-tip-btn .restopick-tip-percent{
  font-weight: 500;
}
.restopick-tip-btn .restopick-tip-amount{
  font-family: var(--padi-font-display);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.restopick-tip-custom-wrap input{
  background: var(--padi-green-surface);
  border: 1px solid var(--padi-line-35);
  border-radius: var(--padi-radius);
  color: var(--padi-cream);
  font-family: var(--padi-font-body);
  font-size: 14px;
  padding: 13px 14px;
}

/* ---------- 6. SQUARE --------------------------------------------------- */
/*
   Field kartu dirender Square di dalam iframe, jadi isinya tidak bisa
   di-style dari sini. Yang bisa diatur hanya pembungkusnya. Warna di dalam
   iframe diatur lewat RestoPick > Square, kalau opsinya tersedia.
*/
.restopick-sq-pay-wrap{
  background: transparent;
  border: 0;
  padding: 0;
}
.restopick-sq-card{
  background: var(--padi-cream);
  border: 1px solid var(--padi-line-16);
  border-radius: var(--padi-radius);
  padding: 2px;
}
.restopick-sq-error{
  color: var(--padi-amber);
  font-family: var(--padi-font-body);
  font-size: 13px;
}

/* ---------- 7. RESPONSIVE ----------------------------------------------- */
@media (max-width: 767px){
  .restopick-pickup-fields__field-wrapper{
    gap: 0;
  }
  .restopick-pickup-fields__field-wrapper > .form-row{
    flex: 1 1 100%;
  }
  .restopick-tip-section .restopick-tip-btn{
    min-width: 0;
    letter-spacing: .12em;
  }
}
