/* Wrapper umum */
.ama-wrapper {
    max-width: 100%;
    margin: 0 0 24px;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Kad asas */
.ama-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
}

.ama-card-apply {
    border-top: 4px solid #ff9800; /* Agro feel */
}

.ama-card-dashboard {
    border-top: 4px solid #4caf50;
}

/* Card types */
.ama-card-success {
    border-left: 4px solid #46b450;
    background: #f6fff4;
}

.ama-card-error {
    border-left: 4px solid #dc3232;
    background: #fff5f5;
}

.ama-card-info {
    border-left: 4px solid #0179c0;
    background: #f5f9ff;
}

/* Header & badge status */
.ama-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ama-card-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.ama-badge-status {
    display: inline-flex;
    align-items: right;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Header biru & box biru (kalau Sham guna) */
.ama-card-header-blue {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 15px;
}

.ama-card-header-blue h3 {
    margin-bottom: 4px;
}

.ama-blue-box {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

/* Status color */
.ama-badge-status-pending {
    background: #fff8e1;
    color: #ff9800;
}

.ama-badge-status-approved {
    background: #e8f5e9;
    color: #2e7d32;
}

.ama-badge-status-suspended {
    background: #ffebee;
    color: #c62828;
}

/* Text kecil & lead */
.ama-lead-text {
    margin-top: 5px;
    margin-bottom: 18px;
    color: #555;
    font-size: 0.95rem;
}

.ama-small-note {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #777;
}

/* Progress bar langkah permohonan */
.ama-steps {
    margin-bottom: 18px;
}

.ama-steps-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.ama-steps-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
}

.ama-steps-subtitle {
    font-size: 0.8rem;
    color: #777;
}

.ama-steps-bar {
    width: 100%;
    height: 6px;
    background: #f0f0f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}

.ama-steps-bar-inner {
    width: 33%;
    height: 100%;
    background: linear-gradient(90deg, #ff9800, #ffc107);
}

.ama-steps-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.75rem;
    color: #999;
    flex-wrap: wrap;
}

.ama-steps-labels span.active {
    color: #ff9800;
    font-weight: 600;
}

/* Faedah Agen Mikro */
.ama-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px 20px;
    margin-bottom: 18px;
}

.ama-benefit-item {
    display: flex;
    flex-direction: column;
}

/* Samakan tinggi tajuk supaya perenggan align */
.ama-benefit-item h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: #333;
    min-height: 2.4em;          /* paksa semua heading tinggi lebih kurang sama */
    display: flex;
    align-items: flex-end;      /* bagi teks duduk di bahagian bawah ruang tajuk */
}

.ama-benefit-item p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}


/* Form */
.ama-form {
    margin-top: 10px;
}

.ama-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 20px;
}

.ama-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ama-form-group-full {
    grid-column: 1 / -1;
}

.ama-form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}

.ama-form-group input,
.ama-form-group select {
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    padding: 8px 10px;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.ama-form-group input:focus,
.ama-form-group select:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 1px rgba(255,152,0,0.1);
}

.ama-required {
    color: #e53935;
    margin-left: 2px;
}

/* Actions */
.ama-form-actions {
    margin-top: 20px;
}

.ama-btn-primary {
    padding: 8px 18px !important;
    font-size: 0.95rem !important;
    border-radius: 999px !important;
}

/* Dashboard layout */
.ama-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 25px;
    margin-bottom: 10px;
}

.ama-wallet-balance {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Senarai kecil */
.ama-list {
    margin: 0 0 0 18px;
    padding: 0;
}

.ama-list li {
    margin-bottom: 4px;
    font-size: 0.9rem;
}

/* Responsif umum */
@media (max-width: 768px) {
    .ama-form-grid,
    .ama-grid-2 {
        grid-template-columns: 1fr;
    }

    .ama-benefits {
        grid-template-columns: 1fr;
    }

    .ama-card {
        padding: 16px 15px 20px;
    }

    .ama-card p {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .ama-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ama-card-header h3 {
        font-size: 1.1rem;
    }
}

/* Utility class: paksa teks ke kiri (diguna dalam AMA_Frontend) */
.ama-text-left-mobile {
    text-align: left;
}

.ama-text-left-mobile {
    text-align: left;
}

@media (min-width: 1025px) {
    .ama-text-left-mobile {
        text-align: left; /* atau center kalau nak lain untuk desktop */
    }
}


/* ============================
   MOBILE OVERRIDE: PAKSA KIRI
   ============================ */
@media (max-width: 767px) {

    /* Paksa SEMUA teks dalam content My Account ke kiri */
    body.woocommerce-account .woocommerce-MyAccount-content,
    body.woocommerce-account .woocommerce-MyAccount-content *,
    body.woocommerce-account div.woocommerce-MyAccount-content,
    body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper,
    body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper * {
        text-align: left !important;
    }
}


/* =========================
   BETULKAN ALIGN BENEFIT
   ========================= */

/* Override layout: guna flex supaya senang align */
.ama-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    margin-bottom: 18px;
}

.ama-benefit-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

/* Desktop: samakan tinggi heading supaya perenggan bermula line yang sama */
@media (min-width: 769px) {
    .ama-benefit-item h3 {
        margin: 0 0 4px;
        font-size: 0.95rem;
        color: #333;
        min-height: 2.6em;       /* semua tajuk dapat tinggi lebih kurang sama */
        display: flex;
        align-items: flex-end;   /* teks tajuk duduk di bahagian bawah ruang */
    }

    .ama-benefit-item p {
        margin: 0;
        font-size: 0.8rem;
        color: #666;
        line-height: 1.4;
    }
}

/* Mobile: stack satu kolum macam biasa */
@media (max-width: 768px) {
    .ama-benefits {
        flex-direction: column;
    }
}

/* Lebarkan kad Agen Mikro dalam My Account */
body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper {
    max-width: 100%;
    margin: 0 0 24px;
    padding: 0 10px;
}

/* Mobile: rapatkan ke tepi sikit */
@media (max-width: 768px) {
    body.woocommerce-account .woocommerce-MyAccount-content .ama-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Lebarkan kotak Agen Mikro di My Account */
body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper {
    max-width: none;       /* buang limit 900px */
    margin-left: -10px;    /* tarik keluar sikit ke kiri */
    margin-right: -10px;   /* tarik keluar sikit ke kanan */
    padding-left: 10px;
    padding-right: 10px;
}

/* Untuk kotak biru papan pemuka – bagi penuh lebar wrapper */
body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper .ama-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Mobile: rapatkan lagi sebelah kanan kotak Agen Mikro */
@media (max-width: 768px) {
    body.woocommerce-account .woocommerce-MyAccount-content .ama-wrapper {
        margin-right: -18px;   /* tarik lagi keluar ke kanan */
        padding-right: 0;      /* buang kusyen kanan */
    }
}


/* Besarkan & highlight Kod Agen, Nama & No. Telefon di papan pemuka */
body.woocommerce-account .woocommerce-MyAccount-content .ama-agent-name,
body.woocommerce-account .woocommerce-MyAccount-content .ama-agent-area,
body.woocommerce-account .woocommerce-MyAccount-content .ama-agent-radius,
body.woocommerce-account .woocommerce-MyAccount-content .ama-agent-phone {
    font-size: 0.9rem !important;   /* besar sikit dari teks biasa */
    font-weight: 400 !important;
    letter-spacing: 0;
    color: #111827;
    display: inline-block;
    margin-top: 2px;
}

/* Besarkan & highlight Kod Agen di papan pemuka */
body.woocommerce-account .woocommerce-MyAccount-content .ama-agent-code {
    font-size: 1.4rem !important;   /* BESAR */
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    color: #111827;
    display: inline-block;
    margin-top: 2px;
}


/* Paksa badge status (Approved / Pending / Suspended) berada di sebelah kanan */
.ama-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}

/* Mobile pun pastikan kekal kanan */
@media (max-width: 768px) {
    .ama-card-header {
        flex-direction: row !important; /* elak jatuh ke bawah */
    }

    .ama-card-header .ama-badge-status {
        margin-left: auto !important; /* tolak label ke kanan */
    }
}

/* Susun tajuk kiri, badge kanan dalam header kad */
.ama-card-header {
    display: flex !important;
    flex-direction: row !important;          /* pastikan sebaris, bukan column */
    align-items: center !important;
    justify-content: space-between !important;
}

/* Tajuk sentiasa di sebelah kiri */
.ama-card-header h2,
.ama-card-header h3 {
    margin: 0;
    text-align: left !important;
    flex: 1 1 auto;
}

/* Badge status (Approved / Pending / Suspended) di sebelah kanan */
.ama-card-header .ama-badge-status {
    margin-left: 12px;
    white-space: nowrap;
}