/* =========================================================
   MyDokSat — Shared Stylesheet
   Used by: homestay.html (body.page-listing) and
            homestay1.html / homestay2.html / homestay3.html (body.page-detail)
   ========================================================= */

/* ---------- Shared across all pages ---------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Poppins', Arial, sans-serif; background: #FFFFFF; color: #1A1A1A; }
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: #FFFFFF;
    border-bottom: 1px solid #EAEAEA;
  }
.site-header__logo-img { height: 40px; display: block; }
.site-header__nav { display: flex; gap: 40px; }
.page { max-width: 900px; margin: 0 auto; padding: 32px 24px 0; }
.booking-fields {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #D9D9D9;
    border-radius: 20px;
    margin-bottom: 16px;
  }
.booking-field {
    flex: 1 1 45%;
    padding: 12px 16px;
    border-bottom: 1px solid #D9D9D9;
  }
.booking-field:nth-child(2) { border-left: 1px solid #D9D9D9; }
.booking-field:last-child { flex: 1 1 100%; border-bottom: none; }
.booking-field__label { font-weight: 700; font-size: 12px; margin: 0; }
.booking-field__date,
  .booking-field__guests {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin-top: 2px;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #1A1A1A;
    cursor: pointer;
  }
.booking-field__date::-webkit-calendar-picker-indicator { cursor: pointer; }
.reserve-btn:hover { background: #24632A; border-color: #24632A; }
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }
.modal-overlay.hidden { display: none; }
.modal {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
  }
.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #8C8C8C;
  }
.modal h2 { font-size: 18px; margin: 0 0 16px; padding-right: 20px; }
.modal h3 { font-size: 13px; margin: 20px 0 10px; }
.modal-warning {
    color: #C0392B;
    font-size: 12px;
    margin: 0 0 10px;
  }
.modal-warning.hidden { display: none; }
.modal-btn-row { display: flex; gap: 12px; margin-top: 20px; }
.modal-btn-row .pay-now-btn { margin-top: 0; flex: 1; }
.btn-outline { background: #FFFFFF; color: #2E7D32; }
.btn-outline:hover { background: #EAF5EA; }
.modal-summary {
    border: 1px solid #D8D8D8;
    border-radius: 12px;
    padding: 14px 16px;
  }
.modal-summary p { font-size: 13px; margin: 4px 0; }
.modal-total { font-weight: 700; font-size: 15px; margin-top: 8px !important; padding-top: 8px; border-top: 1px solid #D8D8D8; }
.modal-total span { color: #2E7D32; }
.secure-banner{display:flex;align-items:center;gap:8px;background:#F2F8F2;border:1px solid #D8D8D8;border-radius:10px;padding:10px 12px;font-size:12px;color:#2E7D32;font-weight:600;margin-bottom:10px;}
.secure-banner .ic{font-size:15px;}

.payment-methods { display: flex; flex-direction: column; gap: 8px; }
.payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid #D8D8D8;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    background: #fff;
  }
.payment-method:hover{ border-color: #9fc7a2; }
.payment-method.active{ border-color: #2E7D32; background: #F2F8F2; }
.payment-method input { position:absolute; opacity:0; pointer-events:none; }
.payment-method .pm-radio{width:18px;height:18px;border-radius:50%;border:2px solid #D8D8D8;flex-shrink:0;position:relative;}
.payment-method.active .pm-radio{border-color:#2E7D32;}
.payment-method.active .pm-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#2E7D32;}
.payment-method .pm-body{flex:1;min-width:0;}
.payment-method .pm-body strong{display:block;font-size:13px;font-weight:700;}
.payment-method .pm-body small{display:block;font-size:11px;color:#6b6b6b;margin-top:2px;}
.payment-method .pm-badge{font-size:10px;font-weight:800;color:#2E7D32;background:#F2F8F2;border:1px solid #D8D8D8;padding:4px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;}

.order-review-card{margin:14px 0;border:1px solid #D8D8D8;border-radius:12px;padding:14px 16px;background:#FAFAFA;}
.order-review-card h4{margin:0 0 10px;font-size:11px;font-weight:800;color:#2E7D32;text-transform:uppercase;letter-spacing:.4px;}
.review-row{display:flex;justify-content:space-between;font-size:13px;color:#5c5c5c;padding:4px 0;}
.review-row strong{color:#1A1A1A;font-weight:700;}
.review-row.total{border-top:1px solid #D8D8D8;margin-top:6px;padding-top:9px;font-size:14.5px;}
.review-row.total span{color:#1A1A1A;font-weight:700;}
.review-row.total strong{color:#2E7D32;font-size:16px;}

.receipt-note{font-size:11px;color:#6b6b6b;margin:6px 0 0;line-height:1.5;}

.tnc-row{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:#4A4A4A;margin:14px 0 0;line-height:1.5;cursor:pointer;}
.tnc-row input{margin-top:2px;flex-shrink:0;}
.tnc-row a{color:#2E7D32;font-weight:700;text-decoration:underline;}

.secure-payment-note{text-align:center;font-size:11px;color:#8C8C8C;margin:10px 0 0;}
.payment-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.payment-fields.hidden { display: none; }
.payment-fields input,
  .payment-fields select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D8D8D8;
    border-radius: 10px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 13px;
    color: #1A1A1A;
  }
.payment-fields-row { display: flex; gap: 10px; }
.payment-fields-row input { flex: 1; }
.pay-now-btn {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid #2E7D32;
    border-radius: 40px;
    background: #2E7D32;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
  }
.pay-now-btn:hover { background: #24632A; }
.pay-now-btn:disabled { background: #B7CBB8; border-color: #B7CBB8; cursor: not-allowed; }
.hidden { display: none; }
.footer { background: #EBFFEB; padding: 40px 40px 24px; margin-top: 20px; }
.footer-columns h5 { font-size: 14px; margin: 0 0 12px; }
.footer-columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-columns a { font-size: 12px; color: #1A1A1A; text-decoration: none; }
.social-icons { display: flex; gap: 12px; }
.social-icons__link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.social-icons__link svg { width: 15px; height: 15px; }
.social-icons__link--facebook { background: #1877F2; }
.social-icons__link--tiktok { background: #000000; }
.social-icons__link--youtube { background: #FF0000; }
.footer-bottom {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid #B7D9B7;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #666666;
  }

/* ---------- Listing page only (homestay.html: Homestay list + Roomstay) ---------- */
/* Navbar */
body.page-listing .site-header__nav a {
    font-weight: 400;
    font-size: 14px;
    color: #1A1A1A;
    text-decoration: none;
    cursor: pointer;
  }
body.page-listing .site-header__nav a.active { font-weight: 700; }
/* ===================== HOMESTAY LISTING PAGE ===================== */
body.page-listing .listing-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
body.page-listing .listing-hero {
    display: block;
    width: 100%;
    height: 200px;
    margin-bottom: 32px;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    background: #F2F2F2;
    object-fit: cover;
  }
body.page-listing .listing-stack { display: flex; flex-direction: column; gap: 24px; }
body.page-listing .listing-row {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
  }
body.page-listing .listing-row__image {
    flex: none;
    width: 100px;
    height: 100px;
    border: 1px solid #D8D8D8;
    border-radius: 16px;
    background: #F2F2F2;
  }
body.page-listing .listing-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
body.page-listing .listing-row__title { font-weight: 700; font-size: 20px; margin: 0; }
body.page-listing .listing-row__line { font-weight: 400; font-size: 13px; margin: 0; }
body.page-listing .listing-row__button {
    align-self: center;
    margin-top: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    border: 1px solid #2E7D32;
    border-radius: 40px;
    background: #2E7D32;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #FFFFFF;
  }
body.page-listing .listing-row__button:hover { background: #24632A; border-color: #24632A; }
/* ===================== ROOMSTAY PAGE ===================== */
body.page-listing .hero {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    background: #F2F2F2;
  }

/* ===================== ROOMSTAY PHOTO SLIDESHOW ===================== */
body.page-listing .roomstay-slideshow {
    position: relative;
    width: 100%;
    height: 380px;
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    background: #F2F2F2;
    box-sizing: border-box;
}

body.page-listing .roomstay-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}

body.page-listing .roomstay-slide.active {
    opacity: 1;
    visibility: visible;
}

body.page-listing .roomstay-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 23px;
}

body.page-listing .roomstay-slide-prev,
body.page-listing .roomstay-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    font-size: 25px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    transition: background .2s ease, transform .2s ease;
}

body.page-listing .roomstay-slide-prev {
    left: 16px;
}

body.page-listing .roomstay-slide-next {
    right: 16px;
}

body.page-listing .roomstay-slide-prev:hover,
body.page-listing .roomstay-slide-next:hover {
    background: rgba(0, 0, 0, .75);
    transform: translateY(-50%) scale(1.05);
}

body.page-listing .roomstay-slide-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    padding: 7px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .35);
}

body.page-listing .roomstay-slide-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    opacity: .6;
    cursor: pointer;
}

body.page-listing .roomstay-slide-dots button.active {
    opacity: 1;
    transform: scale(1.25);
}

@media (max-width: 640px) {
    body.page-listing .roomstay-slideshow {
        height: 300px;
        border-radius: 18px;
    }

    body.page-listing .roomstay-slide img {
        border-radius: 17px;
    }

    body.page-listing .roomstay-slide-prev,
    body.page-listing .roomstay-slide-next {
        width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 21px;
    }

    body.page-listing .roomstay-slide-prev {
        left: 10px;
    }

    body.page-listing .roomstay-slide-next {
        right: 10px;
    }
}

body.page-listing .page-title {
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1px;
    margin: 0 0 24px;
  }
body.page-listing .top-row { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 32px; }
body.page-listing .facilities-box {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
    padding: 16px 20px;
  }
body.page-listing .facilities-box h3 { font-size: 13px; margin: 0 0 8px; }
body.page-listing .facilities-box ul { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; }
body.page-listing .booking-card {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 20px;
  }
body.page-listing .booking-card .price { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
body.page-listing .booking-card .price strong { font-weight: 700; }
body.page-listing .booking-card .price span { color: #8C8C8C; font-weight: 400; }
body.page-listing .reserve-btn {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 12px 24px;
    border: 1px solid #2E7D32;
    border-radius: 40px;
    background: #2E7D32;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
  }
/* Payment Modal */
body.page-listing .info-row {
    display: flex;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid #D8D8D8;
    margin-bottom: 40px;
  }
body.page-listing .info-col h4 { font-size: 12px; margin: 0 0 8px; }
body.page-listing .info-col ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.8; }
body.page-listing .activities-col {
    flex: none;
    width: 160px;
    border-right: 1px solid #D8D8D8;
    padding-right: 24px;
  }
body.page-listing .attractions-col { flex: 1; display: flex; gap: 24px; }
body.page-listing .attractions-col ul { flex: 1; }
/* ===================== FOOTER (shared) ===================== */
body.page-listing .footer-columns {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    margin-bottom: 24px;
  }

/* ---------- Detail pages only (homestay1/2/3.html) ---------- */
/* Navbar */
body.page-detail .site-header__nav a { font-weight: 400; font-size: 14px; color: #1A1A1A; text-decoration: none; }
/* Page */
body.page-detail .hero {
    width: 100%;
    height: 260px;
    margin-bottom: 24px;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    background: #F2F2F2;
  }
/* Title + booking row */
body.page-detail .top-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
  }
body.page-detail .top-row__main { flex: 1 1 320px; min-width: 280px; }
body.page-detail .top-row__side { flex: 1 1 300px; min-width: 260px; }
body.page-detail .listing-title { font-weight: 700; font-size: 26px; margin: 0 0 4px; }
body.page-detail .listing-subtitle { font-weight: 400; font-size: 13px; color: #4D4D4D; margin: 0 0 16px; }
body.page-detail .review-box {
    background: #FFFFFF;
    border: 1px solid #D8D8D8;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    font-size: 11px;
    color: #8C8C8C;
  }
/* Booking widget */
body.page-detail .booking-card {
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 20px;
  }
body.page-detail .price { font-weight: 700; font-size: 22px; margin: 0 0 16px; }
body.page-detail .price span { font-weight: 400; color: #8C8C8C; }
body.page-detail .booking-field__placeholder { font-weight: 400; font-size: 12px; color: #8C8C8C; margin: 0; }
body.page-detail .reserve-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #2E7D32;
    border-radius: 40px;
    background: #2E7D32;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
  }
/* Payment Modal */
/* Where you'll sleep */
body.page-detail .section-heading { font-weight: 500; font-size: 22px; margin: 8px 0 16px; }
body.page-detail .bedrooms { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
body.page-detail .bedroom-item { display: flex; flex-direction: column; gap: 10px; width: 150px; }
body.page-detail .bedroom-card { width: 150px; height: 180px; border: 1px solid #D8D8D8; border-radius: 24px; background: #F2F2F2; }
body.page-detail .bedroom-title { font-weight: 600; font-size: 16px; margin: 0; }
body.page-detail .bedroom-detail { font-weight: 300; font-size: 13px; margin: 0; }
/* Amenities */
body.page-detail .amenities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin-bottom: 40px;
  }
body.page-detail .amenity { display: flex; align-items: center; gap: 12px; }
body.page-detail .amenity__icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F2F2F2;
    border: 1px solid #D8D8D8;
    display: flex;
    align-items: center;
    justify-content: center;
  }
body.page-detail .amenity__icon svg { width: 18px; height: 18px; }
body.page-detail .amenity__label { font-weight: 300; font-size: 14px; }
/* Footer */
body.page-detail .footer-columns { max-width: 900px; margin: 0 auto; display: flex; gap: 60px; margin-bottom: 24px; flex-wrap: wrap; }


/* FINAL HOMESTAY 2 & 3 SLIDESHOW BOX */
body.page-detail .photo-slideshow {
  position: relative;
  width: 100%;
  max-width: 1065px;
  height: 324px;
  margin: 0 auto 32px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #D8D8D8;
  border-radius: 24px;
  background: #F2F2F2;
}
body.page-detail .photo-slideshow .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
body.page-detail .photo-slideshow .slide.active { display: flex; }
body.page-detail .photo-slideshow .slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
@media (max-width: 640px) {
  body.page-detail .photo-slideshow {
    width: 100%;
    height: 240px;
    border-radius: 18px;
  }
}