* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: #1a1a1a; overflow-x: hidden; }

.hero { 
height: 100vh; 
position: relative; 
overflow: hidden;
display: flex; 
align-items: center; 
justify-content: center; 
text-align: center; 
color: white; 
}

.hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Full screen, cover semua */
z-index: 0;
}

.hero::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); /* Overlay gelap (sama macam asal) */
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 0 20px;
animation: fadeInUp 1s ease;
}

.hero h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero p { font-size: 1.3rem; margin-bottom: 40px; line-height: 1.6; }
.cta-button { display: inline-block; padding: 18px 50px; background: linear-gradient(135deg, #d4af37, #f4d03f); color: #1a1a1a; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5); }
section { padding: 100px 20px; }
.container { max-width: 1200px; margin: 0 auto; }
.section-title { text-align: center; font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; }
.section-subtitle { text-align: center; font-size: 1.2rem; color: #666; margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }
/* 10px dulu kerana .section-arrow menindih ke bawah dengan margin -80px.
   Anak panah sudah dibuang, jadi subtitle perlukan jarak sebenar semula. */
#country-selection .section-subtitle { margin-bottom: 36px; }

/* TIDAK DIGUNAKAN sejak 14 Sep 2026. Anak panah bercabang tiga ini dilukis
   untuk mengarah ke tiga kad kawasan; pemilih negara cuma ada satu medan.
   Peraturan dikekalkan supaya ia mudah dipulihkan: masukkan semula
   <div class="section-arrow"><img src="/assets/icon/icon-arrow.webp" alt=""
   aria-hidden="true" class="section-arrow-img"></div> selepas .section-subtitle,
   dan kembalikan margin-bottom subtitle kepada 10px / 8px. */
.section-arrow {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin: 0 0 -80px;
    pointer-events: none;
}

.section-arrow-img {
    width: 250px;
    height: auto;
    opacity: 0.85;
}

.country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }
.country-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s; border: 3px solid transparent; }
.country-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.country-card.selected { border-color: #d4af37; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); }
.country-card img { width: 100%; height: 200px; object-fit: cover; }
.country-info { padding: 20px; }
.country-info h3 { font-size: 1.5rem; margin-bottom: 10px; }
.country-info p { color: #666; font-size: 0.95rem; }
.travel-form {
    background: #ffffff;
    padding: 48px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Date fields — side by side */
.form-dates-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Trip duration display */
.trip-duration-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #fffbf0, #fff8e1);
    border: 1.5px solid rgba(212,175,55,0.35);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 4px;
    animation: td-fadein 0.3s ease;
}

@keyframes td-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.trip-duration-icon { font-size: 1rem; flex-shrink: 0; }

.trip-duration-text {
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
}

.trip-duration-text strong {
    color: #c9922a;
    font-size: 1rem;
    font-weight: 700;
}

.form-group { margin-bottom: 28px; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #1a1a1a;
}

.form-group input {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #1a1a1a;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #d4af37;
}
.radio-group { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }

/* .radio-option meregang ikut baris (align-items lalai), tetapi <label> di
   dalamnya tidak, jadi kad dengan sarikata dua baris nampak lebih tinggi
   daripada jirannya. Jadikan option itu bekas flex dan suruh label mengisi,
   supaya semua kad dalam baris sama tinggi tanpa perlu menala panjang teks. */
.radio-option { flex: 1; min-width: 150px; display: flex; }
.radio-option label { flex: 1; }
.radio-option input[type="radio"] { display: none; }

/* Radio icon */
.radio-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px;
    flex-shrink: 0;
    transition: filter 0.3s;
}

.radio-option input[type="radio"]:checked + label .radio-icon {
    filter: none;
}

/* Radio option labels — dark form version */
.radio-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 12px 16px !important;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-wrap: break-word;
    min-height: 50px;
    background: #ffffff;
    color: #1a1a1a;
}

.radio-option label span {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.radio-option label small {
    font-size: 0.65rem;
    font-weight: 400;
    color: #888;
    display: block;
}

.radio-option input[type="radio"]:checked + label small {
    color: rgba(26,26,26,0.6);
}

.radio-option label:hover {
    border-color: #d4af37;
    background: #fffbf0;
}

.radio-option input[type="radio"]:checked + label {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    border-color: #d4af37;
    color: #1a1a1a;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(212,175,55,0.35);
}

.submit-button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e06b 50%, #c9922a 100%);
    color: #1a1a1a;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    margin-top: 8px;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212,175,55,0.45);
}
#pricing { background: #f8f8f8; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 50px; }

/* Selection Summary Styling */
.selection-summary {
padding: 30px 0 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.summary-card {
background: white;
border-radius: 15px;
padding: 25px 30px;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1);
border: 2px solid #D4AF37;
max-width: 900px;
margin: 0 auto;
}

.summary-title {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
color: #2c3e50;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}

.summary-title i {
color: #D4AF37;
font-size: 1.4rem;
}

.summary-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.summary-item {
display: flex;
flex-direction: column;
gap: 5px;
}

.summary-label {
font-size: 0.85rem;
color: #7f8c8d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.summary-value {
font-size: 1.1rem;
color: #2c3e50;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}

/* Responsive untuk mobile */
@media (max-width: 768px) {
.selection-summary {
padding: 20px 0 15px;
}

.summary-card {
padding: 20px;
border-radius: 12px;
}

.summary-title {
font-size: 1.1rem;
margin-bottom: 15px;
}

.summary-details {
grid-template-columns: 1fr;
gap: 15px;
}

.summary-label {
font-size: 0.75rem;
}

.summary-value {
font-size: 1rem;
}
}

/* ==================================== */
/* PRICING CARD - FULL CENTER ALIGN (ALL DEVICES) */
/* ==================================== */
.pricing-card {
background: white;
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.08);
transition: all 0.3s;
border: 2px solid #e0e0e0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;        /* Center semua anak */
text-align: center;         /* Center teks */
padding: 20px 15px;
justify-content: space-between;
}

.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.pricing-card.featured {
border-color: #f4d03f;
box-shadow: 0 5px 25px rgba(212, 175, 55, 0.25); /* Gold shadow */
}

.pricing-card.featured:hover {
box-shadow: 0 12px 40px rgba(212, 175, 55, 0.35);
transform: translateY(-8px);
}

/* ==================================== */
/* PLATINUM CARD - BLUE GRADIENT SHADOW */
/* ==================================== */
.pricing-card.platinum {
position: relative;
overflow: visible;
z-index: 0;
}

.pricing-card.platinum::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 15px;
background: white;
z-index: -1;
box-shadow: 0 5px 25px rgba(30, 144, 255, 0.3);
filter: drop-shadow(0 5px 25px rgba(30, 144, 255, 0.3));
opacity: 0.8;
transition: all 0.3s;
}

.pricing-card.platinum:hover::before {
box-shadow: 0 12px 40px rgba(30, 144, 255, 0.45);
transform: translateY(-3px);
}

/* Suggested Badge - Center atas */
.suggested-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #d4af37, #f4d03f);
color: white;
padding: 6px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 1;
}

/* Badge untuk Platinum - Warna berbeza */
.pricing-card .suggested-badge:nth-of-type(2),
.pricing-card:nth-child(3) .suggested-badge {
background: linear-gradient(135deg, #1e90ff, #00bfff); /* Biru cantik */
color: white;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Plan Header */
.plan-header {
width: 100%;
padding: 25px 15px 20px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
}

.plan-name {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 12px;
color: #1a1a1a;
}

.plan-price {
display: flex;
justify-content: center;
align-items: baseline;
gap: 6px;
}

.plan-price .currency {
font-size: 1.1rem;
color: #666;
font-weight: 500;
}

.plan-price .amount {
font-size: 2.4rem;
font-weight: 700;
color: #d4af37;
}

/* Benefits */
.plan-benefits {
width: 100%;
padding: 20px 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 10px;
}

.benefit-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f5f5f5;
width: 100%;
max-width: 260px;
margin: 0 auto;
}

.benefit-item:last-child {
border-bottom: none;
}

.benefit-label {
font-size: 0.92rem;
color: #444;
text-align: left;
flex: 1;
}

.benefit-value {
font-size: 0.95rem;
font-weight: 700;
color: #d4af37;
text-align: right;
white-space: nowrap;
min-width: 80px;
}

/* Choose Plan Button */
.choose-plan-btn {
width: 80%;
max-width: 220px;
margin: 20px auto 15px;
padding: 14px;
background: #1a1a1a;
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
font-family: 'Poppins', sans-serif;
}

.choose-plan-btn:hover {
background: #333;
transform: translateY(-2px);
}

.pricing-card.featured .choose-plan-btn {
background: linear-gradient(135deg, #d4af37, #f4d03f);
color: #1a1a1a;
}

/* PLATINUM BUTTON - BIRU */
.platinum-btn {
background: linear-gradient(135deg, #1e90ff, #00bfff) !important;
color: white !important;
font-weight: 700;
}

.platinum-btn:hover {
background: linear-gradient(135deg, #1c86ee, #009ed6) !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 144, 255, 0.4);
}

.view-comparison { text-align: center; margin-top: 40px; }
.comparison-btn { padding: 15px 40px; background: white; border: 2px solid #1a1a1a; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: 'Poppins', sans-serif; }
.comparison-btn:hover { background: #1a1a1a; color: white; }
#comparison { background: #fff; padding: 80px 20px; }
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 30px; border: 1px solid #e0e0e0; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.comparison-table thead th { background: #1a1a1a; color: white; padding: 20px 15px; font-weight: 600; text-align: center; }
.comparison-table thead th.gold-header { background: linear-gradient(135deg, #d4af37, #f4d03f); color: #1a1a1a; }
.comparison-table tbody tr:nth-child(even) { background: #fafafa; }
.comparison-table tbody tr:hover { background: #f0f0f0; }
.comparison-table td { padding: 15px; border: 1px solid #e0e0e0; font-size: 0.9rem; }

.comparison-table .benefit-name { 
    font-weight: 600; 
    background: #f8f8f8; 
    text-align: left; 
    color: #1a1a1a !important; /* HITAM TEBAL */
    }
.comparison-table td:not(.benefit-name) {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    }
.comparison-table .not-covered { color: #dc3545; text-align: center; }
.comparison-table .covered { color: #28a745; text-align: center; }
.download-comparison { text-align: center; margin-top: 40px; }
.download-btn-comparison { display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #d4af37, #f4d03f); color: #1a1a1a; text-decoration: none; border-radius: 10px; font-weight: 600; transition: all 0.3s; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; }
.download-btn-comparison:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); }
.addons-section { margin-top: 60px; padding-top: 60px; border-top: 2px solid #e0e0e0; }
.addons-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 30px; }
.addon-card { background: white; border-radius: 15px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 2px solid #e0e0e0; transition: all 0.3s; }
.addon-card:hover { border-color: #d4af37; box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2); }
.addon-info { display: flex; gap: 20px; flex: 1; }
.addon-icon { font-size: 2.5rem; min-width: 50px; }
.addon-content h4 { font-size: 1.2rem; margin-bottom: 8px; }
.addon-content p { color: #666; font-size: 0.9rem; line-height: 1.5; margin-bottom: 5px; }
.addon-note { font-size: 0.85rem; color: #999; font-style: italic; }
.addon-price { font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.highlights { background: #fff; padding: 80px 0; }
.highlights .container { max-width: 100%; padding: 0 10%; }
.highlights-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 50px; }
.highlight-item { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border: 1px solid #f0f0f0; text-align: center; }
/* Ilustrasi penuh, bukan emoji. Bulatan emas dibuang: seni ini persegi dan
   penuh warna, bulatan akan mengerat penjuru dan emas berlanggar dengan biru.
   120px ialah saiz terkecil yang ilustrasi ini masih boleh dicam; pada 60px
   ia jadi lumpur. width:100% supaya ia mengecut bila lajur lebih sempit
   daripada 120px (viewport ~1024px) dan tidak melimpah. */
.highlight-icon { display: block; width: 100%; max-width: 120px; height: auto; margin: 0 auto 16px; }
.highlight-item h4 { font-size: 1.3rem; margin-bottom: 10px; }
/* Kad kini boleh ditekan. Isyarat mesti nampak tanpa hover juga,
   sebab pengguna telefon tiada hover langsung. Sebab tu ada .highlight-more. */
.highlight-item { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.highlight-item:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.13); }
.highlight-item:focus-visible { outline: 3px solid #0B57C4; outline-offset: 3px; }
.highlight-more { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600; color: #0B57C4; }
.highlight-item:hover .highlight-more { text-decoration: underline; }

/* Badan modal butiran */
#highlightModal .highlight-modal { text-align: left; max-width: 560px; }
#highlightModal .modal-header { text-align: center; }
#highlightModal .modal-header h2 { padding: 0 34px; line-height: 1.35; }
#highlightModal .hl-block { margin-bottom: 16px; }
#highlightModal .hl-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0B57C4; margin-bottom: 5px; }
#highlightModal .hl-block p { font-size: .92rem; line-height: 1.6; color: #333; }
#highlightModal .hl-block ul { margin: 0; padding-left: 20px; list-style: disc; }
#highlightModal .hl-block li { font-size: .9rem; line-height: 1.6; color: #333; margin-bottom: 7px; text-align: left; }
#highlightModal .hl-block--beza { background: #EEF5FE; border-left: 3px solid #0078F0; border-radius: 6px; padding: 12px 14px; }
#highlightModal .hl-note { font-size: .76rem; line-height: 1.5; color: #777; border-top: 1px solid #eee; padding-top: 12px; margin-top: 4px; }
#highlightModal .modal-header { background: linear-gradient(135deg, #073A9E 0%, #0A55C8 50%, #0060E4 100%); }
#highlightModal .modal-header h2 { color: #fff; }
#highlightModal .modal-header p { color: rgba(255,255,255,0.88); }
#highlightModal .modal-close { background: rgba(255,255,255,0.22); color: #fff; }
#highlightModal .modal-close:hover { background: rgba(255,255,255,0.4); }
.highlight-item p { color: #666; line-height: 1.6; }
.download-section { text-align: center; margin-top: 60px; }

.download-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 20px;
}

.download-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    transition: all 0.25s ease;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.download-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.download-btn--etiqa  { border-color: rgba(245,166,35,0.4); }
.download-btn--etiqa:hover  { border-color: #F5A623; box-shadow: 0 8px 20px rgba(245,166,35,0.2); }

.download-btn--zurich { border-color: rgba(0,55,129,0.3); }
.download-btn--zurich:hover { border-color: #003781; box-shadow: 0 8px 20px rgba(0,55,129,0.15); }

.download-btn--ikhlas { border-color: rgba(30,108,69,0.3); }
.download-btn--ikhlas:hover { border-color: #1E6C45; box-shadow: 0 8px 20px rgba(30,108,69,0.15); }
.hidden { display: none; }

/* Loading Spinner for PDF Generation */
.pdf-loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 30px 40px;
    border-radius: 15px;
    z-index: 10000;
    text-align: center;
}

.pdf-loading.active {
    display: block;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #d4af37;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

/* ===== POPUP MODAL STYLING ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* ---- Addon Modal — synced with travel-form design ---- */
.addon-modal {
    background: #ffffff;
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease;
    position: relative;
    text-align: center;
}

/* Header — gold gradient strip */
.modal-header {
    padding: 22px 24px 18px;
    background: linear-gradient(135deg, #c9922a 0%, #e8be5a 40%, #f4d06f 70%, #b8860b 100%);
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.modal-header h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.modal-header p {
    font-size: 0.78rem;
    color: rgba(30,20,0,0.7);
    font-weight: 500;
}

/* Close button */
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.35);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
}

.modal-close:hover {
    background: rgba(255,255,255,0.6);
    transform: rotate(90deg);
}

/* Body */
.modal-body {
    padding: 20px 20px 24px;
}

/* Selected plan info — matching form label style */
.selected-plan-info {
    background: #f8f4e6;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 18px;
    border: 1px solid rgba(212,175,55,0.3);
    text-align: center;
}

.selected-plan-info h3 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.selected-plan-info .plan-details {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.5;
}

/* Add-ons section heading — matching form label */
.addons-selection {
    margin-bottom: 18px;
}

.addons-selection h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(212,175,55,0.9);
    margin-bottom: 12px;
}

/* Addon option cards — matching radio-option style */
.addon-option {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.addon-option:hover {
    border-color: #d4af37;
    background: #fffbf0;
}

.addon-option.selected {
    border-color: #d4af37;
    background: #fffbf0;
    box-shadow: 0 4px 14px rgba(212,175,55,0.2);
}

.addon-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #d4af37;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    flex-shrink: 0;
}

.addon-option.selected .addon-checkbox {
    background: #d4af37;
}

.addon-checkbox::after {
    content: '✓';
    color: white;
    font-weight: 700;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s;
}

.addon-option.selected .addon-checkbox::after {
    opacity: 1;
}

.addon-details { flex: 1; }

.addon-details h4 {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 3px;
    color: #1a1a1a;
    line-height: 1.3;
}

.addon-details p {
    font-size: 0.72rem;
    color: #777;
    line-height: 1.45;
    margin: 0;
}

.addon-price-tag {
    font-size: 0.88rem;
    font-weight: 700;
    color: #d4af37;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Total price — dark bar */
/* Baris caj tetap (duti setem) tepat di atas jalur jumlah dalam modal
   add-on. Modal berlatar cerah, jadi krim dan teks gelap. Ia sengaja
   tidak nampak seperti .addon-option kerana ia tidak boleh dipilih. */
.charge-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f8f4e6;
    border: 1px solid #e8dfc4;
}

.charge-row-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a4a4a;
    text-align: left;
}

.charge-row-label small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #8a8a8a;
    margin-top: 2px;
}

.charge-row-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
}

/* Nota caj bawah grid banding. #pricing berlatar #f8f8f8, jadi teks
   kena gelap. Padan dengan .comp-tier-note (#888). */
.comp-charges-note {
    margin: 4px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #777;
}

@media (max-width: 640px) {
    .charge-row { padding: 9px 13px; }
    .charge-row-label { font-size: 0.74rem; }
    .charge-row-label small { font-size: 0.64rem; }
    .charge-row-val { font-size: 0.86rem; }
    .comp-charges-note { font-size: 0.72rem; }
}

.total-price-section {
    background: #1a1a1a;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-price-section h3 {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.total-price-section .price {
    font-size: 1.3rem;
    font-weight: 800;
    color: #d4af37;
}

/* Action buttons — matching submit-button style */
.modal-actions {
    display: flex;
    gap: 10px;
}

.btn-skip {
    flex: 1;
    padding: 12px;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.btn-skip:hover {
    background: #e0e0e0;
}

.btn-proceed-whatsapp {
    flex: 2;
    padding: 12px;
    background: linear-gradient(135deg, #d4af37 0%, #f4e06b 50%, #c9922a 100%);
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.02em;
}

.btn-proceed-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(212,175,55,0.4);
}

/* ========================================== */
/* CUSTOMER INFORMATION FORM MODAL STYLES */
/* ========================================== */

/* ---- Customer Form Modal — synced with travel-form design ---- */
.customer-form-modal {
    background: #ffffff;
    border-radius: 20px;
    max-width: 620px;
    width: 100%;
    /* dvh, bukan vh. Pada telefon, 100vh bermaksud tinggi skrin KETIKA bar
       alamat tersembunyi, jadi 95vh boleh melebihi kawasan yang benar-benar
       kelihatan. Modal jadi lebih tinggi daripada skrin, hujungnya jatuh
       keluar pandangan, dan butang tindakan di situ nampak macam hilang.
       Baris vh dikekalkan sebagai sandaran untuk browser lama. */
    max-height: 95vh;
    max-height: 95dvh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease;
    position: relative;
}

/* Header — gold gradient, matching addon modal */
.customer-form-header {
    background: linear-gradient(135deg, #c9922a 0%, #e8be5a 40%, #f4d06f 70%, #b8860b 100%);
    border-radius: 20px 20px 0 0;
    padding: 20px 24px 16px;
    text-align: center;
}

.customer-form-header h2 {
    font-size: 1.0rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.customer-form-header p {
    font-size: 0.75rem;
    color: rgba(30,20,0,0.7);
    font-weight: 500;
}

/* Body */
.customer-form-body {
    padding: 18px 18px 22px;
}

/* Order Summary — compact gold card */
.order-summary {
    background: linear-gradient(135deg, #f8f4e6 0%, #fff8e1 100%);
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 1.5px solid rgba(212,175,55,0.4);
}

.order-summary h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(212,175,55,0.9);
    margin-bottom: 10px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 0.78rem;
    color: #555;
    border-bottom: 1px dashed rgba(212,175,55,0.25);
}

.summary-row:last-child { border-bottom: none; }

.summary-row.total {
    border-top: 1.5px solid #d4af37;
    border-bottom: none;
    margin-top: 8px;
    padding-top: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1a1a1a;
}

.summary-row.total span:last-child { color: #d4af37; }

/* Customer Info Form */
.customer-info-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Form section — matching travel-form card */
.form-section {
    background: #fafafa;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border: 1px solid #ebebeb;
}

/* Section title — matching form label style */
.form-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(212,175,55,0.9);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-section-desc {
    font-size: 0.7rem;
    color: #999;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Hibah section accent */
.hibah-section {
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f4ff 100%);
    border-color: #b8d4e8;
}

.hibah-section .form-section-title { color: #2c5aa0; }

/* Form rows */
.form-row { margin-bottom: 12px; }
.form-row:last-child { margin-bottom: 0; }

.form-row.two-col {
    display: grid;
    /* minmax(0, 1fr), bukan 1fr. `1fr` bermaksud minmax(auto, 1fr), dan
       `auto` di situ bermakna trek TIDAK boleh mengecut di bawah lebar
       min-content kandungannya. Satu placeholder panjang seperti
       "Cth: 050101-01-1234 atau B.C. No" menolak treknya melebihi bahagian
       yang sepatutnya, dan baris itu melimpah keluar dengan senyap.
       Ia tidak kelihatan sebagai skrol halaman kerana modal menatal sendiri. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.form-field { display: flex; flex-direction: column; }

/* Field labels — matching form labels */
.form-field label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 5px;
}

.form-field label .required { color: #e74c3c; }

/* Inputs — matching travel-form inputs */
.form-field input,
.form-field select,
.form-field textarea {
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
    background: #ffffff;
    color: #1a1a1a;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}

.form-field input::placeholder,
.form-field select::placeholder,
.form-field textarea::placeholder { color: #bbb; font-size: 0.82rem; }

/* Select TIDAK boleh bergantung pada rupa lalainya.
   Setiap browser beri <select> tinggi, fon dan padding sendiri, jadi satu
   dropdown di tengah lajur input nampak lebih pendek dan fonnya lebih besar.
   Itu yang berlaku pada HUBUNGAN dalam borang pewaris.

   appearance:none buang rupa itu sepenuhnya; anak panah dilukis semula
   sebagai dua kecerunan supaya sama pada semua browser. */
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.5;
    cursor: pointer;
    padding-right: 34px;
    background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* Pilihan kosong dipudarkan macam placeholder input, supaya "-- Pilih --"
   tak nampak macam jawapan yang dah diisi. */
.form-field select:invalid { color: #bbb; }

.form-field textarea { resize: vertical; min-height: 60px; }

.field-error {
    font-size: 0.68rem;
    color: #e74c3c;
    margin-top: 4px;
    display: none;
}

.field-error.show { display: block; }

.field-hint {
    font-size: 0.68rem;
    color: #999;
    margin-top: 4px;
    line-height: 1.4;
}

/* Percentage input */
.percentage-input-wrapper { position: relative; display: flex; align-items: center; }
.percentage-input-wrapper input { padding-right: 36px; width: 100%; }
.percentage-suffix { position: absolute; right: 12px; font-weight: 600; font-size: 0.82rem; color: #888; pointer-events: none; }

/* Submit section */
/* Category display section */
.category-section {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid #ebebeb;
}

.category-display {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.5;
}

.change-category-link {
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
}

.change-category-link:hover { text-decoration: underline; }

/* Form subsection title */
.form-subsection-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin: 12px 0 8px;
}

.form-submit-section { margin-top: 12px; }

.form-agreement { margin-bottom: 16px; }

/* Custom Checkbox */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #555;
}

.checkbox-container input[type="checkbox"] { display: none; }

.checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #d4af37;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    background: white;
    margin-top: 2px;
    flex-shrink: 0;
}

.checkbox-container input:checked + .checkmark {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
}

.checkmark::after {
    content: '✓';
    color: white;
    font-weight: 700;
    font-size: 0.68rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.checkbox-container input:checked + .checkmark::after { opacity: 1; transform: scale(1); }

.agreement-text { color: #555; font-size: 0.75rem; }
.agreement-text a { color: #d4af37; text-decoration: underline; }
.agreement-text a:hover { color: #b8962e; }

/* Form action buttons — matching addon modal style */
/* Bar tindakan MELEKAT di bawah kotak menatal.
   Borang ni panjang: maklumat utama, ahli keluarga, pewaris, peratusan
   hibah. Dulu butang duduk di hujung aliran, jadi pada telefon pengguna
   kena zum keluar dan menatal semula untuk jumpa. Borang yang butangnya
   tak nampak terasa macam halaman tergantung, bukan macam borang panjang.

   Sticky melekat pada .customer-form-modal yang memang kotak menatal di
   sini, jadi butang sentiasa di tepi bawah modal tak kira panjang borang. */
.form-actions {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    /* Latar MESTI legap: medan borang menatal di belakangnya. */
    background: #ffffff;
    /* Berdarah ke tepi supaya latar menutup lebar penuh, bukan hanya
       kawasan dalam padding badan borang. */
    margin: 14px -18px -22px;
    padding: 12px 18px 16px;
    border-top: 1px solid #ececec;
    box-shadow: 0 -6px 14px rgba(0,0,0,0.05);
}

.btn-back {
    flex: 1;
    padding: 11px 14px;
    background: #f0f0f0;
    color: #555;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.btn-back:hover { background: #e0e0e0; }

.btn-whatsapp-final {
    flex: 2;
    padding: 11px 16px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0.02em;
}

.btn-whatsapp-final:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,211,102,0.38);
}

.btn-whatsapp-final:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Input validation states */
.form-field input.valid,
.form-field select.valid,
.form-field textarea.valid {
    border-color: #28a745;
}

.form-field input.invalid,
.form-field select.invalid,
.form-field textarea.invalid {
    border-color: #e74c3c;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== MEDIA QUERIES - MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    .hero p {
        font-size: 0.9rem;
    }
    .section-title {
        font-size: 1.6rem;
    }
    .section-subtitle {
        font-size: 1rem;
    }
    #country-selection {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 1px;
        padding-right: 1px;
    }

    .section-arrow-img { width: 120px; }
    #country-selection .section-subtitle { margin-bottom: 22px; }
    .section-arrow { margin: 0 0 -20px; }

    /* Force 3 country cards in 1 row on mobile */
    .country-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 24px;
    }

    .country-card img {
        height: 80px;
    }

    .country-info {
        padding: 10px 8px;
    }

    .country-info h3 {
        font-size: 0.68rem;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .country-info p {
        font-size: 0.58rem;
        line-height: 1.4;
    }
    #travel-info {
        padding-left: 4px;
        padding-right: 4px;
    }

    .trip-duration-display {
        padding: 8px 12px;
        justify-content: center;
        text-align: center;
    }

    .trip-duration-text { font-size: 0.75rem; }
    .trip-duration-text strong { font-size: 0.88rem; }

    .travel-form {
        padding: 20px 12px;
        border-radius: 12px;
    }

    .form-dates-row {
        gap: 8px;
    }

    .form-group {
        margin-bottom: 14px;
    }

    .form-group label {
        font-size: 0.72rem;
        margin-bottom: 6px;
    }

    .form-group input {
        font-size: 0.8rem;
        padding: 10px 10px;
    }
    .radio-option {
        flex: 1 1 45% !important;
        min-width: 0 !important;
    }

    .radio-option label {
        font-size: 0.7rem !important;
        padding: 8px 6px !important;
        min-height: 56px !important;
        line-height: 1.3 !important;
    }

    .radio-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 4px;
    }

    .radio-option label span { font-size: 0.68rem; }
    .radio-option label small { font-size: 0.58rem; }

    .submit-button {
        padding: 13px;
        font-size: 0.9rem;
    }

.plan-name {
        font-size: 1.3rem;
    }
    .plan-price .amount {
        font-size: 1.8rem;
    }
    .benefit-label, .benefit-value {
        font-size: 0.8rem;
    }
    .addon-content h4 {
        font-size: 1.1rem;
    }
    .addon-content p {
        font-size: 0.85rem;
    }
    .addon-price {
        font-size: 1.3rem;
    }
    .highlights {
        padding-left: 0;
        padding-right: 0;
    }

    .highlights .container {
        max-width: 100%;
        padding: 0 5%;
    }

    /* 3 columns × 5 rows = 15 items on mobile */
    .highlights-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 24px;
    }

    .highlight-item {
        padding: 12px 8px;
        border-radius: 10px;
    }

    .highlight-icon {
        width: 100%;
        max-width: 110px;
        height: auto;
        margin-bottom: 6px;
    }

    .highlight-item h4 {
        font-size: 0.62rem;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .highlight-item p {
        font-size: 0.55rem;
        line-height: 1.4;
    }

/* Pricing Grid - Vertical Stack */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 2rem 1rem;
        padding: 0 15px;
        margin-top: 30px;
    }

.pricing-card {
        max-width: 100%;
        margin: 0 auto;
        padding: 1.8rem 1.3rem !important;                   /* Lebih padat & selesa jari tekan */
        border-radius: 16px;
    }

.plan-header {
        padding: 20px 15px 15px;
    }

.plan-name {
font-size: 1.45rem !important;
}

.plan-price .amount {
font-size: 2.4rem !important;
}

.plan-price .currency {
font-size: 1rem;
}

.plan-benefits {
        padding: 15px;
    }

.benefit-item {
padding: 10px 0 !important;
max-width: 100% !important;
}

.benefit-label {
font-size: 0.94rem !important;
}

.benefit-value {
font-size: 0.96rem !important;
}
.benefit-label-sm {
font-size: 0.55rem !important;   /* KECIL GILA */
line-height: 1.25 !important;
padding: 5px 6px !important;
}

.choose-plan-btn {
width: 90% !important;
max-width: none !important;
padding: 16px !important;
font-size: 1.05rem !important;
}

.suggested-badge {
font-size: 0.78rem !important;
padding: 5px 18px !important;
top: -10px;
}

/* Addon Cards Mobile */
    .addon-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

.addon-info {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

.addon-icon {
        font-size: 3rem;
    }

.addon-content h4 {
        font-size: 1.15rem;
        margin-bottom: 10px;
    }

.addon-content p {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .addon-price {
        font-size: 1.5rem;
    }
    
    /* Mobile Scroll Hint */
    .mobile-scroll-hint {
        margin-top: 15px;
        color: #d4af37;
        font-weight: 700;
    }
    

/* ===== COMPARISON TABLE MOBILE - CRITICAL FIX ===== */
.table-wrapper {
margin-top: 20px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
background: white;
overflow-x: hidden !important; /* Pastikan tak scroll */
}

.comparison-table {
width: 100% !important;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.68rem;
background: white;
}

.comparison-table th,
.comparison-table td {
padding: 8px 6px;
text-align: center;
border: 1px solid #e0e0e0;
word-wrap: break-word;
hyphens: auto;
line-height: 1.3;
}

.comparison-table thead th {
background: #1a1a1a;
color: white;
font-weight: 600;
font-size: 0.7rem;
position: sticky;
top: 0;
z-index: 10;
}

.comparison-table thead th.gold-header {
background: linear-gradient(135deg, #d4af37, #f4d03f);
color: #1a1a1a;
}

.comparison-table .benefit-name {
background: #f8f8f8;
text-align: left;
font-weight: 600;
font-size: 0.65rem;
width: 38%;
position: sticky;
left: 0;
z-index: 9;
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.comparison-table tbody tr:nth-child(even) {
background: #fafafa;
}

.comparison-table tbody tr:hover {
background: #f0f8ff;
}

.comparison-table .covered { 
color: #28a745; 
font-weight: bold; 
font-size: 0.8rem;
}
.comparison-table .not-covered { 
color: #dc3545; 
font-weight: bold; 
font-size: 0.8rem;
}

/* Sticky Classes */
.sticky-top { position: sticky; top: 0; z-index: 10; }
.sticky-left { position: sticky; left: 0; z-index: 9; }

/* Mobile Hint */
.mobile-scroll-hint {
display: none;
text-align: center;
padding: 10px;
background: #fff8e1;
color: #d4af37;
font-weight: 600;
font-size: 0.8rem;
border-radius: 8px;
margin-bottom: 15px;
}

/* MOBILE OPTIMIZED - NO SCROLL */
@media (max-width: 768px) {
.mobile-scroll-hint {
display: block;
}

.comparison-table {
font-size: 0.48rem;
}

.comparison-table th,
.comparison-table td {
padding: 6px 4px;
font-size: 0.48rem;
}

.comparison-table .benefit-name {
font-size: 0.48rem;
line-height: 1.3;
width: 40%;
}

.comparison-table thead th {
font-size: 0.48rem;
padding: 8px 4px;
}

/* Pastikan tak scroll */
.table-wrapper,
#comparison .container {
overflow-x: hidden !important;
}
}

@media (max-width: 480px) {
.comparison-table {
font-size: 0.48rem;
}

.comparison-table th,
.comparison-table td {
padding: 5px 3px;
}

.comparison-table .benefit-name {
font-size: 0.48rem;
}

.comparison-table thead th {
font-size: 0.48rem;
}
}

/* Modal Mobile */
    .addon-modal {
        max-width: 96%;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 16px;
    }

    .modal-header {
        padding: 16px 16px 14px;
        border-radius: 16px 16px 0 0;
    }

    .modal-header h2 {
        font-size: 0.9rem;
    }

    .modal-header p {
        font-size: 0.7rem;
    }

    .modal-body {
        padding: 14px 14px 18px;
    }

    .selected-plan-info {
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .selected-plan-info h3 {
        font-size: 0.75rem;
    }

    .addons-selection h3 {
        font-size: 0.65rem;
    }

    .addon-option {
        padding: 11px 12px;
        margin-bottom: 8px;
    }

    .addon-details h4 {
        font-size: 0.75rem;
    }

    .addon-details p {
        font-size: 0.65rem;
    }

    .addon-price-tag {
        font-size: 0.8rem;
    }

    .total-price-section {
        padding: 11px 14px;
        margin-bottom: 12px;
    }

    .total-price-section h3 {
        font-size: 0.68rem;
    }

    .total-price-section .price {
        font-size: 1.1rem;
    }

    .modal-actions {
        gap: 8px;
    }

    .btn-skip, .btn-proceed-whatsapp {
        padding: 11px;
        font-size: 0.78rem;
    }

/* ===== CUSTOMER FORM MODAL MOBILE ===== */
/* Selaras dengan .addon-modal. Dua modal pada halaman yang sama dengan had
   tinggi berbeza bermakna satu terapung elok dan satu lagi meregang sampai
   tepi skrin, dan pengguna nampak itu sebagai saiz yang tidak konsisten.
   dvh juga: peraturan asas sudah dibetulkan tetapi baris ini membatalkannya
   semula pada telefon. */
.customer-form-modal {
    max-width: 96%;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: 16px;
}

.customer-form-header {
    padding: 16px 16px 12px;
    border-radius: 16px 16px 0 0;
}

.customer-form-header h2 { font-size: 0.88rem; }
.customer-form-header p  { font-size: 0.68rem; }

.customer-form-body { padding: 14px 12px 18px; }

.order-summary {
    padding: 10px 12px;
    margin-bottom: 12px;
}

.order-summary h4  { font-size: 0.65rem; margin-bottom: 7px; }
.summary-row       { font-size: 0.72rem; padding: 4px 0; }
.summary-row.total { font-size: 0.8rem; padding-top: 8px; }

.form-section {
    padding: 11px 12px;
    margin-bottom: 10px;
}

.form-section-title { font-size: 0.65rem; }
.form-section-desc  { font-size: 0.63rem; margin-bottom: 10px; }

.form-row { margin-bottom: 8px; }

/* KEKAL dua lajur pada telefon. Baris ini hanya memegang medan pendek:
   nombor IC, telefon, emel, hubungan. Pada 390px setiap lajur ~180px, dan
   nombor IC 12 digit hanya ~95px lebar, jadi ia muat dengan selesa.

   Meruntuhkannya jadi satu lajur menggandakan tinggi LIMA baris sekali gus,
   dan itu sebab besar borang ni menjulur jauh ke bawah skrin. */
.form-row.two-col {
    gap: 8px;
}

.form-field label {
    font-size: 0.63rem;
    margin-bottom: 3px;
}

.form-field input,
.form-field select,
.form-field textarea {
    padding: 8px 10px;
    font-size: 0.8rem;
    border-radius: 7px;
}

.field-error { font-size: 0.62rem; }
.field-hint  { font-size: 0.62rem; }

/* Telefon sangat sempit sahaja. Di bawah lebar ini dua lajur memaksa label
   berbalut tiga baris, jadi tiada apa yang dijimatkan. */
@media (max-width: 359px) {
    .form-row.two-col { grid-template-columns: 1fr; }
}

.form-submit-section { margin-top: 10px; }
.form-agreement      { margin-bottom: 12px; }

.category-section     { padding: 8px 10px; margin-bottom: 10px; }
.category-display     { font-size: 0.72rem; }
.change-category-link { font-size: 0.68rem; }
.form-subsection-title { font-size: 0.62rem; margin: 8px 0 6px; }

.form-field textarea  { min-height: 48px; }
.percentage-suffix    { font-size: 0.75rem; right: 10px; }

.checkbox-container { font-size: 0.68rem; gap: 8px; }
.agreement-text     { font-size: 0.68rem; }

.checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.checkmark::after { font-size: 0.6rem; }

/* Padding badan borang mengecil pada telefon, jadi darah tepi bar tindakan
   kena ikut sama. Kalau tidak, jalur putih itu tidak sampai ke tepi dan
   medan borang kelihatan menyelinap di sisinya. */
.form-actions { gap: 8px; margin: 12px -12px -18px; padding: 10px 12px 14px; }

.btn-back {
    padding: 10px;
    font-size: 0.75rem;
}

.btn-whatsapp-final {
    padding: 10px;
    font-size: 0.75rem;
}

}

/* EXTRA SMALL MOBILE */
@media (max-width: 480px) {

    .plan-name {
        font-size: 2rem;
        text-align: center !important;
    }

    .plan-price .amount {
        font-size: 1.8rem;
    }

    .benefit-label {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .benefit-value {
        font-size: 0.95rem;
        padding: 3px 10px;
    }

    .choose-plan-btn {
        padding: 14px;
        font-size: 1rem;
    }

    /* Customer Form Extra Small */
    /* 98vh dahulu bermakna modal menyentuh kedua-dua tepi skrin. Pada
       telefon `vh` merujuk tinggi KETIKA bar alamat tersembunyi, jadi 98vh
       sebenarnya MELEBIHI kawasan yang kelihatan. 88dvh sama dengan modal
       add-on, dan padding 20px pada overlay memberi jurang yang kelihatan
       di atas dan bawah. Modal terapung, bukan melekat pada bingkai. */
    .customer-form-modal {
        max-height: 88vh;
        max-height: 88dvh;
    }

    .customer-form-header h2 {
        font-size: 1.2rem;
    }

    .form-section-title {
        font-size: 0.95rem;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

/* =============================================
   PEMILIH NEGARA
   Menggantikan tiga kad kawasan. Kad lama sembunyikan fakta bahawa
   setiap syarikat ada senarai Asia sendiri, jadi pelanggan tekan
   "Asia Terpilih" untuk Australia dan dapat harga Etiqa yang salah.
   ============================================= */

.country-picker {
    max-width: 560px;
    margin: 0 auto;
}

.country-picker-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 8px;
}

.country-picker-box { position: relative; }

#countryInput {
    width: 100%;
    padding: 15px 18px;
    font-size: 1rem;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    transition: border-color 0.2s;
}

#countryInput:focus {
    outline: none;
    border-color: #d4af37;
}

.country-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
}

.country-results li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.country-results li:hover { background: #f8f4e6; }

.country-name { font-weight: 600; color: #1a1a1a; }
.country-alt  { font-size: 0.8rem; color: #999; }

.country-picker-hint {
    margin: 10px 2px 0;
    font-size: 0.8rem;
    color: #888;
    text-align: left;
}

/* Kotak keputusan: kawasan setiap syarikat, bersebelahan */
.country-chosen {
    margin-top: 18px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8dfc4;
    border-radius: 12px;
    text-align: left;
}

.country-chosen-head {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.country-area-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid #f0ece0;
}

.country-co {
    font-size: 0.86rem;
    font-weight: 600;
    color: #555;
}

.country-area {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: right;
}

.country-area small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #999;
    margin-top: 1px;
}

.country-area--none { color: #c0392b; }

.country-warn {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #c0392b;
}

@media (max-width: 640px) {
    #countryInput { padding: 13px 15px; font-size: 0.95rem; }
    .country-results li { padding: 10px 11px; }
    .country-chosen { padding: 14px 15px; }
    .country-area-row { gap: 10px; }
    .country-co, .country-area { font-size: 0.8rem; }
}

/* =============================================
   COMPARISON GRID
   ============================================= */

.comparison-container {
    margin: 40px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ---- Tier row ---- */
.comp-tier {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.comp-tier-header {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
}

/* Silver — cool steel gradient */
.comp-tier--silver .comp-tier-header {
    background: linear-gradient(135deg, #b8c6db 0%, #f5f7fa 60%, #c9d6df 100%);
}

/* Gold — warm honey gradient */
.comp-tier--gold .comp-tier-header {
    background: linear-gradient(135deg, #c9922a 0%, #e8be5a 40%, #f4d06f 70%, #b8860b 100%);
}
.comp-tier--gold .comp-tier-label { color: #5a3e00; }
.comp-tier--gold .comp-tier-note  { color: rgba(90,62,0,0.65); }

/* Premium — deep blue-purple */
.comp-tier--premium .comp-tier-header {
    background: linear-gradient(135deg, #1a1a4e 0%, #3a3a8c 50%, #5b4eaa 100%);
}
.comp-tier--premium .comp-tier-label,
.comp-tier--premium .comp-tier-note { color: rgba(255,255,255,0.92); }

/* Elite — MUHAZU dark + lime */
.comp-tier--elite .comp-tier-header {
    background: linear-gradient(135deg, #0D0D0D 0%, #1a2a1a 50%, #0D0D0D 100%);
    border-bottom-color: rgba(204,240,69,0.2);
}
.comp-tier--elite .comp-tier-label { color: #CCF045; }
.comp-tier--elite .comp-tier-note  { color: rgba(204,240,69,0.6); }

.comp-tier-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    color: #ffffff;
}

/* Tier-specific badge colours */
.comp-tier--silver  .comp-tier-badge { background: rgba(0,0,0,0.12); color: #2a3a4a; }
.comp-tier--gold    .comp-tier-badge { background: rgba(90,62,0,0.2); color: #5a3e00; }
.comp-tier--premium .comp-tier-badge { background: rgba(255,255,255,0.15); color: #ffffff; }
.comp-tier--elite   .comp-tier-badge { background: rgba(204,240,69,0.15); color: #CCF045; }

.comp-tier-badge--gold {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    color: #1a1a1a;
}

.comp-tier-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.comp-tier-note {
    font-size: 0.75rem;
    color: #888;
    margin: 0;
    width: 100%;
    text-align: center;
}

/* ---- Cards row (3 columns) ---- */
.comp-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.comp-cards-row .comp-card:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.07);
}

/* ---- Individual company card ---- */
.comp-card {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}

.comp-card--na {
    justify-content: center;
    align-items: center;
    background: #fafafa;
}

.comp-card--na p {
    font-size: 0.8rem;
    color: #bbbbbb;
    text-align: center;
}

/* Company top bar */
.comp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Company logos */
.comp-logo {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.comp-logo--etiqa  { height: 28px; width: auto; max-width: 90px; }
.comp-logo--zurich { height: 26px; width: auto; max-width: 90px; }
.comp-logo--ikhlas { height: 32px; width: auto; max-width: 80px; }

/* Plan name badge (small pill next to logo) */
.comp-plan-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.comp-plan-badge--etiqa  { background: #fff3cd; color: #8a5f00; }
.comp-plan-badge--zurich { background: #e8f0ff; color: #003781; }
.comp-plan-badge--ikhlas { background: #e8f5e9; color: #2E7D32; }

/* Price */
.comp-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.comp-currency {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.comp-price {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
}

.comp-cover-note {
    font-size: 0.72rem;
    color: #888;
    margin-top: -6px;
}

/* Benefits list */
.comp-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    border-top: 1px solid rgba(0,0,0,0.07);
    padding-top: 12px;
    width: 100%;
}

.comp-benefits-list li {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.4;
    text-align: center;
}

.comp-benefits-list li strong {
    color: #1a1a1a;
}

.comp-check {
    color: #4CAF50;
    font-weight: 700;
    margin-right: 4px;
}

.comp-benefits-list li:has(.comp-check[data-cancel="Tidak Dilindungi"]) .comp-check {
    color: #e53935;
}

/* More benefits toggle button */
.comp-more-btn {
    background: none;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #888;
    cursor: pointer;
    transition: all 200ms ease;
    width: 100%;
    margin-top: 4px;
}

.comp-more-btn:hover {
    border-color: #d4af37;
    color: #c9922a;
    background: #fffbf0;
}

.comp-benefits-list--more {
    border-top: 1px dashed rgba(0,0,0,0.08);
    padding-top: 8px;
    margin-top: 4px;
}

/* CTA button — base */
.comp-cta-btn {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 200ms ease, color 200ms ease;
    margin-top: auto;
    width: 100%;
}

/* Company-specific CTA colours */
.comp-cta-btn--etiqa  { background: #F5A623; color: #1a1a1a; }
.comp-cta-btn--etiqa:hover  { background: #e0941a; }

.comp-cta-btn--zurich { background: #003781; color: #ffffff; }
.comp-cta-btn--zurich:hover { background: #002860; }

.comp-cta-btn--ikhlas { background: #1E6C45; color: #ffffff; }
.comp-cta-btn--ikhlas:hover { background: #165233; }

/* Company accent — left border + hover bg */
.comp-card--etiqa  { border-left: 3px solid #F5A623; }
.comp-card--zurich { border-left: 3px solid #003781; }
.comp-card--ikhlas { border-left: 3px solid #1E6C45; }

.comp-card--etiqa:hover  { background: #fffbf0; }
.comp-card--zurich:hover { background: #f8fbff; }
.comp-card--ikhlas:hover { background: #f8fff8; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .comp-cards-row {
        grid-template-columns: 1fr;
    }

    .comp-cards-row .comp-card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.07);
    }

    .comp-tier-header {
        padding: 14px 16px;
    }

    .comp-card {
        padding: 20px 16px;
    }

    .comp-price {
        font-size: 1.7rem;
    }
}

/* =============================================
   NOTA KELAYAKAN PLAN (borang) + KAD TIDAK LAYAK (grid banding)
   ============================================= */

.plan-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f4f8fc;
    border: 1.5px solid rgba(30,108,157,0.22);
    animation: td-fadein 0.3s ease;
}

.plan-note--warn {
    background: linear-gradient(135deg, #fff8f1, #fff3e6);
    border-color: rgba(214,124,26,0.35);
}

.plan-note-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: #1e6c9d;
}

.plan-note--warn .plan-note-icon { background: #d67c1a; }

.plan-note-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #4a4a4a;
}

.plan-note-text strong { color: #2b2b2b; font-weight: 700; }

/* ---- Banner amaran atas grid banding ---- */
.comp-alert {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8f1, #fff3e6);
    border: 1.5px solid rgba(214,124,26,0.35);
}

.comp-alert-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: #d67c1a;
}

.comp-alert-body { flex: 1 1 260px; min-width: 0; }

.comp-alert-body strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 4px;
}

.comp-alert-body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #5a5a5a;
}

.comp-alert-btn {
    flex-shrink: 0;
    padding: 11px 22px;
    border: none;
    border-radius: 9px;
    background: #d67c1a;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.comp-alert-btn:hover { background: #b96613; }

/* ---- Kad "tidak layak" dalam grid ---- */
.comp-card--na-info {
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    background: #fafafa;
}

.comp-card--na-info .comp-card-top { width: 100%; }

.comp-logo--muted { opacity: 0.4; filter: grayscale(1); }

.comp-na-badge {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    color: #8a8a8a;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.comp-na-plan {
    font-size: 0.85rem;
    font-weight: 600;
    color: #9a9a9a;
}

.comp-card--na-info .comp-na-reason {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #6e6e6e;
    text-align: center;
}

.comp-na-btn {
    margin-top: auto;
    padding: 10px 16px;
    border: 1.5px solid rgba(214,124,26,0.5);
    border-radius: 9px;
    background: #fff;
    color: #c06f14;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.comp-na-btn:hover { background: #d67c1a; color: #fff; border-color: #d67c1a; }

@media (hover: none) {
    .comp-alert-btn:hover { background: #d67c1a; }
    .comp-na-btn:hover { background: #fff; color: #c06f14; border-color: rgba(214,124,26,0.5); }
}

@media (max-width: 640px) {
    .comp-alert { padding: 16px; gap: 12px; }
    .comp-alert-btn { width: 100%; }
    .plan-note { padding: 11px 13px; }
    .plan-note-text { font-size: 0.8rem; }
}


/* Jalur pautan ke program agent affiliate (bawah halaman sebut harga). */
.agent-strip{max-width:1100px;margin:0 auto;padding:28px 20px 40px;text-align:center}
.agent-strip p{margin:0;font-size:.92rem;line-height:1.6;color:#6b6b6b}
.agent-strip a{color:#0B57C4;font-weight:600;text-decoration:none}
.agent-strip a:hover{text-decoration:underline}

/* ============================================= */
/* BORANG BERLANGKAH — travel                    */
/* Ditambah 23 Sep 2026. Semua peraturan di bawah */
/* baris ini, jadi tiada yang terperangkap dalam  */
/* @media yang sudah dibuka di atas.              */
/* ============================================= */

/* Atribut [hidden] kalah kepada display yang ditetapkan oleh kelas.
   Tanpa !important, mesej "tinggal lagi" yang sepatutnya tersembunyi
   kekal kelihatan. */
[hidden] { display: none !important; }

/* --- Jalur kemajuan --- */
.tf-chips {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    flex-wrap: wrap;
}

.tf-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0,0,0,0.45);
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.tf-chip-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tf-chip.is-active {
    border-color: #d4af37;
    background: #fffbf0;
    color: #1a1a1a;
}
.tf-chip.is-active .tf-chip-num { background: #d4af37; color: #1a1a1a; }

.tf-chip.is-done { border-color: rgba(30,140,80,0.35); color: #1e8c50; }
.tf-chip.is-done .tf-chip-num { background: #1e8c50; color: #fff; font-size: 0; }
/* Nombor ditukar kepada tanda betul tanpa menyentuh DOM, supaya JS hanya
   menguruskan keadaan dan CSS menguruskan rupa. */
.tf-chip.is-done .tf-chip-num::after { content: "\2713"; font-size: 0.72rem; }

/* --- Blok langkah --- */
.tf-step {
    padding: 18px 18px 4px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    background: rgba(0,0,0,0.015);
    transition: border-color 200ms ease, background 200ms ease, opacity 200ms ease;
}

.tf-step.is-active { border-color: #d4af37; background: #fffdf6; }
.tf-step.is-done   { border-color: rgba(30,140,80,0.30); background: rgba(30,140,80,0.03); }

/* Langkah yang belum sampai gilirannya dipudarkan supaya mata tahu ke mana
   hendak pergi. Ia SENGAJA tidak disekat daripada diklik: pengguna yang
   menatal ke bawah dan cuba menjawabnya patut boleh, dan sekatan yang tidak
   dijelaskan terasa seperti halaman rosak. */
.tf-step.is-locked { opacity: 0.55; }

.tf-step-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.tf-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.10);
    color: rgba(0,0,0,0.55);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.tf-step.is-active .tf-step-num { background: #d4af37; color: #1a1a1a; }
.tf-step.is-done   .tf-step-num { background: #1e8c50; color: #fff; }

.tf-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
}

.tf-step-tick {
    margin-left: auto;
    color: #1e8c50;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms ease, transform 200ms ease;
}
.tf-step.is-done .tf-step-tick { opacity: 1; transform: scale(1); }

.tf-step-err {
    margin: 0 0 14px;
    color: #b3202b;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Getaran ringkas bila pengguna cuba hantar sebelum langkah ini diisi. */
@keyframes tfShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}
.tf-step.is-shake { animation: tfShake 300ms ease 2; }

/* --- Mesej "tinggal lagi" --- */
.tf-missing {
    margin: 0 0 12px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(212,175,55,0.10);
    border: 1px solid rgba(212,175,55,0.35);
    color: #7a5c00;
    font-size: 0.83rem;
    line-height: 1.5;
    text-align: center;
}

/* --- Butang hantar dimatikan --- */
/* Ini pengubahsuaian yang paling penting pada fail ini. Sebelum ini butang
   nampak boleh ditekan pada setiap masa, jadi menekannya tanpa kesan
   kelihatan seperti laman yang rosak. Sekarang keadaan tidak boleh ditekan
   itu KELIHATAN sebelum jari menyentuhnya. */
.submit-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.7);
    box-shadow: none;
}
.submit-button:disabled:hover { transform: none; }

@media (max-width: 640px) {
    .tf-step       { padding: 14px 13px 4px; }
    .tf-chip       { font-size: 0.72rem; padding: 6px 11px 6px 7px; }
    .tf-step-title { font-size: 0.88rem; }
}

/* :hover tersangkut pada peranti sentuh selepas jari menyentuh semasa skrol.
   Diletak SELEPAS peraturan asal supaya ia yang menang. */
@media (hover: none) {
    .submit-button:disabled:hover { transform: none; opacity: 0.45; }
}

/* =============================================
   SKRIN BAYARAN
   Muncul dalam modal yang sama selepas borang dihantar. Modal ini dahulu
   ditutup 500ms selepas hantar, jadi tiada tempat langsung untuk menawarkan
   bayaran. Kini ia bertukar menjadi skrin ini dan menunggu pelanggan kembali
   dari tab WhatsApp.

   Nama kelas disemak terhadap fail ini sebelum dipilih: menggunakan semula
   nama yang sudah wujud membawa sifat kotaknya sekali, dan itu pernah
   memecahkan lencana tab admin.
   ============================================= */
.bayar-nota {
    margin: 8px 0 14px;
    font-size: .92rem;
    line-height: 1.6;
    color: #555;
}

.bayar-aksi {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}

.btn-bayar {
    padding: 15px 22px;
    border: none;
    border-radius: 12px;
    background: #0B57C4;
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, opacity .18s;
}
.btn-bayar:hover:not(:disabled) { background: #0946a0; }
/* Terkunci semasa order dibuka. Ia MESTI kelihatan terkunci, bukan
   kelihatan biasa lalu mengabaikan klik kedua. */
.btn-bayar:disabled { opacity: .55; cursor: default; }

/* Baris status. Ia membawa mesej mod ujian, sebab kegagalan, dan
   pengesahan. Ketinggian dikekalkan supaya butang di bawahnya tidak
   melompat setiap kali teks bertukar. */
.bayar-kecil {
    min-height: 1.3em;
    margin: 2px 0 0;
    font-size: .86rem;
    line-height: 1.5;
    color: #666;
    text-align: center;
}

/* Butang hantar borang. Mewarisi bentuk .btn-whatsapp-final tetapi
   menggantikan warnanya: ia membawa ke skrin bayaran, bukan ke WhatsApp,
   dan hijau WhatsApp di situ ialah janji yang salah. !important kerana
   peraturan asal menetapkan kecerunan, dan kecerunan mengalahkan warna
   rata biasa tanpa mengira susunan. */
.btn-teruskan {
    background: #0B57C4 !important;
    background-image: none !important;
    color: #fff !important;
}
.btn-teruskan:hover:not(:disabled) { background: #0946a0 !important; }

/* Butang WhatsApp pada skrin bayaran.
   Sengaja LEBIH SENYAP daripada butang bayar, tetapi bukan tersembunyi.
   Travel takaful ada soalan sebenar, dan orang yang perlu bertanya tidak
   patut rasa disekat. Warna jenama WhatsApp dikekalkan supaya ia dikenali
   dalam satu pandangan, cuma sebagai garis luar dan bukan blok penuh. */
.btn-wa-tanya {
    padding: 12px 20px;
    border: 1.5px solid #25D366;
    border-radius: 12px;
    background: #fff;
    color: #0b7a3b;
    font: inherit;
    font-size: .94rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s;
}
.btn-wa-tanya:hover { background: #f0fdf4; }

@media (max-width: 640px) {
    .btn-bayar { padding: 14px 18px; font-size: .98rem; }
    .btn-wa-tanya { padding: 12px 16px; font-size: .9rem; }
}