<?php
/**
 * konfirmasi_pembayaran.php - Halaman Konfirmasi Pembayaran Admin
 * DIPERBAIKI - Tombol Detail mengarah ke halaman detail pesanan admin
 */
$activeMenu = 'konfirmasiPembayaran';
$pageTitle = 'Konfirmasi Pembayaran - Admin';
include __DIR__ . '/../layouts/header.php';

// Data dari controller
$pendingPayments = $pendingPayments ?? [];
$historyPayments = $historyPayments ?? [];
$pendingCount = $pendingCount ?? 0;
$unreadCount = $unreadCount ?? 0;

// Hitung total
$totalPending = 0;
foreach ($pendingPayments as $p) {
    $totalPending += $p['total_harga'] ?? 0;
}

// Hitung statistik
$lunasCount = 0;
$gagalCount = 0;
foreach ($historyPayments as $h) {
    if (($h['status_pembayaran'] ?? '') == 'lunas') $lunasCount++;
    if (($h['status_pembayaran'] ?? '') == 'gagal') $gagalCount++;
}
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<div class="dashboard-wrapper">
    <?php include __DIR__ . '/includes/sidebar_admin.php'; ?>

    <main class="main-content">
        <!-- HEADER -->
        <div class="content-header">
            <div class="header-left">
                <h2><i class="fas fa-credit-card" style="color:#2b6cb0;"></i> Konfirmasi Pembayaran</h2>
                <p>Pembayaran dikonfirmasi secara <strong>otomatis</strong> melalui <strong>Midtrans Payment Gateway</strong>.</p>
            </div>
            <div class="header-right">
                <span class="badge-status <?= count($pendingPayments) > 0 ? 'warning' : 'success' ?>">
                    <i class="fas fa-circle"></i> 
                    <?= count($pendingPayments) > 0 ? count($pendingPayments) . ' Menunggu' : 'Tidak Ada' ?>
                </span>
            </div>
        </div>

        <!-- FLASH MESSAGES -->
        <?php if(isset($_SESSION['flash_success'])): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle alert-icon"></i>
                <?= htmlspecialchars($_SESSION['flash_success']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                <?php unset($_SESSION['flash_success']); ?>
            </div>
        <?php endif; ?>

        <?php if(isset($_SESSION['flash_error'])): ?>
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle alert-icon"></i>
                <?= htmlspecialchars($_SESSION['flash_error']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                <?php unset($_SESSION['flash_error']); ?>
            </div>
        <?php endif; ?>

        <!-- INFO BANNER -->
        <div class="info-banner">
            <div class="info-banner-icon">
                <i class="fas fa-robot" style="color:#2b6cb0; font-size:2rem;"></i>
            </div>
            <div class="info-banner-content">
                <h4>🤖 Sistem Konfirmasi Otomatis</h4>
                <p>
                    Pembayaran dikonfirmasi secara <strong>otomatis</strong> oleh sistem melalui 
                    <strong>Midtrans Payment Gateway</strong>. Admin tidak perlu melakukan konfirmasi manual.
                </p>
                <ul style="margin:0.3rem 0; padding-left:1.2rem; font-size:0.85rem; color:#4a5568;">
                    <li>✅ Pembayaran sukses → status otomatis menjadi <strong>LUNAS</strong></li>
                    <li>✅ Pesanan otomatis dikonfirmasi → status menjadi <strong>DIKONFIRMASI</strong></li>
                    <li>✅ Notifikasi otomatis ke wisatawan &amp; supir</li>
                </ul>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- STATISTIK CARD -->
        <!-- ============================================ -->
        <div class="stats-grid">
            <div class="stat-card pending">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div>
                    <div class="stat-number"><?= count($pendingPayments) ?></div>
                    <div class="stat-label">Menunggu Pembayaran</div>
                    <div class="stat-sub">Wisatawan belum bayar</div>
                </div>
            </div>
            <div class="stat-card success">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div>
                    <div class="stat-number"><?= $lunasCount ?></div>
                    <div class="stat-label">Lunas</div>
                    <div class="stat-sub">Pembayaran berhasil</div>
                </div>
            </div>
            <div class="stat-card danger">
                <div class="stat-icon"><i class="fas fa-times-circle"></i></div>
                <div>
                    <div class="stat-number"><?= $gagalCount ?></div>
                    <div class="stat-label">Gagal</div>
                    <div class="stat-sub">Pembayaran gagal</div>
                </div>
            </div>
            <div class="stat-card info">
                <div class="stat-icon"><i class="fas fa-money-bill-wave"></i></div>
                <div>
                    <div class="stat-number">Rp <?= number_format($totalPending, 0, ',', '.') ?></div>
                    <div class="stat-label">Total Menunggu</div>
                    <div class="stat-sub">Dana belum masuk</div>
                </div>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- PENDING PAYMENTS (HANYA VIEWER) -->
        <!-- ============================================ -->
        <?php if(!empty($pendingPayments)): ?>
            <div class="card-section">
                <div class="card-header">
                    <div class="header-left-section">
                        <h3><i class="fas fa-clock" style="color:#f59e0b;"></i> Menunggu Pembayaran</h3>
                        <span class="badge badge-warning"><?= count($pendingPayments) ?> pesanan</span>
                    </div>
                    <div class="header-right-section">
                        <span class="total-nominal">Total: Rp <?= number_format($totalPending, 0, ',', '.') ?></span>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><i class="fas fa-hashtag"></i> Kode</th>
                                <th><i class="fas fa-user"></i> Wisatawan</th>
                                <th><i class="fas fa-ship"></i> Kapal</th>
                                <th><i class="fas fa-calendar-alt"></i> Tanggal</th>
                                <th><i class="fas fa-money-bill-wave"></i> Total</th>
                                <th><i class="fas fa-info-circle"></i> Status</th>
                                <th><i class="fas fa-cog"></i> Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($pendingPayments as $p): ?>
                            <tr>
                                <td>
                                    <strong><?= htmlspecialchars($p['kode_pesanan'] ?? '-') ?></strong>
                                </td>
                                <td>
                                    <div style="display:flex; flex-direction:column;">
                                        <span style="font-weight:600;"><?= htmlspecialchars($p['nama_lengkap'] ?? '-') ?></span>
                                        <small style="color:var(--gray-400);">
                                            <i class="fas fa-phone"></i> <?= htmlspecialchars($p['no_hp'] ?? '-') ?>
                                        </small>
                                    </div>
                                </td>
                                <td><?= htmlspecialchars($p['nama_kapal'] ?? '-') ?></td>
                                <td><?= isset($p['tanggal_berangkat']) ? date('d/m/Y', strtotime($p['tanggal_berangkat'])) : '-' ?></td>
                                <td style="font-weight:600; color:var(--primary);">
                                    Rp <?= number_format($p['total_harga'] ?? 0, 0, ',', '.') ?>
                                </td>
                                <td>
                                    <span class="badge badge-warning">
                                        <i class="fas fa-clock"></i> Menunggu Bayar
                                    </span>
                                    <?php if(!empty($p['snap_token'])): ?>
                                        <br>
                                        <small style="color:var(--gray-400); font-size:0.6rem;">
                                            <i class="fas fa-credit-card"></i> Midtrans
                                        </small>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <div class="action-group">
                                        <!-- 🔥 PERBAIKI TOMBOL DETAIL -->
                                        <a href="?page=admin&action=kelolaPesanan&id=<?= $p['id'] ?>" 
                                           class="btn btn-sm btn-primary">
                                            <i class="fas fa-eye"></i> Detail
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                
                <div class="info-note">
                    <i class="fas fa-info-circle"></i>
                    <span>
                        <strong>Informasi:</strong> 
                        Pembayaran akan otomatis dikonfirmasi oleh sistem setelah wisatawan menyelesaikan pembayaran melalui Midtrans.
                        Admin tidak perlu melakukan tindakan apapun.
                    </span>
                </div>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <div class="empty-icon">📭</div>
                <h3>Tidak Ada Pesanan Menunggu Pembayaran</h3>
                <p>Semua pesanan sudah diproses oleh sistem pembayaran otomatis.</p>
            </div>
        <?php endif; ?>

        <!-- ============================================ -->
        <!-- HISTORY PAYMENTS -->
        <!-- ============================================ -->
        <?php if(!empty($historyPayments)): ?>
            <div class="card-section" style="margin-top:2rem;">
                <div class="card-header">
                    <div class="header-left-section">
                        <h3><i class="fas fa-history"></i> Riwayat Pembayaran</h3>
                        <span class="badge badge-secondary"><?= count($historyPayments) ?> riwayat</span>
                    </div>
                    <div class="header-right-section">
                        <span class="total-nominal success">
                            Total Lunas: Rp <?= number_format(array_sum(array_column($historyPayments, 'total_harga')), 0, ',', '.') ?>
                        </span>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table" id="historyTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-hashtag"></i> Kode</th>
                                <th><i class="fas fa-user"></i> Wisatawan</th>
                                <th><i class="fas fa-ship"></i> Kapal</th>
                                <th><i class="fas fa-money-bill-wave"></i> Total</th>
                                <th><i class="fas fa-info-circle"></i> Status</th>
                                <th><i class="fas fa-credit-card"></i> Metode</th>
                                <th><i class="fas fa-calendar-alt"></i> Tanggal</th>
                                <th><i class="fas fa-cog"></i> Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($historyPayments as $h): ?>
                            <tr>
                                <td><strong><?= htmlspecialchars($h['kode_pesanan'] ?? '-') ?></strong></td>
                                <td><?= htmlspecialchars($h['nama_lengkap'] ?? '-') ?></td>
                                <td><?= htmlspecialchars($h['nama_kapal'] ?? '-') ?></td>
                                <td style="font-weight:600; color:var(--primary);">
                                    Rp <?= number_format($h['total_harga'] ?? 0, 0, ',', '.') ?>
                                </td>
                                <td>
                                    <?php if(($h['status_pembayaran'] ?? '') == 'lunas'): ?>
                                        <span class="badge badge-success">
                                            <i class="fas fa-check-circle"></i> Lunas
                                        </span>
                                        <br>
                                        <small style="color:var(--gray-400); font-size:0.6rem;">
                                            <i class="fas fa-check"></i> Otomatis via Midtrans
                                        </small>
                                    <?php elseif(($h['status_pembayaran'] ?? '') == 'gagal'): ?>
                                        <span class="badge badge-danger">
                                            <i class="fas fa-times-circle"></i> Gagal
                                        </span>
                                    <?php else: ?>
                                        <span class="badge badge-secondary"><?= $h['status_pembayaran'] ?? '-' ?></span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if(!empty($h['payment_type'])): ?>
                                        <span class="badge badge-info" style="background:#dbeafe; color:#1e40af;">
                                            <i class="fas fa-credit-card"></i> 
                                            <?= strtoupper($h['payment_type']) ?>
                                        </span>
                                    <?php else: ?>
                                        <span class="badge badge-secondary">-</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?= isset($h['tanggal_bayar']) ? date('d/m/Y H:i', strtotime($h['tanggal_bayar'])) : '-' ?>
                                </td>
                                <td>
                                    <a href="?page=admin&action=kelolaPesanan&id=<?= $h['id'] ?>" 
                                       class="btn btn-sm btn-primary">
                                        <i class="fas fa-eye"></i> Detail
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endif; ?>

        <!-- ============================================ -->
        <!-- INFORMASI TAMBAHAN -->
        <!-- ============================================ -->
        <div class="info-extra">
            <div class="info-extra-item">
                <i class="fas fa-clock" style="color:#f59e0b;"></i>
                <span>Menunggu pembayaran: <strong><?= count($pendingPayments) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-check-circle" style="color:#22c55e;"></i>
                <span>Lunas: <strong><?= $lunasCount ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-times-circle" style="color:#ef4444;"></i>
                <span>Gagal: <strong><?= $gagalCount ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-robot" style="color:#2b6cb0;"></i>
                <span><strong>Sistem Otomatis</strong> (Midtrans)</span>
            </div>
        </div>
    </main>
</div>

<style>
/* ============================================
   LAYOUT
   ============================================ */
.dashboard-wrapper {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding: 0 20px;
    width: 100%;
    flex: 1;
    align-items: flex-start;
}

.main-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    padding: 1.8rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.content-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.2rem;
}

.content-header p {
    color: #718096;
    font-size: 0.95rem;
    margin: 0;
}

.badge-status {
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.badge-status.success {
    background: #d1fae5;
    color: #065f46;
}

.badge-status.warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-status.danger {
    background: #fee2e2;
    color: #991b1b;
}

/* ============================================
   ALERT
   ============================================ */
.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border-left: 4px solid transparent;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border-left-color: #22c55e;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border-left-color: #ef4444;
}

.alert-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}

.alert-close:hover {
    opacity: 1;
}

/* ============================================
   INFO BANNER
   ============================================ */
.info-banner {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #bfdbfe;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.info-banner-icon {
    flex-shrink: 0;
}

.info-banner-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0 0 0.2rem;
}

.info-banner-content p {
    font-size: 0.9rem;
    color: #1e40af;
    margin: 0;
}

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: #fff;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.stat-card .stat-icon {
    font-size: 1.8rem;
    opacity: 0.7;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f7fafc;
}

.stat-card .stat-icon i {
    font-size: 1.4rem;
}

.stat-card .stat-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.2;
}

.stat-card .stat-label {
    color: #718096;
    font-size: 0.8rem;
    font-weight: 500;
}

.stat-card .stat-sub {
    font-size: 0.65rem;
    color: #a0aec0;
    margin-top: 0.1rem;
}

.stat-card.pending .stat-icon { background: #fef3c7; color: #f59e0b; }
.stat-card.success .stat-icon { background: #d1fae5; color: #22c55e; }
.stat-card.danger .stat-icon { background: #fee2e2; color: #ef4444; }
.stat-card.info .stat-icon { background: #dbeafe; color: #3b82f6; }

/* ============================================
   CARD SECTION
   ============================================ */
.card-section {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.card-section:hover {
    border-color: #cbd5e0;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.header-left-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-right-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.total-nominal {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ef4444;
    background: #fee2e2;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
}

.total-nominal.success {
    color: #22c55e;
    background: #d1fae5;
}

/* ============================================
   TABLE
   ============================================ */
.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 900px;
}

.table th {
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.table th i {
    margin-right: 0.2rem;
    opacity: 0.6;
}

.table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.table tr:hover td {
    background: #f7fafc;
}

/* ============================================
   BADGE
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-secondary {
    background: #e5e7eb;
    color: #4b5563;
}

.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

/* ============================================
   BUTTON
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
}

.btn-primary {
    background: #2b6cb0;
    color: #fff;
}

.btn-primary:hover {
    background: #1a4a7a;
    color: #fff;
}

.action-group {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ============================================
   INFO EXTRA
   ============================================ */
.info-extra {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: #f7fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.info-extra-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4a5568;
}

.info-extra-item i {
    font-size: 1rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.2rem;
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #718096;
}

/* ============================================
   INFO NOTE
   ============================================ */
.info-note {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: #dbeafe;
    border-radius: 8px;
    border-left: 4px solid #2b6cb0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-note i {
    color: #2b6cb0;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.info-note span {
    font-size: 0.85rem;
    color: #1e40af;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-wrapper {
        flex-direction: column;
        padding: 0 12px;
        margin-top: 1rem;
    }
    .main-content {
        padding: 1rem;
    }
    .content-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }
    .card-section {
        padding: 1rem;
    }
    .table td,
    .table th {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
    .action-group {
        flex-direction: column;
    }
    .action-group .btn {
        width: 100%;
        justify-content: center;
    }
    .info-banner {
        flex-direction: column;
    }
    .info-extra {
        flex-direction: column;
        gap: 0.3rem;
    }
    .info-note {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 0.8rem;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .card-section {
        padding: 0.8rem;
    }
    .table {
        font-size: 0.7rem;
        min-width: 600px;
    }
    .table td,
    .table th {
        padding: 0.3rem 0.4rem;
    }
    .btn {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
}
</style>

<?php include __DIR__ . '/../layouts/footer.php'; ?>