/**
 * Mayar Payment Gateway — Frontend Stylesheet
 *
 * Styles untuk halaman publik: Checkout, Thank You, Order Pay, View Order,
 * Magic Link Portal, dan QRIS Payment.
 *
 * File ini HANYA dimuat di halaman frontend WooCommerce yang relevan
 * (is_checkout, order-pay, view-order, order-received) untuk meminimalkan
 * payload CSS di halaman publik.
 *
 * Sections:
 *   1. Global Variables & Utilities
 *   2. Card UI (Detail Pembayaran)
 *   3. Action Buttons (Tombol CTA)
 *   4. Status Indicators (Badges & Messages)
 *   5. Responsive / Mobile
 *   6. Frontend Components (Portal, QRIS)
 *
 * @package WooCommerce Gateway Mayar
 * @since   1.3.0
 * @author  Okki Dwi
 * @link    https://github.com/reactmore-tech/mayar-php-sdk
 */

/* =========================================
   1. GLOBAL VARIABLES & UTILITIES
   ========================================= */

:root {
    --mayar-color-primary: #0071a1;
    /* Biru standar WP/Woo */
    --mayar-color-success: #46b450;
    /* Hijau */
    --mayar-color-warning: #ffb900;
    /* Kuning/Oranye */
    --mayar-color-error: #dc3232;
    /* Merah */
    --mayar-color-text: #3c434a;
    /* Abu gelap */
    --mayar-border-color: #dcdcde;
    /* Abu border */
    --mayar-bg-light: #f6f7f7;
    /* Abu terang background */
}

.wc-mayar-hide {
    display: none !important;
}

.wc-mayar-text-center {
    text-align: center;
}

/* =========================================
   2. FRONTEND: CARD UI (DETAIL PEMBAYARAN)
   ========================================= */

/**
 * Container utama (Kotak Putih dengan Shadow).
 * Menggantikan tampilan tabel default yang berantakan.
 */
.wc-mayar-payment-box {
    background: #fff;
    border: 1px solid var(--mayar-border-color);
    border-radius: 8px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
}

/**
 * Header Card (Judul "Detail Pembayaran").
 */
.wc-mayar-box-header {
    background: var(--mayar-bg-light);
    padding: 15px 20px;
    border-bottom: 1px solid var(--mayar-border-color);
    text-align: center;
}

.wc-mayar-box-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--mayar-color-text);
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    display: inline-block;
}

/**
 * Konten Card.
 */
.wc-mayar-box-content {
    padding: 25px;
}

/**
 * Tabel Detail di dalam Card.
 */
table.wc-mayar-details-table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    border: none;
}

table.wc-mayar-details-table th,
table.wc-mayar-details-table td {
    padding: 12px 0;
    border-bottom: 1px dashed var(--mayar-border-color);
    vertical-align: middle;
}

table.wc-mayar-details-table th {
    text-align: left;
    font-weight: 600;
    width: 40%;
    color: #555;
}

table.wc-mayar-details-table td {
    text-align: right;
    color: #222;
    font-weight: 500;
}

table.wc-mayar-details-table tr:last-child th,
table.wc-mayar-details-table tr:last-child td {
    border-bottom: none;
}

/* =========================================
   3. FRONTEND: ACTION BUTTONS (TOMBOL)
   ========================================= */

/**
 * Wrapper Tombol (Flexbox Center).
 * Memastikan tombol dan teks bantuan rata tengah vertikal.
 */
.wc-mayar-action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--mayar-border-color);
}

/**
 * Tombol Utama: Bayar Sekarang.
 * Desain "Pill Shape" (Lonjong).
 */
.button.wc-mayar-btn-pay {
    background-color: var(--mayar-color-primary) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 40px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 113, 161, 0.2);
    display: inline-block;
    line-height: 1.2;
    text-align: center;
    border: none !important;
}

.button.wc-mayar-btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 113, 161, 0.3);
    background-color: #005f87 !important;
}

/**
 * Tombol Sekunder: Cek Status.
 */
.button.wc-mayar-btn-check {
    background-color: #f0f0f1 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    font-size: 14px !important;
    padding: 10px 25px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

.button.wc-mayar-btn-check:hover {
    background-color: #e5e5e5 !important;
    border-color: #999 !important;
    color: #000 !important;
}

.wc-mayar-helper-text {
    font-size: 13px;
    color: #777;
    margin-top: 5px;
    font-style: italic;
    text-align: center;
}

/* =========================================
   4. STATUS INDICATORS (BADGES & MESSAGES)
   ========================================= */

/**
 * Badge Status Kecil (di Tabel Detail & Admin Column).
 */
.wc-mayar-badge,
.wc-mayar-column-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

/* Varian: Pending (Kuning/Oranye) */
.wc-mayar-badge.pending,
.wc-mayar-column-badge.unpaid {
    background-color: #fff8e5;
    color: #b76e00;
    border-color: #fcefd0;
}

/* Varian: Success (Hijau) */
.wc-mayar-badge.success,
.wc-mayar-column-badge.paid {
    background-color: #e7f6e8;
    color: #0f834d;
    border-color: #cce8d5;
}

/* Varian: Failed (Merah) */
.wc-mayar-badge.failed {
    background-color: #fbeaea;
    color: #d63638;
    border-color: #f7d7d7;
}

/**
 * Status Message Box (Kotak Pesan Besar di Halaman Thank You).
 */
.wc-mayar-status-message {
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 25px;
    border-left: 5px solid;
    font-size: 14px;
    line-height: 1.5;
}

.wc-mayar-status-message strong {
    font-size: 15px;
    display: block;
    margin-bottom: 5px;
}

.wc-mayar-status-message.success {
    background-color: #e7f6e8;
    border-color: var(--mayar-color-success);
    color: #0f834d;
}

.wc-mayar-status-message.pending {
    background-color: #fff8e5;
    border-color: var(--mayar-color-warning);
    color: #b76e00;
}

.wc-mayar-status-message.failed {
    background-color: #fbeaea;
    border-color: var(--mayar-color-error);
    color: #d63638;
}

/* =========================================
   5. RESPONSIVE / MOBILE
   ========================================= */

@media (max-width: 600px) {
    .wc-mayar-payment-box {
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: none;
        margin-left: -15px;
        /* Mengkompensasi padding tema default */
        margin-right: -15px;
        width: auto;
    }

    .wc-mayar-action-buttons {
        width: 100%;
    }

    .button.wc-mayar-btn-pay,
    .button.wc-mayar-btn-check {
        width: 100%;
        /* Tombol full width di HP */
        text-align: center;
        margin-bottom: 10px;
        padding: 12px !important;
    }

    /* Tabel responsive: Stack ke bawah */
    table.wc-mayar-details-table th,
    table.wc-mayar-details-table td {
        display: block;
        width: 100%;
        text-align: left;
    }

    table.wc-mayar-details-table td {
        padding-top: 2px;
        padding-bottom: 15px;
        font-weight: 500;
        text-align: left;
    }
}

/* =========================================
   6. FRONTEND COMPONENTS
   Portal, QRIS, dan elemen tampilan publik.
   ========================================= */

/* --- Frontend Code Tag --- */
.mayar-txid-code {
    background: #f0f0f1;
    padding: 2px 5px;
}

.mayar-branding-subtle {
    color: #777;
}

/* --- Magic Link Portal (Frontend) --- */
.mayar-portal-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
    color: white;
}

.mayar-portal-box h3 {
    margin: 0 0 8px;
    color: white;
    font-size: 18px;
}

.mayar-portal-box__desc {
    margin: 0 0 16px;
    font-size: 14px;
    opacity: 0.9;
}

.mayar-portal-alert--success {
    background: rgba(40, 167, 69, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.mayar-portal-alert--error {
    background: rgba(220, 53, 69, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.mayar-portal-note {
    font-size: 12px;
    opacity: 0.7;
    margin: 0;
}

.mayar-portal-btn {
    display: inline-block;
    background: white;
    color: #764ba2;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s;
}

.mayar-portal-btn:hover {
    transform: scale(1.05);
    color: #764ba2;
}

.mayar-portal-email-note {
    font-size: 11px;
    opacity: 0.6;
    margin: 10px 0 0;
}

/* --- QRIS Section (Frontend) --- */
.mayar-qris-box {
    text-align: center;
    padding: 30px;
    margin: 20px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
}

.mayar-qris-box h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: white;
}

.mayar-qris-box__desc {
    margin: 0 0 20px;
    font-size: 14px;
    opacity: 0.9;
}

.mayar-qris-qr-container {
    background: white;
    display: inline-block;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.mayar-qris-qr-container img {
    max-width: 280px;
    height: auto;
    display: block;
}

.mayar-qris-qr-string {
    padding: 40px;
    color: #333;
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    max-width: 280px;
}

.mayar-qris-error {
    color: #dc3545;
    padding: 20px;
}

.mayar-qris-amount-box {
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 24px;
    border-radius: 8px;
    display: inline-block;
}

.mayar-qris-amount-label {
    font-size: 14px;
    opacity: 0.9;
}

.mayar-qris-amount-value {
    font-size: 28px;
    font-weight: 700;
}

.mayar-qris-note {
    margin-top: 16px;
    font-size: 12px;
    opacity: 0.7;
}