@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

:root {
    --primary-color: #6a11cb;
    --secondary-color: #2575fc;
    --success-color: #198754;
    --danger-color: #dc3545;
    --text-light: #f8f9fa;
    --text-dark: #343a40;
    --card-bg: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.client-container {
    width: 100%;
    max-width: 700px;
}


.client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.client-header h1 {
    font-size: 24px;
    font-weight: 500;
}
.client-header .logout-btn {
    background: var(--card-bg);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}
.client-header .logout-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}


.info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 25px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
}


.status-card {
    display: flex;
    align-items: center;
    gap: 20px;
}
.status-card .icon {
    font-size: 40px;
}
.status-card.status-ativo .icon { color: #28a745; }
.status-card.status-vencido .icon { color: var(--danger-color); }
.status-card .label { font-size: 14px; opacity: 0.8; }
.status-card .value { font-size: 22px; font-weight: 700; }
.status-card .date { font-size: 16px; font-weight: 500; }


.payment-section h3 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
}
.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.payment-option-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.payment-option-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}
.payment-option-card .icon {
    font-size: 36px;
    margin-bottom: 15px;
}
.payment-option-card h4 {
    margin-bottom: 10px;
    font-size: 18px;
}
.payment-option-card p {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 20px;
}
.btn-pay {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.btn-pay:hover { opacity: 0.9; }
.btn-pix { background: linear-gradient(135deg, #00d2ff, #3a7bd5); }
.btn-card { background: linear-gradient(135deg, #76b852, #8DC26F); }


.single-card-container {
    width: 100%;
    max-width: 450px;
}
.single-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
.single-card .title {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
}
.form-group { margin-bottom: 20px; }
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-light);
}
.btn-full {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.alert-danger {
    background: rgba(220, 53, 69, 0.2);
    color: #f8d7da;
    border: 1px solid rgba(220, 53, 69, 0.5);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}


@media (max-width: 600px) {
    .payment-options {
        grid-template-columns: 1fr;
    }
    .client-header h1 {
        font-size: 20px;
    }
}



:root {
    --primary-color: #00e5ff;
    --secondary-color: #0080ff;
    --success-color: #00ff88;
    --danger-color: #ff3860;
    --text-light: #e0f0ff;
    --text-dark: #071325;
    --card-bg: #071325;
    --border-color: rgba(0, 229, 255, 0.14);
    --muted-client: #6b8aaa;
    --amber-client: #ffaa00;
}

body {
    background:
        radial-gradient(circle at 50% -10%, rgba(0, 229, 255, 0.13), transparent 34%),
        linear-gradient(135deg, #020408 0%, #060d18 55%, #0a1628 100%);
    align-items: flex-start;
    padding: clamp(14px, 3vw, 34px);
}

.client-container {
    max-width: 1180px;
    min-height: min(100vh, 1080px);
}

.client-header {
    background: rgba(7, 19, 37, 0.92);
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.client-header h1 {
    color: #e0f0ff;
    letter-spacing: .2px;
}
.client-header .logout-btn {
    background: rgba(0, 229, 255, 0.07);
    border-color: rgba(0,229,255,0.22);
    color: #00e5ff;
}
.client-header .logout-btn:hover { background: rgba(0,229,255,0.14); }

.info-card {
    background: #071325;
    border: 1px solid rgba(0, 229, 255, 0.14);
    border-radius: 18px;
    backdrop-filter: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    position: relative;
    overflow: hidden;
}
.info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.32), transparent);
}

.status-card {
    border-color: rgba(0,229,255,0.16);
}
.status-card.status-ativo .icon { color: #00ff88; }
.status-card.status-vencido .icon { color: #ff3860; }
.status-card .label,
.status-card .date { color: var(--muted-client); opacity: 1; }
.status-card .value { color: #e0f0ff; }

.payment-section {
    border-color: rgba(0,255,136,0.16);
}
.payment-section h3 {
    color: #00e5ff;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.payment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payment-option-card {
    background: #0a1628;
    border: 1px solid rgba(0,229,255,0.13);
    border-radius: 16px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.payment-option-card:hover {
    background: #112240;
    border-color: rgba(0,229,255,0.28);
    transform: translateY(-3px);
}
.payment-option-card h4 { color: #e0f0ff; }
.payment-option-card p { color: var(--muted-client); opacity: 1; line-height: 1.5; }
.btn-pay {
    border-radius: 12px;
    min-height: 46px;
    font-weight: 700;
    letter-spacing: .4px;
}
.btn-pix {
    background: linear-gradient(135deg, #00e5ff, #0080ff);
    color: #02111d;
}
.btn-card {
    background: linear-gradient(135deg, #00ff88, #00b86b);
    color: #02110a;
}
.single-card {
    background: #071325;
    border-color: rgba(0,229,255,0.14);
    backdrop-filter: none;
}
.form-control,
.pix-code-area {
    background: #071020;
    color: #e0f0ff;
    border-color: rgba(0,229,255,0.18);
}

@media (min-width: 1200px) {
    .client-container { max-width: 1280px; }
    .client-content {
        display: grid;
        grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
    }
    .client-content .alert-danger { grid-column: 1 / -1; }
    .status-card,
    .payment-section { margin-bottom: 0; }
}

@media (max-width: 820px) {
    body { padding: 12px; }
    .client-header { align-items: flex-start; gap: 12px; }
    .payment-options { grid-template-columns: 1fr; }
    .payment-option-card { min-height: auto; }
}

@media (max-width: 460px) {
    .client-header { flex-direction: column; }
    .client-header .logout-btn { width: 100%; justify-content: center; text-align: center; }
    .status-card { align-items: flex-start; padding: 18px; }
    .status-card .icon { font-size: 34px; }
    .status-card .value { font-size: 19px; }
    .info-card { padding: 18px; }
}


/* client-login-badge-final */
.client-login-body{align-items:center;justify-content:center;background:radial-gradient(circle at 50% -20%,rgba(0,229,255,.20),transparent 34%),linear-gradient(135deg,#020408 0%,#06101e 52%,#0a1628 100%);}
.client-login-shell{max-width:460px}.client-login-card{border-radius:24px;border:1px solid rgba(0,229,255,.18);box-shadow:0 26px 80px rgba(0,0,0,.45),0 0 28px rgba(0,229,255,.06);padding:34px;background:linear-gradient(145deg,rgba(7,19,37,.98),rgba(10,22,40,.96));}
.client-logo-badge{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;color:#eaf6ff;font-weight:900;font-size:1.15rem;letter-spacing:.5px}.client-logo-badge img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid rgba(0,229,255,.28)}
.client-login-subtitle{text-align:center;color:#8ca0c8;margin:-18px 0 26px;font-size:.92rem}.client-login-card label{display:block;color:#b8cdf5;margin-bottom:8px;font-weight:700}.client-login-card .form-control{height:50px;border-radius:14px}.client-login-card .btn-full{min-height:50px;border-radius:15px;font-weight:900;background:linear-gradient(135deg,#00e5ff,#2563eb);color:#02111d}.client-back-link{display:block;text-align:center;margin-top:18px;color:#8ca0c8;text-decoration:none}.client-back-link:hover{color:#00e5ff}