/* ==========================================
   1. LAYOUT & CONTAINERS
   ========================================== */

.zumma-portal {
    width: 100%;
}

.profile-panel {
    display: flex;
    gap: 20px;
    width: 100%;
	margin-bottom: 20px;
}

/* Responsive Grid */
@media (min-width: 768px) {
    .profile-card {
        width: 30%;
    }
    .assign-card {
        width: 35%;
    }
    .buy-card {
        width: 35%;
    }
}

@media (max-width: 767px) {
    .profile-panel {
        flex-direction: column;
    }
}


/* ==========================================
   2. CARDS & UI COMPONENTS
   ========================================== */

.zumma-card {
    padding: 20px;
    font-family: lato, sans-serif; /* Added a web-safe fallback font */
    border: 1px solid #2D384B;
    border-radius: 20px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.profile-hr {
    margin: 30px 0 !important;
    border: 1px solid white;
    opacity: 0.1;
}

.map-card{
    width:75%;
    border-radius:16px;
    overflow:hidden;
}

.promo-card{
    width:25%;
    border-radius:16px;
    overflow:hidden;
}

#zumma-map{
    height:800px;
    width:100%;
    background:#e0e0e0;
	border-radius: 10px;
}
/* ==========================================
   3. TYPOGRAPHY
   ========================================== */

.zumma-title {
    color: #EFEFEF;
}

.zumma-card h2,
.zumma-card h3,
.zumma-card h4 {
    color: #EFEFEF;
    margin-top: 0;
	margin-bottom: 0;
    text-transform: capitalize;
}
.title-box{
	margin-bottom: 25px;
}

.zumma-card p,
.zumma-card span,
.zumma-card label {
    color: #CBCBCB;
}

.zumma-card strong {
    color: #EFEFEF;
}

.stock-warning{
	color: red!important;
	font-size: 12px;
	margin-bottom: 0;
}

#assign-result{
	color: #CBCBCB;
	margin-top:5px;
}

.balance-box{
    margin:20px 0;
}

.balance-label{
    color:#CBCBCB;
    font-size:14px;
    letter-spacing:.08em;
    margin-bottom:6px;
}

.balance-value{
    font-size:18px;
    font-weight:700;
    color:#EFEFEF;
    line-height:1.1;
}

/* ==========================================
   4. FORMS & INPUTS
   ========================================== */

.zumma-form {
    max-width: 500px;
}

.zumma-input {
    width: 100%;
    margin-bottom: 8px;
    box-sizing: border-box;
    background-color: #00030C;
    color: #EFEFEF;
	border-radius: 8px;
}

.zumma-login-error {
    font-size: 12px;
    color: #EFEFEF;
}

.promo-usage {

    margin-top: 10px;
    font-size: 0.95rem;
    font-weight: 600;

}

.promo-usage.ok {

    color: #39d98a;

}

.promo-usage.limit {

    color: #ff6b6b;

}

/* ==========================================
   5. BUTTONS
   ========================================== */

.button-margin {
    margin-top: 30px;
}

.zumma-button {
    margin-bottom: 8px;
    border-radius: 8px;
    border: 2px solid #3DAEFF;
    background: linear-gradient(to right, #1F6FEB, #3DAEFF);
    color: white;
    padding: 5px 40px;
    cursor: pointer;
}


#logout-btn {
    background-color: #00030C;
    color: #EFEFEF;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 2px solid #3DAEFF;
    padding: 5px 40px;
    cursor: pointer;
}

#send-promo-btn:disabled {

    background: transparent;
    color: #EFEFEF;
    border: 2px solid #3DAEFF;
    cursor: not-allowed;

}

/* ==========================================
   6. PROMOS
   ========================================== */

#promo-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.promo-item{
    padding:8px;
    border:2px solid #3DAEFF;
    border-radius:8px;
    background:rgba(255,255,255,.03);
    cursor:pointer;
    transition:.2s ease;
}

.promo-item:hover{
    transform:translateY(-2px);
    border-color:#5cc2ff;
}

.promo-title{
    font-weight:600;
    font-size:16px;
	color: #EFEFEF;
}

.promo-message{
    font-size:14px;
	color: #CBCBCB;
}

.promo-item.selected{
    background:linear-gradient(to right,#1F6FEB,#3DAEFF);
    color:white;
}