/* DETAIL BOX (tetap aman dengan CSS lama) */
.detail-text {
    white-space: pre-line; /* hormati enter dari editor */
    font-size: 14px;
    color: #555;
    margin: 0;
}

.detail-text ul {
    padding-left: 20px;
    margin: 0;
    list-style: none; /* hilangkan bullet default */
}

.detail-text li {
    margin-bottom: 5px;
    position: relative;
}

/* Bullet default ▶ */
.detail-text li::before {
    content: '▶';
    color: #333;
    position: absolute;
    left: -20px; /* jarak bullet */
}

/* Editor textarea */
textarea.large-editor {
    height: 300px; /* 3x default */
    min-height: 300px;
    width: 100%;
    resize: vertical;
    overflow-y: auto;
    font-size: 14px;
}


/* ===== DETAIL BOX (HARGA TAMBAHAN, FASILITAS) ===== */
.umroh-card-detail {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.detail-box {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.detail-box h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}

.detail-box p {
    font-size: 14px;
    color: #555;
}


/* Default font (HP normal & desktop) */
.umroh-card-fields .field span,
.umroh-card-fields .field strong {
  font-size: 18px;
  line-height: 1.4;
}

/* HP super kecil (contoh: Z Fold cover screen ≤360px) */
@media (max-width: 360px) {
  .umroh-card-fields .field span,
  .umroh-card-fields .field strong {
    font-size: 14px;
  }
}

/* Tablet & layar lebar (≥768px) */
@media (min-width: 768px) {
  .umroh-card-fields .field span,
  .umroh-card-fields .field strong {
    font-size: 18px;
  }
}





.umroh-ringkasan {
  display: grid;
  grid-template-columns: 1fr; /* default mobile */
  gap: 10px;
}
.umroh-ringkasan > div {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px; /* kecil saja */
  font-size: 14px;
  line-height: 1.4;
}
@media(min-width:768px) {
  .umroh-ringkasan {
    grid-template-columns: 1fr 1fr; /* 2 kolom di desktop */
  }
}


.umroh-booking .booking-button {
    display: block;          /* supaya seperti div */
    text-align: center;
    background-color: #ff6600;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}
.btn.btn-booking {
    display: block;          /* tetap block supaya grid rapi */
    text-align: center;
    padding: 10px 20px;
    background-color: #ff6600;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;         /* kalau ingin terlihat clickable */
}


/* Wrapper paket review */
.umroh-paket-review ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* desktop: 3 kolom */
    gap: 10px; /* jarak antar kolom */
    list-style: none;
    padding: 0;
}

.umroh-paket-review ul li {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px; /* padding dikit */
    background: #f9f9f9;
    height: auto; /* otomatis mengikuti isi */
}

/* Sub-ul (misal daftar jadwal, hotel tambahan) tetap vertikal */
.umroh-paket-review ul li ul {
    list-style: disc;
    padding-left: 15px;
    margin: 5px 0 0 0;
}

/* Mobile: 1 kolom */
@media (max-width: 768px) {
    .umroh-paket-review ul {
        grid-template-columns: 1fr;
    }
}


.umroh-paket-review ul {
    margin: 0 !important;
    padding: 0; /* kalau mau reset padding juga */
    list-style: none;
}



.entry-content :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0 !important;
}



/* Hilangkan bullet list default */
.umroh-info-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.umroh-info-list ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== FIELD STYLE ===== */
.umroh-info-list li.field {
  display: grid;
  grid-template-columns: 30px 1fr auto; /* icon | label | value */
  align-items: center;
  background: #f9f9f9;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  margin-bottom: 6px;
  column-gap: 8px;
}

.umroh-info-list li.field i {
  color: #ff6600;
  font-size: 16px;
  text-align: center;
}

.umroh-info-list li.field span {
  font-weight: normal;
  color: #333;
  font-size: 20px;
}

.umroh-info-list li.field strong {
  font-weight: normal;
  color: #000;
  justify-self: end;   /* default desktop rata kanan */
  text-align: right;  font-size: 20px;
}

/* ===== MOBILE STYLE ===== */
@media (max-width: 600px) {
  .umroh-info-list li.field {
    grid-template-columns: 30px 1fr; /* icon + label */
    grid-template-rows: auto auto;   /* value turun ke baris bawah */
  }

  .umroh-info-list li.field strong {
    grid-column: 2 / 3;   /* taruh di kolom label */
    justify-self: start;  /* rata kiri */
    text-align: left;
    font-size: 20px;      /* lebih besar biar jelas */
    margin-top: 4px;      /* jarak dari label */
  }

  .umroh-info-list li.field span {
    font-size: 14px;      /* label agak kecil */
  }
}



/* Font Umum */
.umroh-card,
.umroh-detail-card {
    font-family: 'Poppins', sans-serif;
}







.umroh-booking {
    text-align: center;
    padding: 12px;
    background: #ff761c;
    border-radius: 0 0 12px 12px;
}

.umroh-booking .booking-button {
    display: inline-block;
    background: #ff761c;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    transition: background 0.3s ease;
}

.umroh-booking .booking-button:hover {
    background: #ff761c;
}




/* ====== STAR ====== */
.star {
    color: gold;
    font-size: 16px;
    margin-left: 2px;
}

/* ====== CARD FIELD ====== */
.umroh-card-fields,
.umroh-detail-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.umroh-card-fields .field {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 6px;
  background: #f9f9f9;
  padding: 2px 2px;
  border-radius: 6px;
  font-size: 15px;
  margin-bottom: 0px;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: normal;
}

.umroh-card-fields .field i {
  color: #ff6600;
  font-size: 14px;
  text-align: center;
}

.umroh-card-fields .field span {
  color: #333;
  font-weight: normal;
}

.umroh-card-fields .field strong {
  font-weight: normal;
  color: #000;
  justify-self: end;
}


/* ====== GRID LAYOUT ====== */
.umroh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* ====== CARD ====== */
.umroh-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.umroh-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.umroh-card-title {
  font-size: 28px;
  font-weight: normal;
  padding: 10px;
  color: #0d8b22;
  font-family: bebas neue;
  line-height: 26px;
}

/* ====== FOOTER CARD ====== */
.umroh-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.umroh-price {
    color: #ff6600;
    font-weight: bold;
    font-size: 22px;
}

.umroh-detail {
    background: #0d8b22;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
}


/* ====== EXTRA INFO ====== */
.umroh-detail-extra {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.umroh-detail-extra div {
    flex: 1;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
    .umroh-detail-card {
        grid-template-columns: 1fr;
    }

    .umroh-detail-extra {
        flex-direction: column;
    }
}





/* ===== DETAIL PAGE WRAPPER ===== */
.umroh-single-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
    max-width: 1000px;
    margin: 20px auto;
}

/* ===== HEADER (IMAGE + INFO) ===== */
.umroh-card-header {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.umroh-card-img img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}


.umroh-card-info h2 {
  font-size: 33px;
  margin-bottom: 15px;
  color: #fe6906;
  font-family: bebas neue;
  font-weight: normal;
}


.umroh-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.umroh-info-list li {
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
    display: flex;
    align-items: center;
}

.umroh-info-list li i {
    color: #ff6600;
    margin-right: 8px;
    font-size: 16px;
}

.umroh-info-list span {
    font-weight: bold;
    color: #222;
}

/* ===== BUTTONS ===== */
.umroh-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.umroh-card-buttons .btn {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.btn-harga { background: #ff6600; }
.btn-kuota { background: #0d8b22; }
.btn-booking { background: #e60000; }


/* ===== RESPONSIVE MOBILE ===== */
@media(max-width: 768px) {
    .umroh-card-header {
        grid-template-columns: 1fr;
    }
    .umroh-card-buttons {
        flex-direction: column;
    }
    .umroh-card-detail {
        grid-template-columns: 1fr;
    }
    .umroh-card-info h2 {
        font-size: 30px;
        text-align: center;
    }
}


.umroh-detail-info .field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
}

.umroh-detail-info .field span {
    font-weight: normal;
    color: #333;
}

.umroh-detail-info .field strong {
    font-weight: bold;
}