/* Reset margin */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color:#FCF8F2;
  padding:8px 15px;
  display: flex;
  align-items: center;
  justify-content: start;
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(0,0,0,.06);
}

/* Logo dan tulisan RSVP */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo h1 {
  font-size: 18px;
  color:#2D2D2D;
  font-weight:600;
}

.logo img {
  height: 20px;
}

/* Seksyen Pakej */
.pakej-section {
  text-align: center;
  margin-bottom: 40px;
}

.pakej {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card {
  background-color: #fff;
  padding: 15px 20px 15px 20px;
  border-radius: 20px;
  width: 300px;
  min-height: 480px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border:1px solid #EEE4D8;
}

.card-title, .card-price {
  margin: 0;
  padding: 0;
  line-height: 1.1; /* boleh cuba 1.0 juga kalau nak betul2 rapat */
  font-weight: bold;
}

.card-title {
  color:#B68A35 !important;
  -webkit-text-fill-color:#B68A35 !important;
  font-size:22px;
  letter-spacing:1px;
}

.card-price {
  font-size: 18px;
  color: #B68A35 !important;  
  -webkit-text-fill-color: #B68A35 !important; /* untuk Safari */
  margin-top: 0;
}

.card ul {
  list-style: none;
  text-align: left;
  font-size: 14px;
  margin-top: 0;
  padding-top: 0;
}

.card ul li {
  margin-bottom: 0px;
}

.card ul li i {
  margin-right: 8px;
  color: black !important;  
  -webkit-text-fill-color: black !important; /* untuk Safari */
}

.gold,
.silver,
.bronze {
  border-top: none;
}

/* WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white !important;  
  -webkit-text-fill-color: white !important; /* untuk Safari */
  border-radius: 50%;
  padding: 15px;
  font-size: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

/* Bayaran dan Borang */
.bayaran, .borang-maklumat {
  background: transparent;
  padding: 10px 0;
  border-radius: 0;
  margin: 20px 0;
  box-shadow: none;
  text-align: center;
}


/* Borang */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
form input, form textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #EEE4D8;
}
form button {
  padding: 10px;
  background-color: #B68A35;
  color:white !important;  
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
form button:hover {
  background-color: #9C722C;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 30px;
  color: black !important;  
  -webkit-text-fill-color: black !important; /* untuk Safari */
  font-size: 14px;
}

/* RESPONSIF */
@media (max-width: 960px) {
  .pakej {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
  }
}

/* ✅ Font Custom Styles */
.font-a {
  font-family: 'Noto Serif Dives Akuru', serif;
  font-size: 1.5rem;
  color: #B68A35 !important;
  -webkit-text-fill-color: #B68A35 !important;
}

.font-b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: black !important;  
  -webkit-text-fill-color: black !important; /* untuk Safari */
}

.pilih-pakej-btn {
  padding: 8px 16px;
  background-color: #B68A35;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

.pilih-pakej-btn:hover {
  background-color: #9C722C;
}

.btn-download {
  background-color: #B68A35;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-download:hover {
  background-color: #9C722C;
}

.card a {
  color: #B68A35 !important;
  -webkit-text-fill-color: #B68A35 !important;
  text-decoration: underline; /* Kalau nak garis bawah */
  font-weight: bold;
}

.card a:hover {
  color: #9C722C; /* Hover jadi merah lebih terang */
}

.preview-kad {
  padding: 40px 20px;
  text-align: center;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsif */
  gap: 20px;
  justify-items: center;
}

.kad-item {
  background-color: #fff;
  border: 1px solid #EEE4D8;
  border-radius: 16px;
  padding: 15px;
  max-width: 220px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.kad-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.preview-btn {
  background-color: #B68A35;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
}

.preview-btn:hover {
  background-color: #9C722C;
}

.customize-btn {
  background-color: #B68A35;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
}


.customize-btn:hover {
  background-color: #9C722C;
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  position: relative;
  background: #fff;
  padding: 15px;
  border-radius: 18px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align: center;
}

.popup-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  color: black !important;  
  -webkit-text-fill-color: black !important; /* untuk Safari */
  cursor: pointer;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.filter-btn {
  background: #B68A35;
  border: none;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}
.filter-btn:hover,
.filter-btn.active {
  background: #9C722C;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */
}

/* 🌸 Dropdown kategori */
.filter-dropdown {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;  /* ✅ Tengah secara mendatar */  
}

/* Kalau masih tak center sebab ada parent flex lain */
.filter-dropdown button {
  margin: 0 auto; /* ✅ Paksa tengah dalam container */
}

.filter-toggle-btn {
  background: #B68A35;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s;
}
.filter-toggle-btn:hover {
  background: #9C722C;
}

/* Menu dropdown tersembunyi dulu */
.filter-menu {
  display: none;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  padding: 10px;
  z-index: 500;
}

.filter-menu.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.filter-menu .filter-btn {
  background: #B68A35;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */ 
  border: none;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 13px;
}
.filter-menu .filter-btn:hover,
.filter-menu .filter-btn.active {
  background: #9C722C;
  color:#000 !important;  
  -webkit-text-fill-color:#000 !important; /* untuk Safari */
}

.dropdown-btn {
  background-color: black;
  color: white !important;  
  -webkit-text-fill-color: white !important; /* untuk Safari */
  padding: 8px 12px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}




.rsvp-container {
  position: relative; /* ✅ jadikan parent reference untuk prev/next */
  width: 250px;
  min-height: 400px;
  margin: 40px auto 50px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: block;
}

.rsvp-card {
  text-align: center;        /* centrekan semua teks & button */
  display: flex;              /* kalau nak vertical stack */
  flex-direction: column;     /* susun menegak */
  align-items: center;        /* centrekan anak secara horizontal */
  gap: 10px;                  /* jarak antara gambar, teks & button */
}

.rsvp-card img {
  width: 100%;              /* ikut width parent (250px) */
  max-height: 180px;        /* limit tinggi gambar */
  object-fit: contain;
  border-radius: 10px;
}

.rsvp-card h3.katalog-title {
  margin: 0;
  text-align: center;
}

.rsvp-card p {
  margin: 0;
  font-size: 14px;
  color: black;
  text-align: center;
}

.rsvp-card a button {
  margin-top: 10px;
  text-align: center;
}
  
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  cursor: pointer;
  font-size: 17px;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.gallery-btn:hover {
  opacity: 1;
}

.prev-btn {
  left: -15px;
}

.next-btn {
  right: -15px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .rsvp-container {
    max-width: 90%;
    padding: 12px;
  }
  .gallery-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .rsvp-container {
    max-width: 90%;
    padding: 10px;
  }
  .rsvp-card p {
    font-size: 13px;
  }
  .pilih-pakej-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
  .gallery-btn {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* Kotak FAQ */
.faq-item {
  border: 1px solid #EEE4D8;
  border-radius: 8px;
  margin: 8px 0;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  padding: 12px;
  text-align: left;
  background: #FCF8F2;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.faq-question:hover {
  background: #F2E8DB;
}

.faq-answer {
  display: none; /* hide by default */
  padding: 10px 12px;
  background: #fff;
  font-size: 15px;
}

/* Optional: caret arrow untuk soalan */
.faq-question::after {
  content: "▼";
  float: right;
  transition: transform 0.2s;
}

.faq-question.active::after {
  transform: rotate(-180deg);
}

.filter-tabs .filter-btn{
    position:relative;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    color:#555;
    padding-bottom:6px;
    transition:.25s;
    user-select:none;
}

/* ===========================
   WAKTU OPERASI
=========================== */

.operation-section{
    max-width:380px;
    margin:40px auto;
    padding:0 15px;
    text-align:center;
}

.operation-section h2{
    font-size:24px;
    color:#B68A35;
    margin-bottom:20px;
}

.operation-card{
    background:rgba(255,255,255,.95);
    border-radius:20px;
    padding:22px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    border:1px solid #eee;
}

.operation-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:8px 0;
    font-size:15px;
}

.operation-row span{
    color:#555;
}

.operation-row strong{
    color:#B68A35;
    font-size:16px;
}

.operation-divider{
    height:1px;
    background:#ececec;
    margin:12px 0;
}

.closed{
    color:#d62828;
}

.operation-note{
    margin-top:15px;
    font-size:13px;
    color:#777;
    line-height:1.6;
}



.filter-tabs{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:15px auto 25px;

    overflow-x:auto;
    white-space:nowrap;
    flex-wrap:nowrap;

    padding-bottom:5px;
    scrollbar-width:none;
}

.filter-tabs::-webkit-scrollbar{
    display:none;
}

.filter-item{
    cursor:pointer;
    color:#000;
    font-size:14px;
    font-weight:500;
    padding-bottom:3px;
    transition:.25s;
    flex-shrink:0;   /* Supaya teks tak mengecil */
}

.filter-item.active{
    color:#000;
    font-weight:700;
    border-bottom:2px solid #000;
}

.separator{
    color:#bbb;
    flex-shrink:0;
}

/* =========================
   HERO BANNER
========================= */

.hero-banner{
    width:100%;
    height:320px;      /* boleh ubah 280px - 400px */
    overflow:hidden;
}

.hero-banner img{
    width:100%;
    height:100%;
    object-fit:cover;  /* isi ruang tanpa herot */
    object-position:center; /* Fokus di tengah gambar */
    display:block;
}

@media (max-width:768px){

.hero-banner{
    height:180px;
}

}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

body{
    background:#F5EFE8;
    font-family:sans-serif;
    padding-top:70px;
    background-image:
    radial-gradient(circle, rgba(182,138,53,0.18) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(182,138,53,0.25) 1px, transparent 2px);
    background-position:
    10px 20px,
    80px 40px,
    150px 100px;
    background-size:
    120px 120px,
    160px 160px,
    200px 200px;
}

#pakej,
#designkad,
#borang,
#faq,
#video,
#teks-edar,
#step-rsvp,
#waktu{
    padding:20px;
}

button,
.btn-download,
.preview-btn,
.filter-btn,
.filter-toggle-btn,
.pilih-pakej-btn {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}