/* ---------------- BASE ---------------- */

body{
 margin:0;
 font-family:Inter, Arial;
 background:#F7F8FC;
 color:#111827;
}

.container{
 max-width:900px;
 margin:auto;
 padding:40px 20px;
}


/* ---------------- HEADER ---------------- */

.header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:30px;
}

.logo{
 font-size:22px;
 font-weight:700;
 color:#7C3AED;
}

.logoutBtn{
 background:#E5E7EB;
 border:none;
 padding:8px 14px;
 border-radius:6px;
 cursor:pointer;
}


/* ---------------- CARDS ---------------- */

.card{
 background:white;
 padding:24px;
 border-radius:12px;
 border:1px solid #E5E7EB;
 margin-bottom:20px;
}

.subscriptionInfo{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:18px;
 margin-top:15px;
}

.label{
 font-size:12px;
 color:#6B7280;
 display:block;
}


/* ---------------- BUTTONS ---------------- */

.primaryBtn{
 background:#7C3AED;
 color:white;
 border:none;
 padding:10px 16px;
 border-radius:8px;
 cursor:pointer;
}

.dangerBtn{
 background:#EF4444;
 color:white;
 border:none;
 padding:10px 16px;
 border-radius:8px;
 cursor:pointer;
}

.fullBtn{
 width:100%;
 margin-top:15px;
}

.btnGhost{
 background:#f3f4f6;
 border:1px solid #e5e7eb;
 padding:8px 14px;
 border-radius:8px;
 font-size:14px;
 cursor:pointer;
 color:#374151;
 transition:all .15s ease;
}

.btnGhost:hover{
 background:#e5e7eb;
}

.btnDanger{
 background:#ef4444;
 color:white;
 border:none;
 padding:8px 14px;
 border-radius:8px;
 font-size:14px;
 font-weight:500;
 cursor:pointer;
 transition:all .15s ease;
}

.btnDanger:hover{
 background:#dc2626;
}


/* ---------------- ACTIONS ---------------- */

.actions{
 margin-top:20px;
 display:flex;
 gap:10px;
}


/* ---------------- BILLING TABLE ---------------- */

.billingTable{
 width:100%;
 border-collapse:collapse;
 margin-top:15px;
}

.billingTable th{
 text-align:left;
 font-size:13px;
 padding:10px;
 border-bottom:1px solid #E5E7EB;
 color:#6B7280;
}

.billingTable td{
 padding:10px;
 border-bottom:1px solid #F1F5F9;
}


/* ---------------- MODAL ---------------- */

.modalOverlay{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,0.45);
 display:none;
 align-items:center;
 justify-content:center;
}

.modal{
 background:white;
 width:380px;
 padding:24px;
 border-radius:10px;
 position:relative;
}

.modal input{
 width:100%;
 padding:10px;
 margin-top:10px;
 border-radius:6px;
 border:1px solid #E5E7EB;
}

.modalClose{
 position:absolute;
 top:10px;
 right:10px;
 background:none;
 border:none;
 font-size:18px;
 cursor:pointer;
}

.modalActions{
 display:flex;
 justify-content:flex-end;
 gap:10px;
 margin-top:20px;
}

.modal p{
 color:#6b7280;
 font-size:14px;
 line-height:1.5;
}

.modal.billing-profile-modal{
 width:min(92vw, 440px);
 max-height:88vh;
 overflow-y:auto;
}

.modal.billing-profile-modal .billing-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:8px 12px;
}

.modal.billing-profile-modal .billing-grid .full{
 grid-column:1 / -1;
}

.modal.billing-profile-modal label{
 font-size:11px;
 color:#6b7280;
 display:block;
 margin-top:6px;
}

.modal.billing-profile-modal .billing-grid > div:first-child label{
 margin-top:0;
}

.modal.billing-profile-modal .msg.error{
 color:#dc2626;
 font-size:13px;
 font-weight:600;
}


/* ---------------- CARD PREVIEW ---------------- */

.cardPreview{
 background:linear-gradient(135deg,#7C3AED,#5B21B6);
 color:white;
 padding:20px;
 border-radius:14px;
 margin-bottom:15px;
 height:160px;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 box-shadow:0 10px 30px rgba(0,0,0,0.25);
 transition:transform .25s;
}

.cardPreview:hover{
 transform:scale(1.02);
}

.cardBrand{
 text-align:right;
 font-weight:600;
 font-size:14px;
}

.cardNumber{
 font-size:20px;
 letter-spacing:2px;
}

.cardBottom{
 display:flex;
 justify-content:space-between;
 font-size:13px;
 opacity:.9;
}


/* ---------------- BADGES ---------------- */

.badge{
 padding:4px 10px;
 border-radius:8px;
 font-size:12px;
 font-weight:600;
}

.badge-green{
 background:#e6f7ee;
 color:#16a34a;
}

.badge-yellow{
 background:#fff8e1;
 color:#ca8a04;
}

.badge-red{
 background:#fee2e2;
 color:#dc2626;
}


/* ---------------- OPTIONS ---------------- */

.optionGroup{
 display:flex;
 gap:12px;
 margin-top:10px;
}

.optionCard{
 flex:1;
 border:1px solid var(--border);
 border-radius:10px;
 padding:16px;
 cursor:pointer;
 background:var(--card);
 transition:all .2s ease;
}

.optionCard input{
 display:none;
}

.optionTitle{
 font-weight:600;
 font-size:14px;
 color:var(--text);
}

.optionDesc{
 font-size:12px;
 color:var(--muted);
 margin-top:4px;
}

.optionCard:hover{
 border-color:var(--accent);
}

.optionCard:has(input:checked){
 border-color:var(--accent);
 background:#1b1535;
 box-shadow:0 0 0 1px var(--accent);
}

.optionCard input:checked + .optionContent .optionTitle{
 color:white;
}

.optionCard input:checked + .optionContent .optionDesc{
 color:#c4b5fd;
}


/* ---------------- ACCOUNT INFO ---------------- */

.account-box{
 background:#ffffff;
 border:1px solid #e5e7eb;
 border-radius:10px;
 padding:16px 18px;
 margin-bottom:24px;
 display:flex;
 flex-direction:column;
 gap:4px;
}

.account-title{
 font-size:13px;
 color:#6b7280;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:.04em;
}

.account-name{
 font-size:16px;
 font-weight:600;
 color:#111827;
}

.account-email{
 font-size:14px;
 color:#6b7280;
}


/* ---------------- PIX MODAL ---------------- */

.pixModalContent{
 text-align:center;
 padding:30px;
}

.pixQr img{
 width:220px;
 margin:20px auto;
 display:block;
}

.pixExpireBox{
 margin:10px 0 20px;
 font-size:14px;
 color:#666;
}

#pixExpire{
 font-weight:600;
 color:#e11d48;
 margin-left:6px;
}

.pixCopy{
 display:flex;
 gap:10px;
 margin-top:10px;
}

.pixCopy input{
 flex:1;
 padding:10px;
 border-radius:8px;
 border:1px solid #ddd;
 font-size:12px;
}

.pixCopy button{
 padding:10px 14px;
 border-radius:8px;
 border:none;
 background:#6366f1;
 color:white;
 cursor:pointer;
}

.pixHint{
 margin-top:16px;
 font-size:13px;
 color:#888;
}


/* ---------------- TOAST ---------------- */

#toastContainer{
 position:fixed;
 bottom:30px;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 flex-direction:column;
 gap:10px;
 z-index:9999;
}

.toast{
 background:#111827;
 color:white;
 padding:12px 18px;
 border-radius:8px;
 font-size:14px;
}


/* ---------------- MODAL SUCCESS ---------------- */


.successModal{
 text-align:center;
 padding:40px 30px;
}

.successIcon{
 width:64px;
 height:64px;
 border-radius:50%;
 background:#22c55e;
 color:white;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:34px;
 margin:0 auto 20px auto;
 box-shadow:0 10px 30px rgba(34,197,94,0.3);
}

.successText{
 margin-top:10px;
 color:#9ca3af;
 font-size:14px;
}

.errorIcon{
 width:64px;
 height:64px;
 border-radius:50%;
 background:#ef4444;
 color:white;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:30px;
 margin:0 auto 20px auto;
 box-shadow:0 10px 30px rgba(239,68,68,0.3);
}

/* ---------------- ACCOUNT PAGE RESPONSIVE ---------------- */
@media (max-width: 900px){
  .container{
    padding:20px 14px;
  }

  .card{
    padding:16px;
    border-radius:14px;
  }

  .subscriptionInfo{
    grid-template-columns:1fr;
    gap:12px;
  }

  .actions{
    flex-direction:column;
  }

  .actions .primaryBtn,
  .actions .dangerBtn{
    width:100%;
  }

  .billingTable{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
  }
}