body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f9f9f9; font-family: var(--poppins); }
.container { max-width: 600px; width: 100%; padding: 20px; box-sizing: border-box; }
.header-section { text-align: center; margin-bottom: 30px; }
.header-section h1 { color: var(--blue); font-size: 2.5rem; margin-bottom: 10px; }
.album-info { color: var(--dark-grey); font-size: 1.1rem; }
.album-info-x { color: var(--dark-grey); font-size: 1rem; margin-top: -15px; margin-bottom: 15px;}

.status-section { margin-bottom: 30px; }
.status-card { padding: 20px; border-radius: 15px; text-align: center; margin-bottom: 20px; }
.status-card.expired { background: var(--light-orange); border: 2px solid var(--orange); }
.status-card.expiring { background: var(--light-yellow); border: 2px solid var(--yellow); }
.status-card i { font-size: 2rem; margin-bottom: 10px; }

.expiring p button { background: var(--orange); color: white; border: none; padding: 8px 16px; border-radius: 25px; cursor: pointer; font-size: 1rem; margin-top: 15px; }

.email-section, .warning-section, .benefits-section, .packages-section { margin-bottom: 30px; }
.benefits-section h3 { margin-bottom: 20px;}
.packages-section h3 { font-weight: 500; margin-left: 5px;}
.email-card, .warning-card { padding: 20px; border-radius: 15px; text-align: center; }
.email-card { background: var(--light-yellow); border: 2px solid var(--yellow); }
.warning-card { background: #ffe6e6; border: 2px solid var(--red); }

.email-btn { background: var(--blue); color: white; border: none; padding: 12px 24px; border-radius: 25px; cursor: pointer; font-size: 1rem; margin-top: 15px; }

.package-card { font-family: var(--poppins); color: var(--dark-grey); font-size: 20px; border: 2px solid var(--dark-grey); border-radius: 15px; padding: 10px 15px; cursor: pointer; transition: all 0.3s; position: relative; width: 100%; background-color: transparent; transition: border-color 0.5s ease, transform 0.3s ease;}
.package-card::placeholder { font-size: 19px; font-family: var(--poppins);}
.package-card:focus {outline: none;  border: 2px solid var(--orange);}
.package-card:hover { border: 2px solid var(--orange);}

.disabled-notice { color: #dc3545; font-size: 0.85rem; font-weight: bold; margin-top: 10px; text-align: center; }
.popular-badge { position: absolute; top: -10px; right: 20px; background: var(--orange); color: white; padding: 5px 15px; border-radius: 15px; font-size: 0.8rem; }
.package-header h4 { margin: 0 0 10px 0; color: var(--dark); }
.package-header { display: flex; flex-direction: row; align-items: center; gap: 20px;}
.price { font-size: 2rem; font-weight: bold; color: var(--blue); margin-bottom: 15px; }
.package-features p { margin: 5px 0; color: var(--dark); }
.new-expiry { margin-top: -10px; font-size: 0.9rem; color: var(--orange); font-weight: 700; }

.login-btn { width: 100%; padding: 15px; background: var(--blue); color: white; border: none; border-radius: 10px; font-size: 1.2rem; cursor: pointer; margin-bottom: 20px; transition: background-color 0.4s ease, transform 0.3s ease;}
.login-btn:hover { background: var(--orange); transform: scale(1.03);}

.back-btn { background: var(--grey); color: var(--dark); border: 1px solid var(--dark-grey); padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: color 0.5s ease, border-color 0.5s ease, transform 0.3s ease;}
.back-btn:hover { color: var(--orange); border: 1px solid var(--orange); transform: scale(1.03);}

.message { padding: 15px; border-radius: 8px; margin: 20px 0; text-align: center; }
.message.error { background: #ffe6e6; color: var(--red); border: 1px solid var(--red); }
.message.success { background: #e6ffe6; color: green; border: 1px solid green; }

.success-section { text-align: center; padding: 40px 20px; }
.success-card { background: #f8f9fa; border: 2px solid #28a745; border-radius: 15px; padding: 40px; max-width: 600px; margin: 0 auto; }
.renewal-details { background: white; border-radius: 10px; padding: 20px; margin: 20px 0; text-align: left; }
.details-grid { display: grid; gap: 10px; margin-top: 15px; }
.detail-item { padding: 10px; background: #f8f9fa; border-radius: 5px; border-left: 4px solid #28a745; }
.success-btn { background: #28a745; color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 1.1rem; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; }
.success-btn:hover { background: #218838; transform: translateY(-2px); }

.button-section { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; width: 100%; }
.spinner-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.spinner-content { text-align: center; color: white; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff9800; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .container { padding: 15px; }
    .header-section h1 { font-size: 1.8rem; }
    .packages-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
}