/**
 * Stail untuk bahagian awam MO Price Table (Versi 11.2 - Pembetulan Media Query).
 * Termasuk pembaikan untuk borang Butiran Pembayar.
 */

:root {
    --primary-color: #00A69C;
    --turquoise-color: #19b5b3;
    --best-offer-orange: #ff7e32;
    --best-offer-yellow: #ffe000;
    --text-color: #222943;
    --text-light-color: #6c757d;
    --border-color: #e0e0e0;
    --white-color: #fff;
    --custom-plan-dark: #343a40;
    --custom-plan-dark-hover: #23272b;
}

/* --- Font & Container Utama --- */
.mo-price-table-wrapper, .mo-summary-wrapper {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-color);
    margin: 0 auto;
    padding: 15px;
}
.mo-price-table-wrapper { max-width: 1480px; }
.mo-summary-wrapper { max-width: 900px; padding-top: 40px; }


/* --- Penapis --- */
#mo-price-table-filters { margin-bottom: 40px; }
.mo-filter-group { margin-bottom: 0px; }
.mo-filter-group-title { display: none; }
.mo-filter-group[data-filter-group='mode'] .mo-filter-tabs { display: flex; justify-content: center; border-bottom: 2px solid var(--border-color); margin-bottom: 18px; position: relative; }
.mo-filter-group[data-filter-group='mode'] a.mo-filter-tab { flex: 1; text-align: center; padding: 12px 0 10px 0; font-size: 18px; color: #222; cursor: pointer; background: none; border: none; outline: none; font-weight: 500; position: relative; transition: color 0.2s; text-decoration: none; }
.mo-filter-group[data-filter-group='mode'] a.mo-filter-tab.active { color: var(--turquoise-color); }
.mo-filter-group[data-filter-group='mode'] a.mo-filter-tab.active::after { content: ''; display: block; width: 100%; border-bottom: 3px solid var(--turquoise-color); border-radius: 2px; position: absolute; left: 0; bottom: -2px; }
.mo-filter-group[data-filter-group='subject'] .mo-filter-tabs { display: flex; gap: 12px; background: #fafbfc; padding: 18px 16px 10px 16px; border: 1px solid #f0f0f0; border-bottom: none; align-items: center; flex-wrap: wrap; margin: 0 18px 0 18px; border-radius: 8px 8px 0 0; }
.mo-filter-group[data-filter-group='subject'] a.mo-filter-tab { padding: 10px 20px; border: 1px solid #ddd; border-radius: 6px; background: var(--white-color); color: #222; font-weight: 500; font-size: 15px; cursor: pointer; transition: all 0.2s; box-shadow: none; text-decoration: none; }
.mo-filter-group[data-filter-group='subject'] a.mo-filter-tab:hover:not(.active) { border-color: var(--turquoise-color); color: var(--turquoise-color); }
.mo-filter-group[data-filter-group='subject'] a.mo-filter-tab.active { background-color: var(--turquoise-color); color: var(--white-color); border-color: var(--turquoise-color); font-weight: 600; box-shadow: 0 2px 8px rgba(25,181,179,0.15); }
#mo-subject-note { background: #fafbfc; border: 1px solid #f0f0f0; border-top: 1px dashed #e0e0e0; padding: 12px 18px; font-size: 14px; color: #222; display: none; align-items: flex-start; gap: 12px; margin: 0px 18px 18px 18px; border-radius: 0 0 8px 8px; }
#mo-subject-note.visible { display: flex; }
#mo-subject-note .mo-info-icon { color: var(--turquoise-color); margin-top: 1px; flex-shrink: 0; width: 18px; height: 18px; }
#mo-subject-note .mo-info-icon svg { width: 100%; height: 100%; }
#mo-subject-note .mo-info-label { font-weight: 700; }
.mo-filter-group[data-filter-group='type'] { margin-top: 18px; }
.mo-filter-group[data-filter-group='type'] .mo-filter-tabs { display: flex; gap: 12px; background: #fafbfc; padding: 18px 16px 10px 16px; border-radius: 8px; margin: 0 18px 0 18px; border: 1px solid #f0f0f0; align-items: center; flex-wrap: wrap; }
.mo-filter-group[data-filter-group='type'] a.mo-filter-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px; background: var(--white-color); color: #222; font-weight: 500; font-size: 15px; cursor: pointer; transition: all 0.2s; box-shadow: none; text-decoration: none; min-width: 150px; }
.mo-filter-group[data-filter-group='type'] a.mo-filter-tab.active { background-color: var(--turquoise-color); color: var(--white-color); border-color: var(--turquoise-color); }

/* --- Suis Togol Bulanan/Tahunan --- */
.mo-billing-options-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mo-billing-select-label { font-size: 25px; font-weight: 700; color: var(--text-color); }
.mo-billing-toggle-container { display: flex; align-items: center; gap: 15px; }
.mo-billing-toggle-label { font-size: 16px; font-weight: 500; color: var(--text-light-color); transition: color 0.2s; cursor: pointer; }
.mo-billing-toggle-label.active { color: var(--text-color); font-weight: 600; }
.mo-annual-save { color: var(--primary-color); font-size: 13px; font-weight: 600; }
.mo-billing-toggle { position: relative; display: inline-block; width: 50px; height: 28px; }
.mo-billing-toggle input { display: none; }
.mo-billing-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary-color); transition: .4s; border-radius: 28px; }
.mo-billing-toggle .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.mo-billing-toggle input:checked + .slider:before { transform: translateX(22px); }

/* --- Jadual Harga --- */
.mo-plans-grid { display: grid; grid-template-columns: 1fr; gap: 10px; justify-content: center; }
.mo-plan-card-outer { border-radius: 20px; padding: 6px 6px 50px 6px; box-sizing: border-box; background: #f7f7f7; border: 1.5px solid var(--border-color); width: auto; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.mo-plan-card-inner { background: var(--white-color); border-radius: 16px; padding: 24px; overflow: hidden; height: 100%; }
.mo-plan-card-outer.best-offer { background: linear-gradient(135deg, var(--best-offer-orange) 0%, var(--best-offer-yellow) 100%); border: none; }
.mo-plan-card-outer.selected { border: 2.5px solid var(--turquoise-color) !important; box-shadow: 0 0 0 4px rgba(25,181,179,0.3); transform: translateY(-5px); }
.mo-best-offer-badge { text-align: center; padding: 10px 0; color: var(--white-color); font-size: 25px; font-weight: 700; }
.mo-plan-content-wrapper { display: flex; flex-direction: column; height: 100%; }
.mo-plan-header { display: flex; align-items: center; gap: 12px; }
.mo-plan-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mo-plan-icon svg { width: 22px; height: 22px; }
.mo-plan-icon.basic { background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%); color: var(--turquoise-color); }
.mo-plan-icon:not(.basic) { background: linear-gradient(135deg, #ffb95a 0%, #ffe000 100%); color: var(--white-color); }
.mo-plan-title-group { display: flex; flex-direction: column; justify-content: center; }
.mo-plan-title.basic { color: var(--turquoise-color); }
.mo-plan-title:not(.basic) { color: #ffb800; }
.mo-plan-title { font-size: 22px; font-weight: 700; margin: 0; margin-bottom: 0px; }
.mo-plan-subtitle { font-size: 15px; color: var(--text-color); margin-top: 4px; }
.mo-plan-price-section { display: flex; align-items: flex-end; margin-top: 18px; }
.mo-plan-price { font-size: 36px; font-weight: 700; }
.mo-plan-price-period { font-size: 16px; margin-bottom: 3px; margin-left: 4px; }
.mo-plan-custom-text { font-size: 14px; }
.mo-plan-button { display: block; width: 100%; padding: 12px 0; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; margin-top: 18px; }
.mo-plan-button.basic { background: linear-gradient(90deg, #19b5b3 0%, #00e0d3 100%); color: var(--white-color); }
.mo-plan-button:not(.basic) { background: linear-gradient(90deg, var(--best-offer-orange) 0%, var(--best-offer-yellow) 100%); color: var(--white-color); }
.mo-plan-features-divider { border: none; border-top: 1.5px solid #f0f0f0; margin: 18px 0; }
.mo-plan-features { list-style: none; margin: 0; padding: 0; font-size: 15px; flex-grow: 1; }
.mo-plan-features li { margin-bottom: 13px; display: flex; align-items: flex-start; gap: 8px; }
.mo-plan-features li .icon-check { flex-shrink: 0; margin-top: 2px; }
.mo-plan-features li .icon-check svg { width: 16px; height: 16px; color: var(--primary-color); }
li.mo-extra-feature { display: none; }
.mo-see-more { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 5px; color: var(--text-color); outline: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 8px; width: auto; white-space: nowrap; }
.mo-see-more:hover, .mo-see-more:focus, .mo-see-more.open { color: var(--primary-color) !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; }
.mo-see-more svg { width: 18px; height: 18px; margin-top: 2px; transition: transform 0.2s; }
.mo-see-more.open svg { transform: rotate(180deg); }

/* Tema untuk Pelan Custom */
.mo-plan-icon.is-custom { background: var(--custom-plan-dark); color: var(--white-color); }
.mo-plan-title.is-custom { color: var(--custom-plan-dark); }
.mo-plan-button.is-custom, .mo-plan-button.is-custom:not(.basic) { background: var(--custom-plan-dark); color: var(--white-color); }
.mo-plan-button.is-custom:hover { background: var(--custom-plan-dark-hover); }

/* --- Halaman Ringkasan (Summary Page) - KOD DIKEMASKINI --- */
.mo-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.mo-summary-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
}
.mo-summary-card {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.mo-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.mo-summary-item:last-child {
    margin-bottom: 0;
}
.mo-summary-label {
    font-size: 15px;
    color: var(--text-light-color);
}
.mo-summary-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    text-align: right;
}
.mo-summary-value-main {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}
.mo-summary-hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}
.mo-summary-total {
    margin-top: 20px;
}
.mo-summary-value-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
}
.mo-summary-actions {
    margin-top: 25px;
}
.mo-summary-button {
    display: block;
    width: 100%;
    background-color: var(--primary-color);
    color: var(--white-color);
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.mo-summary-button:hover {
    background-color: var(--turquoise-color);
}
.mo-summary-error, .mo-summary-notice {
    text-align: center;
    padding: 20px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
}

/* GAYA BARU UNTUK BORANG PEMBAYAR */
.mo-summary-form-field {
    margin-bottom: 20px;
}
.mo-summary-form-field label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 15px;
}
.mo-summary-form-field input[type="text"],
.mo-summary-form-field input[type="email"],
.mo-summary-form-field input[type="tel"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mo-summary-form-field input:focus {
    outline: none;
    border-color: var(--primary-color, #00A69C);
    box-shadow: 0 0 0 3px rgba(0, 166, 156, 0.2);
}

/* --- Stail untuk Bahagian Kupon --- */
.mo-coupon-section {
    margin: 2em 0;
    padding: 1.5em;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background: #f9f9f9;
}
.mo-coupon-section label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.75em;
}
.mo-coupon-input-group {
    display: flex;
    gap: 10px;
}
.mo-coupon-input-group input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.mo-coupon-input-group button {
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.mo-coupon-input-group button:hover {
    background-color: #555;
}
.mo-coupon-status {
    margin-top: 10px;
    font-size: 0.9em;
}
.mo-coupon-status.success {
    color: #28a745;
}
.mo-coupon-status.error {
    color: #dc3545;
}
#mo_discount_row th, #mo_discount_row td {
    color: #28a745;
    font-weight: bold;
}

/**
 * PEMBAIKAN KUPOB: Susun atur & pautan batal
 */

/* Alihkan butang "Tebus" ke kiri dengan membuang sifat 'grow' pada input */
.mo-coupon-input-group input[type="text"] {
    flex-grow: 0; /* Hentikan input daripada memenuhi ruang */
    width: 200px; /* Beri lebar tetap pada input */
}

/* Bekas untuk mesej status dan pautan batal */
.mo-coupon-status-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    min-height: 20px; /* Beri ruang walaupun kosong */
}

/* Stail untuk pautan "Batal" */
#mo_remove_coupon_button {
    color: #dc3545; /* Warna merah */
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
}
#mo_remove_coupon_button:hover {
    text-decoration: underline;
}




/* --- Bar Tindakan Bawah --- */
#mo-action-bar-container { display: none; align-items: center; flex-wrap: wrap; gap: 15px 30px; max-width: 900px; margin: 40px auto 0 auto; border-top: 1px solid var(--border-color); padding-top: 30px; }
#mo-action-bar-container.visible { display: flex; }
.mo-sponsorship-main-area { display: flex; flex-direction: column; align-items: flex-start; }
.mo-sponsorship-toggle-line { display: flex; align-items: center; gap: 12px; }
.mo-sponsorship-label-text { font-weight: 700; }
.mo-sponsorship-toggle-wrapper { position: relative; display: inline-block; width: 50px; height: 28px; }
.mo-sponsorship-toggle-wrapper input { opacity: 0; width: 0; height: 0; }
.mo-sponsorship-toggle-wrapper .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.mo-sponsorship-toggle-wrapper .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.mo-sponsorship-toggle-wrapper input:checked + .slider { background-color: var(--primary-color); }
.mo-sponsorship-toggle-wrapper input:checked + .slider:before { transform: translateX(22px); }
#mo-sponsorship-note-wrapper { padding-top: 8px; }
#mo-sponsorship-note { display: none; font-size: 13px; color: var(--text-light-color); align-items: flex-start; gap: 8px; }
#mo-sponsorship-note.visible { display: flex; }
#mo-sponsorship-note .mo-sponsorship-icon { flex-shrink: 0; margin-top: 1px; }
#mo-sponsorship-note .mo-sponsorship-icon svg { width: 16px; height: 16px; color: var(--text-light-color); }
#mo-main-payment-button { background-color: var(--primary-color); color: var(--white-color); padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.2s; white-space: nowrap; margin-left: auto; }

/* --- Media Queries --- */
@media (max-width: 768px) {
    .mo-billing-options-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mo-billing-select-label { padding-bottom: 10px; }
    .mo-plan-card-outer, .mo-plan-button, #mo-main-payment-button, .mo-filter-group[data-filter-group='type'] a.mo-filter-tab { width: 100%; }
    #mo-action-bar-container { justify-content: center; text-align: center; }
    #mo-main-payment-button { margin-left: 0; }
    .mo-plans-grid .best-offer { order: -1; }
}

@media (min-width: 768px) {
    .mo-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 769px) { .mo-plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mo-plans-grid { grid-template-columns: repeat(4, 1fr); } }

/**
 * PEMBAIKAN: Susun atur kotak kupon untuk paparan mudah alih
 */
@media (max-width: 480px) {
    .mo-coupon-input-group {
        flex-direction: column; /* Tukar susunan dari bersebelahan ke atas-bawah */
        align-items: stretch;   /* Pastikan butang memenuhi lebar */
    }

    .mo-coupon-input-group input[type="text"] {
        width: 100%; /* Input mengambil lebar penuh */
    }
}