/**
 * TUTU Studio Rewards - Frontend Styles
 * Styles for frontend widgets and components
 */

/* Login required messages */
.tutu-login-required {
    color: #666;
    font-style: italic;
}

.tutu-login-required a {
    color: #FAD1D3;
    text-decoration: none;
}

.tutu-login-required a:hover {
    text-decoration: underline;
}

/* Points balance display */
.tutu-points-balance {
    font-weight: bold;
    color: #FAD1D3;
}

/* Membership level display */
.tutu-membership-level {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.tutu-membership-level.level-corazon_calido {
    background: linear-gradient(135deg, #FAD1D3 0%, #E8BDBF 100%);
    color: white;
}

.tutu-membership-level.level-esencia_serenar {
    background: linear-gradient(135deg, #FAD1D3 0%, #FDE8E9 100%);
    color: #333;
}

.tutu-membership-level.level-vip_obra_maestra {
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
    color: white;
}

/* Level benefits list */
.tutu-level-benefits {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.tutu-level-benefits li {
    margin-bottom: 0.25rem;
    color: #666;
    font-size: 0.875rem;
}

/* Referral link styling */
.tutu-referral-link {
    margin: 1rem 0;
}

.tutu-referral-link input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    font-family: monospace;
    background: #f9f9f9;
}

.tutu-referral-link .referral-btn {
    background: #FAD1D3;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.tutu-referral-link .referral-btn:hover {
    background: #E8BDBF;
}

/* Points redemption form */
#points-redeem-form {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

#points-redeem-form input[name="points"] {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    width: 150px;
    margin-right: 0.5rem;
}

#points-redeem-form button {
    background: #28a745;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

#points-redeem-form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 768px) {
    .tutu-points-widget {
        padding: 1rem !important;
    }

    .tutu-referral-link input {
        font-size: 0.875rem;
    }

    .tutu-social-share .share-buttons {
        flex-direction: column;
    }
}